Merge remote-tracking branch 'origin/develop' into jsh77b

Conflicts:
	src/main/java/com/style24/persistence/mybatis/TsfOrder.xml

pom.xml

@@ -63,9 +63,9 @@
 		<dependency>
 			<groupId>com.gagaframework</groupId>
 			<artifactId>gagaframework-web-security</artifactId>
-			<version>1.7.1-RELEASE</version>
+			<version>1.7.2-RELEASE</version>
 			<scope>system</scope>
-			<systemPath>${basedir}/src/main/webapp/WEB-INF/lib/gagaframework-web-security-1.7.1-RELEASE.jar</systemPath>
+			<systemPath>${basedir}/src/main/webapp/WEB-INF/lib/gagaframework-web-security-1.7.2-RELEASE.jar</systemPath>
 		</dependency>
 		<dependency>
 			<groupId>com.gagaframework</groupId>

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

@@ -0,0 +1,26 @@
+package com.style24.front.biz.dao;
+
+import java.util.Collection;
+
+import com.style24.core.support.annotation.ShopDs;
+import com.style24.persistence.domain.CommonCode;
+
+/**
+ * 콤보박스, 체크박스, 라디오버튼 구성 시 필요한 Renderer Dao
+ *
+ * @author gagamel
+ * @since 2021. 1. 29
+ */
+@ShopDs
+public interface TsfRendererDao {
+
+	/**
+	 * 공통코드 목록
+	 * @param commoncode - 공통코드 정보
+	 * @return 공통코드 목록
+	 * @author gagamel
+	 * @since 2021. 1. 29
+	 */
+	Collection<CommonCode> getCommonCodeList(CommonCode commoncode);
+
+}

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

@@ -0,0 +1,111 @@
+package com.style24.front.biz.service;
+
+import java.util.Collection;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import com.style24.front.biz.dao.TsfRendererDao;
+import com.style24.persistence.domain.CommonCode;
+
+import lombok.extern.slf4j.Slf4j;
+
+/**
+ * 콤보박스, 체크박스, 라디오버튼 구성 시 필요한 Renderer Service
+ *
+ * @author gagamel
+ * @since 2020. 10. 7
+ */
+@Service
+@Slf4j
+public class TsfRendererService {
+
+	@Autowired
+	private TsfRendererDao rendererDao;
+
+	/**
+	 * 공통코드 목록 - 어드민 공통코드 캐시 미적용 - 상품등록시 시즌년도 캐쉬로 인한 정보 오류로 수정 2020.06.02
+	 * @param commoncode - 공통코드 정보
+	 * @return
+	 * @author gagamel
+	 * @since 2021. 1. 29
+	 */
+//	@Cacheable(value = "common", key = "'commoncode-'.concat(#commoncode.cdGb)")
+	public Collection<CommonCode> getCommonCodeList(CommonCode commoncode) {
+		return rendererDao.getCommonCodeList(commoncode);
+	}
+
+	/**
+	 * 공통코드 목록
+	 * @param cdGb - 코드구분
+	 * @return
+	 * @author gagamel
+	 * @since 2021. 1. 29
+	 */
+	public Collection<CommonCode> getCommonCodeList(String cdGb) {
+		CommonCode commoncode = new CommonCode();
+		commoncode.setCdGb(cdGb);
+		return this.getCommonCodeList(commoncode);
+	}
+
+	/**
+	 * 공통코드 목록
+	 * @param grpCodeId - 코드구분
+	 * @param useYn     - 사용여부
+	 * @return
+	 * @author gagamel
+	 * @since 2021. 1. 29
+	 */
+	public Collection<CommonCode> getCommonCodeList(String cdGb, String useYn) {
+		CommonCode commoncode = new CommonCode();
+		commoncode.setCdGb(cdGb);
+		commoncode.setUseYn(useYn);
+		return this.getCommonCodeList(commoncode);
+	}
+
+	/**
+	 * 현재 유효한 공통코드 목록
+	 * @param cdGb - 코드구분
+	 * @return
+	 * @author gagamel
+	 * @since 2021. 1. 29
+	 */
+	public Collection<CommonCode> getAvailCommonCodeList(String cdGb) {
+		return this.getCommonCodeList(cdGb, "Y");
+	}
+
+	/**
+	 * 공통코드 목록
+	 * @param cdGb   -코드구분
+	 * @param useYn  - 사용여부
+	 * @param cdDesc - 코드설명
+	 * @return
+	 * @author gagamel
+	 * @since 2021. 1. 29
+	 */
+	public Collection<CommonCode> getCommonCodeList(String cdGb, String useYn, String cdDesc) {
+		CommonCode commoncode = new CommonCode();
+		commoncode.setCdGb(cdGb);
+		commoncode.setUseYn(useYn);
+		commoncode.setCdDesc(cdDesc);
+		return this.getCommonCodeList(commoncode);
+	}
+
+	/**
+	 * 공통코드 목록
+	 * @param cdGb      -코드구분
+	 * @param useYn     - 사용여부
+	 * @param exceptCds - 제외코드배열
+	 * @return
+	 * @author gagamel
+	 * @since 2021. 1. 29
+	 */
+	public Collection<CommonCode> getCommonCodeList(String cdGb, String useYn, String[] exceptCds) {
+		CommonCode commoncode = new CommonCode();
+		commoncode.setCdGb(cdGb);
+		commoncode.setUseYn(useYn);
+		commoncode.setExceptCds(exceptCds);
+		return this.getCommonCodeList(commoncode);
+	}
+
+}

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

@@ -15,9 +15,10 @@ import com.style24.core.support.message.TscMessageByLocale;
 import com.style24.front.biz.service.TsfCounselService;
 import com.style24.front.biz.service.TsfFaqService;
 import com.style24.front.biz.service.TsfNoticeService;
+import com.style24.front.biz.service.TsfRendererService;
 import com.style24.front.support.controller.TsfBaseController;
 import com.style24.front.support.security.session.TsfSession;
-import com.style24.persistence.TsfPageRequest;
+import com.style24.persistence.TscPageRequest;
 import com.style24.persistence.domain.Counsel;
 import com.style24.persistence.domain.Faq;
 import com.style24.persistence.domain.Notice;
@@ -50,6 +51,9 @@ public class TsfCallcenterController extends TsfBaseController {
 	@Autowired
 	private TsfCounselService counselService;
 
+	@Autowired
+	private TsfRendererService rendererService;
+
 	/**
 	 * FAQ
 	 * @return
@@ -63,6 +67,9 @@ public class TsfCallcenterController extends TsfBaseController {
 		// FAQ TOP 10 목록
 		mav.addObject("faqTop10List", faqService.getFaqLikesList(TscConstants.Site.STYLE24.value()));
 
+		// FAQ유형
+		mav.addObject("faqTypeList", rendererService.getAvailCommonCodeList("G046"));
+
 		mav.setViewName(super.getDeviceViewName("callcenter/FaqForm"));
 
 		return mav;
@@ -82,7 +89,7 @@ public class TsfCallcenterController extends TsfBaseController {
 
 		GagaMap result = new GagaMap();
 
-		TsfPageRequest pageable = new TsfPageRequest((faq.getPageNo() > 0 ? faq.getPageNo() - 1 : 0), faq.getPageSize(), faq.getPageUnit());
+		TscPageRequest pageable = new TscPageRequest((faq.getPageNo() > 0 ? faq.getPageNo() - 1 : 0), faq.getPageSize());
 		pageable.setTotalCount(faqService.getFaqTotalCount(faq));
 		faq.setPageable(pageable);
 		log.debug("pageable: {}", pageable);
@@ -134,7 +141,7 @@ public class TsfCallcenterController extends TsfBaseController {
 
 		GagaMap result = new GagaMap();
 
-		TsfPageRequest pageable = new TsfPageRequest((notice.getPageNo() > 0 ? notice.getPageNo() - 1 : 0), notice.getPageSize(), notice.getPageUnit());
+		TscPageRequest pageable = new TscPageRequest((notice.getPageNo() > 0 ? notice.getPageNo() - 1 : 0), notice.getPageSize(), notice.getPageUnit());
 		pageable.setTotalCount(noticeService.getNoticeTotalCount(notice));
 		notice.setPageable(pageable);
 		log.debug("pageable: {}", pageable);
@@ -209,7 +216,7 @@ public class TsfCallcenterController extends TsfBaseController {
 
 		GagaMap result = new GagaMap();
 
-		TsfPageRequest pageable = new TsfPageRequest((counsel.getPageNo() > 0 ? counsel.getPageNo() - 1 : 0), counsel.getPageSize(), counsel.getPageUnit());
+		TscPageRequest pageable = new TscPageRequest((counsel.getPageNo() > 0 ? counsel.getPageNo() - 1 : 0), counsel.getPageSize(), counsel.getPageUnit());
 		pageable.setTotalCount(counselService.getOneToOneQnaTotalCount(counsel));
 		counsel.setPageable(pageable);
 		log.debug("pageable: {}", pageable);
@@ -328,7 +335,7 @@ public class TsfCallcenterController extends TsfBaseController {
 
 		GagaMap result = new GagaMap();
 
-		TsfPageRequest pageable = new TsfPageRequest((counsel.getPageNo() > 0 ? counsel.getPageNo() - 1 : 0), counsel.getPageSize(), counsel.getPageUnit());
+		TscPageRequest pageable = new TscPageRequest((counsel.getPageNo() > 0 ? counsel.getPageNo() - 1 : 0), counsel.getPageSize(), counsel.getPageUnit());
 		pageable.setTotalCount(counselService.getGoodsQnaTotalCount(counsel));
 		counsel.setPageable(pageable);
 		log.debug("pageable: {}", pageable);

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

@@ -1,8 +1,14 @@
 package com.style24.front.biz.web;
 
+import java.util.HashMap;
+
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.mobile.device.Device;
 import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.servlet.ModelAndView;
 
 import com.style24.core.support.message.TscMessageByLocale;
 import com.style24.front.biz.service.TsfDisplayService;
@@ -27,4 +33,19 @@ public class TsfDisplayController extends TsfBaseController {
 	@Autowired
 	private TsfDisplayService displayService;
 
+	/**
+	 * 몰 메인
+	 * @return
+	 * @author gagamel
+	 * @since 2020. 2. 3
+	 */
+	@GetMapping("/mall/main/form")
+	public ModelAndView mallMain(Device device, @RequestParam HashMap<String, String> paramMap) {
+		ModelAndView mav = new ModelAndView();
+
+		mav.setViewName(super.getDeviceViewName("display/MallMainForm"));
+
+		return mav;
+	}
+
 }

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

@@ -48,7 +48,7 @@ public class TsfIndexController extends TsfBaseController {
 	 */
 	@GetMapping("/error")
 	public ModelAndView error(HttpServletRequest request, HttpServletResponse response) throws HttpRequestMethodNotSupportedException, IOException {
-		ModelAndView mav = new ModelAndView(super.getDeviceViewName("error/500"));
+		ModelAndView mav = new ModelAndView(super.getDeviceViewName("common/error/500"));
 
 		Object status = request.getAttribute(RequestDispatcher.ERROR_STATUS_CODE);
 

src/main/java/com/style24/front/support/controller/TsfBaseController.java

@@ -290,7 +290,7 @@ public class TsfBaseController {
 			}
 		}
 
-		log.debug("resolvedViewName: {}", resolvedViewName);
+		log.info("resolvedViewName: {}", resolvedViewName);
 
 		return stripTrailingSlash(resolvedViewName);
 	}

src/main/java/com/style24/persistence/TsfPageRequest.java

