[모바일] 몰메인

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

@@ -98,12 +98,12 @@ public class TsfDisplayController extends TsfBaseController {
 			login.setCustNo(0);
 		}
 
-		String mainCateNo = "";
-		if (device.isMobile() || "Y".equals(paramMap.get("mobileYn"))) {
-			mainCateNo = "1720";
-		} else {
-			mainCateNo = "1700";
-		}
+		String 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);

src/main/webapp/WEB-INF/views/mob/display/MallMainFormMob.html

@@ -20,17 +20,1867 @@
 
 <th:block layout:fragment="content">
 
-	<h1>Mall Main ...............</h1>
+	<section class="main">
+	<th:block th:if="${mainLayoutList}" th:each="mainData, mainStat : ${mainLayoutList}" th:with="contentsLoc=${#strings.replace(mainData.contentsLoc,'SMM','')}">
+		<th:block th:if="${mainData.ContentsList != null and !mainData.ContentsList.empty}">
+			<th:block th:if="${contentsLoc=='001'}">
+				<!-- 1. 비주얼 슬라이드 -->
+				<div class="inner wide">
+					<div class="main_visual">
+						<div class="swiper-container post-visual">
+							<div class="swiper-wrapper">
+								<th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
+									<div class="swiper-slide">
+										<a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
+											<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
+											<div class="txtWrap">
+												<dl th:class="${ContentsData.strVar7=='BLACK'?'':'w'}">
+													<dt th:if="${ContentsData.strVar5=='P'}" th:text="${ContentsData.planBrandGroupNm}">NBA</dt>
+													<dt th:if="${ContentsData.strVar5!='P'}">EVENT</dt>
+													<dd th:value="${ContentsData.strTitle1}">2020 FALL</dd>
+<!--													<dd>NEW ARRIVAL</dd>-->
+													<dd class="txt_xs" th:text="${ContentsData.subText1}">나만의 가을 스타일 찾기</dd>
+												</dl>
+											</div>
+										</a>
+									</div>
+								</th:block>
+							</div>
+							<!-- Add Pagination -->
+							<div class="swiper-pagination"></div>
+						</div>
+					</div>
+				</div>
+			</th:block>
+
+			<th:block th:if="${contentsLoc=='002'}">
+				<!-- 2. 스타일리포트 -->
+				<div class="inner bg_gray">
+					<div class="main_stylereport">
+						<th:block th:if="${mainData.contentsTitle != null and !mainData.contentsTitle.empty}">
+						<div class="titWrap">
+							<h2 th:text="${mainData.contentsTitle}"></h2>
+						</div>
+						</th:block>
+						<div class="swiper-container post-stylereport">
+							<div class="swiper-wrapper">
+								<th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
+								<div class="swiper-slide">
+									<a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
+										<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
+										<dl>
+											<dt th:text="${ContentsData.strTitle1}"></dt>
+											<dd th:text="${ContentsData.subText1}"></dd>
+<!--											<dd>준비한 아우터 픽을 만나보자</dd>-->
+										</dl>
+									</a>
+								</div>
+								</th:block>
+							</div>
+							<!-- Add Pagination -->
+							<div class="swiper-pagination"></div>
+						</div>
+					</div>
+				</div>
+			</th:block>
+
+			<th:block th:if="${contentsLoc=='003'}">
+				<!-- 3. 트렌디한 신상아이템 -->
+				<div class="inner" th:if="${mainData.goodsList != null}">
+					<div class="main_trendy">
+						<th:block th:if="${mainData.contentsTitle != null and !mainData.contentsTitle.empty}">
+							<div class="titWrap">
+								<h2 th:text="${mainData.contentsTitle}"></h2>
+							</div>
+						</th:block>
+
+						<div class="swiper-container post-trendy">
+							<div class="swiper-wrapper">
+							<th:block th:each="goodsData, goodsStat : ${mainData.goodsList}">
+								<th:block th:if="${(goodsStat.index%4)==0 or goodsStat.first}">
+
+										<div class="swiper-slide">
+								</th:block>
+											<div class="item_prod">
+												<div class="item_state">
+													<button type="button" class="itemLike" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, ithrCd='', contentsLoc='SMM003', planDtlSq=''">관심상품 추가</button>
+													<a href="javascript:void(0)" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM003');">
+														<div class=" itemPic">
+															<!-- <img alt="BLUE-a" class=" pd_img" src="/images/mo/thumb/main_trendy05.jpg">  onerror="img_check(this)"-->
+															<img alt="BLUE-a" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)"  >
+														</div>
+														<p class="itemBrand" th:text="${goodsData.brandGroupNm}">BRAND NAME</p>
+														<div class=" itemName" th:text="${goodsData.goodsFullNm}">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>
+														<p class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">488,000</p>
+														<div class="itemComment" th:text="${goodsData.goodsTnm}">#주문 폭주 상품</div>
+													</a>
+												</div>
+											</div>
+								<th:block th:if="${(goodsStat.index%4)== 3 or goodsStat.last}">
+									<th:block th:utext="'</div>'"></th:block>
+								</th:block>
+							</th:block>
+							</div>
+<!--							<div class="swiper-wrapper">-->
+<!--								<div class="swiper-slide">-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													&lt;!&ndash; <img alt="BLUE-a" class=" pd_img" src="/images/mo/thumb/main_trendy05.jpg">  onerror="img_check(this)"&ndash;&gt;-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/thumb/main_trendy05.jpg" onerror="noneImg(this)"  >-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/thumb/main_trendy05.jpg" onerror="noneImg(this)" >-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/thumb/main_trendy05.jpg">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/thumb/main_trendy05.jpg">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--								</div>-->
+
+<!--								<div class="swiper-slide">-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/br_main03.png">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/br_main03.png">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/br_main03.png">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/br_main03.png">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+
+<!--								</div>-->
+
+<!--								<div class="swiper-slide">-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/thumb/main_trendy05.jpg">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/thumb/main_trendy05.jpg">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/thumb/main_trendy05.jpg">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/thumb/main_trendy05.jpg">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--								</div>-->
+
+<!--								<div class="swiper-slide">-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/br_main03.png">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/br_main03.png">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/br_main03.png">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+<!--									<div class="item_prod">-->
+<!--										<div class="item_state">-->
+<!--											<button type="button" class="itemLike">관심상품 추가</button>-->
+<!--											<a href="javascript:void(0)" class="itemLink">-->
+<!--												<div class=" itemPic">-->
+<!--													<img alt="BLUE-a" class=" pd_img" src="/images/mo/br_main03.png">-->
+<!--												</div>-->
+<!--												<p class="itemBrand">BRAND NAME</p>-->
+
+<!--												<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>-->
+<!--												<p class="itemPrice">488,000</p>-->
+<!--												<div class="itemComment">#주문 폭주 상품</div>-->
+<!--											</a>-->
+<!--										</div>-->
+<!--									</div>-->
+
+<!--								</div>-->
+<!--							</div>-->
+							<!-- Add Pagination -->
+							<div class="swiper-pagination"></div>
+						</div>
+					</div>
+				</div>
+			</th:block>
+
+		</th:block>
+
+
+
+
+	</th:block>
+
+
+
+		<div class="inner">
+			<div class="main_it">
+				<div class="titWrap">
+					<a href="javascript:void(0)">
+						<h2>가장 사랑받은 잇 아이템</h2>
+					</a>
+				</div>
+
+				<div class="inner_head">
+					<ul class="it_nav">
+						<li><button class="btn btn_link active" data-tab="it1"><span>여성</span></button></li>
+						<li><button class="btn btn_link" data-tab="it2"><span>남성</span></button></li>
+						<li><button class="btn btn_link" data-tab="it3"><span>유아동</span></button></li>
+						<li><button class="btn btn_link" data-tab="it4"><span>골프</span></button></li>
+						<li><button class="btn btn_link" data-tab="it5"><span>라이프</span></button></li>
+					</ul>
+				</div>
+				<div class="inner_body">
+					<div class="swiper-container post-it it_item active" id="it1">
+						<div class="swiper-wrapper" >
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="shape ranker">
+												<span><em class="number">1</em></span>
+											</div>
+											<div class="itemPic">
+												<img alt="" class=" pd_img"
+													 src="/images/mo/thumb/main_itItems01.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="shape">
+												<span><em class="number">2</em></span>
+											</div>
+											<div class="itemPic">
+												<img alt="" class=" pd_img"
+													 src="/images/mo/thumb/main_itItems02.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="shape">
+												<span><em class="number">3</em></span>
+											</div>
+											<div class="itemPic">
+												<img alt="" class=" pd_img"
+													 src="/images/mo/thumb/main_itItems03.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="shape">
+												<span><em class="number">4</em></span>
+											</div>
+											<div class="itemPic">
+												<img alt="" class=" pd_img"
+													 src="/images/mo/thumb/main_itItems04.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="shape">
+												<span><em class="number">5</em></span>
+											</div>
+											<div class="itemPic">
+												<img alt="" class=" pd_img"
+													 src="/images/mo/thumb/main_itItems02.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="swiper-container post-it it_item" id="it2">
+						<div class="swiper-wrapper" >
+							<div class="swiper-slide ">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="shape ranker">
+												<span><em class="number">1</em></span>
+											</div>
+											<div class="itemPic">
+												<img alt="" class=" pd_img"
+													 src="/images/mo/thumb/main_itItems01.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">22222 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide ">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="shape">
+												<span><em class="number">2</em></span>
+											</div>
+											<div class="itemPic">
+												<img alt="" class=" pd_img"
+													 src="/images/mo/thumb/main_itItems02.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">22222 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="shape">
+												<span><em class="number">3</em></span>
+											</div>
+											<div class="itemPic">
+												<img alt="" class=" pd_img"
+													 src="/images/mo/thumb/main_itItems03.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">22222 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="shape">
+												<span><em class="number">4</em></span>
+											</div>
+											<div class="itemPic">
+												<img alt="" class=" pd_img"
+													 src="/images/mo/thumb/main_itItems04.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">22222 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="shape">
+												<span><em class="number">5</em></span>
+											</div>
+											<div class="itemPic">
+												<img alt="" class=" pd_img"
+													 src="/images/mo/thumb/main_itItems05.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">22222 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+
+
+
+
+
+
+		<div class="inner bg_dark">
+			<div class="main_deal">
+				<div class="titWrap">
+					<a href="javascript:void(0)">
+						<h2>오늘만 이 가격에 만나요</h2>
+					</a>
+					<div class="count">
+						<span class="count_tit">남은 시간</span>
+						<div class="hotdealcount" id="countdown">
+							<div id="tiles"></div>
+						</div>
+					</div>
+				</div>
+
+				<div class="swiper-container post-deal">
+					<div class="swiper-wrapper" >
+						<div class="swiper-slide">
+							<div class="item_prod">
+								<div class="item_state">
+									<button type="button" class="itemLike">관심상품 추가</button>
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img"
+												 src="/images/mo/thumb/tmp_cartColor1.jpg">
+										</div>
+										<p class="itemBrand">TBJ</p>
+										<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">
+											<span class="itemPrice_original">89,000</span>
+											80,100
+											<span class=" itemPercent">10%</span>
+										</p>
+										<div class="itemComment"># 가을 느낌 물씬!</div>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="item_prod">
+								<div class="item_state">
+									<button type="button" class="itemLike">관심상품 추가</button>
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img"
+												 src="/images/mo/thumb/tmp_cartColor1.jpg">
+										</div>
+										<p class="itemBrand">TBJ</p>
+										<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">
+											<span class="itemPrice_original">89,000</span>
+											80,100
+											<span class=" itemPercent">10%</span>
+										</p>
+										<div class="itemComment"># 가을 느낌 물씬!</div>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="item_prod">
+								<div class="item_state">
+									<button type="button" class="itemLike">관심상품 추가</button>
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img"
+												 src="/images/mo/thumb/tmp_cartColor1.jpg">
+										</div>
+										<p class="itemBrand">TBJ</p>
+										<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">
+											<span class="itemPrice_original">89,000</span>
+											80,100
+											<span class=" itemPercent">10%</span>
+										</p>
+										<div class="itemComment"># 가을 느낌 물씬!</div>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="item_prod">
+								<div class="item_state">
+									<button type="button" class="itemLike">관심상품 추가</button>
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img"
+												 src="/images/mo/thumb/tmp_cartColor1.jpg">
+										</div>
+										<p class="itemBrand">TBJ</p>
+										<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">
+											<span class="itemPrice_original">89,000</span>
+											80,100
+											<span class=" itemPercent">10%</span>
+										</p>
+										<div class="itemComment"># 가을 느낌 물씬!</div>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="item_prod">
+								<div class="item_state">
+									<button type="button" class="itemLike">관심상품 추가</button>
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img"
+												 src="/images/mo/thumb/tmp_cartColor1.jpg">
+										</div>
+										<p class="itemBrand">TBJ</p>
+										<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">
+											<span class="itemPrice_original">89,000</span>
+											80,100
+											<span class=" itemPercent">10%</span>
+										</p>
+										<div class="itemComment"># 가을 느낌 물씬!</div>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="item_prod">
+								<div class="item_state">
+									<button type="button" class="itemLike">관심상품 추가</button>
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img"
+												 src="/images/mo/thumb/tmp_cartColor1.jpg">
+										</div>
+										<p class="itemBrand">TBJ</p>
+										<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">
+											<span class="itemPrice_original">89,000</span>
+											80,100
+											<span class=" itemPercent">10%</span>
+										</p>
+										<div class="itemComment"># 가을 느낌 물씬!</div>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="item_prod">
+								<div class="item_state">
+									<button type="button" class="itemLike">관심상품 추가</button>
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img"
+												 src="/images/mo/thumb/tmp_cartColor1.jpg">
+										</div>
+										<p class="itemBrand">TBJ</p>
+										<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">
+											<span class="itemPrice_original">89,000</span>
+											80,100
+											<span class=" itemPercent">10%</span>
+										</p>
+										<div class="itemComment"># 가을 느낌 물씬!</div>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="item_prod">
+								<div class="item_state">
+									<button type="button" class="itemLike">관심상품 추가</button>
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img"
+												 src="/images/mo/thumb/tmp_cartColor1.jpg">
+										</div>
+										<p class="itemBrand">TBJ</p>
+										<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">
+											<span class="itemPrice_original">89,000</span>
+											80,100
+											<span class=" itemPercent">10%</span>
+										</p>
+										<div class="itemComment"># 가을 느낌 물씬!</div>
+									</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+
+		<div class="inner wide">
+			<div class="main_2stage">
+				<div class="swiper-container post-bnnEvent">
+					<div class="swiper-wrapper">
+						<div class="swiper-slide">
+							<a href="javascript:void(0)">
+								<div class="bnnbox" style="background:#e3e7ea;">
+									<img src="/images/pc/thumb/bnn_2stage2_wide.jpg" alt="">
+								</div>
+							</a>
+						</div>
+						<div class="swiper-slide">
+							<a href="javascript:void(0)">
+								<div class="bnnbox" style="background:#eef1f3;">
+									<img src="/images/pc/thumb/bnn_2stage1_wide.jpg" alt="">
+								</div>
+							</a>
+						</div>
+					</div>
+					<!-- Add Pagination -->
+					<div class="swiper-pagination"></div>
+				</div>
+			</div>
+		</div>
+
+
+
+		<div class="inner">
+			<div class="main_pick" >
+				<div class="titWrap">
+					<h2>브랜드 PICK</h2>
+				</div>
+
+				<div class="inner_head">
+					<div class="swiper-container pick-head"> <!--(pick-head)슬라이드 키클래스-->
+						<ul class="swiper-wrapper">
+							<li class="swiper-slide on"> <!-- li.on / li .btn.active : 메뉴 표시 -->
+								<button class="btn btn_link " data-tab="pick1"><span>BUKAROO</span></button>
+							</li>
+							<li class="swiper-slide">
+								<button class="btn btn_link " data-tab="pick2"><span>ANDEW</span></button>
+							</li>
+							<li class="swiper-slide">
+								<button class="btn btn_link " data-tab="pick3"><span>TBJ</span></button>
+							</li>
+							<li class="swiper-slide">
+								<button class="btn btn_link " data-tab="pick4"><span>FRJ</span></button>
+							</li>
+							<li class="swiper-slide">
+								<button class="btn btn_link " data-tab="pick5"><span>모이몰른</span></button>
+							</li>
+							<li class="swiper-slide ">
+								<button class="btn btn_link " data-tab="pick6"><span>BUKAROO</span></button>
+							</li>
+							<li class="swiper-slide">
+								<button class="btn btn_link " data-tab="pick7"><span>ANDEW</span></button>
+							</li>
+							<li class="swiper-slide">
+								<button class="btn btn_link " data-tab="pick8"><span>모이몰른</span></button>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="inner_body">
+					<!-- 브랜드컨텐츠1 -->
+					<div class="pick-cont active" id="pick1"> <!-- .pick-cont.active : 컨텐츠 표시 -->
+						<!-- 210329 : 브랜드 pick 슬라이드 추가 -->
+						<div class="swiper-container">
+							<div class="swiper-wrapper">
+								<div class="swiper-slide">
+									<a href="javascript:void(0)"><!-- 해당 배너 상세 이동 -->
+										<div class="txtWrap">
+											<p>BUCKAROO<br>2020 가을신상 오픈</p>
+											<span>2020 FALL/WINTER 신상살펴보기</span>
+										</div>
+										<img src="/images/mo/thumb/main_pickImg01.jpg" alt="">
+									</a>
+								</div>
+								<div class="swiper-slide">
+									<a href="javascript:void(0)"><!-- 해당 배너 상세 이동 -->
+										<div class="txtWrap">
+											<p>BUCKAROO<br>2020 가을신상 오픈</p>
+											<span>2020 FALL/WINTER 신상살펴보기</span>
+										</div>
+										<img src="/images/mo/thumb/main_pickImg01.jpg" alt="">
+									</a>
+								</div>
+							</div>
+						</div>
+						<!-- //210329 : 브랜드 pick 슬라이드 추가 -->
+						<!-- 210329 : 브랜드 pick 상품 swiper 제거 -->
+						<div class="pick-post"><!-- (pick-post)슬라이드 키클래스(해당 배너 관련 상품) -->
+							<div class="item_prod">
+								<div class="item_state">
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img" src="/images/mo/thumb/main_pickImg02.jpg">
+										</div>
+										<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">35,900</p>
+									</a>
+								</div>
+							</div>
+							<div class="item_prod">
+								<div class="item_state">
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img" src="/images/mo/thumb/main_pickImg03.jpg">
+										</div>
+										<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</a>
+								</div>
+							</div>
+							<div class="item_prod">
+								<div class="item_state">
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img" src="/images/mo/thumb/main_pickImg04.jpg">
+										</div>
+										<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</a>
+								</div>
+							</div>
+						</div> <!--pick-post 종료 -->
+						<!-- 210329 : 브랜드 pick 상품 swiper 제거 -->
+					</div>
+					<!-- 브랜드컨텐츠1종료 -->
+					<!-- 브랜드컨텐츠2 -->
+					<div class="pick-cont" id="pick2">
+						<!-- 210329 : 브랜드 pick 슬라이드 추가 -->
+						<div class="swiper-container">
+							<div class="swiper-wrapper">
+								<div class="swiper-slide">
+									<a href="javascript:void(0)"><!-- 해당 배너 상세 이동 -->
+										<div class="txtWrap">
+											<p>단 28시간 퓨어 아우터<br>최대 80%세일</p>
+											<span>신상 아우터 7만원~</span>
+										</div>
+										<img src="/images/mo/br_special.png" alt="">
+									</a>
+								</div>
+								<div class="swiper-slide">
+									<a href="javascript:void(0)"><!-- 해당 배너 상세 이동 -->
+										<div class="txtWrap">
+											<p>단 28시간 퓨어 아우터<br>최대 80%세일</p>
+											<span>신상 아우터 7만원~</span>
+										</div>
+										<img src="/images/mo/br_special.png" alt="">
+									</a>
+								</div>
+							</div>
+						</div>
+						<!-- //210329 : 브랜드 pick 슬라이드 추가 -->
+						<!-- 210329 : 브랜드 pick 상품 swiper 제거 -->
+						<div class="pick-post"><!-- (pick-post)해당 배너 관련 상품 슬라이드 -->
+							<div class="item_prod">
+								<div class="item_state">
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img" src="/images/mo/thumb/main_pickImg04.jpg">
+										</div>
+										<div class="itemName">22222 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</a>
+								</div>
+							</div>
+							<div class="item_prod">
+								<div class="item_state">
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img" src="/images/mo/thumb/main_pickImg03.jpg">
+										</div>
+										<div class="itemName">22222 남성 로고 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</a>
+								</div>
+							</div>
+							<div class="item_prod">
+								<div class="item_state">
+									<a href="javascript:void(0)" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class=" pd_img" src="/images/mo/thumb/main_pickImg02.jpg">
+										</div>
+										<div class="itemName">22222 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</a>
+								</div>
+							</div>
+						</div> <!--pick-post 종료 -->
+						<!-- //210329 : 브랜드 pick 상품 swiper 제거 -->
+					</div>
+					<!-- 브랜드컨텐츠2종료 -->
+
+					<div class="btn_group_flex">
+						<div>
+							<button class="btn btn_default">다음 브랜드 보기<span></span></button>
+						</div>
+					</div>
+
+				</div>
+			</div>
+		</div>
+
+
+
+		<div class="inner">
+			<div class="main_recomm">
+				<div class="titWrap">
+					<h2>MD가 추천하는 스타일</h2>
+				</div>
+
+				<div class="inner_head">
+					<div class="swiper-container recomm-head"> <!--(recomm-head)슬라이드 키클래스-->
+						<ul class="swiper-wrapper">
+							<li class="swiper-slide "> <!-- li .btn.active : 메뉴 표시 --><!--data-filter 사용 안하시면 제거하셔도 좋습니다-->
+								<button class="btn btn_link active"  data-tab="recomm1" data-filter="tag_warm"><span>따뜻한 무드</span></button>
+							</li>
+							<li class="swiper-slide">
+								<button class="btn btn_link " data-tab="recomm2" data-filter="tag_daily"><span>일상의 데일리룩</span></button>
+							</li>
+							<li class="swiper-slide">
+								<button class="btn btn_link " data-tab="recomm3" data-filter="tag_homeware"><span>집콕 스타일</span></button>
+							</li>
+							<li class="swiper-slide">
+								<button class="btn btn_link " data-tab="recomm4" data-filter="tag_point"><span>포인트 아이템</span></button>
+							</li>
+							<li class="swiper-slide">
+								<button class="btn btn_link " data-tab="recomm5" data-filter="tag_classic"><span>클래식 자켓</span></button>
+							</li>
+						</ul>
+					</div>
+				</div>
+
+				<div class="inner_body">
+					<div class="swiper-container recomm-post recomm_item active" id="recomm1">
+						<div class="swiper-wrapper" >
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class=" pd_img"src="/images/mo/thumb/main_recommItems01.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class=" pd_img"src="/images/mo/thumb/main_recommItems02.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class=" pd_img"src="/images/mo/thumb/main_recommItems03.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class=" pd_img"src="/images/mo/thumb/main_recommItems04.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+						</div>
+						<!-- <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span> -->
+					</div>
+					<div class="swiper-container recomm-post recomm_item" id="recomm2">
+						<div class="swiper-wrapper" >
+							<div class="swiper-slide ">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class=" pd_img" src="/images/mo/thumb/main_recommItems04.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">22222 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide ">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class=" pd_img" src="/images/mo/thumb/main_recommItems03.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">22222 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class=" pd_img" src="/images/mo/thumb/main_recommItems02.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">22222 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+							<div class="swiper-slide">
+								<div class="item_prod">
+									<div class="item_state">
+										<button type="button" class="itemLike">관심상품 추가</button>
+										<a href="javascript:void(0)" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class=" pd_img" src="/images/mo/thumb/main_recommItems01.jpg">
+											</div>
+											<p class="itemBrand">TBJ</p>
+											<div class="itemName">22222 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class=" itemPercent">10%</span>
+											</p>
+											<div class="itemComment"># 가을 느낌 물씬!</div>
+										</a>
+									</div>
+								</div>
+							</div>
+						</div>
+						<!-- <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span> -->
+					</div>
+				</div>
+			</div>
+		</div>
+
+
+		<div class="inner wide">
+			<div class="main_1stage">
+				<div class="swiper-container post-bnnWide">
+					<div class="swiper-wrapper">
+						<div class="swiper-slide">
+							<a href="javascript:void(0)">
+								<div class="bnnbox" style="background:#bdc3c7;">
+									<div class="txtWrap ">
+										<p>TBJ 가을 신상</p>
+										<p>아우터 + 이너 단독세일</p>
+									</div>
+									<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/bnn_1stage.jpg">
+								</div>
+							</a>
+						</div>
+						<div class="swiper-slide">
+							<a href="javascript:void(0)">
+								<div class="bnnbox" style="background:#d0e9e6;">
+									<div class="txtWrap ">
+										<p>TBJ 가을 신상</p>
+										<p>아우터 + 이너 단독세일</p>
+									</div>
+									<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/bnn_1stage02.jpg">
+								</div>
+							</a>
+						</div>
+					</div>
+					<!-- Add Pagination -->
+					<div class="swiper-pagination"></div>
+				</div>
+			</div>
+		</div>
+
+
+
+		<div class="inner wide">
+			<div class="main_foryou">
+				<div class="titWrap">
+					<h2>당신을 위한 제안</h2>
+				</div>
+
+				<div class="swiper-container post-sug">
+					<div class="swiper-wrapper">
+						<div class="swiper-slide">
+							<!-- 폴딩1,2,3,4,5시작 -->
+							<ol class="list_cate">
+								<li class="on">
+									<dl>
+										<dt>
+											<button>
+												<span class="fold_rank">1</span>
+												<span class="fold_txt">모이몰른</span>
+											</button>
+										</dt>
+										<dd>
+											<div class="swiper-container post-sug-items"><!-- (post-sug-items)슬라이드 키클래스(해당 배너 관련 상품) -->
+												<div class="swiper-wrapper">
+													<div class="swiper-slide">
+														<div class="item_prod">
+															<div class="item_state">
+																<a href="javascript:void(0)" class="itemLink">
+																	<div class="itemPic">
+																		<img alt="" class=" pd_img" src="/images/mo/thumb/main_pickImg02.jpg">
+																	</div>
+																	<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+																	<p class="itemPrice">45,900</p>
+																</a>
+															</div>
+														</div>
+													</div>
+													<div class="swiper-slide">
+														<div class="item_prod">
+															<div class="item_state">
+																<a href="javascript:void(0)" class="itemLink">
+																	<div class="itemPic">
+																		<img alt="" class=" pd_img" src="/images/mo/thumb/main_pickImg02.jpg">
+																	</div>
+																	<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+																	<p class="itemPrice">39,900</p>
+																</a>
+															</div>
+														</div>
+													</div>
+													<div class="swiper-slide">
+														<div class="item_prod">
+															<div class="item_state">
+																<a href="javascript:void(0)" class="itemLink">
+																	<div class="itemPic">
+																		<img alt="" class=" pd_img" src="/images/mo/thumb/main_pickImg02.jpg">
+																	</div>
+																	<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+																	<p class="itemPrice">39,900</p>
+																</a>
+															</div>
+														</div>
+													</div>
+													<div class="swiper-slide">
+														<div class="item_prod">
+															<div class="item_state">
+																<a href="javascript:void(0)" class="itemLink">
+																	<div class="itemPic">
+																		<img alt="" class=" pd_img" src="/images/mo/thumb/main_pickImg02.jpg">
+																	</div>
+																	<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+																	<p class="itemPrice">45,900</p>
+																</a>
+															</div>
+														</div>
+													</div>
+													<div class="swiper-slide">
+														<div class="item_prod">
+															<div class="item_state">
+																<a href="javascript:void(0)" class="itemLink">
+																	<div class="itemPic">
+																		<img alt="" class=" pd_img" src="/images/mo/thumb/main_pickImg02.jpg">
+																	</div>
+																	<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+																	<p class="itemPrice">45,900</p>
+																</a>
+															</div>
+														</div>
+													</div>
+													<div class="swiper-slide">
+														<div class="item_prod">
+															<div class="item_state">
+																<a href="javascript:void(0)" class="itemLink">
+																	<div class="itemPic">
+																		<img alt="" class=" pd_img" src="/images/mo/thumb/main_pickImg02.jpg">
+																	</div>
+																	<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+																	<p class="itemPrice">45,900</p>
+																</a>
+															</div>
+														</div>
+													</div>
+													<div class="swiper-slide">
+														<div class="item_prod">
+															<div class="item_state">
+																<a href="javascript:void(0)" class="itemLink">
+																	<div class="itemPic">
+																		<img alt="" class=" pd_img" src="/images/mo/thumb/main_pickImg02.jpg">
+																	</div>
+																	<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+																	<p class="itemPrice">45,900</p>
+																</a>
+															</div>
+														</div>
+													</div>
+													<div class="swiper-slide">
+														<div class="item_prod">
+															<div class="item_state">
+																<a href="javascript:void(0)" class="itemLink">
+																	<div class="itemPic">
+																		<span class="more_txt">더보기</span>
+																	</div>
+																</a>
+															</div>
+														</div>
+													</div>
+												</div>
+											</div>
+										</dd>
+									</dl>
+								</li>
+								<li>
+									<dl>
+										<dt>
+											<button>
+												<span class="fold_rank">2</span>
+												<span class="fold_txt">기모</span>
+											</button>
+										</dt>
+										<dd>
+											기모_슬라이드
+										</dd>
+									</dl>
+								</li>
+								<li>
+									<dl>
+										<dt>
+											<button>
+												<span class="fold_rank">3</span>
+												<span class="fold_txt">겨울 팬츠</span>
+											</button>
+										</dt>
+										<dd>
+											겨울팬츠_슬라이드
+										</dd>
+									</dl>
+								</li>
+								<li>
+									<dl>
+										<dt>
+											<button>
+												<span class="fold_rank">4</span>
+												<span class="fold_txt">TBJ</span>
+											</button>
+										</dt>
+										<dd>
+											TBJ_슬라이드
+										</dd>
+									</dl>
+								</li>
+								<li>
+									<dl>
+										<dt>
+											<button>
+												<span class="fold_rank">5</span>
+												<span class="fold_txt">캔버스 주니어</span>
+											</button>
+										</dt>
+										<dd>
+											캔버스주니어_슬라이드
+										</dd>
+									</dl>
+								</li>
+							</ol>
+							<!-- 폴딩종료 -->
+						</div>
+						<div class="swiper-slide">
+							<!-- 폴딩6,7,8,9,10시작 -->
+							<ol class="list_cate">
+								<li>
+									<dl>
+										<dt>
+											<button>
+												<span class="fold_rank">6</span>
+												<span class="fold_txt">키워드_6</span>
+											</button>
+										</dt>
+										<dd>
+											키워드_6_슬라이드
+										</dd>
+									</dl>
+								</li>
+								<li>
+									<dl>
+										<dt>
+											<button>
+												<span class="fold_rank">7</span>
+												<span class="fold_txt">키워드_7</span>
+											</button>
+										</dt>
+										<dd>
+											키워드_7_슬라이드
+										</dd>
+									</dl>
+								</li>
+								<li>
+									<dl>
+										<dt>
+											<button>
+												<span class="fold_rank">8</span>
+												<span class="fold_txt">키워드_8</span>
+											</button>
+										</dt>
+										<dd>
+											키워드_8_슬라이드
+										</dd>
+									</dl>
+								</li>
+								<li>
+									<dl>
+										<dt>
+											<button>
+												<span class="fold_rank">9</span>
+												<span class="fold_txt">키워드_9</span>
+											</button>
+										</dt>
+										<dd>
+											키워드_9_슬라이드
+										</dd>
+									</dl>
+								</li>
+								<li>
+									<dl>
+										<dt>
+											<button>
+												<span class="fold_rank">10</span>
+												<span class="fold_txt">키워드_10</span>
+											</button>
+										</dt>
+										<dd>
+											키워드_10_슬라이드
+										</dd>
+									</dl>
+								</li>
+							</ol>
+							<!-- 폴딩종료 -->
+						</div>
+					</div>
+					<!-- Add Pagination -->
+					<div class="swiper-pagination"></div>
+				</div>
+			</div>
+		</div>
+
+
+		<div class="inner wide bg_dark">
+			<div class="titWrap">
+				<h2 data-style="unusual">STYLE24 TV</h2>
+			</div>
+			<div class="main_tv" >
+				<div class="swiper-container post-tv">
+					<div class="swiper-wrapper ">
+						<div class="swiper-slide">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/hGjFwebN5ks" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/J7nowE2iTIM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/cRiKrFk7FTM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/hGjFwebN5ks" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/J7nowE2iTIM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/cRiKrFk7FTM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+					</div>
+					<div class="swiper-pagination"></div>
+				</div>
+			</div>
+		</div>
+	</section>
 	
 <script th:inline="javascript">
 /*<![CDATA[*/
