이태영 - 20210416 장바구니

src/main/java/com/style24/front/biz/dao/TsfCartDao.java

@@ -291,4 +291,21 @@ public interface TsfCartDao {
 	 * @since 2021. 04. 04
 	 */
 	int updateCartGoodsQty(Cart param);
+
+	/**
+	 * 최근 등록된 상품 100개를 제외한 장바구니 제거
+	 * @param Cart
+	 * @return void
+	 * @author xodud1202
+	 * @since 2021. 04. 16
+	 */
+	void deleteOldCart(Cart param);
+
+	/**
+	 * 장바구니에 없는 장바구니 상세 데이터 삭제
+	 * @return void
+	 * @author xodud1202
+	 * @since 2021. 04. 16
+	 */
+	void deleteCartDetailFromEmptyCart();
 }

src/main/java/com/style24/front/biz/service/TsfCartService.java

@@ -214,6 +214,11 @@ public class TsfCartService {
 			}
 		}
 
+		// 100개 이상 저장된 장바구니 삭제
+		if("C".equals(cartGb) || cartGb.equals(TscConstants.CartGb.CART.value())) {
+			deleteOldCart();
+		}
+
 		result.put("cartSqList", cartSqList);
 		result.put("goodsType", goodsType);
 		result.put("cartGb", cartGb);
@@ -223,6 +228,21 @@ public class TsfCartService {
 		return result;
 	}
 