@@ -1,120 +0,0 @@
-package com.style24.persistence;
-
-import java.io.Serializable;
-
-import lombok.Data;
-
-/**
- * Paging
- * @author gagamel
- * @since 2020. 2. 14
- */
-@SuppressWarnings("serial")
-@Data
-public class TsfPageRequest implements Serializable {
-
-	private final int pageNo;   // 페이지번호
-	private final int pageSize; // 조회할 row수
-	private final int pageUnit; // 그룹핑 페이지 단위
-	private int totalCount = 0; // 전체 row 건수
-
-	public TsfPageRequest(int pageNo, int pageSize) {
-		this(pageNo, pageSize, 10);
-	}
-
-	public TsfPageRequest(int pageNo, int pageSize, int pageUnit) {
-		if (pageNo < 0) {
-			throw new IllegalArgumentException("Current page index must not be less than zero!");
-		}
-
-		if (pageSize < 1) {
-			throw new IllegalArgumentException("Page size must not be less than one!");
-		}
-
-		if (pageUnit < 1) {
-			throw new IllegalArgumentException("Page unit must not be less than one!");
-		}
-
-		this.pageNo = pageNo;
-		this.pageSize = pageSize;
-		this.pageUnit = pageUnit;
-	}
-
-	public int getPageNo() {
-		return pageNo + 1;
-	}
-
-	public int getOffset() {
-		return pageNo * pageSize;
-	}
-
-	public int getStartRow() {
-		return pageNo * pageSize + 1;
-	}
-
-	public int getEndRow() {
-		return getOffset() + pageSize;
-	}
-
-	public int getPageGroup() {
-		return pageNo / pageUnit + 1;
-	}
-
-	public void setTotalCount(int totalCount) {
-		this.totalCount = totalCount;
-	}
-
-	public int getTotalPage() {
-		int totalPage = totalCount / pageSize;
-		if (totalCount % pageSize > 0) totalPage++;
-		return totalPage;
-	}
-
-	public String getGeneratedPagination() {
-		int firstCount = (getPageGroup() - 1) * pageUnit + 1;
-		int loopCount = firstCount + pageUnit;
-		if (loopCount > getTotalPage()) loopCount = getTotalPage() + 1;
-
-		StringBuffer pageTag = new StringBuffer();
-
-		if (getPageNo() == 1) {
-			pageTag.append("<a href=\"#\" class=\"icon first\" alt=\"처음 페이지\">처음 페이지</a>\n");
-		} else {
-			pageTag.append("<a href=\"#pageNo=1\" class=\"icon first\" alt=\"처음 페이지\">처음 페이지</a>\n");
-		}
-
-		if (getPageGroup() == 1) {
-			pageTag.append("<a href=\"#\" class=\"icon prev\" alt=\"이전페이지\">이전 페이지</a>\n");
-		} else {
-			pageTag.append("<a href=\"#pageNo=").append((getPageGroup() - 1) * pageUnit).append("\" class=\"icon prev\" alt=\"이전페이지\">이전 페이지</a>\n");
-		}
-
-		for (int i = firstCount; i < loopCount; i++) {
-			if (getPageNo() == i) {
-				pageTag.append("<a class=\"num on\" href=\"#\">").append(i).append("</a>\n");
-			} else {
-				pageTag.append("<a class=\"num\" href=\"#pageNo=").append(i).append("\">").append(i).append("</a>\n");
-			}
-		}
-
-		if (loopCount <= (getTotalPage() + 1)) {
-			if (getPageNo() == getTotalPage() || getTotalPage()<=(getPageGroup() * pageUnit)) {
-				//				pageTag.append("<a href=\"#\" class=\"icon next\" alt=\"다음 페이지\">다음 페이지</a>\n");
-				//				pageTag.append("<a href=\"#\" class=\"icon last\" alt=\"마지막 페이지\">마지막 페이지</a>\n");
-				pageTag.append("<a href=\"#pageNo=").append(getPageNo()).append("\" class=\"icon next\" alt=\"다음 페이지\">다음 페이지</a>\n");
-				pageTag.append("<a href=\"#pageNo=").append(getPageNo()).append("\" class=\"icon last\" alt=\"마지막 페이지\">마지막 페이지</a>\n");
-			} else {
-				pageTag.append("<a href=\"#pageNo=").append(getPageGroup() * pageUnit + 1).append("\" class=\"icon next\" alt=\"다음 페이지\">다음 페이지</a>\n");
-				pageTag.append("<a href=\"#pageNo=").append(getTotalPage()).append("\" class=\"icon last\" alt=\"마지막 페이지\">마지막 페이지</a>\n");
-			}
-		}
-
-		return pageTag.toString();
-	}
-
-	@Override
-	public String toString() {
-		return String.format("Page request [pageNo: %d, pageSize %d, pageUnit %d]", getPageNo(), pageSize, pageUnit);
-	}
-
-}

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

@@ -0,0 +1,28 @@
+package com.style24.persistence.domain;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import com.style24.persistence.TscBaseDomain;
+
+import lombok.Data;
+
+/**
+ * 공통코드 Domain
+ * 
+ * @author gagamel
+ * @since 2021. 1. 29
+ */
+@SuppressWarnings("serial")
+@Data
+public class CommonCode extends TscBaseDomain {
+
+	private String cdGb;
+	private String cd;
+	private String cdNm;
+	private String cdDesc;
+	private int dispOrd;
+	private String useYn;
+
+	@JsonFormat(with = JsonFormat.Feature.ACCEPT_SINGLE_VALUE_AS_ARRAY)
+	private String[] exceptCds;
+
+}

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

@@ -2,7 +2,7 @@ package com.style24.persistence.domain;
 
 import com.fasterxml.jackson.annotation.JsonInclude;
 import com.style24.persistence.TscBaseDomain;
-import com.style24.persistence.TsfPageRequest;
+import com.style24.persistence.TscPageRequest;
 
 import lombok.Data;
 