+	var mainLayoutList = [[${mainLayoutList}]];
+	console.log(mainLayoutList);
 	// 컨텐츠 호출
 	$(document).ready(function() {
-		
+		setHtop();
 	});
+
+	function setHtop() {
+		if($('header').hasClass('main')) {
+			$('#htopMain').show();
+			$('#htopSub').hide();
+		} else {
+			$('#htopMain').hide();
+			$('#gnb').hide();
+			$('#htopSub').show();
+		}
+	}
 /*]]>*/
 </script>
 
+	<script type="text/javascript">
+		/* deal-countDown */
+		var target_date = new Date().getTime() + (1000*3600*8);
+		var days, hours, minutes, seconds;
+		var countdown = document.getElementById("tiles");
+		getCountdown();
+		setInterval(function () { getCountdown(); }, 1000);
+		function getCountdown(){
+			var current_date = new Date().getTime();
+			var seconds_left = (target_date - current_date) / 1000;
+			seconds_left = seconds_left % 86400;
+			hours = pad( parseInt(seconds_left / 3600) );
+			seconds_left = seconds_left % 3600;
+			minutes = pad( parseInt(seconds_left / 60) );
+			seconds = pad( parseInt( seconds_left % 60 ) );
+			// format countdown string + set tag value
+			countdown.innerHTML = "<span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
+		}
+		function pad(n) {
+			return (n < 10 ? '0' : '') + n;
+		}
+
+		/* swiper slide */
+		// post-visual
+		var post_visual = new Swiper('.swiper-container.post-visual', {
+			autoplay: {
+				delay: 3000,
+			},
+			loop:true,
+			pagination: {
+				el: '.swiper-pagination',
+				type: 'fraction',
+			},
+		});
+
+		// post-trendy
+		var post_trendy = new Swiper('.swiper-container.post-trendy', {
+			pagination: {
+				el: '.swiper-pagination',
+			},
+		});
+
+		// post-it
+		var post_it = new Swiper('.swiper-container.post-it', {
+			slidesPerView: 2,
+			spaceBetween: 8,
+			observer: true,
+			observeParents: true,
+			speed : 1000,
+			freeMode: true,
+			autoplay: false,
+		});
+		$(".it_nav .btn").click(function(){
+			var itActive = $(this).attr('data-tab');
+			$(".it_nav .btn").removeClass('active');
+			$(".it_item").removeClass('active');
+			$(this).addClass('active');
+			$('#'+itActive).addClass('active');
+		});
+
+		// post-stylereport
+		var post_stylereport = new Swiper('.swiper-container.post-stylereport', {
+			slidesPerView: 1,
+			pagination: {
+				el: '.swiper-pagination',
+			},
+			spaceBetween: 8,
+		});
+
+		//post-deal
+		var post_deal = new Swiper('.swiper-container.post-deal', {
+			slidesPerView: 2.22,
+			spaceBetween: 8,
+			observer: true,
+			observeParents: true,
+			speed : 1000,
+			freeMode: true,
+			autoplay: false,
+		});
+
+		//post-pick
+		//post-pick-head
+		var Head_pick = new Swiper(".pick-head", {
+			slidesPerView: "auto",
+			spaceBetween: 20,
+			autoHeight: true,
+			preventClicks: true,
+			preventClicksPropagation: false,
+			observer: true,
+			observeParents: true
+		});
+		var $pickHd = $('.pick-head .swiper-wrapper .swiper-slide .btn');
+		$pickHd.click(function(){
+			var target = $(this).parent();
+			$pickHd.parent().removeClass('on')
+			target.addClass('on');
+			muCenter(target);
+		})
+		function muCenter(target){
+			var snbwrap = $('.pick-head .swiper-wrapper');
+			var targetPos = target.position();
+			var box = $('.pick-head');
+			var boxHarf = box.width()/2;
+			var pos;
+			var listWidth=0;
+
+			snbwrap.find('.swiper-slide').each(function(){ listWidth += $(this).outerWidth(); })
+
+			var selectTargetPos = targetPos.left + target.outerWidth()/2;
+			if (selectTargetPos <= boxHarf) { // left
+				pos = 0;
+			}else if ((listWidth - selectTargetPos) <= boxHarf) { //right
+				pos = listWidth-box.width();
+			}else {
+				pos = selectTargetPos - boxHarf;
+			}
+
+			setTimeout(function(){snbwrap.css({
+				"transform": "translate3d("+ (pos*-2) +"px, 0, 0)",
+				"transition-duration": "500ms"
+			})}, 200);
+		}
+		$(".pick-head li .btn").click(function(){
+			var itActive = $(this).attr('data-tab');
+			$(".pick-head li .btn").removeClass('active');
+			$(".pick-cont").removeClass('active');
+			$(this).addClass('active');
+			$('#'+itActive).addClass('active');
+		});
+
+		//post-pick-post
+		var post_pick = new Swiper(".pick-cont .swiper-container", {
+			//slidesPerView: 1,
+			observer: true,
+			observeParents: true
+		});
+
+		// post-recomm
+		// recomm-head
+		var Head_recomm = new Swiper(".swiper-container.recomm-head", {
+			slidesPerView: "auto",
+			spaceBetween: 10,
+			autoHeight: true,
+			loop:false,
+		});
+		$(".recomm-head li .btn").click(function(){
+			var recommActive = $(this).attr('data-tab');
+			$(".recomm-head li .btn").removeClass('active');
+			$(".recomm-post").removeClass('active');
+			$(this).addClass('active');
+			$('#'+recommActive).addClass('active');
+		});
+		// recomm-post
+		var post_recomm = new Swiper(".recomm-post", {
+			slidesPerView: 2.22,
+			spaceBetween: 8,
+			observer: true,
+			observeParents: true,
+			speed : 1000,
+			freeMode: true,
+			autoplay: false,
+		});
+
+		// post-bnnWide
+		var post_bnnWide = new Swiper ('.swiper-container.post-bnnWide', {
+			loop: true,
+			slidesPerView: 1,
+			speed : 1500,
+			autoplay: {
+				delay: 4000,
+				disableOnInteraction: false,
+			},
+			pagination: {
+				el: '.swiper-pagination',
+			},
+		});
+
+		// post-bnnEvent
+		var post_bnnEvent = new Swiper ('.swiper-container.post-bnnEvent', {
+			loop: true,
+			slidesPerView: 1,
+			speed : 1500,
+			autoplay: {
+				delay: 4000,
+				disableOnInteraction: false,
+			},
+			pagination: {
+				el: '.swiper-pagination',
+			},
+		});
+
+		// post_sug
+		var post_sug = new Swiper('.swiper-container.post-sug', {
+			pagination: {
+				el: '.swiper-pagination',
+			},
+			// autoHeight: true,
+			autoplay: {
+				delay: 9500,
+				disableOnInteraction: false,
+			},
+		});
+		function foryouInterval(_foryouIndex) {
+			var foryouCateItems = $(".main_foryou .post-sug .swiper-slide-active .list_cate li");
+			$(foryouCateItems[(_foryouIndex + 1) % 5]).addClass("on");
+			$(foryouCateItems[_foryouIndex % 5]).removeClass("on");
+		}
+		var foryouIndex = 0;
+		setInterval(function () {
+			foryouInterval(foryouIndex);
+			if (foryouIndex >= 5) foryouIndex = 0;
+			foryouIndex++;
+		}, 2000);
+		var post_sug_items = new Swiper ('.swiper-container.post-sug-items', {
+			slidesPerView: 3,
+			spaceBetween: 10,
+			speed : 800,
+			//autoplay: {
+			//	delay: 3000,
+			//	disableOnInteraction: false,
+			//},
+		});
+
+		// post-tv
+		var post_tv = new Swiper ('.post-tv', {
+			loop: true,
+			// slidesPerView: 2,
+			// spaceBetween: 20,
+			centeredSlides: true,
+			speed : 800,
+			// effect: 'fade',
+			autoplay: false,
+			//autoplay: {
+			//	delay: 10000,
+			//	disableOnInteraction: false,
+			//},
+			// navigation: {
+			// 	nextEl: '.main_tv .swiper-button-next',
+			// 	prevEl: '.main_tv .swiper-button-prev',
+			// },
+			pagination: {
+				el: '.main_tv .swiper-pagination',
+				clickable: true,
+			},
+		});
+	</script>
+
 </th:block>
 
 </body>

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

