Merge branch 'develop' of http://112.172.147.34:4936/style24/style24.front.git into develop

src/main/java/com/style24/front/biz/web/TsfDisplayController.java

@@ -99,11 +99,11 @@ public class TsfDisplayController extends TsfBaseController {
 		}
 
 		String mainCateNo = "1700";
-//		if (device.isMobile() || "Y".equals(paramMap.get("mobileYn"))) {
-//			mainCateNo = "1720";
-//		} else {
-//			mainCateNo = "1700";
-//		}
+		if (device.isMobile() || "Y".equals(paramMap.get("mobileYn"))) {
+			mainCateNo = "1720";
+		} else {
+			mainCateNo = "1700";
+		}
 
 		mallMainLayout.setCateNo(Integer.parseInt(mainCateNo));
 		Collection<MainLayout> mainLayoutCollection = displayService.getMainLayout(mallMainLayout);
@@ -709,7 +709,8 @@ public class TsfDisplayController extends TsfBaseController {
 	@GetMapping("/gnb/tab/banner/list")
 	@ResponseBody
 	public Collection<Contents> getGnbTabBannerlist(Contents contents) {
-		contents.setContentsLoc("STAB003");
+//		contents.setContentsLoc("STAB003");
+		contents.setContentsLoc("SCM005");
 		return displayService.getGnbTabBannerlist(contents);
 	}
 

src/main/java/com/style24/front/biz/web/TsfMypageController.java

@@ -1511,7 +1511,7 @@ public class TsfMypageController extends TsfBaseController {
 	 * @since 2021. 03. 24
 	 */
 	@GetMapping("/review/form")
-	public ModelAndView mypageReviewForm(Review review, Device device) {
+	public ModelAndView mypageReviewForm(Review review) {
 		ModelAndView mav = new ModelAndView();
 
 		review.setCustNo(TsfSession.getInfo().getCustNo());
@@ -1587,10 +1587,8 @@ public class TsfMypageController extends TsfBaseController {
 		TscPageRequest pageable2 = new TscPageRequest((review.getPageNo2() > 0 ? review.getPageNo2() - 1 : 0), review.getPageSize2(), review.getPageUnit2());
 		pageable2.setTotalCount(reviewService.getAlreadyReviewCount(review));
 
-		review.setPageable2(pageable2);
-		log.info("pageable2: {}", pageable2);
-		log.info("totalCount2 {}", pageable2.getTotalCount());
 		review.setReviewExpireDay(eventService.getGoodsReviewPointExpireDays(TscConstants.Site.STYLE24.value()));
+		review.setPageable2(pageable2);
 		result.set("paging2", review);
 		result.set("alreadyReviewCount", reviewService.getAlreadyReviewCount(review));
 		result.set("dataList2", reviewService.getAlreadyReviewList(review));

src/main/java/com/style24/persistence/domain/Contents.java

@@ -62,6 +62,7 @@ public class Contents extends TscBaseDomain {
 	private int planBrandCnt;
 	private int planBrandGroupNo;
 	private String planBrandGroupNm;
+	private String planGb;
 
 	// 몰메인 SMM003에서 사용
 	private String siteCd;

src/main/java/com/style24/persistence/domain/Review.java

@@ -104,6 +104,7 @@ public class Review extends TscBaseDomain {
 	private int prevReviewSq;
 	private int nextReviewSq;
 	private int reviewExpireDay;
+	private String kmcKey;
 
 	@JsonFormat(with = JsonFormat.Feature.ACCEPT_SINGLE_VALUE_AS_ARRAY)
 	private String[] orgFileNmArr;

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

@@ -83,7 +83,6 @@
 		    </when>
 		    <otherwise>
 		     , GTAB_SQ                                            /*GNB탭일련번호*/
-		     , CASE WHEN CONTENTS_TYPE = 'C' OR CONTENTS_TYPE = 'O' THEN (SELECT CONTENTS_TITLE FROM	TB_MAIN_LAYOUT WHERE CONTENTS_LOC = 'STAB003') ELSE '' END AS GTAB_BANNER_TITLE
 		FROM   TB_GNB_TAB A
 		    </otherwise>
 		</choose>
@@ -141,7 +140,7 @@
 		     , SUB_TEXT3       /*서브텍스트3*/
 		     , SUB_TEXT4       /*서브텍스트4*/
 		     <if test='contentsLoc != null and contentsLoc =="SGNB001"'>
-			 , HTML
+		     , HTML
 		     </if>
 		     , BRAND_GROUP_NO  /*브랜드그룹번호*/
 		     <if test='contentsLoc != null and contentsLoc =="SMM007"'>
@@ -149,11 +148,12 @@
 		     </if>
 		     , BRAND_GROUP_IMG /*브랜드그룹이미지경로*/
 		     , MD_TITLE        /*MD타이틀*/
-			<if test='contentsLoc != null and contentsLoc =="SMM001"'>
-				,PLAN_BRAND_CNT
-				,PLAN_BRAND_GROUP_NO
-				,PLAN_BRAND_GROUP_NM
-			</if>
+		     <if test='contentsLoc != null and contentsLoc =="SMM001"'>
+		     , PLAN_BRAND_CNT
+		     , PLAN_BRAND_GROUP_NO
+		     , PLAN_BRAND_GROUP_NM
+		     , PLAN_GB
+		     </if>
 		FROM   (
 		        SELECT A.CATE_NO                                            /*카테고리번호*/
 		             , A.CONTENTS_LOC                                       /*컨텐츠위치*/
@@ -214,6 +214,7 @@
 		                   FROM TB_PLAN_BRAND C
 		                   WHERE B.PLAN_SQ = C.PLAN_SQ
 		                   ) AS PLAN_BRAND_GROUP_NM
+		                , B.PLAN_GB
 		             </if>
 		        <choose>
 		            <when test='preview != null and preview == "Y"'>
@@ -1439,7 +1440,7 @@
 	<!-- GNB TAB 기획전배너 조회 -->
 	<select id="getGnbTabBannerList" parameterType="Contents" resultType="Contents">
 		/* TsfDisplay.getGnbTabBannerList */
-		SELECT (SELECT CONTENTS_TITLE FROM TB_MAIN_LAYOUT WHERE 1=1 AND CONTENTS_LOC = 'STAB003') AS GNB_TAB_TITLE
+		SELECT (SELECT CONTENTS_TITLE FROM TB_MAIN_LAYOUT WHERE 1=1 AND CATE_NO = #{cateNo} AND CONTENTS_LOC = #{contentsLoc}) AS GNB_TAB_TITLE
 		      , Z.BANNER_GB
 		      , Z.IMG_PATH1
 		      , Z.STR_VAR1
@@ -1452,8 +1453,9 @@
 		                  , STR_TITLE1
 		                  , STR_TITLE2
 		            FROM    TB_CONTENTS
-		            WHERE   CONTENTS_LOC = #{contentsLoc}
-		            AND     CONTENTS_TYPE = #{cateNo}
+		            WHERE   1=1
+		            AND     CATE_NO = #{cateNo}
+		            AND     CONTENTS_LOC = #{contentsLoc}
 		            AND     USE_YN = 'Y'
 		            UNION ALL
 		            SELECT  'PLAN' AS BANNER_GB

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

@@ -1083,6 +1083,8 @@
 			 , RA.FILE_GB
 			 , RA.ORG_FILE_NM
 			 , RA.SYS_FILE_NM
+			 , RA.KMC_KEY
+			 , RA.FILE_GB
 			 , RA.DEL_YN
 		FROM TB_REVIEW R LEFT JOIN TB_REVIEW_ATTACH RA ON R.REVIEW_SQ = RA.REVIEW_SQ 
 		WHERE 1=1
@@ -1091,6 +1093,10 @@
 		 AND R.DEL_YN = 'N'
 		 AND R.DISP_YN = 'Y'
 		 AND RA.DEL_YN = 'N'
+		 AND (RA.FILE_GB  = 'I'
+		      OR
+		      RA.FILE_GB = 'M' AND R.CONFIRM_YN = 'Y'  AND  RA.KMC_KEY IS NOT NULL
+		     )
 	</select>
 	
 	<select id="getAdminConfirmCount" parameterType="Review" resultType="Review">

src/main/webapp/WEB-INF/views/web/common/fragments/GnbWeb.html

@@ -618,7 +618,7 @@
 		return tag;
 	}
 
-	let fnGetGnbBanner = function (cateNo, title){
+	let fnGetGnbBanner = function (cateNo){
 		let actionUrl = '/display/gnb/tab/banner/list?cateNo='+cateNo;
 		let tag2 = '';
 		$.getJSON(actionUrl
@@ -627,7 +627,9 @@
 			var planninImgUrl = [[${@environment.getProperty('upload.image.view')}]];
 			if(result.length>0){
 				tag2 += '		<div class="tit">\n';
-				tag2 += '			<p>'+title+'</p>\n';
+				if(!gagajf.isNull(result[0].gnbTabTitle)){
+					tag2 += '			<p>'+result[0].gnbTabTitle+'</p>\n';
+				}
 				tag2 += '		</div>\n';
 				tag2 += '		<div class="list">\n';
 				tag2 += '			<ul class="clear event_con">\n';
@@ -671,7 +673,7 @@
 								$.each(allCate, function(allCateIdx, allCateItem) {
 									if (item.cate1No == allCateItem.cate1No) {
 										let gnbCate = fnGetGnbCategory(allCateItem);
-										fnGetGnbBanner(item.cate1No ,item.gtabBannerTitle);
+										fnGetGnbBanner(item.cate1No);
 										$('#divGnbTab').append(gnbCate);
 										$('#ulGnbTab').append(gnbCate);
 									}
@@ -682,7 +684,7 @@
 								// $('#divGnbTab').append('<li><a href="' + item.linkUrl + '">' + item.gtabNm + '</a></li>');
 								$('#ulGnbTab').append('<li><a href="' + item.linkUrl + '">' + item.gtabNm + '</a></li>');
 								fnGetOutletLeafCategory();
-								fnGetGnbBanner('3000',item.gtabBannerTitle);
+								fnGetGnbBanner('3000');
 							} else if (item.contentsType == 'L') { // 컨텐츠유형:링크
 								$('#divGnbTab').append('<li><a href="' + item.linkUrl + '">' + item.gtabNm + '</a></li>');
 								$('#ulGnbTab').append('<li><a href="' + item.linkUrl + '">' + item.gtabNm + '</a></li>');

src/main/webapp/WEB-INF/views/web/display/MallMainFormWeb.html

@@ -37,14 +37,15 @@
 										<div class="swiper-slide">
 											<th:block th:if="${ContentsData.imgPath1!=null && ContentsData.imgPath1!=''}">
 												<div class="txtWrap">
-
 													<th:block th:if="${ContentsData.strVar5!=null && ContentsData.strVar5!=''}">
-														<p class="vrt_txt" th:if="${ContentsData.strVar5=='P'}" th:text="${ContentsData.planBrandGroupNm}"></p>
-														<p class="vrt_txt" th:if="${ContentsData.strVar5!='P'}" >EVENT</p>
+														<p class="vrt_txt" th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt<2}" th:text="${ContentsData.planBrandGroupNm}"></p>
+														<p class="vrt_txt" th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt>1}" th:text="${ContentsData.planBrandGroupNm+' 외'}"></p>
+														<p class="vrt_txt" th:if="${ContentsData.strVar5!='P' or (ContentsData.strVar5=='P' and ContentsData.planGb=='E') }" >EVENT</p>
 													</th:block>
 													<dl th:class="${ContentsData.strVar7=='BLACK'?'':'w'}">
-														<dt th:if="${ContentsData.strVar5=='P'}" th:text="${ContentsData.planBrandGroupNm}"></dt>
-														<dt th:if="${ContentsData.strVar5!='P'}" >EVENT</dt>
+														<dt th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt<2}" th:text="${ContentsData.planBrandGroupNm}"></dt>
+														<dt th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt>1}" th:text="${ContentsData.planBrandGroupNm+' 외'}"></dt>
+														<dt th:if="${ContentsData.strVar5!='P' or (ContentsData.strVar5=='P' and ContentsData.planGb=='E') }" >EVENT</dt>
 														<dd class="mainTitle">
 															<input type="hidden" name="mainTitlee" th:value="${ContentsData.strTitle1}"/>
 														</dd>

src/main/webapp/WEB-INF/views/web/mypage/MypageReviewCreateFormWeb.html

@@ -573,8 +573,8 @@ var fnChooseFile = function(obj) {
 						}
 				); 
 		}else if((new RegExp("mp4", "i")).test(file.name)){
-			$(".pics").eq(0).find('removes').append("<input type='hidden' name='kufKey' id='kufKey"+(picLength+1)+"'>");
-			$(".pics").eq(0).find('removes').append("<input type='hidden' name='kmcKey' id='kmcKey"+(picLength+1)+"'>");
+			$(".pics").children().eq(0).append("<input type='hidden' name='kufKey' id='kufKey"+(picLength+1)+"'>");
+			$(".pics").children().eq(0).append("<input type='hidden' name='kmcKey' id='kmcKey"+(picLength+1)+"'>");
 			//gagaKollus.upload('Review', file, $('#kufKey'+(picLength+1)));
 		}else{
 			mcxDialog.alertC('첨부할 수 없는 파일 형식입니다.', {

src/main/webapp/WEB-INF/views/web/mypage/MypageReviewFormWeb.html

@@ -327,7 +327,7 @@
 						html+='										<a onclick="cfGoodsReviewDetail(\''+item.goodsCd+'\',\'\', \'Y\',\''+item.reviewSq+'\');">';
 						html+='											<div class="pic">';
 						if (attachList[i].fileGb == 'M') {
-							html+='												<span class="thumb mov" style="background-image:url(' + reviewUrl + '/' + attachList[i].sysFileNm + ');"></span>';
+							html+='												<span class="thumb mov" style="background-image:url(' + _kollusMediaUrl + '/' + attachList[i].kmcKey + '?player_version=html5);"></span>';
 						}else{
 							html+='												<span class="thumb" style="background-image:url(' + reviewUrl + '/' + attachList[i].sysFileNm + ');"></span>';
 						}

src/main/webapp/ux/pc/css/common.css

@@ -783,7 +783,7 @@ content: "〉";font-size: 12px;padding-left: 8px;
 .fgRDJH {padding: 0px 40px;font-size: 0px;box-sizing: border-box;}
 	@media (max-width: 1919px) and (min-width: 1401px){.fgRDJH {padding-left: 38px;padding-right: 38px;}}
 
-.itemLike {position: absolute;top: 20px;right: 18px;font-size: 0px;z-index: 10;width: 23px;height: 23px; background: url('/images/pc/ico_like.png');background-size: 46px;background-position:0px 0px;background-repeat: no-repeat;}
+.itemLike {position: absolute;top: 20px;right: 18px;font-size: 0px;z-index: 99;width: 23px;height: 23px; background: url('/images/pc/ico_like.png');background-size: 46px;background-position:0px 0px;background-repeat: no-repeat;}
 .itemLike::before, .itemLike::after {
 	content: "";position: absolute;top: 0px;right: 0px;width: 100%;height: 100%;
 	background-repeat: no-repeat;background-position: right top;background-size: contain;opacity: 0;transition: opacity 200ms ease 0s;
@@ -794,15 +794,15 @@ content: "〉";font-size: 12px;padding-left: 8px;
 .itemLike.active::before {opacity: 1;}
 .itemLike.likeit::before {opacity: 1;}
 
-.itemLink {position: relative;text-decoration: none;color: rgb(102, 102, 102);cursor: pointer;display: block;}
+.itemLink {z-index:20;position: relative;text-decoration: none;color: rgb(102, 102, 102);cursor: pointer;display: block;}
 .itemPic {position: relative;width: 100%;margin-bottom:20px;padding-top: 150%;font-size: 0px;overflow: hidden;background: #ffffff;}
 .itemPic::after {content: "";display: block;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.03;background-color: rgb(0, 0, 0);}
 .itemPic .pd_img,
 .itemPic .pd_mov {position: absolute;width: 100%;height: auto;top: 50%;left: 0px;transform: translateY(-50%);}
-.itemPic .pd_mov {z-index: 3;height: 100%;}
-.itemPic .pd_img {z-index: 2;transition: 0.5s;}
+.itemPic .pd_mov {z-index: 2;height: 100%;}
+.itemPic .pd_img {z-index: 1;transition: 0.5s;}
 /* .itemPic .pd_img {position: absolute;width: 100%;width: auto; height: auto;max-height: 500px;top: 50%;left: 50%;transform: translate(-50%,-50%);} */
-.itemOpt{z-index:3;position: absolute;bottom: -120px; left: 0; right: 0; width: 100%; height:111px;padding: 32px 0; text-align:center; color: #fff; background: rgb(0 0 0 / 0.8); }
+.itemOpt{z-index:3; pointer-events:none;position: absolute;bottom: -120px; left: 0; right: 0; width: 100%; height:111px;padding: 32px 0; text-align:center; color: #fff; background: rgb(0 0 0 / 0.8); }
 .itemOpt p{font-size: 12px;line-height: 1.2;padding-bottom: 15px;}
 .itemOpt ul{display: block;margin: 0 auto;width: auto;}
 .itemOpt ul li{font-size: 14px;line-height: 1.2;display: inline-block;margin-left: 10px;}
@@ -827,7 +827,7 @@ content: "〉";font-size: 12px;padding-left: 8px;
 
 /* common.css로 이동 예정 */
 .itemcolorchip {margin:20px 5px 0px; max-width: 208px;}
-.itemcolorchip [class*="chip_"] {position: relative;display: inline-block;width: 15px;height: 15px;font-size: 0; vertical-align: middle; margin:0 0 0 4px;}
+.itemcolorchip [class*="chip_"] {position: relative;display: inline-block;width: 15px;height: 15px;font-size: 0; vertical-align: middle; margin:0 0 0 4px;border-radius: 50%;box-sizing: border-box;}
 .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}
 
@@ -1234,7 +1234,39 @@ input[type="file"] {
 
 /* sort */
 
-
+/* datePicker */
+/* jquery ui datepicker month year picker */
+.ui-datepicker { font-family:arial,verdana,sans-serif }
+.ui-datepicker .ui-datepicker-select-month td ,
+.ui-datepicker .ui-datepicker-select-year td {
+	line-height: 3.4em;
+}
+.ui-datepicker .ui-datepicker-select-month td span,
+.ui-datepicker .ui-datepicker-select-month td a,
+.ui-datepicker .ui-datepicker-select-year td span,
+.ui-datepicker .ui-datepicker-select-year td a  {
+	font-size: 1.5em;
+	text-align: center;
+}
+.ui-datepicker .ui-datepicker-select-year td.outoffocus {
+	opacity: 0.5;
+}
+.ui-datepicker .ui-datepicker-prev { left: 15px;cursor: pointer;  }
+.ui-datepicker .ui-datepicker-next { right: 15px;cursor: pointer;  }
+.ui-datepicker .ui-datepicker-header { height: 40px  }
+.ui-widget.ui-widget-content { width: 300px;padding:5px 8px;border-radius: 0   }
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
+	border-color: #fff;background: #fff;font-size: 14px;padding: .6em 0.5em;color:#454545;text-align: center; 
+}
+.ui-datepicker-today a.ui-state-active, .ui-datepicker-current-day a.ui-state-active{  background-color:rgba(159,121,82,1);   }
+.ui-state-default:hover { background-color:rgba(159,121,82,0.6);color:#fff;   }
+.ui-widget-header {  font-size: 18px;font-weight: normal;line-height: 40px;background: transparent;border-width: 0;border-radius: 0;   }
+.ui-datepicker th {  border-bottom:1px #9f7952 solid;color:#9f7952; font-weight: normal;font-size: 14px }
+
+.ui-datepicker-prev:hover, .ui-datepicker-next:hover { border-width:0 ;background: transparent;  }
+.ui-datepicker-prev:before, .ui-datepicker-next:before { content: "";position:absolute;top:50%;left:50%;transform: translate3d(-50%,-50%,0);width: 8px;height: 16px;vertical-align: middle;background:url(../images/icon_bg.png) no-repeat -81px 0;   }
+.ui-icon {display: none;}
+.ui-datepicker-next:before {background-position: -95px 0}
 
 
 /* tab */

src/main/webapp/ux/pc/css/layout.css

@@ -112,7 +112,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 .depth_menu.brand .head_category .menu .row ul li {margin-left:4px; width:182px;}
 .depth_menu.brand .head_category .menu .row ul li:first-child {margin-left:0}
 .depth_menu.brand .head_category .menu .row ul li a {position:relative; display:table-cell; width:182px; height:80px; text-align:center; vertical-align:middle;}
-.depth_menu.brand .head_category .menu .row ul li a img {display:inline-block; z-index:1; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
+.depth_menu.brand .head_category .menu .row ul li a img {display:inline-block; width: 74%; z-index:1; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
 .depth_menu.brand .head_category .menu .row ul li a span {display:none; position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; padding:10px; box-sizing:border-box; border:1px solid #222; background:#fff; color:#222; font-size:18px; font-weight:500; text-align:center; z-index:2;}
 .depth_menu.brand .head_category .menu .row ul li a span em {position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%);}
 .depth_menu.brand .head_category .menu .row ul li a:hover span,
@@ -2613,7 +2613,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.pd_detail .thumb img,
 	.pd_detail .thumb video {position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%) ; z-index:2;}
 	.pd_detail .movbox {position: relative;height: 0;padding-top: 100%;padding-bottom:50.25%;overflow: hidden;transition: all 300ms ease;transform: scale(1);}
-	.pd_detail .movbox iframe{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 1;}
+	.pd_detail .movbox iframe{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 1;pointer-events:none;}
 	.pd_detail .btn_popup {display:inline-block; padding:0px; box-sizing:border-box;}
 	.pd_detail .btn_popup span {color:#888; font-size:12px; font-weight:200; border-bottom:1px solid #888; /*vertical-align:top;*/}
 
@@ -3058,6 +3058,11 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 		.pd_desc_wrap .item_descrp .area_option .opt_wrap.absbottom {position:relative; top:auto; bottom:auto; right:auto;}
 	}
 
+	.pd_desc_wrap .btn_box .ui_row {margin-bottom: 0;}
+	.pd_desc_wrap .btn_box .ui_row [class^='ui_col_']:first-child {margin-right: 0;}
+	.pd_desc_wrap .btn_box .ui_row [class^='ui_col_']:last-child {margin-left: 0;}
+	.pd_desc_wrap .btn_box .btn {height:60px; font-size:18px; font-weight:300;}
+	.pd_desc_wrap .btn_box .btn:disabled{background:#aaa; border-color:#aaa; opacity:1;}
 
 	/* pd_popup */
 	.modal.pd_pop a.close-modal:last-child {display: none;}
@@ -3445,6 +3450,11 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 		.full_pop.pd_descrp_pop .full_pop_fix_r {padding-left:20px; padding-right:20px;}
 	}
 
+	.full_pop.pd_descrp_pop .btn_box .ui_row {margin-bottom: 0;}
+	.full_pop.pd_descrp_pop .btn_box .ui_row [class^='ui_col_']:first-child {margin-right: 0;}
+	.full_pop.pd_descrp_pop .btn_box .ui_row [class^='ui_col_']:last-child {margin-left: 0;}
+	.full_pop.pd_descrp_pop .btn_box .btn {height:60px; font-size:18px; font-weight:300;}
+	.full_pop.pd_descrp_pop .btn_box .btn:disabled{background:#aaa; border-color:#aaa; opacity:1;}
 
 	/* pd_pop > 상품문의 페이지 */
 	.pd_qnalist_pop {}
@@ -3757,7 +3767,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.br_sch_result .brand_banner_list ul {margin-top:-20px;}
 	.br_sch_result .brand_banner_list ul li {float:left; width:calc((100% - 140.1px)/8); margin-left:20px; margin-top:20px; background:#f5f5f5;}
 	.br_sch_result .brand_banner_list ul li:nth-child(8n - 7) {margin-left:0;}
-	.br_sch_result .brand_banner_list ul li a {display:block; position:relative; width:100%; height:0; padding-bottom:70.244%; background-repeat:no-repeat; background-position:50% 50%; box-sizing:border-box;}
+	.br_sch_result .brand_banner_list ul li a {display:block; position:relative; width:100%; height:0; padding-bottom:70.244%; background-repeat:no-repeat; background-position:50% 50%; box-sizing:border-box; background-size:80%;}
 	.br_sch_result .brand_banner_list ul li a span {display:none; position:absolute; top:0%; left:0%; width:100%; height:100%; background:#f5f5f5; border:1px solid #222; z-index:1;}
 	.br_sch_result .brand_banner_list ul li a span em {position:absolute;  top:50%; left:0%; width:100%; padding:10px; transform:translateY(-50%); color:#222; font-size:20px; font-weight:300; text-align:center; word-break:break-word; box-sizing:border-box;}
 	.br_sch_result .brand_banner_list ul li a:hover span,

src/main/webapp/ux/pc/css/main.css

@@ -415,14 +415,14 @@
 .main .wrap .content.main_pick {}
 .main_pick .cont_head {padding-bottom:60px;}
 .main_pick .cont_body {padding:0;position:relative;}
-.main_pick .cont_body .post-pick-nav {width:1250px; height:52px; background:#ffffff;margin:0 auto; cursor:pointer; padding:0 20px;}
+.main_pick .cont_body .post-pick-nav {width:1250px; height:auto; background:#ffffff;margin:0 auto; cursor:pointer; padding:0 20px;}
 .main_pick .post-pick-nav .swiper-button-next, 
 .main_pick .post-pick-nav .swiper-button-prev {position:absolute; top:50%; transform:translateY(-50%); width:13px; height:24px; margin:0; background-image:url('/images/pc/ico_arr_sm.png');}
 .main_pick .post-pick-nav .swiper-button-prev {left:0;}
 .main_pick .post-pick-nav .swiper-button-next {right:0;}
-.main_pick .post-pick-nav .swiper-slide{height:auto; text-align:center; cursor:pointer; /* border-bottom:2px solid transparent; */}
-.main_pick .post-pick-nav .swiper-slide img {opacity:0.4;}
-.main_pick .post-pick-nav .swiper-slide.swiper-slide-thumb-active img{opacity:1;}
+.main_pick .post-pick-nav .swiper-slide{width:auto; height:auto; text-align:center; cursor:pointer; /* border-bottom:2px solid transparent; */}
+.main_pick .post-pick-nav .swiper-slide img {opacity:0.2; width: 100%; height:auto;}
+.main_pick .post-pick-nav .swiper-slide.swiper-slide-thumb-active img{opacity:1; }
 .main_pick .post-pick-for {margin-top:60px; box-sizing:border-box; border:1px solid #dddddd;}
 .main_pick .post-pick-for::after {content:'';display:block; clear:both;}
 .main_pick .post-pick-for .pick_look {float:left; width:38.2022%; background:#888888;}

src/main/webapp/ux/pc/css/mcxdialog_ui.css

@@ -0,0 +1,331 @@
+/**
+ * Mcx Dialog Mobile v0.1.0
+ * Copyright (C) 2018 mcx
+ * https://github.com/code-mcx/mcx-dialog-mobile
+ */
+.dialog-mobile-bg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 19;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.3);
+	-ms-transform: translate3d(0, 0, 0);
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+/*alert confirm*/
+.dialog-mobile {
+	padding: 0 40px 40px 40px;
+	text-align:center;
+	position: fixed;
+	top: 50%;
+	left: 0;
+	z-index: 20;
+	min-width:200px;
+	background-color: #FFFFFF;
+	border-radius: 0px;
+	-ms-transform: translate3d(0, 0, 0);
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+.dialog-mobile .dialog-title {
+    padding: 0.8em 1em 0.5em;
+    text-align: center;
+    color: #333333;
+	font-size: 18px;
+    font-weight: 500;
+    border-radius: 5px 5px 0 0;
+}
+.dialog-mobile .dialog-content {
+	position: relative;
+	padding:50px 0 40px 0;
+	line-height: 2em;
+	text-align: left;
+	color: #000;
+	font-size:15px;
+	text-align:center;
+}
+.dialog-mobile .dialog-content em {
+	color:#df6400
+}
+.dialog-mobile .dialog-button,
+.dialog-mobile .dialog-sure-button,
+.dialog-mobile .dialog-cancel-button {
+	display:inline-block;
+	position: relative;
+	margin:0 5px;
+	padding:0 30px;
+	min-width: 70px;
+	height: 38px;
+	line-height: 38px;
+	text-align: center;
+	font-size:14px;
+	cursor:pointer;
+	border-radius:0px;
+}
+.dialog-mobile .dialog-button{
+	color: #fff;
+	background:#000;
+	border:1px solid #000;
+	min-width:100px;
+}
+.dialog-mobile .dialog-cancel-button {
+	color: #000;
+	background: #fff;
+	border:1px solid #999;
+	min-width:100px;
+}
+.dialog-mobile .dialog-sure-button{
+	color: #fff;
+	background:#000;
+	border:1px solid #000;
+	min-width:100px;
+}
+.dialog-mobile button[i='1']{
+	color: #000 !important;
+	background:#fff !important;
+	border:1px solid #777;
+	min-width:100px;
+}
+
+/* 닫기 아이콘 */
+.dialog-close-btn {
+	position:absolute;
+	top:0;
+	right:0;
+	padding:20px;
+	width: 17px;
+	height: 17px;
+	cursor:pointer;
+	background:url('/image/btn_top_close.png') no-repeat 50% 50%;
+}
+
+/*bottom dialog*/
+.dialog-mobile-bottom {
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	z-index: 10001;
+	width: 100%;
+	color: #333333;
+	background-color: #EEEEEE;
+}
+.dialog-mobile-bottom .bottom-btn-item {
+	text-align: center;
+}
+.bottom-btn-item .dialog-item-btn {
+	background: #FFFFFF;
+	padding: 0.5em 0;
+	border-bottom: 1px solid #EEEEEE;
+}
+.bottom-btn-item .dialog-item-btn:last-child {
+	border-bottom: none;
+}
+.dialog-mobile-bottom .dialog-cancel-btn {
+	margin-top: 0.6em;
+	text-align: center;
+	background: #FFFFFF;
+	padding: 0.5em 0;
+}
+/*toast*/
+.dialog-mobile-toast {
+	position: fixed;
+	bottom: 5em;
+}
+.dialog-mobile-toast .toast-content {
+	padding: 0.5em 1em;
+	color: #FFFFFF;
+	border-radius: 2px;
+	background-color: #333333;
+}
+/*loading*/
+.mobile-loading-bg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 10000;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.3);
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+.mobile-loading {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 10001;
+	min-width: 2em;
+	min-height: 2em;
+	padding: 0.8em 1.6em;
+	text-align: center;
+	border-radius: 2px;
+	color: #FFFFF0;
+	background-color: #0A0A0A;
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+/*animation*/
+.animation-zoom-in, .animation-zoom-out,
+.animation-bottom-in, .animation-bottom-out,
+.animation-bg-fadeIn {
+	-webkit-animation-duration: 0.3s;
+	-webkit-animation-fill-mode: both;
+	animation-duration: 0.3s;
+	animation-fill-mode: both;
+}
+.animation-fade-in, .animation-fade-out {
+	-webkit-animation-duration: 1s;
+	-webkit-animation-timing-function: ease-out;
+	-webkit-animation-fill-mode: both;
+	animation-duration: 1s;
+	animation-timing-function: ease-out;
+	animation-fill-mode: both;
+}
+.animation-zoom-in {
+	-webkit-animation-name: zoomIn;
+	animation-name: zoomIn;
+}
+.animation-zoom-out {
+	-webkit-animation-name: zoomOut;
+	animation-name: zoomOut;
+}
+.animation-fade-in {
+	-webkit-animation-name: fadeIn;
+	animation-name: fadeIn;
+}
+.animation-fade-out {
+	-webkit-animation-name: fadeOut;
+	animation-name: fadeOut;
+}
+.animation-bottom-in {
+	-webkit-animation-name: bottomIn;
+	animation-name: bottomIn;
+}
+.animation-bottom-out {
+	-webkit-animation-name: bottomOut;
+	animation-name: bottomOut;
+}
+.animation-bg-fadeIn {
+	-webkit-animation-name: fadeIn;
+	animation-name: fadeIn;
+}
+
+@-webkit-keyframes zoomIn {
+	from{
+		opacity: 0;
+		-webkit-transform: scale(0, 0);
+	}
+	to{
+		opacity: 1;
+		-webkit-transform: scale(1, 1);
+	}
+}
+@-webkit-keyframes zoomOut {
+	from{
+		opacity: 1;
+		-webkit-transform: scale(1, 1);
+	}
+	90%{
+		-webkit-transform: scale(0.3, 0.3);
+	}
+	to{
+		opacity: 0;
+		-webkit-transform: scale(0, 0);
+	}
+}
+@keyframes zoomIn {
+	from{
+		opacity: 0;
+		transform: scale(0, 0);
+	}
+	to{
+		opacity: 1;
+		transform: scale(1, 1);
+	}
+}
+@keyframes zoomOut {
+	from{
+		opacity: 1;
+		transform: scale(1, 1);
+	}
+	90%{
+		transform: scale(0.3, 0.3);
+	}
+	to{
+		opacity: 0;
+		transform: scale(0, 0);
+	}
+}
+@-webkit-keyframes fadeIn {
+	from{
+		opacity: 0;
+	}
+	to{
+		opacity: 1;
+	}
+}
+@-webkit-keyframes fadeOut {
+	from{
+		opacity: 1;
+	}
+	30%{
+		opacity: 0.3;
+	}
+	to{
+		opacity: 0;
+	}
+}
+@keyframes fadeIn {
+	from{
+		opacity: 0;
+	}
+	to{
+		opacity: 1;
+	}
+}
+@keyframes fadeOut {
+	from{
+		opacity: 1;
+	}
+	30%{
+		opacity: 0.3;
+	}
+	to{
+		opacity: 0;
+	}
+}
+@-webkit-keyframes bottomIn {
+	from{
+		bottom: -1000px;
+	}
+	to{
+		bottom: 0;
+	}
+}
+@-webkit-keyframes bottomOut {
+	from{
+		bottom: 0;
+	}
+	to{
+		bottom: -1000px;
+	}
+}
+@keyframes bottomIn {
+	from{
+		bottom: -1000px;
+	}
+	to{
+		bottom: 0;
+	}
+}
+@keyframes bottomOut {
+	from{
+		bottom: 0;
+	}
+	to{
+		bottom: -1000px;
+	}
+}

src/main/webapp/ux/pc/js/common-ui.js

@@ -84,10 +84,19 @@ $(document).ready(function() {
 				var fileReader = new FileReader();
 				fileReader.onload = (function(e) {
 					var file = e.target;
-					$("<span class=\"pics\">" +
+					if(file.result.indexOf("video/mp4") > -1){
+						$("<span class=\"pics\">" +
+						"<ifram class=\"picsThumbs\" src=\"" + e.target.result + "\" />" +
+						"<br/><span class=\"removes\">Removes image</span>" +
+						"</span>").insertAfter("#fileAdd");
+					}else{
+						$("<span class=\"pics\">" +
 						"<img class=\"picsThumbs\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
 						"<br/><span class=\"removes\">Removes image</span>" +
 						"</span>").insertAfter("#fileAdd");
+					}
+					
+					
 					$(".removes").click(function(){
 						$(this).parent(".pics").remove();
 					});