@@ -55,7 +55,7 @@ public class Counsel extends TscBaseDomain {
 
 	// Pagination
 	@JsonInclude(JsonInclude.Include.NON_EMPTY)
-	private TsfPageRequest pageable;
+	private TscPageRequest pageable;
 
 	private int pageNo = 1;
 	private int pageSize = 10;

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

@@ -2,7 +2,7 @@ package com.style24.persistence.domain;
 
 import com.fasterxml.jackson.annotation.JsonInclude;
 import com.style24.persistence.TscBaseDomain;
-import com.style24.persistence.TsfPageRequest;
+import com.style24.persistence.TscPageRequest;
 
 import lombok.Data;
 
@@ -29,7 +29,7 @@ public class Faq extends TscBaseDomain {
 
 	// Pagination
 	@JsonInclude(JsonInclude.Include.NON_EMPTY)
-	private TsfPageRequest pageable;
+	private TscPageRequest pageable;
 
 	private int pageNo = 1;
 	private int pageSize = 10;

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

@@ -2,7 +2,7 @@ package com.style24.persistence.domain;
 
 import com.fasterxml.jackson.annotation.JsonInclude;
 import com.style24.persistence.TscBaseDomain;
-import com.style24.persistence.TsfPageRequest;
+import com.style24.persistence.TscPageRequest;
 
 import lombok.Data;
 
@@ -37,7 +37,7 @@ public class Notice extends TscBaseDomain {
 
 	// Pagination
 	@JsonInclude(JsonInclude.Include.NON_EMPTY)
-	private TsfPageRequest pageable;
+	private TscPageRequest pageable;
 
 	private int pageNo = 1;
 	private int pageSize = 10;

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

@@ -2,11 +2,17 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfCartDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
+	</sql>
+
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
 	</sql>
-	<!--// Paging -->
 	
 	
 

src/main/java/com/style24/persistence/mybatis/TsfCounsel.xml

@@ -2,11 +2,17 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfCounselDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
+	</sql>
+
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
 	</sql>
-	<!--// Paging -->
 	
 	<!-- 1:1문의 생성 -->
 	<insert id="createOneToOneQna" parameterType="Counsel">
@@ -94,6 +100,7 @@
 	<!-- 1:1문의 목록 -->
 	<select id="getOneToOneQnaList" parameterType="Counsel" resultType="Counsel">
 		/* TsfCounsel.getOneToOneQnaList */
+		<include refid="selectForPagingHeader"/>
 		SELECT COUNSEL_SQ                                                     /*상담일련번호*/
 		     , SITE_CD                                                        /*사이트코드*/
 		     , FN_GET_CODE_NM('G059',COUNSEL_CLSF)        AS COUNSEL_CLSF_NM  /*상담분류명*/
@@ -111,13 +118,13 @@
 		     , ANS_STAT                                                       /*답변상태코드*/
 		     , FN_GET_CODE_NM('G060',ANS_STAT)            AS ANS_STAT_NM      /*답변상태명*/
 		     , DATE_FORMAT(ANS_DT,'%Y.%m.%d')             AS ANS_DT           /*답변일자*/
+		     , RANK() OVER(ORDER BY QUEST_DT DESC)        AS NUMB
 		FROM   TB_COUNSEL
 		WHERE  CUST_NO = #{custNo}
 		AND    SITE_CD = #{siteCd}
 		AND    COUNSEL_TYPE = 'C' /*상담유형(1:1문의)*/
 		AND    DEL_YN = 'N' /*삭제안된넘*/
-		ORDER  BY QUEST_DT DESC
-		<include refid="pageSql"></include>
+		<include refid="selectForPagingFooter"/>
 	</select>
 	
 	<!-- 1:1문의 삭제 -->
@@ -274,17 +281,19 @@
 	<!-- 상품문의 목록 -->
 	<select id="getGoodsQnaList" parameterType="Counsel" resultType="Counsel">
 		/* TsfCounsel.getGoodsQnaList */
-		SELECT A.COUNSEL_SQ                                      /*상담일련번호*/
-		     , A.SITE_CD                                         /*사이트코드*/
-		     , DATE_FORMAT(A.QUEST_DT,'%Y.%m.%d') AS QUEST_DT    /*문의일자*/
-		     , A.SECRET_YN                                       /*비밀글여부*/
-		     , A.CELL_PHNNO                                      /*휴대전화번호*/
-		     , A.SMS_REQ_YN                                      /*SMS(알림톡)답변수신여부*/
-		     , A.REL_GOODS_CD                                    /*관련상품코드*/
-		     , G.GOODS_NM                                        /*상품명*/
-		     , A.ANS_STAT                                        /*답변상태*/
-		     , FN_GET_CODE_NM('G060',ANS_STAT)    AS ANS_STAT_NM /*답변상태명*/
-		     , DATE_FORMAT(A.ANS_DT,'%Y.%m.%d')   AS ANS_DT      /*답변일자*/
+		<include refid="selectForPagingHeader"/>
+		SELECT A.COUNSEL_SQ                                       /*상담일련번호*/
+		     , A.SITE_CD                                          /*사이트코드*/
+		     , DATE_FORMAT(A.QUEST_DT,'%Y.%m.%d')  AS QUEST_DT    /*문의일자*/
+		     , A.SECRET_YN                                        /*비밀글여부*/
+		     , A.CELL_PHNNO                                       /*휴대전화번호*/
+		     , A.SMS_REQ_YN                                       /*SMS(알림톡)답변수신여부*/
+		     , A.REL_GOODS_CD                                     /*관련상품코드*/
+		     , G.GOODS_NM                                         /*상품명*/
+		     , A.ANS_STAT                                         /*답변상태*/
+		     , FN_GET_CODE_NM('G060',ANS_STAT)     AS ANS_STAT_NM /*답변상태명*/
+		     , DATE_FORMAT(A.ANS_DT,'%Y.%m.%d')    AS ANS_DT      /*답변일자*/
+		     , RANK() OVER(ORDER BY QUEST_DT DESC) AS NUMB
 		FROM   TB_COUNSEL A
 		     , TB_GOODS G
 		WHERE  A.REL_GOODS_CD = G.GOODS_CD
@@ -292,8 +301,7 @@
 		AND    A.SITE_CD = #{siteCd}
 		AND    A.COUNSEL_TYPE = 'G' /*상담유형(상품문의)*/
 		AND    A.DEL_YN = 'N' /*삭제안된넘*/
-		ORDER  BY A.QUEST_DT DESC
-		<include refid="pageSql"></include>
+		<include refid="selectForPagingFooter"/>
 	</select>
 	
 	<!-- 상품문의 삭제 -->

src/main/java/com/style24/persistence/mybatis/TsfCoupon.xml

@@ -2,11 +2,17 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfCouponDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
+	</sql>
+
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
 	</sql>
-	<!--// Paging -->
 	
 	
 

src/main/java/com/style24/persistence/mybatis/TsfCustomer.xml

@@ -2,11 +2,17 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfCustomerDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
+	</sql>
+
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
 	</sql>
-	<!--// Paging -->
 	
 	
 

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

@@ -2,11 +2,17 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfDisplayDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
+	</sql>
+
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
 	</sql>
-	<!--// Paging -->
 	
 	
 

src/main/java/com/style24/persistence/mybatis/TsfFaq.xml

@@ -2,11 +2,17 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfFaqDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
+	</sql>
+
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
 	</sql>
-	<!--// Paging -->
 	
 	<!-- FAQ 자주 묻는 질문 목록 (10개) -->
 	<select id="getFaqLikesList" parameterType="String" resultType="Faq">
@@ -46,12 +52,15 @@
 	<!-- FAQ 목록 -->
 	<select id="getFaqList" parameterType="Faq" resultType="Faq">
 		/* TsfFaq.getFaqList */
-		SELECT FAQ_SQ   /*FAQ일련번호*/
-		     , SITE_CD  /*사이트코드(공통코드G000)*/
-		     , FAQ_TYPE /*FAQ유형(공통코드G046)*/
-		     , QUESTION /*질문*/
-		     , ANSWER   /*답변*/
-		     , DISP_ORD /*표시순서*/
+		<include refid="selectForPagingHeader"/>
+		SELECT FAQ_SQ                                           /*FAQ일련번호*/
+		     , SITE_CD                                          /*사이트코드(공통코드G000)*/
+		     , FAQ_TYPE                                         /*FAQ유형(공통코드G046)*/
+		     , FN_GET_CODE_NM('G046',FAQ_TYPE)   AS FAQ_TYPE_NM /*FAQ유형명*/
+		     , QUESTION                                         /*질문*/
+		     , ANSWER                                           /*답변*/
+		     , DISP_ORD                                         /*표시순서*/
+		     , RANK() OVER(ORDER BY REG_DT DESC) AS NUMB
 		FROM   TB_FAQ
 		WHERE  SITE_CD = #{siteCd}
 		<if test='faqType != null and faqType !=""'>
@@ -65,8 +74,7 @@
 		        LOWER(ANSWER) LIKE CONCAT('%',LOWER(#{searchTxt}),'%')
 		       )
 		</if>
-		ORDER  BY REG_DT DESC
-		<include refid="pageSql"></include>
+		<include refid="selectForPagingFooter"/>
 	</select>
 
 	<!-- FAQ 조회수 Update -->

src/main/java/com/style24/persistence/mybatis/TsfGiftcard.xml

@@ -2,11 +2,17 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfGiftcardDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
+	</sql>
+
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
 	</sql>
-	<!--// Paging -->
 	
 	
 

src/main/java/com/style24/persistence/mybatis/TsfGoods.xml

@@ -2,11 +2,17 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfGoodsDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
+	</sql>
+
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
 	</sql>
-	<!--// Paging -->
 	
 	
 

src/main/java/com/style24/persistence/mybatis/TsfNotice.xml

@@ -2,9 +2,16 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfNoticeDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
+	</sql>
+
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
 	</sql>
 	
 	<!-- 공지사항 전체 건수 조회 -->
@@ -25,15 +32,18 @@
 	<!-- 공지사항 목록 -->
 	<select id="getNoticeList" parameterType="Notice" resultType="Notice">
 		/* TsfNotice.getNoticeList */
-		SELECT NOTICE_SQ                                  /*공지사항일련번호*/
-		     , NOTICE_TITLE                               /*공지제목*/
-		     , NOTICE_CONTENT                             /*공지내용*/
-		     , READ_CNT                                   /*조회수*/
-		     , DATE_FORMAT(REG_DT,'%Y.%m.%d') AS REG_DT   /*등록일자*/
+		<include refid="selectForPagingHeader"/>
+		SELECT NOTICE_SQ                                     /*공지사항일련번호*/
+		     , NOTICE_TITLE                                  /*공지제목*/
+		     , NOTICE_CONTENT                                /*공지내용*/
+		     , READ_CNT                                      /*조회수*/
+		     , DATE_FORMAT(REG_DT,'%Y.%m.%d')    AS REG_DT   /*등록일자*/
 		     , (SELECT COUNT(1)
 		        FROM   TB_NOTICE_FILE
 		        WHERE  NOTICE_SQ = A.NOTICE_SQ
-		       )                              AS FILE_CNT /*첨부파일건수*/
+		       )                                 AS FILE_CNT /*첨부파일건수*/
+		     , RANK() OVER(ORDER BY URGENT_YN DESC
+		                          , REG_DT DESC) AS NUMB
 		FROM   TB_NOTICE A
 		WHERE  NOTICE_TYPE = 'G047_10' /*사이트공지*/
 		AND    USE_YN =  'Y'
@@ -43,8 +53,7 @@
 		               WHERE  NOTICE_SQ = A.NOTICE_SQ
 		               AND    RECEIVER_ID = #{siteCd}
 		              )
-		ORDER  BY URGENT_YN DESC, REG_DT DESC
-		<include refid="pageSql"></include>
+		<include refid="selectForPagingFooter"/>
 	</select>
 
 	<!-- 공지사항 파일 목록 -->

src/main/java/com/style24/persistence/mybatis/TsfOrder.xml

@@ -2,10 +2,17 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfOrderDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
 	</sql>
 	<!--// Paging -->
 
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
+	</sql>
+	
 </mapper>

src/main/java/com/style24/persistence/mybatis/TsfPlanning.xml

@@ -2,11 +2,17 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfPlanningDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
+	</sql>
+
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
 	</sql>
-	<!--// Paging -->
 	
 	
 

src/main/java/com/style24/persistence/mybatis/TsfPoint.xml

@@ -2,11 +2,17 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfPointDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
+	</sql>
+
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
 	</sql>
-	<!--// Paging -->
 	
 	
 

src/main/java/com/style24/persistence/mybatis/TsfRenderer.xml

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.style24.front.biz.dao.TsfRendererDao">
+
+	<!-- 공통코드 목록 -->
+	<select id="getCommonCodeList" parameterType="CommonCode" resultType="CommonCode">
+		/* TsfRenderer.getCommonCodeList */
+		SELECT CD
+		     , CD_NM
+		FROM   TB_COMMON_CODE
+		WHERE  1 = 1
+		<if test="useYn != null and useYn != ''">
+		AND    USE_YN = #{useYn}
+		</if>
+		AND    CD_GB = #{cdGb}
+		<if test="cd != null and cd != ''">
+		AND    CD = #{cd}
+		</if>
+		<if test="cdNm != null and cdNm != ''">
+		AND    CD_NM = #{cdNm}
+		</if>
+		<if test="cdDesc != null and cdDesc != ''">
+		AND    CD_DESC = #{cdDesc}
+		</if>
+		<if test="exceptCds != null and exceptCds != ''">
+		AND    CD NOT IN
+		    <foreach collection="exceptCds" item="item" index="index"  open="(" close=")" separator=",">
+		    #{item}
+		    </foreach>
+		</if>
+		ORDER  BY CD_GB, DISP_ORD
+	</select>
+
+</mapper>

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

@@ -2,11 +2,17 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfReviewDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
+	</sql>
+
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
 	</sql>
-	<!--// Paging -->
 	
 	
 

src/main/java/com/style24/persistence/mybatis/TsfWishlist.xml

@@ -2,11 +2,17 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.style24.front.biz.dao.TsfWishlistDao">
 
-	<!-- Paging -->
-	<sql id="pageSql">
-		LIMIT #{pageable.startRow}, #{pageable.pageSize}
+	<!-- 페이징을 위한 select절 상단 -->
+	<sql id="selectForPagingHeader">
+		SELECT *
+		FROM   (
+	</sql>
+
+	<!-- 페이징을 위한 select절 하단 -->
+	<sql id="selectForPagingFooter">
+		       ) ORIGINAL
+		WHERE  NUMB BETWEEN #{pageable.startRow} AND #{pageable.endRow}
 	</sql>
-	<!--// Paging -->
 	
 	
 

src/main/resources/config/application-locd.yml

@@ -20,7 +20,7 @@ logging:
 has-ssl: false
 
 domain:
-    wivis: //ldfront.style24.com
+    front: //ldfront.style24.com
     image: //ldimage.style24.com
     uximage: //ldfront.style24.com
 
@@ -48,20 +48,6 @@ upload:
 
 download.path: /WIDE/workspace/files/data
 
-# SMTP(naver의 본인 username과 password, from(메일주소) 입려 후 테스트 하면 됨)
-mail:
-    host: mail.wivis.com
-    #    port: 465
-    username: admin@wivis.com
-    password: dnlqltm1!
-    protocol: smtp
-    #    tls: true
-    auth: true
-    from: admin@wivis.com
-    wivis.url: https://ldfront.style24.com
-    image.url: http://ldfront.style24.com/image/mailing
-    template.path: /WIDE/workspace/webapps/wivis/wivismall.front/src/main/webapp/WEB-INF/mail
-
 # PG
 pg:
     nicepay:

src/main/webapp/WEB-INF/views/web/callcenter/FaqFormWeb.html

@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+	layout:decorator="web/common/layout/CallcenterLayoutWeb">
+<!--
+ *******************************************************************************
+ * @source  : FaqFormWeb.html
+ * @desc    : FAQ Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.01.29   gagamel     최초 작성
+ *******************************************************************************
+ -->
+<body>
+
+<th:block layout:fragment="content">
+	<div id="container" class="container cs"> 
+		<div class="breadcrumb"> 
+			<ul>
+				<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
+				<li class="bread_2depth"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_FAQ);">고객센터</a></li>
+				<li class="bread_3depth">FAQ</li>
+			</ul> 
+		</div>
+		<div class="wrap">
+			<div class="content faq">
+				<div class="cont_body">
+					<!-- CONT-BODY -->
+					<div class="lnb">
+						<div class="lnb_tit">
+							<h2>고객센터</h2>
+						</div>
+						<div class="lnb_list">
+							<ul id="callcenterLnbList">
+								<li><a href="javascript:void(0);" class="on">FAQ</a></li>
+								<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_ONETOONE_QNA);">1:1문의</a></li>
+								<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_GOODS_QNA);">상품문의</a></li>
+								<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_NOTICE);">공지</a></li>
+							</ul>
+						</div>
+						<div class="lnb_foot">
+							<ul>
+								<li><p>고객센터 운영안내</p></li>
+								<li><p>1544-5336</p></li>
+								<li><p>평일 09:00~18:00<br>토,일,공휴일 휴무</p></li>
+							</ul>
+						</div>
+					</div>
+					<div class="cont">
+						<div>
+							<div class="sec_head">
+								<h3>FAQ</h3>
+							</div>
+							<div class="sec_body">
+								<div class="quick_list mb50" th:if="${faqTop10List != null and !faqTop10List.empty}">
+									<h4 class="subH3_eng mb20 c_black">자주 묻는 질문 TOP 10</h4>
+									<ul>
+										<li th:each="faqInfo, status : ${faqTop10List}">
+											<a href="#quick_pop" rel="modal:open" th:text="${faqInfo.question}">제품을 받았는데<br>반품을 하고 싶습니다.</a>
+										</li>
+									</ul>
+								</div>
+								<div class="search_wrap mb60">
+									<h4 class="subH3_eng mb20 c_black">FAQ SEARCH</h4>
+									<div class="faq_search t_c">
+										<form id="faqForm" name="faqForm" class="search_box" action="#" th:action="@{'/callcenter/faq/list'}" th:method="post" onsubmit="fnSearchFaq(); return false;">
+											<input type="hidden" name="faqType"/>
+											<input type="hidden" name="pageNo" value ="1"/>
+											<input type="hidden" name="pageSize" value ="5"/>
+											<fieldset>
+												<legend>FAQ 검색</legend>
+												<input type="text" name="searchTxt" placeholder="검색어를 입력해 주세요" class="search_input" title="검색어 입력" maxlength="50"/>
+												<button class="btn_search" onclick="fnSearchFaq(); return false;">찾기</button>
+											</fieldset>
+										</form>
+										<p class="t_info">
+											찾으시는 문의 내용이 없으시면 '1:1 문의'를 이용해 주세요.
+										</p>
+									</div>
+								</div>
+								<div class="fold_nav">
+									<ul>
+										<li><a href="#none;" onclick="fnGetList(this);" class="on">전체</a></li>
+										<li th:if="${faqTypeList != null and !faqTypeList.empty}" th:each="oneData, status : ${faqTypeList}">
+											<a href="javascript:void(0);" th:onclick='fnGetList(this, [[${oneData.cd}]]);' th:text="${oneData.cdNm}">상품문의</a>
+										</li>
+									</ul>
+								</div>
+								<div class="ui_row" id="ulFaq"> <!-- 데이터 없을시 클래스 nodata 추가 -->
+									<div class="foldGroup case1 mt50">
+										<ul id="liFaq">
+										</ul>
+									</div>
+								</div>
+								<div class="ui_foot">
+									<div class="ui_row">
+										<ul class="pageNav">
+										</ul>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- // CONT-BODY -->
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- // container -->
+	
+	<div class="modal fade faq_pop" id="quick_pop" tabindex="-1" role="dialog" aria-labelledby="modalScrollLabel" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<p>[취소/반품/교환]</p>
+					<h5 class="modal-title" id="faqQuestion">제품을 받았는데 반품을 하고 싶습니다.</h5>
+				</div>
+				<div class="modal-body">
+					<span>A</span>
+					<div class="pop_cont" id="faqAnswer">
+						<span>답변 내용은 아래와 같습니다.</span>
+						배송상태"상품준비중"은 당사 물류 센터 및 입점사에서 주문서 확인 후 상품 출고 작업중인 상태를 나타내며 <br>
+						택배 출고 송장번호는 일괄 등록이 되므로 실제 상품이 출고된 시간과 상이할 수 있습니다. <br><br>
+						고객님께 취소를 요청하신 시점이 이미 출고가 된 이후인 경우 <br>
+						제품 반품 시 부과되는 배송료는 고객님께서 부담 해주셔야 합니다. <br><br>
+						상품 수령 후 7일 이내 당사 고객센터(1544-5336) 또는 1:1 상담으로 접수해 주시면 처리가 가능합니다. <br>
+						보내주신 상품은 반품 담당자의 검수 후 환불 처리되며, 상품 훼손/세탁/택 제거/외부 착용 시 반품 처리가 불가합니다. <br><br>
+						더불어 상품 하자가 아닌 고객님의 단순 변심 및 착오 구매일 경우 반품 배송비는 고객님께서 부담해 주셔야 합니다. <br>
+						(반품에 따라 무료배송 조건 불충족 시에는 왕복 배송료 부담) <br>
+						반품이 불가한 경우는 다음과 같습니다. <br><br>
+						- 고객의 부주의로 상품이 회손된 경우 <br>
+						- 포장을 개봉하였거나 포장이 훼손되어 상품가치가 현저히 상실된 경우 <br>
+						- 고객의 사용 또는 일부 소비에 의하여 상품의 가치가 현저히 감소한 경우
+						배송상태"상품준비중"은 당사 물류 센터 및 입점사에서 주문서 확인 후 상품 출고 작업중인 상태를 나타내며 <br>
+						택배 출고 송장번호는 일괄 등록이 되므로 실제 상품이 출고된 시간과 상이할 수 있습니다. <br><br>
+						고객님께 취소를 요청하신 시점이 이미 출고가 된 이후인 경우 <br>
+						제품 반품 시 부과되는 배송료는 고객님께서 부담 해주셔야 합니다. <br><br>
+						상품 수령 후 7일 이내 당사 고객센터(1544-5336) 또는 1:1 상담으로 접수해 주시면 처리가 가능합니다. <br>
+						보내주신 상품은 반품 담당자의 검수 후 환불 처리되며, 상품 훼손/세탁/택 제거/외부 착용 시 반품 처리가 불가합니다. <br><br>
+						더불어 상품 하자가 아닌 고객님의 단순 변심 및 착오 구매일 경우 반품 배송비는 고객님께서 부담해 주셔야 합니다. <br>
+						(반품에 따라 무료배송 조건 불충족 시에는 왕복 배송료 부담) <br>
+						반품이 불가한 경우는 다음과 같습니다. <br><br>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+<script src="/ux/plugins/gaga/gaga.paging.js"></script>
+<script th:inline="javascript">
+/*<![CDATA[*/
+	$(document).ready(function() {
+		// 고객센터 LNB 설정
+		fnSetCallcenterLnbList(1);
+		
+		fnGetList();
+	});
+	
+	let fnGetList = function(obj, faqType) {
+		if (typeof(obj) != 'undefined') {
+			$li = $(obj).parent('li').parent('ul').find('li>a');
+			$li.each(function(i) {
+				$(this).removeClass('on');
+			});
+			$(obj).addClass('on');
+		}
+		
+		if (!gagajf.isNull(faqType)) {
+			$('#faqForm input[name=faqType]').val(faqType);
+		} else {
+			$('#faqForm input[name=faqType]').val('');
+		}
+		
+		// Initialize a pagination
+		gagaPaging.init('faqForm', fnGetListCallback, 'pageNav', 10);
+
+		// Load data
+		gagaPaging.load(1);
+	}
+	
+	var fnGetListCallback = function(result) {
+		$('#liFaq').html('');
+
+		if (result.dataList != null && result.dataList.length > 0) {
+			$.each(result.dataList, function(idx, item) {
+				let tag = '<li>\n';
+				tag += '	<div class="fold_head">\n';
+				tag += '		<a href="javascript:void(0)">\n';
+				tag += '			<div>\n';
+				tag += '				<span class="fold_state">' + item.faqTypeNm + '</span>\n';
+				tag += '				<div class="fold_tit">\n';
+				tag += '					<span>' + item.question + '</span>\n';
+				tag += '				</div>\n';
+				tag += '			</div>\n';
+				tag += '		</a>\n';
+				tag += '	</div>\n';
+				tag += '	<div class="fold_cont" style="display: none;">\n';
+				tag += '		<div class="fold_answer">\n';
+				tag += '			<div>' + item.answer + '</div>\n';
+				tag += '		</div>\n';
+				tag += '	</div>\n';
+				tag += '</li>\n';
+
+				$('#liFaq').append(tag);
+			});
+			$('#ulFaq').removeClass('nodata');
+		} else {
+			let tag = '<li>내역이 없습니다.</li>\n';
+			$('#liFaq').append(tag);
+			$('#ulFaq').addClass('nodata');
+		}
+
+		// Create pagination
+		gagaPaging.createPagination(result.paging.pageable);
+	}
+	
+	let fnSearchFaq = function() {
+		if (gagajf.isNull($('#faqForm input[name=searchTxt]').val())) {
+			alert('검색어를 입력해 주세요.');
+			return;
+		}
+		
+		$('#faqForm input[name=faqType]').val('');
+		fnGetList();
+	}
+/*]]>*/
+</script>
+
+</th:block>
+
+</body>
+</html>