@@ -42,7 +42,7 @@
 														</dd>
 														<dd class="txt_xs" th:text="${ContentsData.subText1}"></dd>
 													</dl>
-													<button type="button" th:if="${ContentsData.contentsType=='SELF'}" class="btn" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);"><span>VIEW MORE</span></button>
+													<button type="button" th:if="${ContentsData.contentsType=='SELF'}" class="btn" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);"><span>자세히 보기</span></button>
 													<button type="button" th:unless="${ContentsData.contentsType=='SELF'}" class="btn" th:onclick="window.open(_frontUrl+[[${ContentsData.strVar1}]], '_blank','width=1180,height=800,toolbars=no,scrollbars=no'); return false;"><span>VIEW MORE</span></button>
 												</div>
 												<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">

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

@@ -818,15 +818,15 @@ header .htop.trans{position:absolute; background:transparent !important;}
 /* 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 .Bulletship_foot .clear{background:#f5f5f5; margin:4rem -2rem; padding:4rem 0 0rem 2rem;}
 /*.dp .dp_Bulletship .inner:first-child{margin-bottom:0; padding-bottom:0;}*/
-.dp .bulletship .items_option{padding-top:0; margin:0 2rem;}
-.dp .items_option #filter{height:4.5rem; border:0.1rem solid #dddddd;}
+.dp .items_option{padding-top:0; margin:0 2rem;}
+.dp .items_option #filter{height:4.5rem; border:0.1rem solid #dddddd; font-size:1.2rem; color:#666666; width:100%;line-height:4.5rem; padding:0 1.5rem; background-color:#fff;}
+.dp .items_option.fix{position:fixed; top:0; z-index:999; width:100%; left:0; margin:0}
 .dp .dp_listItems_wrap .items_option #filter{font-size:1.2rem; color:#666666; width:100%;line-height:4.5rem; padding:0 1.5rem; background-color:#fff;}