+	@Transactional("shopTxnManager")
+	public void deleteOldCart() {
+		Cart deleteCart = new Cart();
+		if(TsfSession.isLogin()) {
+			deleteCart.setCustNo(TsfSession.getInfo().getCustNo());
+		} else {
+			deleteCart.setCustNo(0);
+		}
+
+		deleteCart.setJsessionId(TsfSession.getSessionId());
+
+		cartDao.deleteOldCart(deleteCart);
+		cartDao.deleteCartDetailFromEmptyCart();
+	}
+
 	@Transactional("shopTxnManager")
 	public void saveSetTypeCartInfo(Collection<Cart> params, List<Integer> cartSqs) {
 		Cart cart = new Cart();

src/main/java/com/style24/front/biz/service/TsfCouponService.java

@@ -682,7 +682,6 @@ public class TsfCouponService {
 
 		int count = 0;
 		for (Coupon tmpCoupon : goodsCouponList) {
-
 			for (int i = 0; i < downloadCnt; i++) {
 				CustCoupon custCoupon = new CustCoupon();
 				custCoupon.setCustNo(TsfSession.getInfo().getCustNo());

src/main/java/com/style24/persistence/mybatis/shop/TsfCart.xml

@@ -1136,4 +1136,41 @@
 		WHERE CART_SQ = #{cartSq}
 		AND   CUST_NO = #{custNo}
 	</update>
+
+	<!-- 최근 등록된 상품 100개를 제외한 장바구니 제거 -->
+	<delete id="deleteOldCart" parameterType="Cart">
+		/* TsfCart.deleteOldCart : 최근 등록된 상품 100개를 제외한 장바구니 제거 */
+		DELETE FROM TB_CART C
+		WHERE  C.CART_GB = 'G026_BC'
+		<if test="custNo != null and custNo > 0">
+		AND    C.CUST_NO = #{custNo}
+		</if>
+		<if test="custNo == null or custNo == 0">
+		AND    C.CUST_NO = 0
+		AND    C.JSESSION_ID = #{jsessionId}
+		</if>
+		AND    C.CART_SQ NOT IN (SELECT A.CART_SQ
+		                         FROM   (SELECT CART_SQ
+		                                      , ROW_NUMBER() OVER() AS RNUM
+										 FROM   TB_CART
+										 WHERE  CART_GB = 'G026_BC'
+										 <if test="custNo != null and custNo > 0">
+										 AND    CUST_NO = #{custNo}
+										 </if>
+										 <if test="custNo == null or custNo == 0">
+										 AND    CUST_NO = 0
+										 AND    JSESSION_ID = #{jsessionId}
+										 </if>
+										 ORDER  BY REG_DT DESC
+										 LIMIT  100 ) A
+		                         WHERE   A.RNUM BETWEEN 1 AND 100 )
+	</delete>
+
+	<!-- 장바구니에 없는 장바구니 상세 데이터 삭제 -->
+	<delete id="deleteCartDetailFromEmptyCart">
+		/* TsfCart.deleteCartDetailFromEmptyCart : 장바구니에 없는 장바구니 상세 데이터 삭제 */
+		DELETE FROM TB_CART_DETAIL CD
+		WHERE  CD.CART_SQ NOT IN (SELECT CART_SQ
+								  FROM   TB_CART CA)
+	</delete>
 </mapper>

src/main/webapp/WEB-INF/views/mob/cart/CartChangeOptionPopupMob.html

@@ -137,8 +137,6 @@
 					<div class="opt_select">
 						<div class="opt_header">
 							<span class="title">옵션2</span>
-							<!--<span th:text="${size.optCd2}"></span>
-							<span th:if="${size.addPrice > 0}">(+<em th:text="${#numbers.formatInteger(size.addPrice, 1, 'COMMA')}"></em>)원</span>-->
 							<span class="info color" th:classappend="|chooseSizeNm_${comp.goodsCd}|" th:text="${comp.optCd2}"></span>
 						</div>
 						<form class="form_wrap">

src/main/webapp/WEB-INF/views/mob/cart/CartListAjaxFormMob.html

@@ -18,6 +18,7 @@
 	<!-- 즉시구매 form -->
 	<form id="cartInfoForm" method="post" action="/order/noMember"></form>
 
+	<!-- 장바구니 화면 -->
 	<form id="cartListForm" method="post" action="/order/noMember" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
 		<div class="inner shotDelvSelect">
 			<div class="od_method">
@@ -668,10 +669,6 @@
 		</div>
 		<!-- //쿠폰사용안내 팝업 -->
 
-		<!-- 옵션변경 팝업 -->
-		<div id="optModifyPop01" class="popup_box optModifyPop optModifyPop01"></div>
-		<!-- //옵션변경 팝업 -->
-
 		<script th:inline="javascript">
 			var sumRealPayAmt = [[${order.sumRealPayAmt + order.totDelvFee}]];
 			var totDcAmt = [[${order.totDcAmt}]];

src/main/webapp/WEB-INF/views/mob/cart/CartListFormMob.html

@@ -81,6 +81,10 @@
 			</div>
 		</div>
 		<!-- //배송비 SAVE_팝업 -->
+
+		<!-- 옵션변경 팝업 -->
+		<div id="optModifyPop01" class="popup_box optModifyPop optModifyPop01"></div>
+		<!-- //옵션변경 팝업 -->
 	</main>
 
 	<script src="/ux/mo/js/swiper.min.js"></script>
@@ -179,6 +183,7 @@
 			count = count > maxOrdQty ? maxOrdQty : count;
 			$input.val(count);
 			$input.change();
+
 			//주문 최대 수량 이상 증가버튼 비활성화
 			if ($input.val() == maxOrdQty) {
 				$('.optModifyPop01 .number_count .plus').addClass('min_val');

src/main/webapp/WEB-INF/views/web/cart/CartChangeOptionPopupWeb.html

@@ -187,6 +187,8 @@
 						</th:block>
 					</th:block>
 					<div class="opt_count">
+						<input type="hidden" class="minOrdQty" th:value="${cart.minOrdQty}" />
+						<input type="hidden" class="maxOrdQty" th:value="${cart.maxOrdQty}" />
 						<div class="opt_header">
 							<span class="title">수량</span>
 						</div>

src/main/webapp/WEB-INF/views/web/cart/CartListAjaxFormWeb.html

@@ -572,19 +572,19 @@
 			temp.optCd 			= "13256848-2";
 			temp.goodsQty 		= 3;
 			temp.goodsType 		= "G056_N";
-			temp.cartGb 		= "G";
+			temp.cartGb 		= "C";
 			temp.afLinkCd 		= "afLinkCd";
 			temp.ithrCd 		= "G027_ZZZ";
 			temp.contentsLoc 	= "G028_YYY";
 			temp.planDtlSq 		= "123";
 			compsList.push(temp);
 
-			temp 			= new Object;
+			temp 				= new Object;
 			temp.goodsCd 		= "AOW13QDM76";
 			temp.optCd 			= "13256848-6";
 			temp.goodsQty 		= 3;
 			temp.goodsType 		= "G056_N";
-			temp.cartGb 		= "G";
+			temp.cartGb 		= "C";
 			temp.afLinkCd 		= "afLinkCd";
 			temp.ithrCd 		= "G027_ZZZ";
 			temp.contentsLoc 	= "G028_YYY";

src/main/webapp/WEB-INF/views/web/cart/CartListFormWeb.html

@@ -301,19 +301,33 @@
 	$(document).on('click','.optModify_pop .number_count .minus',function(e){
 		var $input = $(this).parent().find('input');
 		var count = parseInt($input.val()) - 1;
-		count = count < 1 ? 1 : count;
+		var minOrdQty = $(this).parent().parent().find(".minOrdQty").val();
+
+		count = count < minOrdQty ? minOrdQty : count;
 		$input.val(count);
 		$input.change();
 		//수량1개 이하 감소버튼 비활성화
-		if ($input.val() == 1) {
+		if ($input.val() == minOrdQty) {
 			$('.optModify_pop .number_count .minus').addClass('min_val');
 		}
+
+		$('.optModify_pop .number_count .plus').removeClass('min_val');
+
 		return false;
 	}).on('click','.optModify_pop .number_count .plus',function(e){
 		var $input = $(this).parent().find('input');
-		$input.val(parseInt($input.val()) + 1);
+		var count = parseInt($input.val()) + 1;
+		var maxOrdQty = $(this).parent().parent().find(".maxOrdQty").val();
+
+		count = count > maxOrdQty ? maxOrdQty : count;
+		$input.val(count);
 		$input.change();
-		//수량2개 이상부터 감소버튼 활성화
+
+		//주문 최대 수량 이상 증가버튼 비활성화
+		if ($input.val() == maxOrdQty) {
+			$('.optModify_pop .number_count .plus').addClass('min_val');
+		}
+
 		$('.optModify_pop .number_count .minus').removeClass('min_val');
 		return false;
 	}).on('keyup','.optModify_pop .number_count input[type=text]',function(e){

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

@@ -187,7 +187,7 @@ i.big {font-size:18px; position:relative; top:2px;}
 .t_help {color: #888888 !important;}
 .t_info {color: #888888 !important;}
 .t_err {color: #fd4802 !important;}
-.t_err::before {content: '';display: inline-block; width:17px; height:17px; background:url('/images/mo/ico_err.png') no-repeat right top;margin: 0px 2px 0 0px;position: relative;top: 4px;left: 0;right: auto;bottom: auto;}
+.t_err::before {content: '';display: inline-block; width:1.5rem; height:1.5rem; background:url('/images/mo/ico_err.png') no-repeat right top;margin: 0px 0.6rem 0 0px;position: relative;top: 0.3rem;left: 0;right: auto;bottom: auto; background-size: 100%;}
 .t_success {color: #333333 !important;}
 
 /* textarea */
@@ -301,7 +301,7 @@ input[type="file"] {
   overflow: hidden; clip:rect(0,0,0,0); border: 0;
 }
 .fileAdd{
-  width: 72px;height:72px;border: 1px solid #dddddd;float: right;font-size: 0;
+  width: 72px;height:72px;border: 0.1rem solid #dddddd;float: left;font-size: 0;
   background: url('/images/mo/ico_btn_file.png') no-repeat;background-position: 50% 50%;
   -webkit-appearance: none; -moz-appearance: none; appearance: none;cursor: pointer; background-size:30px;
 }
@@ -584,7 +584,7 @@ top: 9px;border-color: transparent transparent #888888 transparent;}
 .ico_ipin::before {content: ""; width:20px; height:20px; background:url(/images/mo/ico_join_bg.png) no-repeat -20px 0; background-size:cover;}
 
 /* btn : btn_default, btn_more, btn_go, btn_waiting */
-.btn{display: inline-block; height: 5.0rem; margin-bottom: 0; padding: 0.4rem 1.3rem; font-size: 1.4rem; font-weight: 400; line-height: 1; color: #333333; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; background-image: none; background-color: #ffffff; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: #dddddd; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px; -ms-touch-action: manipulation;touch-action: manipulation; -webkit-transition: all 200ms ease;-moz-transition: all 200ms ease;-ms-transition: all 200ms ease;-o-transition: all 200ms ease;transition: all 200ms ease; cursor: pointer; }
+.btn{display: inline-block; height: 5.0rem; margin-bottom: 0; padding: 0.4rem 1.3rem; font-size: 1.4rem; font-weight: 400; line-height: 1 !important; color: #333333; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; background-image: none; background-color: #ffffff; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: #dddddd; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px; -ms-touch-action: manipulation;touch-action: manipulation; -webkit-transition: all 200ms ease;-moz-transition: all 200ms ease;-ms-transition: all 200ms ease;-o-transition: all 200ms ease;transition: all 200ms ease; cursor: pointer; }
 .btn.mini{width: auto !important; display: inline-block !important; height: 3.0rem; font-size: 1.2rem; font-weight: 300; }
 .btn_gost{position: relative; display: block; width: 100%; height: 50px; color: #333333; border-color: #dddddd; background-color: transparent; }
 .btn_more{position: relative; display: block; width: 100%; height: 50px; color: #888; border: #999 solid 1px;}
@@ -1036,7 +1036,7 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 .list_col2 > li{float: left; width: 50%;}
 .list_col3::after{content: ''; display: block; clear: both;}
 .list_col3 > li{float: left; width: 33.33%;}
-.txt_ref{margin-top: 10px; color: #666; padding-left: 1.5rem; position: relative;}
+.txt_ref{margin-top: 1.5rem;padding-left: 1.5rem;font-size: 1.1rem;color: #666;font-weight: 200;position: relative;}
 .txt_ref::before{content: '※'; display: block; position: absolute; left: 0; top: 0;}
 .txt_blt{padding-left: 8px; position: relative;}
 .txt_blt::before{content: ''; display: block; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 3px; height: 3px; background-color: #666;}
@@ -1303,14 +1303,14 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 
 /*alert confirm*/
 .dialog-mobile {
-	padding: 0 1.2rem 4rem 1.2rem;
+	padding: 0;
+	margin-left: -45%;
 	text-align:center;
 	position: fixed;
 	top: 50%;
 	left: 0;
 	z-index: 1001;
-	min-width:13.3rem;
-	max-width: 95%;
+	width: 90%;
 	background-color: rgba(255, 255, 255,1);
 	border-radius: 0px;
 	-ms-transform: translate3d(0, 0, 0);
@@ -1340,7 +1340,7 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 }
 .dialog-mobile .dialog-content {
 	position: relative;
-	padding:5.0rem 0 4.0rem 0;
+	padding:5.0rem 2.0rem 4.0rem 2.0rem;
 	line-height: 2em;
 	text-align: left;
 	color: #333333;
@@ -1355,10 +1355,10 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 .dialog-mobile .dialog-cancel-button {
 	display:inline-block;
 	position: relative;
-	margin:0 0.5rem;
-	padding:0 3.0rem;
-	min-width: 7.0rem;
-	height: 3.8rem;
+	margin:0;
+	padding:0;
+    width: 100%;
+    height: 3.8rem;
 	line-height: 3.8rem;
 	text-align: center;
 	font-size:1.4rem;
@@ -1376,19 +1376,106 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 	color: #000;
 	background: #fff;
 	border:1px solid #999;
-	min-width:10.0rem;
+	/* min-width:10.0rem; */
 }
 .dialog-mobile .dialog-sure-button{
 	color: #fff;
 	background:#000;
 	border:1px solid #000;
-	min-width:10.0rem;
+	/* min-width:10.0rem; */
 }
 .dialog-mobile button[i='1']{
+	color: #000 !important;
+	background:#fff !important;
+	border:1px solid #777;
+	/* min-width:10.0rem; */
+}
+.dialog-mobile button[class$='-button']:nth-last-child(2){width: 50%;}
+.dialog-mobile button[class$='-button'] +  button[class$='-button']{width: 50%;}
+
+
+/* alert 투명도 */
+.dialog-mobile.trans {
+	padding: 0 1.2rem 2.5rem 1.2rem;
+	margin-left: -45%;
+	text-align:center;
+	position: fixed;
+	top: 50%;
+	left: auto;
+	right: auto;
+	z-index: 1001;
+	min-width:13.3rem;
+	max-width: 90%;
+	background-color: rgb(14 14 14 / 0.8);
+	border-radius: 0px;
+	-ms-transform: translate3d(0, 0, 0);
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+.dialog-mobile.trans .dialog-title {
+    padding: 0em 1em 0.5em;
+    text-align: center;
+    color: #ffffff;
+	font-size: 1.6rem;
+	font-weight: 200;
+    border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.dialog-mobile.trans .dialog-content {
+	position: relative;
+	padding:2.5rem 0 0rem 0;
+	line-height: 2em;
+	text-align: left;
+	color: #ffffff;
+	font-size:1.4rem;
+	text-align:center;
+}
+.dialog-mobile.trans .dialog-content em {
+	color:#df6400
+}
+.dialog-mobile.trans .dialog-button,
+.dialog-mobile.trans .dialog-sure-button,
+.dialog-mobile.trans .dialog-cancel-button {
+	display:inline-block;
+	position: relative;
+	margin:0 0.5rem;
+	padding:0 3.0rem;
+	min-width: 7.0rem;
+	height: 3.8rem;
+	line-height: 3.8rem;
+	text-align: center;
+	font-size:1.4rem;
+	font-weight: 200;
+	cursor:pointer;
+	border-radius:0rem;
+}
+.dialog-mobile.trans .dialog-button{
+    color: #fff;
+    background: transparent;
+    border: 1px solid #dddddd;
+	min-width:10.0rem;
+	width: auto;
+}
+.dialog-mobile.trans .dialog-cancel-button {
+	color: #fff;
+    background: transparent;
+    border: 1px solid #dddddd;
+	min-width:10.0rem;
+	width: auto;
+}
+.dialog-mobile.trans .dialog-sure-button{
+	color: #fff;
+    background: transparent;
+    border: 1px solid #dddddd;
+	min-width:10.0rem;
+	width: auto;
+}
+.dialog-mobile.trans button[i='1']{
 	color: #000 !important;
 	background:#fff !important;
 	border:1px solid #777;
 	min-width:10.0rem;
+	width: auto;
 }
 
 /* 닫기 아이콘 */
@@ -1910,7 +1997,8 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 .app-only .guidance:after{content: '';position: absolute;top: 0;bottom: 15px;left: 10px;width: 100%;height: 100%;z-index: -1;}
 .app-only .guidance{
     box-shadow: 0 0px 30px rgb(0 0 0 / 20%), 0 0px 30px rgb(0 0 0 / 20%);
-    mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
+	/* 마스크 미사용 
+	mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
     -webkit-mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
 	mask-size: 100% 0%, 2vh 2vh, calc(100% - 1.9vh) 100%, 100% calc(100% - 1.9vh);
     -webkit-mask-size: 100% 0%, 2vh 2vh, calc(100% - 1.9vh) 100%, 100% calc(100% - 1.9vh);
@@ -1918,6 +2006,7 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
     -webkit-mask-position: bottom left, bottom right, top left, top right;
     mask-repeat: no-repeat;
     -webkit-mask-repeat: no-repeat;
+	*/
 }
 .app-only .guidance p{font-size:1.3rem;font-weight: 300;color: #fff;}
 .app-only .guidance p.tit{font-size: 1.4rem;margin-bottom: 1.53rem;}

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

@@ -126,7 +126,7 @@
 .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;}
 .cs_contactUs_my .select_dress span { width: 0.7rem; height: 0.7rem; background: url(/images/mo/ico_star02.png) no-repeat center; background-size: 0.7rem auto; display: inline-block; margin: 0 0 0 0.5rem; }
-.cs_contactUs_my input { width: 100%; height: 4.5rem; box-sizing: border-box; font-size: 1.4rem;}
+.cs_contactUs_my input[type="text"] { width: 100%; height: 4.5rem; box-sizing: border-box; font-size: 1.4rem;}
 .cs_contactUs_my textarea { width: 100%; height: 15rem; box-sizing: border-box; padding: 1.5rem; font-size: 1.4rem;}
 .cs_contactUs_my .form_field { margin: 0 0 1.2rem; }
 .cs_contactUs_my .info_addfile ul li {font-size: 1.2rem; color: #c6c6c6;}
@@ -193,6 +193,8 @@
 
 /* ============================================ 회원가입 ============================================ */
 /* mb공통*/
+.mb .form_control {height: 4.5rem;}
+.mb h2.title {text-align: center; padding-bottom: 1.7rem; font-size: 2rem; font-weight: 500;}
 .mb .close{position: relative; height:5.2rem; margin-bottom: -1.2rem;}
 .mb .close span{position:absolute; left:50%; margin-left:-0.05rem; display:inline-block; width:0.1rem; height:1.8rem; background-color:#000; transform:rotate(45deg);}
 .mb .close span:first-child{transform:rotate(-45deg);}
@@ -201,8 +203,9 @@
 .mb .form_wrap .form_field{margin-top:1rem;}
 .mb .ui_row{margin-bottom:0;}
 .mb input[type="text"], .mb input[type="password"] {float: none;}
-.mb .sns_wrap{margin-top:4rem;}
-.mb .sns_wrap .login_utill{display:inline-block; font-size:0;}
+.mb .sns_wrap{margin-top:3rem;}
+.mb .sns_wrap > h5 {font-size: 1.4rem;}
+.mb .sns_wrap .login_utill{display:inline-block; font-size:0; margin-top: 2rem;}
 .mb .sns_wrap .login_utill > li{display:inline-block; margin-left:3.5rem;}
 .mb .sns_wrap .login_utill > li:first-child{margin-left:0;}
 .mb .sns_wrap .login_utill > li a{font-size:1.2rem;}
@@ -215,6 +218,7 @@
 .mb .sns_wrap .login_utill > li.lu_yes24 a .ico{background:#f5f5f5;}
 .mb .sns_wrap .login_utill > li.lu_yes24 a .ico:before{width:3.4rem; height:2.2rem; background-position: -3.6rem 0;}
 .mb .help_block{margin-top:1rem; font-size:1.2rem;}
+.mb .help_block .t_err {}
 .mb .btn_nonMb {display: inline-block; color: #888; font-size:1.2rem; font-weight: 200; border-bottom: 0.1rem solid #888;}
 .mb .tab_btn{margin-bottom:4rem; overflow:hidden;}
 .mb .tab_btn > li{position:relative; float:left; width:50%; height:4.5rem; line-height:4.5rem; background-color:#f5f5f5; color:#888; text-align:center;}
@@ -224,7 +228,8 @@
 .mb .radio_tab{margin-bottom:2rem;}
 .mb .radio_nav{margin-bottom:2.4rem;}
 .mb .form_sign_up{margin-top:4rem;}
-.mb .form_sign_up .c_primary{font-size:1.6rem; font-weight:600;}
+.mb .form_sign_up p:last-child {color:#888; margin-top: 1rem;}
+.mb .form_sign_up .c_primary{font-size:1.6rem; font-weight:500;}
 .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;}
@@ -238,7 +243,9 @@
 .mb .find_result .form_print_bar ul li span.t_span {width:7.5rem; color:#888;}	
 .mb .btn_group_block {float:none; margin-top:3rem; display:flex;}
 .mb [class^="ico_content_"]::before {margin: 0px auto 1.5rem;}
-.ico_content_find::before {width:3.6rem; height:4.6rem; background:url(../images/ico_content_find.png) no-repeat 50% 50%;}
+.ico_content_find::before {width:3.6rem; height:4.6rem; background:url(/images/mo/ico_content_find.png) no-repeat 50% 50%;}
+
+.mb .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 /* mb_login */
 .mb .mb_login .login_check{font-size:1.2rem; line-height:1.8rem;}
@@ -270,19 +277,19 @@
 .mb_idInquiry_1 .form_field{flex-flow:row wrap; justify-content: space-between;}
 .mb_idInquiry_1 .form_field .ui_col_4{padding:0.5rem; width:auto; box-sizing:border-box;}
 .mb_idInquiry_1 .txt{margin:4rem 0; text-align:center; color:#888888;}
-.mb_idInquiry_1 .btn{width:100%; height:4.5rem;}
+.mb_idInquiry_1 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 /* mb_idInquiry_2 */
-.mb_idInquiry_2 .btn{width:100%; height:4.5rem;}
+.mb_idInquiry_2 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 /* mb_idInquiry_3 */
-.mb_idInquiry_3 .btn{width:100%; height:4.5rem;}
+.mb_idInquiry_3 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 /* mb_idInquiry_4 */
-.mb_idInquiry_4 .btn{width:100%; height:4.5rem;}
+.mb_idInquiry_4 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 /* mb_idInquiry_5 */
-.mb_idInquiry_5 .btn{width:100%; height:4.5rem;}
+.mb_idInquiry_5 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 /* mb_idInquiry_6 */
 .dormant .form_wrap .form_btn::after {clear:both; display:block; content:'';}
@@ -293,22 +300,23 @@
 .dormant .form_wrap .form_summary {margin-top:3rem;}
 .dormant .form_wrap .form_summary strong {font-size:1.4rem; font-weight:300;}
 .dormant .form_wrap .form_summary p {margin-top:0.5rem; font-size:1.2rem; color:#888; font-weight:200; line-height:1.6; word-break:keep-all;}
-.mb_idInquiry_6 .btn{width:100%; height:4.5rem;}
+.mb_idInquiry_6 .btn{width:100%; height:5.2rem;}
 
 /* mb_idInquiry_7 */
-.mb_idInquiry_7 .btn{width:100%; height:4.5rem;}
+.mb_idInquiry_7 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 /* mb_idInquiry_8 */
 .mb_idInquiry_8 .form_summary {padding-top:3rem; border-top: 0.1rem solid #ddd;}
-.mb_idInquiry_8 .form_summary .txt {position:relative; margin-bottom:0.6rem; font-size:1.2rem;  line-height:1;}
+.mb_idInquiry_8 .form_summary .txt {position:relative; margin-bottom:0.8rem; font-size:1.3rem;  line-height:1;}
 .mb_idInquiry_8 .form_summary .txt span.c_primary {font-size:1.2rem; font-weight:700;}
 .mb_idInquiry_8 .form_summary .btn {position:absolute; top:0.1rem; right:0; font-size:1.2rem; font-weight:300; border-color:#a7a7a7;}
-.mb_idInquiry_8 .form_summary .t_info {display:block; color:#888; font-size:1.2rem}
+.mb_idInquiry_8 .form_summary .t_info {display:block; color:#888; font-size:1.1rem}
 .mb_idInquiry_8 .form_summary .t_info:nth-of-type(4){padding-right:8rem;}
-.mb_idInquiry_8 .btn{width:100%; height:4.5rem;}
+.mb_idInquiry_8 .btn_group_flex {margin-bottom: 3rem;}
+.mb_idInquiry_8 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 /* mb_join_1 */
-.mb_join_1 .btn{width:100%; height:4.5rem;}
+.mb_join_1 .btn_group_flex > div > .btn {width:100%; height:4.5rem;}
 
 /* mb_join_2 */
 .mb .mb_join_2 .form_field{display:block;}
@@ -322,8 +330,21 @@
 .mb .mb_join_3 .form_wrap .print_bar{padding:3.4rem 0; background: #f5f5f5; text-align:center;}
 .mb .mb_join_3 .btn{width:100%; height:4.5rem;}
 
-
-
+/* mb_campaign */
+.mb .campaign .form_wrap .form_info p {line-height: 1.4;}
+.mb .campaign .form_wrap .form_info p.t_info {color:#666 !important; margin-top: 1rem;}
+.campaign .info_txt {padding:1.8rem; margin-top:3rem; background:#f5f5f5;}
+.campaign .info_txt ul li {position:relative; padding-left:0.8rem; margin-bottom:0.8rem; color:#888; font-size:1.1rem; font-weight:200; line-height:1.4;}
+.campaign .info_txt ul li:last-child {margin-bottom:0;}
+.campaign .info_txt ul li:after {content:''; position:absolute; top:7px; left:0; background:#858585; width:0.2rem; height:0.2rem;}
+.campaign .info_txt ul li .mb_name {font-weight:300;}
+.campaign .info_txt ul li em {font-weight:300;}
+.campaign .btn_group_flex > div > .btn.btn_primary {border:1px solid #fd4802}
+.btn_group_flex > div > .btn.btn_primary {border:1px solid #fd4802}
+
+.mb_join_2 .input_wrap .btn_hp_certi {position: absolute; top: 0; right: 0; height: 4.5rem; margin-left: 0; font-size: 1.4rem; font-weight: 300;}
+.mb .t_err {position: relative; padding-left: 2.1rem;}
+.mb .t_err::before {position: absolute; top: 0.1rem; left: 0; margin: 0;}
 
 /* ================================================================== 제품상세 =========================================================================== */
 /* common으로 이사갈것들 */
@@ -782,6 +803,17 @@ header .htop.trans{position:absolute; background:transparent !important;}
 .cs .fold_head .fold_state{padding:0.2rem 0.3rem;}
 .cs .fold_head .data{font-family: 'LATO', 'Noto Sans kr', sans-serif;}
 .Purchase_pop .select_custom .combo .list>li{padding:1.2rem; line-height:2rem; word-wrap: break-word;}
+/* 210415 */
+.dp .popup_box .button_list.clear button{width:100% !important;}
+.dp .open_categori a{display: inline-block;font-size: 1.2rem;font-weight: 300;padding-right: 1.4rem;background: url(/images/mo/ico_sort_arrow.png) no-repeat right center;background-size: 0.7rem 0.43rem;}
+.dp .Bulletship_foot .clear{background:#f5f5f5; margin:4rem -2rem; padding:4rem 0 2.5rem 2rem;}
+.dp .dp_Bulletship .inner:first-child{margin-bottom:0; padding-bottom:0;}
+.dp .dp_Bulletship .items_option{padding-top:0; margin:0 2rem;}
+.dp .items_option #filter{height:4.5rem; border:0.1rem solid #dddddd;}
+.dp .dp_exhibition .items_option #filter{font-size:1.2rem; color:#666666; width:100%;line-height:4.5rem; padding:0 1.5rem; background-color:#fff;}
+.dp .dp_Bulletship .items_option #filter{font-size:1.2rem; color:#666666; width:100%;line-height:4.5rem; padding:0 1.5rem; background-color:#fff;}
+.Purchase_pop .select_custom .combo .list>li[data-soldout="true"]::after{top:1rem}
+
 
 
 
@@ -1490,7 +1522,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 .dp .dp_subtitle > a{position:relative; padding-right:2rem;}
 .dp .dp_subtitle > a:before{content:''; position:absolute; right:0; top:50%; margin-top:-1px; width:0.7rem; height:1.3rem; background:url(/images/mo/ico_dp_arrow.png) center center no-repeat; background-size:contain; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
 .dp .category_nav {margin-bottom:0 2rem -1.3rem; display: flex; justify-content: center; border-bottom:1px solid #eeeeee;}
-.dp .category_nav ul{padding:0 2rem; display:flex;}
+.dp .category_nav ul{padding:0 2rem; display:flex; margin-left:-5.3rem;}
 .dp .category_nav ul::after {content:''; display: block; clear: both;}
 .dp .category_nav ul li {margin-right:2rem; }
 .dp .category_nav ul li button {position: relative; padding:1.5rem 0; font-size:1.4rem; font-weight:300; color:#222;}
@@ -1521,7 +1553,8 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 /* 전시상품리스트 공통(default) */
 .dp .dp_list .sub_category{padding:0.8rem 0;}
-.dp .dp_list .sub_category .cate_wrap{white-space:nowrap; overflow-x:auto;}
+.dp .dp_list .sub_category .cate_wrap{white-space:nowrap; overflow-x:auto; -ms-overflow-style: none;}
+.dp .dp_list .sub_category .cate_wrap::-webkit-scrollbar{display:none;}
 .dp .dp_list .sub_category .cate_wrap a{float:none; display:inline-block; margin-bottom:0;}
 .dp .dp_list .sub_category .cate_wrap a:first-child{margin-left:2rem;}
 .dp .dp_list .sub_category .cate_wrap a:last-child{margin-right:2rem;}
@@ -1565,7 +1598,8 @@ header .htop.trans{position:absolute; background:transparent !important;}
 /* 룩북 - dp_lookbook */
 .dp .dp_lookbook .count_wrap {padding: 1.5rem 0 2rem;}
 .dp .dp_lookbook .swiper_filter.brand{position:relative; margin-bottom:2rem;}
-.dp .dp_lookbook .swiper_filter.brand .cate_wrap{white-space:nowrap; overflow-x:auto; background-color:#fff; font-size:0;}
+.dp .dp_lookbook .swiper_filter.brand .cate_wrap{white-space:nowrap; overflow-x:auto; background-color:#fff; font-size:0; -ms-overflow-style: none;}
+.dp .dp_lookbook .swiper_filter.brand .cate_wrap::-webkit-scrollbar{display:none;}
 .dp .dp_lookbook .swiper_filter.brand .cate_wrap a {position:relative; display:inline-block; background: #fff; margin-left:0.5rem; padding:0.8em 3.4rem 0.8rem 1.2rem; font-size: 1.2rem; color: #222; border-radius:2rem; line-height: 1; border:1px solid #dddddd;}
 .dp .dp_lookbook .swiper_filter.brand .cate_wrap a:after{content:''; position:absolute; right:1.2rem; top:50%; width:0.8rem; height:0.8rem; background:url(/images/mo/ico_filter_remove.png) center center no-repeat; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
 .dp .dp_lookbook .swiper_filter.brand .cate_wrap a:first-child{margin-left:0;}
@@ -1902,7 +1936,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 .filter_body > ul > li .sizebox strong{display:block;}
 /* 필터세부사항(컬러) */
 .filter_body > ul > li .colorbox{padding:2rem 1rem; display:flex; flex-wrap: wrap;}
-.filter_body > ul > li .colorbox li {margin:0.5rem 0.5rem;}
+.filter_body > ul > li .colorbox li {margin:0.5rem 0.5rem; position:relative;}
 .filter_body > ul > li .colorbox li .color-check input {position: absolute; display: block;overflow: hidden; height: 1px; width: 1px; clip: rect(1px, 1px, 1px, 1px);}
 .filter_body > ul > li .colorbox li .color-check [class*="pdColor"], 
 .filter_body > ul > li .filter_content [class*="pdColor"] {position: relative; display: inline-block; width:2.4rem; height: 2.4rem; cursor: pointer;}

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

@@ -652,7 +652,7 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 .ev .comment .pics {overflow:hidden; /*width: calc((100% - 3.2rem) /4);*/ width: 23%; margin:1%; height:auto; padding-top: 23%; border:none; background: #f5f5f5;}
 .ev .comment .picsThumbs {max-width:100%; max-height:none; width: 100%; height:auto;}
 /* .ev .comment .imgUpload {width: 100%; height:100%;} */
-.ev .comment .fileAdd {width: 23%; height:auto; padding-top: 23%; margin:1%;}
+.ev .comment .fileAdd {float:left; width: 23%; height:auto; padding-top: 23%; margin:1%;}
 .ev .comment .btn_wrap {padding:2rem 2rem 3rem;}
 .ev .comment .btn_wrap button.btn {width: 100%; padding:1.1rem 0; font-size: 1.4rem; font-weight: 500; height:auto;}
 .ev .comment .nodata {padding:14rem 0; font-size: 1.3rem; color: #888; text-align: center;}
@@ -677,27 +677,27 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 .modal.pop_full .modal-header {padding:1.6rem 2rem;}
 .modal.pop_full .modal-body {padding:0 2rem;}
 .modal.pop_full a.close-modal {background: url('/images/mo/ico_pop_cls.png') no-repeat center/100%; width: 1.6rem; height: 1.6rem;}
-.modal.photo_comment_popup {background: #f5f5f5; overflow:hidden;}
+.modal.photo_comment_popup {background: #f5f5f5; overflow:hidden; position: fixed; left: 0; top: 0;}
 .modal.photo_comment_popup .modal-dialog, .modal.photo_comment_popup .modal-content {height: 100%;}
 .modal.photo_comment_popup .modal-body {padding: 5.2rem 0 0; margin:0; height: 100%;}
 .modal.photo_comment_popup .modal-body .pop_cont {height: 100%; overflow:hidden; position: relative; padding-bottom: 13rem;}
-.modal.photo_comment_popup .modal-body .pop_cont .pop_slide {position: relative; height: 100%;}
+.modal.photo_comment_popup .modal-body .pop_cont .pop_slide {position: relative; height: 100%; overflow:hidden;}
 .modal.photo_comment_popup .modal-body .pop_cont .pop_slide .swiper-container {height: 100%;}
 .modal.photo_comment_popup .modal-body .pop_cont .pop_slide .swiper-pagination-fraction {bottom:2.5rem; width:auto; left: 50%; transform:translateX(-50%); 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;}
 .swiper-pagination-current {font-weight: 600;}
 /* .swiper-pagination-current:before {content:'0';} */
-.modal.photo_comment_popup .pop_detail {position: fixed; left: 0; bottom: 0; width: 100%; z-index: 99; background: #fff;  box-shadow: 0px -14px 17.8px 2.2px rgba(0, 0, 0, 0.04); font-size: 1.3rem;  transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);}
+.modal.photo_comment_popup .pop_detail {position: fixed; left: 0; bottom: 0; width: 100%; z-index: 99; background: #fff;  box-shadow: 0px -14px 17.8px 2.2px rgba(0, 0, 0, 0.04); font-size: 1.3rem;  transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1); }
 .pop_slide .swiper-slide .img {}
 .pop_slide .swiper-slide img {width: auto; height: auto; max-height: 100%; max-width: 100%; margin: auto 0; position: absolute; top: 50%; bottom: auto; left: 50%; right: 0; transform: translate(-50%, -50%); cursor: pointer;}
 .modal.photo_comment_popup .pop_detail .pop_open_btn {position: absolute; left: 0; top: 0; width: 100%; background: url('/images/mo/ico_pop_arrow.png') no-repeat center; display: block; width: 100%; height: 3rem; background-position:center; background-size:3rem;}
-.modal.photo_comment_popup .pop_detail .comment_wrap {max-height: 10rem; padding:0 2rem 2rem; margin-top: 3rem; transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);}
+.modal.photo_comment_popup .pop_detail .comment_wrap {max-height: 10rem; padding:0 2rem 2rem; margin-top: 3rem; transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1); overflow-y:auto;}
 .modal.photo_comment_popup .pop_detail .comment_writer {margin-top: 1.4rem;}
 .modal.photo_comment_popup .pop_detail .comment_writer .writer {margin-right: 1.2rem; padding-right: 1.2rem; border-right:1px solid #ddd; font-size: 1.1rem; color: #666;}
 .modal.photo_comment_popup .pop_detail .comment_writer .date {color: #888; font-size: 1.1rem;}
 
 .modal.photo_comment_popup .pop_detail.active {}
 .modal.photo_comment_popup .pop_detail.active .pop_open_btn {background: url('/images/mo/ico_pop_arrow_on.png') no-repeat center; display: block; width: 100%; height: 3rem; background-position:center; background-size:3rem;}
-.modal.photo_comment_popup .pop_detail.active .comment_wrap {overflow-y:auto; max-height: 34rem;}
+.modal.photo_comment_popup .pop_detail.active .comment_wrap { max-height: 34rem;}
 .modal.photo_comment_popup .modal-footer {margin-top: 0;}
 
 .paging_wrap {text-align: center; margin-top: 3.6rem;}

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

@@ -119,8 +119,8 @@ $(document).ready(function() {
                         var file = e.target;
                         $("<span class=\"pics\">" +
                             "<img class=\"picsThumbs\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
-                            "<br/><span class=\"removes\">Removes image</span>" +
-                            "</span>").insertAfter("#fileAdd");
+                            "<span class=\"removes\">Removes image</span>" +
+                            "</span>").insertBefore(".fileAdd");
                         $(".removes").click(function(){
                             $(this).parent(".pics").remove();
                         });

src/main/webapp/ux/mo/js/mcxdialog_ui.js

@@ -41,7 +41,7 @@
 
 			function getFontSize() {
 				var clientWidth = document.documentElement.clientWidth;
-				if (clientWidth < 640) return 16 * (clientWidth / 375) + "px";
+				if (clientWidth < 640) return 16 * (clientWidth / 375) * 0.1 +  "rem";
 				else return 16;
 			};
 
@@ -116,8 +116,9 @@
 
 					if (!options.bottom) {
 						//set position
-						dom.style.top = (document.documentElement.clientHeight - dom.offsetHeight) / 2 + "px";
-						dom.style.left = (document.documentElement.clientWidth - dom.offsetWidth) / 2 + "px";
+						dom.style.top = (document.documentElement.clientHeight - dom.offsetHeight) / 2 * 0.1 + "rem";
+						// dom.style.left = (document.documentElement.clientWidth - dom.offsetWidth) / 2 * 0.1 + "rem";
+						dom.style.left = 50 + "%";
 					}
 
 
@@ -188,6 +189,8 @@
 
 					opts.btns = [cancelBtn, sureBtn];
 					this.open(content, opts);
+
+					
 				},
 
 				//confirmC ------------------------
@@ -316,7 +319,7 @@
 					body.appendChild(toast);
 
 					toast.style.fontSize = getFontSize();
-					toast.style.left = (document.documentElement.clientWidth - toast.offsetWidth) / 2 + "px";
+					toast.style.left = (document.documentElement.clientWidth - toast.offsetWidth) / 2 * 0.1 + "rem";
 
 					setTimeout(function () {
 						body.removeChild(toast);
@@ -353,8 +356,8 @@
 					body.appendChild(loading);
 
 					loading.style.fontSize = getFontSize();
-					loading.style.left = (document.documentElement.clientWidth - loading.offsetWidth) / 2 + "px";
-					loading.style.top = (document.documentElement.clientHeight - loading.offsetHeight) / 2 + "px";
+					loading.style.left = (document.documentElement.clientWidth - loading.offsetWidth) / 2 * 0.1 + "rem";
+					loading.style.top = (document.documentElement.clientHeight - loading.offsetHeight) / 2 * 0.1 + "rem";
 
 					this.loadElement.push(loadingBg);
 					this.loadElement.push(loading);