src/main/webapp/WEB-INF/views/web/callcenter/NoticeFormWeb.html

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+	layout:decorator="web/common/layout/CallcenterLayoutWeb">
+<!--
+ *******************************************************************************
+ * @source  : NoticeFormWeb.html
+ * @desc    : 공지사항 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.02.01   gagamel     최초 작성
+ *******************************************************************************
+ -->
+<body>
+
+<th:block layout:fragment="content">
+	<div id="container" class="container cs"> 
+		<div class="breadcrumb"> 
+			<ul>
+				<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
+				<li class="bread_2depth"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_FAQ);">고객센터</a></li>
+				<li class="bread_3depth">공지사항</li>
+			</ul> 
+		</div>
+		<div class="wrap">
+			<div class="content faq">
+				<div class="cont_body">
+					<!-- CONT-BODY -->
+					<div class="lnb">
+						<div class="lnb_tit">
+							<h2>고객센터</h2>
+						</div>
+						<div class="lnb_list">
+							<ul id="callcenterLnbList">
+								<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_FAQ);">FAQ</a></li>
+								<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_ONETOONE_QNA);">1:1문의</a></li>
+								<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_GOODS_QNA);">상품문의</a></li>
+								<li><a href="javascript:void(0);" class="on">공지</a></li>
+							</ul>
+						</div>
+						<div class="lnb_foot">
+							<ul>
+								<li><p>고객센터 운영안내</p></li>
+								<li><p>1544-5336</p></li>
+								<li><p>평일 09:00~18:00<br>토,일,공휴일 휴무</p></li>
+							</ul>
+						</div>
+					</div>
+					<div class="cont">
+						<div>
+							<div class="sec_head">
+								<h3>공지</h3>
+							</div>
+							<div class="sec_body">
+								<div class="ui_row" id="divNotice"> <!-- 데이터 없을시 클래스 nodata 추가 -->
+									<!-- list -->
+									<div class="foldGroup case2">
+										<ul id="ulNotice">
+										</ul>
+									</div>
+									<!-- //list -->
+								</div>
+								<div class="ui_foot">
+									<div class="ui_row">
+										<ul class="pageNav">
+										</ul>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<!-- // CONT-BODY -->
+				</div>
+			</div>
+		</div>
+	</div>
+	<!-- // container -->
+	
+	<form id="noticeForm" name="noticeForm" action="#" th:action="@{'/callcenter/notice/list'}">
+		<input type="hidden" name="pageNo" value ="1"/>
+		<input type="hidden" name="pageSize" value ="10"/>
+	</form>
+
+<script src="/ux/plugins/gaga/gaga.paging.js"></script>
+<script th:inline="javascript">
+/*<![CDATA[*/
+	$(document).ready(function() {
+		// 고객센터 LNB 설정
+		fnSetCallcenterLnbList(4);
+		
+		fnGetList();
+	});
+	
+	let fnGetList = function() {
+		// Initialize a pagination
+		gagaPaging.init('noticeForm', fnGetListCallback, 'pageNav', 10);
+
+		// Load data
+		gagaPaging.load(1);
+	}
+	
+	var fnGetListCallback = function(result) {
+		$('#ulNotice').html('');
+
+		// 중요 공지 목록
+		if (result.urgentList != null && result.urgentList.length > 0) {
+			$.each(result.urgentList, function(idx, item) {
+				let tag = '<li class="critical">\n'; // 중요 공지 클래스 critical 추가
+				tag += '	<div class="fold_head">\n';
+				tag += '		<a href="javascript:void(0)">\n';
+				tag += '			<div>\n';
+				tag += '				<span class="fold_state"><em class="important">중요</em></span>\n';
+				tag += '				<span class="fold_category">공지</span>\n';
+				tag += '				<div class="fold_tit">\n';
+				tag += '					<span>' + item.noticeTitle + '</span>\n';
+				tag += '				</div>\n';
+				tag += '				<span class="data">' + item.regDt.toDate("YYYYMMDD").format("YYYY.MM.DD") + '</span>\n';
+				tag += '			</div>\n';
+				tag += '		</a>\n';
+				tag += '	</div>\n';
+				tag += '	<div class="fold_cont" style="display: none;">\n';
+				tag += '		<div class="fold_detail">\n';
+				tag += '			<div>' + item.noticeContent + '</div>\n';
+				tag += '		</div>\n';
+				tag += '	</div>\n';
+				tag += '</li>\n';
+
+				$('#ulNotice').append(tag);
+			});
+		}
+		
+		// 일반 공지 목록
+		if (result.dataList != null && result.dataList.length > 0) {
+			$.each(result.dataList, function(idx, item) {
+				let paging = result.paging.pageable;
+
+				let tag = '<li>\n';
+				tag += '	<div class="fold_head">\n';
+				tag += '		<a href="javascript:void(0)">\n';
+				tag += '			<div>\n';
+				tag += '				<span class="fold_state">' + (paging.totalCount - ((paging.pageNo - 1) * paging.pageSize) - idx++) + '</span>\n';
+				tag += '				<span class="fold_category">브랜드</span>\n';
+				tag += '				<div class="fold_tit">\n';
+				tag += '					<span>' + item.noticeTitle + '</span>\n';
+				tag += '				</div>\n';
+				tag += '				<span class="data">' + item.regDt.toDate("YYYYMMDD").format("YYYY.MM.DD") + '</span>\n';
+				tag += '			</div>\n';
+				tag += '		</a>\n';
+				tag += '	</div>\n';
+				tag += '	<div class="fold_cont" style="display: none;">\n';
+				tag += '		<div class="fold_detail">\n';
+				tag += '			<div>' + item.noticeContent + '</div>\n';
+				tag += '		</div>\n';
+				tag += '	</div>\n';
+				tag += '</li>\n';
+			
+				$('#ulNotice').append(tag);
+			});
+		}
+		
+		if (result.urgentList == null && result.dataList == null) {
+			let tag = '<li>내역이 없습니다.</li>\n';
+			$('#ulNotice').append(tag);
+			$('#divNotice').addClass('nodata');
+		}
+
+		// Create pagination
+		gagaPaging.createPagination(result.paging.pageable);
+	}
+/*]]>*/
+</script>
+
+</th:block>
+
+</body>
+</html>