-.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}
 /* 210416 */
-.dp .filter_box .filter_body .daps1{position:sticky; top:0; background-color:#fff; z-index: 999;}
+.dp .filter_box .filter_body .daps1{position:sticky; top:0; background-color:#fff; z-index: 9999;}
 .deal_list_select .list>li[aria-disabled="true"] {
 	text-decoration: line-through;
     background: #fff;
@@ -847,7 +847,14 @@ header .htop.trans{position:absolute; background:transparent !important;}
     bottom: 0;
 }
 .dp .mid_banner{margin-top:-6rem}
-
+/* 210419 */
+.pd_qnalist_pop .ui_foot{padding:0 2rem}
+.pd_qnalist_pop .ui_foot .btn{width:100%; height:4rem;}
+.dp .Bulletship_body{padding:0 2rem;}
+.dp .Bulletship_foot{padding:0 2rem;}
+/* 210420 */
+.app .gnb{background-color:#222222; z-index:99;}
+.app .gnb .btn-expand::before{background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #222222 100%);}
 
 
 
@@ -1555,8 +1562,8 @@ header .htop.trans{position:absolute; background:transparent !important;}
 .dp .dp_subtitle{margin-bottom: 2.4rem; font-size:1.6rem; font-weight:500; text-align:center;}
 .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; margin-left:-5.3rem;}
+.dp .category_nav {margin-bottom:0 2rem -1.3rem; justify-content: center; border-bottom:1px solid #eeeeee;}
+.dp .category_nav ul{padding:0 2rem; display:flex;}
 .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;}
@@ -1742,9 +1749,6 @@ header .htop.trans{position:absolute; background:transparent !important;}
 .dp .dp_exhibition .inner.bg_gray{background-color:#f5f5f5;}*/
 .dp .dp_listItems_wrap .items_option{padding-top:4rem;}
 .dp .dp_listItems_wrap .items_option .select{display:block;}
-.dp .promotion_tit{position:relative; padding:2rem; margin-left:2rem}
-.dp .promotion_tit .p{font-size:1.4rem; color:#222; font-weight:500;}
-.dp .promotion_tit .sns_share{position:absolute; right:2rem; top:50%; width:1.4rem; height:1.6rem; font-size:0; text-indent:-999999px; background:url(/images/mo/ico_sns_share.png) center center no-repeat; background-size:contain; -webkit-transform:translateY(-50%); transform:translateY(-50%)}
 /*.dp .promotion_visual.type1{margin-bottom:-5.3rem;}*/
 .dp .promotion_visual.type1 .mid_banner{background-color:#fff;}
 .dp .dp_listItems_cont.type1 .swiper-container.item01 .swiper-slide{padding:0 14%}
@@ -2143,6 +2147,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 .br .pnb_mo > ul > li > a{font-size:1.6rem; color:#686868; font-weight:500; padding:0 1.2rem;}
 .br .pnb_mo > ul > li > a.on{color:#fff}
 .br .pnb_mo > button{background:url(/images/mo/ico_btn_expand.png) center top/1.8rem 2.0rem no-repeat; width:3.8rem; height:1.9rem; background-color:red; text-indent:-9999px; position:absolute; z-index:9; top:1.6rem; right:0; background-color:#222222;}
+.pnb_mo.fixed{-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);-moz-transform: translate(0, 0);transform: translate(0, 0); position:fixed; top:0; width:100%; z-index:999;}
 .br_main{background-color:#fff;}
 /* br_main *
 /* br_main - 메인배너&info */
@@ -2207,7 +2212,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 /* 브랜드 - 룩북 */
 .htop.br_lookbook { overflow: hidden; border: none !important;}
 .htop.br_lookbook .btn_back span i { background: #fff;}
-.htop.br_lookbook h1 { color: #fff; margin: 1rem 0 0 2rem;}
+.htop.br_lookbook h1 { color: #fff !important; margin: 1rem 0 0 2rem;}
 .htop.br_lookbook .btn_back { margin: 1.4rem 0 0 0;}
 .htop.br_lookbook .btn_back img { width: 1.5rem; height: 1rem;}
 .htop.br_lookbook .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;}
@@ -2295,7 +2300,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 .sch .sch_result .inner{background-color:#fff; margin-bottom: 1.2rem; padding:1.3rem 2.0rem;}
 .sch .sch_result .inner.wide {padding:1.3rem 0;}
 .sch .sch_result .sch_title { width: 100%; height: 4.3rem; margin: 0 0; border-bottom: 0.2rem solid black; position: relative;}
-.sch .sch_result .sch_title input[type="text"] { width: 100%; height: 4.3rem; float: left; border: none;  padding: 0; font-size: 1.6rem; font-weight: 300; color: #222; border-bottom:0.2rem solid #000; margin-bottom:0rem;}
+.sch .sch_result .sch_title input[type="text"] { width: 100%; height: 4.3rem; float: left; border: none;  padding: 0; font-size: 1.6rem; font-weight: 300; color: #222; border-bottom:0.1rem solid #000; margin-bottom:0rem; padding-right: 4rem;}
 .sch .sch_result .sch_title input::placeholder {color:#888; font-weight: 200;}
 .sch .sch_result .sch_title .btn_sch {position: absolute; top: 0; right: 0; width: 4rem; height: 4rem;}
 .sch .sch_result .sch_title .btn_x { width: 2rem; height: 2rem; background: #aaa; border-radius: 1rem; color: #fff; font-size: 1rem; position: absolute; top: 1rem; right: 4rem; background:#aaa url(/images/mo/ico_sch_del_w.png) no-repeat center; background-size:1.1rem; text-indent:-999em;}
@@ -2330,7 +2335,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 .sch .sch_result .store_product.no-slide .item_prod:nth-of-type(even){float:right;}
 .sch .sch_result .store_product.no-slide .item_prod .s-text{margin-top:1.5rem}
 .sch .sch_result .recommand_product {margin-top: 1.1rem; padding-bottom: 4.7rem;}
-.sch .sch_result .recommand_product h3{padding:0 0 2rem; font-size:1.6rem;}
+.sch .sch_result .recommand_product h3{padding:0 0 2rem; font-size:1.6rem; font-weight: 500;}
 .sch .sch_result .banner{margin:0 -2rem;}
 .sch .sch_result .banner > img{width:100%; margin-bottom:4rem;}
 .sch .sch_result .btPop_full{margin-top:59rem}
@@ -2342,9 +2347,9 @@ header .htop.trans{position:absolute; background:transparent !important;}
 .sch .sch_result .store-list {padding-bottom: 1.4rem; border-bottom: 1px solid #eee;}
 
 .filter-list{display:flex; justify-content:space-between; font-size:1.2rem; margin-top: 1.8rem;}
-.filter-list .f_left h3 {font-size: 1.6rem;}
+.filter-list .f_left h3 {font-size: 1.6rem; font-weight: 500;}
 .filter-list .f_left > span{color:#fd4802; font-weight:bold;}
-.filter-list .f_right .allxBtn {font-size: 1.2rem; color:#888;}
+.filter-list .f_right .allxBtn {font-size: 1.2rem; color:#888; font-weight: 300;}
 .filter-list .f_right > a {padding-right: 1.1rem; font-size: 1.3rem; color:#666; background: url(/images/mo/ico_btn_detail.png) no-repeat right 0.1rem; background-size:0.5rem 0.9rem;}
 .filter-list .f_right > a:nth-of-type(1) > span{display:inline-block; width:0.7rem; height:0.4rem; background:url(/images/mo/shc_arrow.png); position:relative; top:-0.2rem; margin-left:0.5rem}
 .filter-list .f_right > a:nth-of-type(2){margin-left:1rem}
@@ -2358,7 +2363,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 .sch .sch_result .inner.nodata:last-child {margin-bottom: 14rem;}
 .sch .sch_result .nodata { text-align: center;}
 .sch .sch_result .nodata p { padding: 0 0; font-size: 1.4rem; color: #666;}
-.sch .sch_result .nodata p > span{color:#fd4802}
+.sch .sch_result .nodata p > span{}
 .sch .sch_result .nodata .btn {margin-top: 1rem; font-size: 1.2rem; border: 0.1rem solid #888; height: 3rem; padding: 0 1rem;}
 .sch .sch_result .store_product.no-slide .product-wrapper{overflow:hidden;}
 .sch .sch_result .store_product.no-slide.upline{margin-top:1.2rem;}
@@ -2472,7 +2477,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 .sch .sch_result.brand_all .related_keyword{border-bottom:0.1rem solid #eeeeee; margin:-1.3rem -2rem 0; padding:0 2rem 1.3rem;}
 
 .sch .sub_category{padding:0 0; position:relative;}
-.sch .sub_category:after {content:''; position: absolute; top: 0; right: 0; height: 100%; width: 6rem; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #fff 100%);}
+.sch .sub_category:after {content:''; position: absolute; top: 0; right: 0; height: 100%; width: 6rem; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 100%); background: -webkit-linear-gradient(360deg, rgba(255,255,255,0) 0%, #fff 100%);}
 .sch .sub_category{}
 .sch .sub_category .cate_wrap {position: relative; width: 100%; white-space:nowrap; overflow-x:scroll;}
 .sch .sub_category .cate_wrap a{float:none; display:inline-block; margin-bottom:0; background: #f5f5f5; padding:1.2rem 1.4rem; font-size: 1.3rem; color: #000; border-radius:2rem; line-height: 1;}

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

@@ -2104,6 +2104,13 @@ background-size:100%;}
 .od .area_paybtn .btn {height:6rem; font-size:1.6rem; font-weight:500;}
 .od .area_paybtn .btn em {font-weight:500;}
 
+.odPayment .infotxt table {word-break:keep-all;margin-top: 1.0rem;margin-bottom: 1.0rem;width: 100%;border-top: 1px solid #dddddd;}
+.odPayment .infotxt table th,
+.odPayment .infotxt table td {position:relative; padding:1.0rem 1.0rem; font-size:1.3rem;line-height: 1.4;color: #222222;letter-spacing:-0.025em;}
+.odPayment .infotxt table td {border-bottom:1px solid #ddd;border-right: 1px solid #ddd;font-weight:200;}
+.odPayment .infotxt table td:last-child {border-right: 1px solid transparent;}
+.odPayment .infotxt table th {border-top: 0;border-bottom:1px solid #ddd;border-right:1px solid #ddd;font-weight: 400;text-align: center;background: #f5f5f5;}
+
 .od .extra_pay {padding:0px 30px 40px; margin-bottom: 20px; border-top:1px solid #222; border-bottom:1px solid #ddd;}
 .od .extra_pay .tit_pay {padding:30px 0px; line-height:1; font-size:24px; font-weight:500;}
 .od .extra_pay {}