src/main/webapp/WEB-INF/views/web/common/error/500Web.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+	layout:decorator="web/common/layout/ErrorLayoutWeb">
+<!--
+ *******************************************************************************
+ * @source  : 500.html
+ * @desc    : 500 Error Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.01.28   gagamel     최초 작성
+ *******************************************************************************
+ -->
+<head>
+	<title>Error</title>
+</head>
+
+<body>
+
+<th:block th:fragment="content">
+	<div id="wrapper" layout:fragment="content">
+		<ul class="msgWrap">
+			<li class="title">죄송합니다. 서비스 이용이 원활하지 않습니다.</li>
+			<li class="cont" th:if="${message == null}">요청하신 페이지에 에러가 발생하였습니다. 서비스 이용에 불편을 끼쳐드려 죄송합니다.</li>
+			<li class="cont" th:if="${message != null && message != '' && message != 'null'}" th:text="${message}"></li>
+			<li class="button">
+				<button type="button" class="btn big white" onclick="cfnGoToPage(_PAGE_MAIN);">위비스몰</button>
+				<button type="button" class="btn big black marL10"  onclick="history.back(-1); return false;">이전페이지</button>
+			</li>
+		</ul>
+	</div>
+</th:block>
+
+</body>
+</html>

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

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org">
+
+<footer id="footer" th:fragment="footer">
+
+	<!-- footer start -->
+	<div class="common_footer">
+		<div class="service_support">
+			<h2>
+				<i class="ico ico_logo_ft"></i>
+				<em class="sr-only">STYLE24</em>
+			</h2>
+			<ul class="support_txt">
+				<li><a href=""><span>이용약관</span></a></li>
+				<li><a href=""><strong>개인정보취급방침</strong></a></li>
+				<li><a href="" target="_blank" title="새창 열림"><span>제휴/입점문의</span></a></li>
+				<li><a href="" target="_blank" title="새창 열림"><span data-font="lato">SN<em>@</em>PP</span><i class="ico ico_blank ml5"></i></a></li>
+			</ul>
+			<div class="family_link">
+				<h2><a href="" class="btn ui_toggle" data-font="lato">FAMILY SITE<i class="ico ico_ft_arrow_b"></i></a></h2>
+				<dl id="family_site" class="">
+					<dt class="no_tit"><span class="blind">그룹없음</span></dt>
+					<dd><a class="clickable" href="" target="_blank" title="새창 열림">한세예스24홀딩스</a></dd>
+					<dd><a class="clickable" href="" target="_blank" title="새창 열림">한세실업</a></dd>
+					<dd><a class="clickable" href="" target="_blank" title="새창 열림">한세드림</a></dd>
+					<dd><a class="clickable" href="" target="_blank" title="새창 열림">컬리수</a></dd>
+					<dd><a class="clickable" href="" target="_blank" title="새창 열림">예스24</a></dd>
+					<dd><a class="clickable" href="" target="_blank" title="새창 열림">YES24 Vietnam</a></dd>
+					<dd><a class="clickable" href="" target="_blank" title="새창 열림">YES24 Indonesia</a></dd>
+					<dd><a class="clickable" href="" target="_blank" title="새창 열림">동아출판</a></dd>
+					<!-- 그룹 구분 할 경우,
+					<dt><span class="txt">그룹1</span></dt>
+					<dd><a class="clickable" href="" target="_blank" title="새창 열림">그룹1의사이트맵1</a></dd>
+					<dd><a class="clickable" href="" target="_blank" title="새창 열림">그룹1의사이트맵2</a></dd>
+					<dd><a class="clickable" href="" target="_blank" title="새창 열림">그룹1의사이트맵3</a></dd>
+					 -->
+				</dl>
+			</div>
+			<div class="connect">
+				<div class="cs_box">
+					<p>
+						<span class="mb20"><a class="clickable" href="#" th:href="@{'/callcenter/faq/form'}" target="_blank" title="새창 열림">고객센터<i class="ico ico_ft_arrow_r ml5"></i></a></span><br>
+						<span class="time mb20">평일 <span data-font="lato"> 09:00 ~ 18:00</span> <br> (토/일공휴일 휴무)</span><br>
+						<span class="tel mb10" data-font="lato">1544-5336</span><br>
+						<span class="fax mb10" data-font="lato">F.02-780-0435</span><br>
+						<span class="mail mb30" data-font="lato">Email : help@istyle24.com</span>
+					</p>
+				</div>
+				<div class="sns_box clear">
+					<a href="https://www.facebook.com/" class="fbook clickable fl mr5" target="_blank" title="새창 열림"><span class="sr-only">STYLE24 페이스북</span></a>
+					<a href="https://www.instagram.com/" class="insta clickable fl" target="_blank" title="새창 열림"><span class="sr-only">STYLE24 인스타그램</span></a>
+				</div>
+				<div class="isms_box mt30">
+					<p>정보보호관리체계<br>ISMS 인증획득</p>
+				</div>
+			</div>
+		</div>
+		<div class="corporation_info">
+			<div class="ft_cpinfo">
+				<dl>
+					<dt>아이스타일이십사 주식회사</dt>
+					<dd> 
+						<div>
+							<p>
+								<span>대표이사 : 윤종선</span>
+								<span>주소: 서울시 영등포구 은행로 <em data-font="lato">11</em>, <em data-font="lato">8</em>층 (여의도동, 일신빌딩)</span> <br>
+								<span>사업자등록번호: <em data-font="lato">116-27-32499</em></span>
+								<span>통신판매업 신고번호: 제<rm data-font="lato">2020</rm>-서울영등포-<rm data-font="lato">1432</rm></span>
+								<span><a class="clickable" href="" target="_blank" title="새창 열림">사업자정보확인</a></span><br>
+								<span>개인정보보호책임자 : 김명인</span>
+								<span>호스팅 서비스사업자 : 아이스타일이십사(주)</span>
+							</p>
+						</div>
+					</dd>
+				</dl>
+			</div>
+			<div class="ft_cpinfo">
+				<dl>
+					<dt>소비자피해보상보험</dt>
+					<dd> 
+						<div>
+							<p>
+								고객님은 안전거래를 위해 현금 결제 시 저희 쇼핑몰이 가입한<br>
+								소비자피해보상보험 서비스를 이용하실 수 있습니다.
+								<a class="clickable" href="" target="_blank" title="새창 열림">가입정보확인</a>
+							</p>
+						</div>
+					</dd>
+				</dl>
+			</div>
+		</div>
+		<div class="copyright">
+			<p data-font="lato">
+				COPYRIGHT©2020. STYLE24 ALL RIGHTS RESERVED.
+			</p>
+		</div>
+		<div class="mobile_version" style="display:none" id="_moveToMobileVer">
+			<a href="javascript:appBroswer('http://m.ssg.com','mo');" class="btn_def">모바일 버전으로 가기</a>
+		</div>
+	</div>
+	<!-- head end -->
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	/* familysite */
+	$(document).ready( function() {
+		$('.family_link').on('click','.btn',function(e){
+			e.preventDefault();
+			$(this).parents('.family_link').find('#family_site').slideToggle(100);
+			$(this).find('.ico.ico_ft_arrow_b').toggleClass('ico_ft_arrow_t');
+		});
+	});
+	/* //familysite  */
+/*]]>*/
+</script>
+
+</footer>
+
+</html>

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

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : GnbWeb.html
+ * @desc    : GNB
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.01.28   gagamel     최초 작성
+ *******************************************************************************
+ -->
+<header id="header" th:fragment="gnb">
+
+	<!-- head start -->
+	<div class="common_header">
+		<div class="hd_top_banner" style="background-color:#fd4801;">
+			<a href="" class="t_bnr">
+				<span style="margin:0 auto;height:60px;line-height:60px;font-size: 20px;font-weight: 600;letter-spacing: -.025em; color:#fff;">APP 수신동의 하면 1만 포인트 증정!</span>
+				<!--<img src="ABC.jpg" alt="프로모션">-->
+			</a>
+		</div>
+	
+<!-- 		<div class="quick_menu_group"> -->
+<!-- 			<div class="area"> -->
+<!-- 				<div> -->
+<!-- 					<span><a href="" title="바로가기">위치테스트1</a></span> -->
+<!-- 					<span><a href="" title="바로가기">위치테스트2</a></span> -->
+<!-- 				</div> -->
+<!-- 				<div class="inr"> -->
+<!-- 					<span><a href="" title="바로가기">로그인</a></span> -->
+<!-- 					<span><a href="" title="바로가기">회원가입</a></span> -->
+<!-- 					<span><a href="" title="바로가기">마이페이지</a></span> -->
+<!-- 					<span><a href="" title="바로가기">고객센터</a></span> -->
+<!-- 					<span><a href="" onclick="AppDownloadPopup();" title="바로가기">앱다운로드</a></span> -->
+<!-- 				</div> -->
+<!-- 			</div> -->
+<!-- 		</div> -->
+
+		<div class="area">
+			<div class="logo">
+				<a href="#none">
+					<h1>
+						<i class="ico ico_logo"></i>
+						<em class="blind">STYLE24</em>
+					</h1>
+				</a>
+			</div>
+			<div class="util_group">
+				<span><a href="mb_login.html" title="로그인 바로가기">로그인</a></span>
+				<span><a href="mb_join_1.html" title="회원가입 바로가기">회원가입</a></span>
+				<span><a href="my_order_1.html" title="마이페이지 바로가기">마이페이지</a></span>
+			</div>
+		</div>
+		
+		<div class="gnb">
+			<!-- nav -->
+			<div class="nav" id="header_area_01">
+				<ul class="bundle" id="nav1" >
+					<!-- [D] 전체메뉴 열림 닫힘 구분 클래스 on -->
+					<li class="all_menu">
+						<a href="#">브랜드</a>
+						<div class="depth_menu">
+							<div style="background:#333; max-width: 1780px;   margin: 0 auto;">
+								<p>브랜드</p>
+								<div class="step1">
+									<ul>
+										<li><a href="#" title="바로가기">1차_1</a></li>
+										<li><a href="#" title="바로가기">1차_2</a></li>
+									</ul>
+								</div>
+								<div class="step2">
+									<ul>
+										<li><a href="#" title="바로가기">2차_1</a></li>
+									</ul>
+									<ul>
+										<li><a href="" title="바로가기">3차_1</a></li>
+										<li><a href="" title="바로가기">3차_2</a></li>
+									</ul>
+								</div>
+							</div>
+						</div>
+					</li>
+				</ul>
+				<ul class="bundle" id="nav2" >
+					<li><a href="#">여성</a></li>
+					<li><a href="#">남성</a></li>
+					<li><a href="#">유아동</a></li>
+					<li><a href="#">골프</a></li>
+					<li><a href="#">라이프</a></li>
+				</ul>
+				<ul class="bundle" id="nav3">
+					<li class="active" ><a href="#">베스트</a></li>
+					<li><a href="#">핫딜</a></li>
+					<li><a href="#">기획전</a></li>
+					<li><a href="#">총알배송</a></li>
+					<li><a href="#">아울렛</a></li>
+					<li><a href="#">룩북</a></li>
+					<li><a href="#">이벤트/혜택</a></li>
+				</ul>
+			</div>
+			<!-- // nav -->
+
+			<!-- search -->
+			<div class="search">
+				<div class="area">
+					<form id="searchMainForm" name="searchMainForm">
+						<fieldset>  
+							<legend>통합검색</legend>
+							<input type="text" id="search" name="search" value="" placeholder="모이몰론, 남들보다 빠르게! 신상 check" class="search_input" title="검색어 입력" maxlength="100">								
+							<div class="search_group" id="ark" style="display: none;">
+								<div id="ark_down" style="position: absolute; display: block; cursor: pointer; top: 3px; left: 366px;"></div>
+								<div id="ark_up" style="position: absolute; display: none; cursor: pointer; top: 3px; left: 366px;"></div>
+								<div class="area">
+									<p class="blind">연관검색</p>
+									<div class="search_list">
+										<div id="ark_content_list" style="width: 410px;"></div>
+										<div id="ark_category_list" class="category"></div>
+										<div id="ark_event_list" class="exhibition"></div>
+										<div id="ark_powerdeal_list"></div>
+									</div>
+									<div class="close">
+										<a href="#" class="search_close">닫기<i class="ico ico_search_close_gray"><em>닫기</em></i></a>
+									</div>
+								</div>
+							</div>
+							<!-- 검색어 입력전 -->
+							<div id="mykeyword" class="my_search_group sch_auto" style="display: none;">
+								<p class="blind">인기 검색어 &amp; 최근 검색어</p>
+								<div class="area">
+									<div class="hot_search_list" id="popkeyword">
+										<p>인기 검색어</p>
+										<ul>
+											<li>
+												<a href="#"><span>1</span>나이키</a>
+											</li>
+											<li>
+												<a href="#"><span>2</span>tamiya</a>
+											</li>
+											<li>
+												<a href="#"><span>3</span>니콘 z6</a>
+											</li>
+											<li>
+												<a href="#"><span>4</span>갤럭시 자켓</a>
+											</li>
+											<li>
+												<a href="#"><span>5</span>아동운동화</a>
+											</li>
+											<li>
+												<a href="#"><span>6</span>타미야</a>
+											</li>
+											<li>
+												<a href="#"><span>7</span>널디</a>
+											</li>
+											<li>
+												<a href="#"><span>8</span>호박목걸이</a>
+											</li>
+											<li>
+												<a href="#"><span>9</span>제시뉴욕</a>
+											</li>
+											<li>
+												<a href="#"><span>10</span>뉴에라</a>
+											</li>
+										</ul>
+									</div>
+									<div class="my_search_list" id="searchkeyword">
+										<p>최근 검색어</p>
+										<button type="button" onclick="removeMyKeyword();">최근 검색어 전체삭제<i class="ico ico_mysearch_delete"></i></button>
+									</div>
+								</div>
+								<div class="close">
+									<a href="#" class="search_close">닫기<i class="ico ico_search_close_gray"><em>닫기</em></i></a>
+								</div>
+							</div>
+							<!-- // 검색어 입력전 -->
+							<button type="button" class="close"><i class="ico ico_search_close"><em>닫기</em></i></button>
+							<button type="button" class="sch_btn" onclick="goSearch();"><i class="ico ico_search"><em>검색</em></i></button>
+						</fieldset>
+					</form>
+				</div>
+
+				<a href="#" class="btn_ico btn_cart" title="장바구니 바로가기"><i class="ico ico_bag"></i><span class="circle_count">99+</span></a>
+				
+			</div>
+			<!-- // search -->
+		</div>
+	</div>
+	<!-- head end -->
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	/* header minify */
+	$(function(){
+		$(window).scroll(function(){
+			var scroll = $(this).scrollTop();
+			var headerH =  $("#header").height();
+			if ($(window).scrollTop() > headerH){
+				$("#header").addClass("minify");
+				return false;
+			}
+			else {
+				$("#header").removeClass("minify");
+				return false;
+			}
+		});
+	});
+	/* //header minify */
+/*]]>*/
+</script>
+
+</header>
+
+</html>

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

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org">
+
+<head th:fragment="head">
+	<meta charset="utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
+<!-- 	<meta http-equiv="cache-control" content="no-cache"/> -->
+<!-- 	<meta http-equiv="expires" content="0"/> -->
+<!-- 	<meta http-equiv="pragma" content="no-cache"/> -->
+	<meta name="Title" th:content="${metaBrowserTitle}" content="한세공식몰 스타일24"/>
+	<meta name="description" th:content="${metaOgDesc}" content="한세공식몰,TBJ,FRJ,NBA,NBA KIDS,LPGA,PGATOUR,컬리수,모이몰른,MOIMOLN,리카앤,리바이스키즈,ANDEW,BUCKAROO,나이키키즈"/>
+	<meta name="keywords" th:content="${metaKeywords}" content="한세공식몰,TBJ,FRJ,NBA,NBA KIDS,LPGA,PGATOUR,컬리수,모이몰른,MOIMOLN,리카앤,리바이스키즈,ANDEW,BUCKAROO,나이키키즈"/>
+	<meta property="og:type" content="website"/>
+	<meta property="og:image" th:content="${metaOgImage}" content="/image/web/common/og_style24.png"/>
+	<meta property="og:url" th:content="${@environment.getProperty('domain.front')}" content="http://www.style24.com"/>
+	<meta property="og:title" th:content="${metaBrowserTitle}" content="스타일24"/>
+	<meta property="og:description" th:content="${metaOgDesc}" content="한세공식몰,TBJ,FRJ,NBA,NBA KIDS,LPGA,PGATOUR,컬리수,모이몰른,MOIMOLN,리카앤,리바이스키즈,ANDEW,BUCKAROO,나이키키즈"/>
+	<meta property="og:locale" content="ko_KR"/>
+	<meta property="og:site_name" th:content="${metaBrowserTitle}" content="한세공식몰 스타일24"/>
+	
+	<title th:text="${metaBrowserTitle}">한세공식몰 스타일24</title>
+	<link rel="icon" th:href="@{/images/favicon.ico}" href="favicon.ico" type="image/x-icon"/>
+	<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" sizes="180x180"/>
+	<link rel="icon" href="/images/favicon-32x32.png" sizes="32x32" type="image/png"/>
+	<link rel="icon" href="/images/favicon-16x16.png" sizes="16x16" type="image/png"/>
+	
+	<link rel="stylesheet" type="text/css" th:href="@{'/ux/pc/css/common.css?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" href="/ux/pc/css/common.css"/>
+	<link rel="stylesheet" type="text/css" href="/ux/pc/css/slick.css" />
+	
+	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
+	<script src="/ux/pc/js/slick.min.js"></script>
+	<script src="/ux/pc/js/jquery-ui.js"></script>
+	<script src="/ux/pc/js/jquery.modal.min.js"></script>
+	<script src="/ux/plugins/jquery.serializeObject.min.js"></script>
+
+	<!-- Global site tag (gtag.js) - Google Analytics -->
+<!-- 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-168660512-1"></script> -->
+	<script>
+// 		window.dataLayer = window.dataLayer || [];
+// 		function gtag(){dataLayer.push(arguments);}
+// 		gtag('js', new Date());
+// 		gtag('config', 'UA-168660512-1');
+	</script>
+</head>
+
+</html>

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

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : ScriptsWeb.html
+ * @desc    : 공통 스크립트
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.02.01   gagamel     최초 작성
+ *******************************************************************************
+ -->
+<th:block th:fragment="scripts">
+<script th:src="@{'/ux/pc/js/common-ui.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/ux/pc/js/common-ui.js"></script>
+<script th:src="@{'/ux/style24_link.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/ux/style24_link.js"></script>
+<script type="text/javascript" th:src="@{'/ux/plugins/gaga/gaga.common.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/ux/plugins/gaga/gaga.common.js"></script>
+<script type="text/javascript" th:src="@{'/ux/plugins/gaga/gaga.validation.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/ux/plugins/gaga/gaga.validation.js"></script>
+</th:block>
+</html>

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

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : VariablesWeb.html
+ * @desc    : Global variables 설정
+ *            prefix를 _(underbar)로 시작한다.
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.01.28   gagamel     최초 작성
+ *******************************************************************************
+ -->
+<th:block th:fragment="variables">
+<script th:inline="javascript">
+/*<![CDATA[*/
+var _frontUrl = [[${@environment.getProperty('domain.front')}]];
+var _uximgUrl = [[${@environment.getProperty('domain.uximage')}]];
+var _imgUrl = [[${@environment.getProperty('domain.image')}]];
+var _uploadDefaultUrl = [[${@environment.getProperty('upload.default.view')}]];
+var _uploadGoodsUrl = [[${@environment.getProperty('upload.goods.view')}]];
+var _uploadImageUrl = [[${@environment.getProperty('upload.image.view')}]];
+var _frontGb = [[${frontGb}]];
+
+var _today = [[${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}]];
+var _realtime = [[${#calendars.format(#calendars.createNow(), 'HHmmss')}]];
+var _thisYear = [[${#calendars.format(#calendars.createNow(), 'yyyy')}]];
+
+// App Info.
+var _osType = [[${osType}]];
+var _isApp = [[${isApp}]];
+var _appName = [[${appName}]];
+var _appVersion = [[${appVersion}]];
+/*]]>*/
+</script>
+</th:block>
+
+</html>

src/main/webapp/WEB-INF/views/web/common/layout/CallcenterLayoutWeb.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+
+<head th:replace="~{web/common/fragments/HeadWeb :: head}"></head>
+
+<body>
+
+<div class="skipComment">
+	<a href="#content">본문 바로가기</a>
+	<a href="#gnb">주메뉴 바로가기</a>
+	<a href="#footer">하단메뉴 바로가기</a>
+</div>
+	
+<th:block th:replace="~{web/common/fragments/VariablesWeb :: variables}"></th:block>
+
+<!-- GNB -->
+<header id="header" th:replace="~{web/common/fragments/GnbWeb :: gnb}"></header>
+<!--// GNB -->
+
+<!-- CONTENT AREA -->
+<th:block layout:fragment="content"></th:block>
+<!-- // CONTENT AREA -->
+
+<!-- Footer -->
+<footer id="footer" th:replace="~{web/common/fragments/FooterWeb :: footer}"></footer>
+
+<th:block th:replace="~{web/common/fragments/ScriptsWeb :: scripts}"></th:block>
+<!-- <th:block th:replace="~{web/common/fragments/MarketingScripts :: mscripts}"></th:block> -->
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	var fnSetCallcenterLnbList = function(lnbLvl) {
+		let tag = '';
+		tag += '<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_FAQ);"' + (lnbLvl == 1 ? ' class="on"' : '') + '>FAQ</a></li>\n';
+		tag += '<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_ONETOONE_QNA);"' + (lnbLvl == 2 ? ' class="on"' : '') + '>1:1문의</a></li>\n';
+		tag += '<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_GOODS_QNA);"' + (lnbLvl == 3 ? ' class="on"' : '') + '>상품문의</a></li>\n';
+		tag += '<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_NOTICE);"' + (lnbLvl == 4 ? ' class="on"' : '') + '>공지</a></li>\n';
+		tag += '</ul>';
+		$('#callcenterLnbList').html();
+	}
+
+	$(document).ready(function() {
+		
+	});
+/*]]>*/
+</script>
+
+</body>
+</html>

src/main/webapp/WEB-INF/views/web/common/layout/DefaultLayoutWeb.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+
+<head th:replace="~{web/common/fragments/HeadWeb :: head}"></head>
+
+<body>
+
+<div class="skipComment">
+	<a href="#content">본문 바로가기</a>
+	<a href="#gnb">주메뉴 바로가기</a>
+	<a href="#footer">하단메뉴 바로가기</a>
+</div>
+	
+<th:block th:replace="~{web/common/fragments/VariablesWeb :: variables}"></th:block>
+
+<!-- GNB -->
+<header id="header" th:replace="~{web/common/fragments/GnbWeb :: gnb}"></header>
+<!--// GNB -->
+
+<!-- CONTENT AREA -->
+<th:block layout:fragment="content"></th:block>
+<!-- // CONTENT AREA -->
+
+<!-- Footer -->
+<footer id="footer" th:replace="~{web/common/fragments/FooterWeb :: footer}"></footer>
+
+<th:block th:replace="~{web/common/fragments/ScriptsWeb :: scripts}"></th:block>
+<!-- <th:block th:replace="~{web/common/fragments/MarketingScripts :: mscripts}"></th:block> -->
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	$(document).ready(function() {
+		
+	});
+/*]]>*/
+</script>
+
+</body>
+</html>

src/main/webapp/WEB-INF/views/web/common/layout/ErrorLayoutWeb.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+
+<head th:replace="~{web/common/fragments/HeadWeb :: head}"></head>
+
+<body>
+
+<th:block th:replace="~{web/common/fragments/VariablesWeb :: variables}"></th:block>
+
+<!-- CONTENT AREA -->
+<th:block layout:fragment="content"></th:block>
+<!-- // CONTENT AREA -->
+
+<th:block th:replace="~{web/common/fragments/ScriptsWeb :: scripts}"></th:block>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	$(document).ready(function() {
+		
+	});
+/*]]>*/
+</script>
+
+</body>
+</html>

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

@@ -0,0 +1,2273 @@
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org"
+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+	layout:decorator="web/common/layout/DefaultLayoutWeb">
+<!--
+ *******************************************************************************
+ * @source  : MallMainFormWeb.html
+ * @desc    : 몰메인 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.01.28   gagamel     최초 작성
+ *******************************************************************************
+ -->
+<body>
+
+<th:block layout:fragment="content">
+<div id="container" class="container main"> 
+	<!-- <div class="breadcrumb"> (breadcrumb) </div> -->
+
+	<div class="wrap ">
+		<!-- 1. 비주얼 슬라이드 -->
+		<div class="content wide main_visual">
+			<div class="cont_head dpnone">
+				<p class="t_c">비주얼 슬라이드</p>
+			</div>
+			<div class="cont_body">
+				<div class="post-slider">
+					<div class="post-wrapper post-visual">
+						<div class="post">
+							<div class="txtWrap">
+								<p class="vrt_txt">NBA</p>
+								<dl class="w">
+									<dt>NBA</dt>
+									<dd>2020 FALL</dd>
+									<dd>NEW ARRIVAL</dd>
+									<dd class="txt_xs">나만의 가을 스타일 찾기</dd>
+								</dl>
+								<button type="button" class="btn"><span>VIEW MORE</span></button>
+							</div>
+							<img src="/images/thumb/main_visual01.jpg" alt="">
+						</div>
+					
+						<div class="post">
+							<div class="txtWrap">
+								<p class="vrt_txt">vertical-BrandName</p>
+								<dl class="w">
+									<dt>브랜드명</dt>
+									<dd>F/W SEASON</dd>
+									<dd>DENIM SALE</dd>
+									<dd class="txt_xs">데님 신상 아이템 ~20% 세일</dd>
+								</dl>
+								<button type="button" class="btn"><span>VIEW MORE</span></button>
+							</div>
+							<img src="/images/thumb/main_visual02.jpg" alt="">
+						</div>
+	
+						<div class="post">
+							<div class="txtWrap">
+								<p class="vrt_txt">vertical-BrandName</p>
+								<dl class="w">
+									<dt>브랜드명</dt>
+									<dd>F/W SEASON</dd>
+									<dd>DENIM SALE</dd>
+									<dd class="txt_xs">데님 신상 아이템 ~20% 세일</dd>
+								</dl>
+								<button type="button" class="btn"><span>VIEW MORE</span></button>
+							</div>
+							<img src="/images/thumb/main_visual03.jpg" alt="">
+						</div>
+						<div class="post">
+							<div class="txtWrap">
+								<p class="vrt_txt">vertical-BrandName</p>
+								<dl class="">
+									<dt>브랜드명</dt>
+									<dd>F/W SEASON</dd>
+									<dd>DENIM SALE</dd>
+									<dd class="txt_xs">데님 신상 아이템 ~20% 세일</dd>
+								</dl>
+								<button type="button" class="btn"><span>VIEW MORE</span></button>
+							</div>
+							<img src="/images/thumb/main_visual04.jpg" alt="">
+						</div>
+						<div class="post">
+							<div class="txtWrap">
+								<p class="vrt_txt">vertical-BrandName</p>
+								<dl class="">
+									<dt>브랜드명</dt>
+									<dd>F/W SEASON</dd>
+									<dd>DENIM SALE</dd>
+									<dd class="txt_xs">데님 신상 아이템 ~20% 세일</dd>
+								</dl>
+								<button type="button" class="btn"><span>VIEW MORE</span></button>
+							</div>
+							<img src="/images/thumb/main_visual05.jpg" alt="">
+						</div>
+					</div>
+				</div>
+				
+			</div>
+			<div class="cont_foot dpnone">
+				CONT-FOOT
+			</div>
+		</div>
+
+		<!-- 2. 스타일리포트 -->
+		<div class="content main_stylereport">
+			<div class="cont_head">
+				<p class="displayH t_c">스타일리포트</p>
+			</div>
+			<div class="cont_body">
+				<div class="ui_row">
+					<div class="ui_col_3">
+						<a href="#none">
+							<img src="/images/thumb/main_stylereport01.jpg" alt="">
+							<dl>
+								<dt>겨울 아우터 미리 준비하기</dt>
+								<dd>올 겨울 무엇을 입을지 고민하는</dd>
+								<dd>당신을 위해 준비한 아우터 픽을 만나보자</dd>
+							</dl>
+						</a>
+					</div>
+					<div class="ui_col_3">
+						<a href="#none">
+							<img src="/images/thumb/main_stylereport02.jpg" alt="">
+							<dl>
+								<dt>트렌드 스타일링</dt>
+								<dd>가을의 냄새가 느껴지는 요즘,</dd>
+								<dd>쌀쌀한 날씨에서 나를 지켜줄 아우터만 모았다</dd>
+							</dl>
+						</a>
+					</div>
+					<div class="ui_col_3">
+						<a href="#none">
+							<img src="/images/thumb/main_stylereport03.jpg" alt="">
+							<dl>
+								<dt>TBJ 가을신상 아이템</dt>
+								<dd>오직 스타일24 에서만 만날 수 있는</dd>
+								<dd>TBJ의 가을 신상 아이템들을 만나보자</dd>
+							</dl>
+						</a>
+					</div>
+					<div class="ui_col_3">
+						<a href="#none">
+							<img src="/images/thumb/main_stylereport04.jpg" alt="">
+							<dl>
+								<dt>컬리수 2020 F/W</dt>
+								<dd>사랑스러운 컬리수의 2020 F/W 신상</dd>
+								<dd>~10% 쿠폰찬스 놓치지 말자</dd>
+							</dl>
+						</a>
+					</div>
+				</div>
+			</div>
+			<div class="cont_foot dpnone">
+				CONT-FOOT
+			</div>
+		</div>
+
+		<!-- 3. 트렌디한 신상아이템 -->
+		<div class="content wide main_trendy">
+
+			<div class="cont_head">
+				
+				<p class="displayH t_c">트렌디한 신상 아이템 </p>
+			</div>
+			<div class="cont_body">
+				<div class="post-slider variable">
+					<div class="post-wrapper post-trendy">
+						<div class="post">
+							<div class=" item_prod inc">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/main_trendy01.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">스타 착용 여성 퍼 아플리케 오버핏 투마일 웨어링 점퍼</div>
+										<p class="itemPrice">488,000</p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod shr">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/main_trendy02.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">유니 다이아몬드 누빔 포인트포켓 거위털 밴딩 점퍼 스웨이드 집업 트러커 점퍼</div>
+										<p class="itemPrice">
+											<span>80,100</span>
+											<span class="itemPrice_original">89,000</span>
+											<span class=" itemPercent">10%</span>
+										</p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod shr">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/main_trendy03.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">여성 카라리스 오버핏 메탈릭 포켓 셔츠</div>
+										<p class="itemPrice">488,000</p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod inc">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/main_trendy04.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">가을 신상 면 혼방 블루종 자수 로고 포인트 자켓 유니 스몰 로고 긴팔 티셔츠</div>
+										<p class="itemPrice">488,000</p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod shr">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/main_trendy05.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>
+										<p class="itemPrice">488,000</p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<img src="/images/thumb/main_trendy03.jpg" alt="">
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="cont_foot dpnone">
+				CONT-FOOT
+			</div>
+		</div>
+
+		<!-- 4. 잇 아이템 -->
+		<div class="content main_it">
+			<div class="cont_head">
+				<p class="displayH">가장 사랑받은<br>잇 아이템</p>
+				<a href="#none"><span>전체보기</span></a>
+			</div>
+			<div class="cont_body">
+				<div class="it_nav">
+					<ul>
+						<li><button class="btn btn_link active" data-tab="it1"><span>여성</span></button></li>
+						<li><button class="btn btn_link" data-tab="it2"><div><span>남성</span></button></li>
+						<li><button class="btn btn_link" data-tab="it3"><div><span>유아동</span></button></li>
+						<li><button class="btn btn_link" data-tab="it4"><div><span>골프</span></button></li>
+						<li><button class="btn btn_link" data-tab="it5"><div><span>라이프</span></button></li>
+					</ul>
+				</div>
+				<div class="post-slider it_item active " id="it1">
+					<div class="post-wrapper post-it">
+						<div class="post">
+							<div class=" item_prod sUiXc "> <!-- item_prod ranker d_detail -->
+								
+								<div class="item_state"> <!-- item_state AD soldout -->
+									<a href="#none" class=" itemLink">
+										<div class="shape ranker"><span>1</span></div>
+										<div class="itemPic">
+											<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class=" itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+											<span class="itemPrice_original">89,000</span>
+											<span class=" itemPercent">10%</span>
+										</p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="shape "><span>2</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">여성 체인 프린트 큐롯 스커트 프린트 큐롯 스커트</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="shape"><span>3</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="shape"><span>4</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="shape "><span>5</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod sUiXc "> 
+								<div class="item_state"> 
+									<a href="#none" class=" itemLink">
+										<div class="shape ranker"><span>1</span></div>
+										<div class="itemPic">
+											<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class=" itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+											<span class="itemPrice_original">89,000</span>
+											<span class=" itemPercent">10%</span>
+										</p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+									<div class="shape"><span>88</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+									<div class="shape"><span>999</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+									<div class="shape"><span>특가</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+									<div class="shape dealdetail"><span>상품<br>   04</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+						<span class="slider__label sr-only">
+						</span>
+					</div>
+				</div>
+				<div class="post-slider it_item " id="it2">
+					<div class="post-wrapper post-it">
+						<div class="post">
+							<div class=" item_prod sUiXc "> <!-- item_prod ranker d_detail -->
+								
+								<div class="item_state"> <!-- item_state AD soldout -->
+									<a href="#none" class=" itemLink">
+										<div class="rank ranker"><span>1</span></div>
+										<div class="itemPic">
+											<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class=" itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+											<span class="itemPrice_original">89,000</span>
+											<span class=" itemPercent">10%</span>
+										</p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="rank r⸏an⸏ke⸏r"><span>88</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">여성 체인 프린트 큐롯 스커트 프린트 큐롯 스커트</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="rank"><span>100</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="rank"><span>특가</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="rank detail"><span>상품 014</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod sUiXc "> 
+								<div class="item_state"> 
+									<a href="#none" class=" itemLink">
+										<div class="shape ranker"><span>1</span></div>
+										<div class="itemPic">
+											<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class=" itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+											<span class="itemPrice_original">89,000</span>
+											<span class=" itemPercent">10%</span>
+										</p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+									<div class="shape"><span>88</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+									<div class="shape"><span>999</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+									<div class="shape"><span>특가</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+									<div class="shape dealdetail"><span>상품<br>   04</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+						<span class="slider__label sr-only">
+						</span>
+					</div>
+				</div>
+			</div>
+			<div class="cont_foot dpnone">
+				CONT-FOOT
+			</div>
+		</div>
+
+		<!-- 5. 프로모션배너 -->
+		<div class="content main_2stage">
+			<div class="cont_head dpnone">
+				<p class="t_c">프로모션배너</p>
+			</div>
+			<div class="cont_body">
+				<div class="ui_row">
+					<div class="ui_col_6">
+						<a href="#none"><img src="/images/thumb/bnn_2stage1.jpg" alt=""></a>
+					</div>
+					<div class="ui_col_6">
+						<a href="#none"><img src="/images/thumb/bnn_2stage2.jpg" alt=""></a>
+					</div>
+				</div>
+			</div>
+			<div class="cont_foot dpnone">
+				CONT-FOOT
+			</div>
+		</div>
+
+
+		<!-- 6. 타임딜 : 슬라이드 -->
+		<div class="content wide main_deal">
+			<div class="cont_head">
+				<p class="displayH">오늘만<br>이 가격에 만나요</p>
+				<a href="#none"><span>전체보기</span></a>
+
+				<div class="count">
+					<style>
+							/**
+*  Progress Bar
+*/
+.progress {
+display: block;
+width: 100%;
+height: 2px;
+border-radius: 0px;
+overflow: hidden;
+background-color: #dddddd;
+background-image: linear-gradient(to right, #222222, #222222);
+background-repeat: no-repeat;
+/* background-size: 0 100%; */
+background-size: 0% 100%;
+transition: background-size .4s ease-in-out;
+}
+						</style>
+				</div>
+			</div>
+			<div class="cont_body">
+				<div class="post-slider  active" id="it1">
+					<div class="post-wrapper post-deal">
+						<div class="post">
+							<div class=" item_prod sUiXc "> <!-- item_prod ranker d_detail -->
+								
+								<div class="item_state"> <!-- item_state AD soldout -->
+									<a href="#none" class=" itemLink">
+										<div class="rank ranker"><span>1</span></div>
+										<div class="itemPic">
+											<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class=" itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+											<span class="itemPrice_original">89,000</span>
+											<span class=" itemPercent">10%</span>
+										</p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="rank r⸏an⸏ke⸏r"><span>88</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod2.jpg">
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">여성 체인 프린트 큐롯 스커트 프린트 큐롯 스커트</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="rank"><span>100</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod3.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="rank"><span>특가</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod4.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="rank detail"><span>상품 014</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod sUiXc "> 
+								<div class="item_state"> 
+									<a href="#none" class=" itemLink">
+										<div class="shape ranker"><span>1</span></div>
+										<div class="itemPic">
+											<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod4.jpg">
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class=" itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+											<span class="itemPrice_original">89,000</span>
+											<span class=" itemPercent">10%</span>
+										</p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+									<div class="shape"><span>88</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+									<div class="shape"><span>999</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+									<div class="shape"><span>특가</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>
+						<div class="post">
+							<div class=" item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+									<div class="shape dealdetail"><span>상품<br>   04</span></div>
+										<div class=" itemPic">
+											<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg"> 
+											<button type="button" class="itemLike">관심상품 추가</button>
+										</div>
+										<p class="itemBrand">BRAND NAME</p>
+
+										<div class=" itemName">[온라인 단독] 여성 겨울 부클칼라 A라인 다운베스트(구스)</div>
+										<p class="itemPrice">488,000 </p>
+									</a>
+								</div>
+							</div>
+						</div>							
+					</div>
+					<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
+						<span class="slider__label sr-only">
+						</span>
+					</div>
+				</div>
+			</div>
+			<div class="cont_foot dpnone">
+				CONT-FOOT
+			</div>
+		</div>
+
+		<!-- 7. 브랜드픽 -->
+		<div class="content main_pick">
+			<div class="cont_head">
+				<p class="displayH t_c">브랜드 PICK</p>
+			</div>
+			<div class="cont_body">
+				<div class="post-slider variable">
+					<div class="post-wrapper post-pick-nav">
+						<div><span><img src="/images/thumb/main_picklogo01.png" alt="barnd name"></span></div>
+						<div><span><img src="/images/thumb/main_picklogo02.png" alt="barnd name"></span></div>
+						<div><span><img src="/images/thumb/main_picklogo03.png" alt="barnd name"></span></div>
+						<div><span><img src="/images/thumb/main_picklogo04.png" alt="barnd name"></span></div>
+						<div><span><img src="/images/thumb/main_picklogo05.png" alt="barnd name"></span></div>
+						<div><span><img src="/images/thumb/main_picklogo06.png" alt="barnd name"></span></div>
+					</div>
+				</div>
+
+				<div class="post-slider">
+					<div class="post-wrapper post-pick-for">
+						<div>
+							<div class="pick_look">
+								<div class="post-slider variable">
+									<div class="post-wrapper post-lookbook">
+										<div><img src="/images/thumb/main_pickImg01.jpg" alt="barnd lookbook"></div>
+										<div><img src="/images/thumb/main_pickImg01.jpg" alt="barnd lookbook"></div>
+										<div><img src="/images/thumb/main_pickImg01.jpg" alt="barnd lookbook"></div>
+									</div>
+								</div>
+							</div>
+							<div class="pick_item">
+								
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink" tabindex="0">
+											<div class="itemPic">
+												<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+												<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+											</div>
+											<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">80,100
+												<span class="itemPrice_original">89,000</span>
+												<span class=" itemPercent">10%</span>
+											</p>
+										</a>
+									</div>
+								</div>
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink" tabindex="0">
+											<div class="itemPic">
+												<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+												<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+											</div>
+											<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">80,100
+												<span class="itemPrice_original">89,000</span>
+												<span class=" itemPercent">10%</span>
+											</p>
+										</a>
+									</div>
+								</div>
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink" tabindex="0">
+											<div class="itemPic">
+												<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+												<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+											</div>
+											<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">80,100
+												<span class="itemPrice_original">89,000</span>
+												<span class=" itemPercent">10%</span>
+											</p>
+										</a>
+									</div>
+								</div>
+								
+							</div>
+						</div>
+						<div>
+							<div class="pick_look">
+								<div class="post-slider variable">
+									<div class="post-wrapper post-lookbook">
+										<div><img src="/images/thumb/main_pickImg01.jpg" alt="barnd lookbook"></div>
+										<div><img src="/images/thumb/main_pickImg01.jpg" alt="barnd lookbook"></div>
+										<div><img src="/images/thumb/main_pickImg01.jpg" alt="barnd lookbook"></div>
+									</div>
+								</div>
+							</div>
+							<div class="pick_item">
+								
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink" tabindex="0">
+											<div class="itemPic">
+												<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod2.jpg">
+												<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+											</div>
+											<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">80,100
+												<span class="itemPrice_original">89,000</span>
+												<span class=" itemPercent">10%</span>
+											</p>
+										</a>
+									</div>
+								</div>
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink" tabindex="0">
+											<div class="itemPic">
+												<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod2.jpg">
+												<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+											</div>
+											<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">80,100
+												<span class="itemPrice_original">89,000</span>
+												<span class=" itemPercent">10%</span>
+											</p>
+										</a>
+									</div>
+								</div>
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink" tabindex="0">
+											<div class="itemPic">
+												<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod2.jpg">
+												<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+											</div>
+											<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<p class="itemPrice">80,100
+												<span class="itemPrice_original">89,000</span>
+												<span class=" itemPercent">10%</span>
+											</p>
+										</a>
+									</div>
+								</div>
+								
+							</div>
+						</div>
+						<div>
+							<div class="pick_look"></div>
+							<div class="pick_item"></div>
+						</div>
+						<div>
+							<div class="pick_look"></div>
+							<div class="pick_item"></div>
+						</div>
+						<div>
+							<div class="pick_look"></div>
+							<div class="pick_item"></div>
+						</div>
+						<div>
+							<div class="pick_look"></div>
+							<div class="pick_item"></div>
+						</div>
+					</div>
+				</div>
+
+			</div>
+			<div class="cont_foot dpnone">
+				CONT-FOOT
+			</div>
+		</div>
+
+
+		<!-- 8. 가로 긴 배너 슬라이드 -->
+		<!-- bnn_1stage -->
+		<div class="content wide main_1stage">
+			<div class="cont_head dpnone">
+				<p class="t_c">배너 슬라이드</p>
+			</div>
+			<div class="cont_body">
+				<div class="post-slider">
+					<div class="post-wrapper post-bnnWide">
+						<div class="post">
+							<a href="#none">
+								<div class="bnnbox" style="background:#e3e7ea;">
+									<div class="txtWrap ">
+										<p>TBJ 가을 신상</p>
+										<p>아우터 + 이너 단독세일</p>
+										<button type="button" class="btn">VIEW MORE</button>
+									</div>
+									<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/bnn_1stage.jpg"> 
+								</div>
+							</a>
+						</div>
+						<div class="post">
+							<a href="#none">
+								<div class="bnnbox" style="background:#eef1f3;">
+									<div class="txtWrap ">
+										<p>TBJ 가을 신상</p>
+										<p>아우터 + 이너 단독세일</p>
+										<button type="button" class="btn">VIEW MORE</button>
+									</div>
+									<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/thumb/bnn_1stage.jpg"> 
+								</div>
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="cont_foot dpnone">
+				CONT-FOOT
+			</div>
+		</div>
+
+
+		<!-- 9. MD추천 스타일 -->
+		<div class="content main_recomm">
+			<div class="cont_head">
+				<p class="displayH t_c">MD가 추천하는 스타일</p>
+			</div>
+			<div class="cont_body">
+				<section>
+					<div class="sec_head">
+						<div class="filter action">
+							<button data-filter="tag_warm" class="btn">따뜻한 무드</button>
+							<button data-filter="tag_daily" class="btn">일상의 데일리룩</button>
+							<button data-filter="tag_homeware" class="btn">집콕스타일</button>
+							<button data-filter="tag_point" class="btn" disabled >포인트 아이템</button>
+							<button data-filter="tag_classic" class="btn" disabled >클래식 자켓</button>
+							<button data-filter="Test" class="btn test_btn" disabled >테스트 버튼</button>
+						</div>
+					</div>
+					<div class="sec_body">
+						<div class="post-slider">
+							<div class="post-wrapper post-recomm">
+								<div class="tag_warm post">
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod3.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod3.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+								</div>
+								<div class="tag_warm post">
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod3.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod3.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class="item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod1.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+								</div>
+								<div class="tag_daily post">
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod4.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod2.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod4.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod2.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod4.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+								</div>
+								<div class="tag_daily post">
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod4.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod2.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod4.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod2.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod4.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+								</div>
+								<div class="tag_homeware post">
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+								</div>
+								<div class="tag_homeware post">
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+									<div class=" item_prod">
+										<div class="item_state">
+											<a href="#none" class="itemLink">
+												<div class="itemPic">
+													<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/prod5.jpg">
+													<button type="button" class="itemLike">관심상품 추가</button>
+												</div>
+												<p class="itemBrand">BRAND NAME</p>
+
+												<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+												<p class="itemPrice">80,100
+													<span class="itemPrice_original">89,000</span>
+													<span class=" itemPercent">10%</span>
+												</p>
+												<div class="itemComment">#주문 폭주 상품</div>
+											</a>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						
+					</div>
+					<div class="sec_foot dpnone">SECTION-FOOT</div>
+				</section>
+			</div>
+			<div class="cont_foot dpnone">
+				CONT-FOOT
+			</div>
+		</div>
+
+
+		<!-- 10. 당신을위한제안 -->
+		<div class="content wide main_foryou">
+			<div class="cont_head">
+				<p class="displayH">당신을 위한 제안</p>
+				<span>스타일24에서 가장 주목받는 상품을 살펴보세요</span>
+			</div>
+			<div class="cont_body">
+
+				<div class="post-slider fy_nav">
+					<div class="post-wrapper post-sug">
+						<div class="post">
+							<ul>
+								<li><button class="btn btn_shape active" data-tab="fy1"><div><span class="number">1</span><span>BUCKAROO</span></div></button><a href="#none">더보기</a></li>
+								<li><button class="btn btn_shape" data-tab="fy2"><div><span class="number">2</span><span>기모청바지</span></div></button><a href="#none">더보기</a></li>
+								<li><button class="btn btn_shape" data-tab="fy3"><div><span class="number">3</span><span>겨울 팬츠</span></div></button><a href="#none">더보기</a></li>
+								<li><button class="btn btn_shape" data-tab="fy4"><div><span class="number">4</span><span>컨버스 주니어</span></div></button><a href="#none">더보기</a></li>
+								<li><button class="btn btn_shape" data-tab="fy5"><div><span class="number">5</span><span>모이몰른</span></div></button><a href="#none">더보기</a></li>
+							</ul>
+						</div>
+						<div class="post">
+							<ul>
+								<li><button class="btn btn_shape" data-tab="fy6"><div><span class="number">6</span><span>컨버스 주니어</span></div></button><a href="#none">더보기</a></li>
+								<li><button class="btn btn_shape" data-tab="fy7"><div><span class="number">7</span><span>겨울 팬츠</span></div></button><a href="#none">더보기</a></li>
+								<li><button class="btn btn_shape" data-tab="fy8"><div><span class="number">8</span><span>BUCKAROO</span></div></button><a href="#none">더보기</a></li>
+								<li><button class="btn btn_shape" data-tab="fy9"><div><span class="number">9</span><span>모이몰른</span></div></button><a href="#none">더보기</a></li>
+								<li><button class="btn btn_shape" data-tab="fy10"><div><span class="number">10</span><span>기모청바지</span></div></button><a href="#none">더보기</a></li>
+							</ul>
+						</div>
+					</div>
+				</div>
+
+
+				<div class="fy_item active" id="fy1">
+					<div class="part">
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug01.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">자카드 방풍 패딩 스웨터 가디건 자카드 </div>
+										<p class="itemPrice">80,100
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug02.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+											<span class="itemPrice_original">89,000</span>
+											<span class=" itemPercent">10%</span>
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+					<div class="part lg">
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug03.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+											<span class="itemPrice_original">89,000</span>
+											<span class=" itemPercent">10%</span>
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+					<div class="part">
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug04.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug05.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 가디건</div>
+										<p class="itemPrice">80,100
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+					<div class="part">
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug06.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+											<span class="itemPrice_original">89,000</span>
+											<span class=" itemPercent">10%</span>
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug07.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="fy_item" id="fy2">
+					<div class="part">
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug04.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug05.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 가디건</div>
+										<p class="itemPrice">80,100
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+					<div class="part">
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug01.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">자카드 방풍 패딩 스웨터 가디건 자카드 </div>
+										<p class="itemPrice">80,100
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug02.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+											<span class="itemPrice_original">89,000</span>
+											<span class=" itemPercent">10%</span>
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+					<div class="part">
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug06.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+											<span class="itemPrice_original">89,000</span>
+											<span class=" itemPercent">10%</span>
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug07.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+					<div class="part lg">
+						<div class="item_prod">
+							<div class="item_state">
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/thumb/main_sug03.jpg">
+										<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100
+											<span class="itemPrice_original">89,000</span>
+											<span class=" itemPercent">10%</span>
+										</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+
+			</div>
+			<div class="cont_foot dpnone">
+				CONT-FOOT
+			</div>
+		</div>
+
+
+		<!-- 11. 바닥 슬라이드 -->
+		<div class="content wide main_tv">
+			<div class="cont_head">
+				<p class="displayH t_c">STYLE24 TV</p>
+			</div>
+			<div class="cont_body">
+				<div class="post-slider">
+					<div class="post-wrapper post-tv">
+						<div class="post">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/hqryeW6scd0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+						<div class="post">
+							<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="post">
+							<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="post">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/hqryeW6scd0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+						<div class="post">
+							<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="post">
+							<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>
+
+			</div>
+			<div class="cont_foot dpnone">
+				CONT-FOOT
+			</div>
+		</div>
+	<!-- End Of Main Contents -->
+	</div>
+</div>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	// 컨텐츠 호출
+	$(document).ready(function() {
+// 		$("#header").load("head.html");
+// 		$("#footer").load("foot.html");
+
+		$('.post-visual').slick({
+			// autoplay: true,
+			// autoplaySpeed: 1000,
+			dots: true,
+			infinite: true,
+			centerMode: true,
+			slidesToShow: 1,
+			slidesToScroll: 1,
+			centerMode: true,
+			centerPadding: '340px',
+		});
+
+		$('.post-trendy').slick({
+			// autoplay: true,
+			// autoplaySpeed: 1000,
+			dots: true,
+			infinite: true,
+			slidesToShow: 5,
+			slidesToScroll: 1,
+			variableWidth: true,
+		});	
+		
+		$('.post-it').slick({
+			// autoplay: true,
+			// autoplaySpeed: 1000,
+			// dots: true,
+			infinite: false,
+			arrows: false,
+			slidesToShow: 4,
+			slidesToScroll: 4,
+			speed: 400,
+			variableWidth: true,
+			freeMode: true,
+		});
+		
+		$(".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-it').slick('unslick');
+		//#it1 progress
+		$it1Slider = $('#it1 .post-it');
+		$it1ProgressBar = $('#it1 .post-it + .progress');
+		$it1ProgressBarLabel = $( '#it1 .post-it + .slider__label' );
+		$it1Slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {   
+			var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
+			$it1ProgressBar
+				.css('background-size', calc + '% 100%')
+				.attr('aria-valuenow', calc );
+			$it1ProgressBarLabel.text( calc + '% completed' );
+		});
+
+		//#it2 progress
+		var $it2Slider = $('#it2 .post-it');
+		var $it2ProgressBar = $('#it2 .post-it + .progress');
+		var $it2ProgressBarLabel = $( '#it2 .post-it + .slider__label' );
+		$it2Slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {   
+			var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
+			$it2ProgressBar
+				.css('background-size', calc + '% 100%')
+				.attr('aria-valuenow', calc );
+			$it2ProgressBarLabel.text( calc + '% completed' );
+		});
+		
+		$('.post-deal').slick({
+			// dots: true,
+			infinite: false,
+			arrows: false,
+			slidesToShow: 4,
+			slidesToScroll: 2,
+			variableWidth: true,
+			speed: 400,
+		});
+		
+		//post-deal progress
+		var $dealSlider = $('.post-deal');
+		var $dealProgressBar = $('.post-deal + .progress');
+		var $dealProgressBarLabel = $( '.post-deal + .slider__label' );
+		$dealSlider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {   
+			var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
+			$dealProgressBar
+				.css('background-size', calc + '% 100%')
+				.attr('aria-valuenow', calc );
+			$dealProgressBarLabel.text( calc + '% completed' );
+		});
+
+		$('.post-lookbook').slick({
+			slidesToShow: 1,
+			slidesToScroll: 1,
+			dots: true,
+			arrows:false,
+			infinite: true,
+			autoplay: true,
+			autoplaySpeed: 1000,
+		});
+		
+		$('.post-pick-nav').slick({
+			infinite: true,
+			slidesToScroll: 1,
+			focusOnSelect: true,
+			variableWidth: true,
+			dots: false,
+			asNavFor: '.post-pick-for',
+		});
+		
+		$('.post-pick-for').slick({
+			slidesToShow: 1,
+			slidesToScroll: 1,
+			arrows: false,
+			fade: true,
+			asNavFor: '.post-pick-nav',
+		});
+
+		$('.post-bnnWide').slick({
+			slidesToShow: 1,
+			slidesToScroll: 1,
+			// cssEase: 'linear'
+			// autoplay: true,
+			// autoplaySpeed: 1000,
+		});
+		$('.post-recomm').slick({
+			slidesToShow: 1,
+			slidesToScroll: 1,
+			dots: true,
+			infinite: true,
+		});
+		
+		$(".action button").on('click', function(){
+			var filter = $(this).data('filter');
+			$(".post-recomm").slick('slickUnfilter');
+			
+			if(filter == 'tag_warm'){
+				$(".post-recomm").slick('slickFilter','.tag_warm');
+			}
+			else if(filter == 'tag_daily'){
+				$(".post-recomm").slick('slickFilter','.tag_daily');
+			}
+			else if(filter == 'tag_homeware'){
+				$(".post-recomm").slick('slickFilter','.tag_homeware');
+			}
+			else if(filter == 'tag_point'){
+				$(".post-recomm").slick('slickFilter','.tag_point');
+			}
+			else if(filter == 'tag_classic'){
+				$(".post-recomm").slick('slickFilter','.tag_classic');
+			}
+			else if(filter == 'all'){		
+				$(".post-recomm").slick('slickUnfilter');
+			}
+		})
+
+		$('.post-sug').slick({
+			slidesToShow: 1,
+			slidesToScroll: 1,
+			dots: true,
+			arrows: false,
+			fade: true,
+			infinite: true,
+			// autoplay: true,
+			// autoplaySpeed: 3000,
+		});
+		
+		$(".fy_nav .btn_shape").click(function(){
+			var fyActive = $(this).attr('data-tab');
+			$(".fy_nav .btn_shape").removeClass('active');
+			$(".fy_item").removeClass('active');
+			$(this).addClass('active');
+			$('#'+fyActive).addClass('active');
+		});
+
+		$('.post-tv').slick({
+			swipeToSlide: true,
+			dots: true,
+			infinite: true,
+			slidesToShow: 1,
+			slidesToScroll: 1,
+			centerMode: true,
+			centerPadding: '340px',
+			
+			// autoplay: true,
+			// autoplaySpeed: 850,
+
+			// 반응형대응
+			// responsive: [{
+			// 	breakpoint: 768,
+			// 	settings: {
+			// 		arrows: false,
+			// 		centerMode: true,
+			// 		centerPadding: '40px',
+			// 		slidesToShow: 3
+			// 	}
+			// },
+			// {
+			// 	breakpoint: 480,
+			// 	settings: {
+			// 		arrows: false,
+			// 		centerMode: true,
+			// 		centerPadding: '40px',
+			// 		slidesToShow: 1
+			// 	}
+			// }]
+		});
+	});
+	
+	// header scroll
+	$(function(){
+		$(window).scroll(function(){
+			var scroll = $(this).scrollTop();
+			var headerH = $(".header").height();
+			if ($(window).scrollTop() > headerH){
+				$(".header").addClass("minify");
+				return false;
+			}
+			else {
+				$(".header").removeClass("minify");
+				return false;
+			}
+		});
+	});
+/*]]>*/
+</script>
+
+</th:block>
+
+</body>
+</html>