이용약관, 개인정보취급방침 추가

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

@@ -1,17 +1,8 @@
 package com.style24.front.biz.web;
 
-import com.gagaframework.web.parameter.GagaMap;
-import com.style24.core.biz.service.TscClauseService;
-import com.style24.core.support.env.TscConstants;
-import com.style24.core.support.message.TscMessageByLocale;
-import com.style24.core.support.session.TscSession;
-import com.style24.front.biz.service.TsfCustomerService;
-import com.style24.front.biz.service.TsfKakaoService;
-import com.style24.front.biz.thirdparty.NiceCertify;
-import com.style24.front.support.controller.TsfBaseController;
-import com.style24.front.support.security.session.TsfSession;
-import com.style24.persistence.domain.Customer;
-import lombok.extern.slf4j.Slf4j;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpSession;
+
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
@@ -23,9 +14,20 @@ import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.servlet.ModelAndView;
 
-import javax.servlet.http.HttpServletRequest;
-import javax.servlet.http.HttpSession;
+import com.style24.core.biz.service.TscClauseService;
+import com.style24.core.support.env.TscConstants;
+import com.style24.core.support.message.TscMessageByLocale;
+import com.style24.core.support.session.TscSession;
+import com.style24.front.biz.service.TsfCustomerService;
+import com.style24.front.biz.service.TsfKakaoService;
+import com.style24.front.biz.thirdparty.NiceCertify;
+import com.style24.front.support.controller.TsfBaseController;
+import com.style24.front.support.security.session.TsfSession;
+import com.style24.persistence.domain.Customer;
+
+import lombok.extern.slf4j.Slf4j;
 
+import com.gagaframework.web.parameter.GagaMap;
 
 /**
  * 고객(회원) Controller
@@ -53,8 +55,6 @@ public class TsfCustomerController extends TsfBaseController {
 	@Autowired
 	private NiceCertify niceCertify;
 
-
-
 	/**
 	 * 아이디 찾기 화면
 	 *
@@ -90,7 +90,7 @@ public class TsfCustomerController extends TsfBaseController {
 
 		Customer params = new Customer();
 		// 인증방법
-		 GagaMap authInfo;
+		GagaMap authInfo;
 		if (TscConstants.AuthMethod.CUSTINFO.value().equals(customer.getAuthMethod())) {
 			// 기본정보
 			params.setCustNm(customer.getCustNm());
@@ -121,7 +121,6 @@ public class TsfCustomerController extends TsfBaseController {
 		return result;
 	}
 
-
 	/**
 	 * 비밀번호 찾기 화면
 	 *
@@ -233,7 +232,7 @@ public class TsfCustomerController extends TsfBaseController {
 	 * @since 2021. 02. 17
 	 */
 	@GetMapping("/password/change/form")
-	public ModelAndView passwrodChangeForm(@RequestParam(value = "pageGb")String pageGb) {
+	public ModelAndView passwrodChangeForm(@RequestParam(value = "pageGb") String pageGb) {
 		ModelAndView mav = new ModelAndView();
 		String custNo = "";
 
@@ -342,12 +341,10 @@ public class TsfCustomerController extends TsfBaseController {
 	@GetMapping("/marketing/layer/form")
 	public ModelAndView getMarketingLayerForm() {
 		ModelAndView mav = new ModelAndView();
-		
 
 		return mav;
 	}
 
-
 	/**
 	 * 회원가입 유형 화면
 	 *
@@ -389,8 +386,7 @@ public class TsfCustomerController extends TsfBaseController {
 	 * @since 2021. 02. 09
 	 */
 	@GetMapping("/nice/cellphone/form")
-	public ModelAndView niceCellphoneForm(@RequestParam(value = "redirectUrl", required = false) String redirectUrl
-			, @RequestParam(value = "custparams", required = false) String custparams) {
+	public ModelAndView niceCellphoneForm(@RequestParam(value = "redirectUrl", required = false) String redirectUrl, @RequestParam(value = "custparams", required = false) String custparams) {
 		ModelAndView mav = new ModelAndView();
 		GagaMap result = niceCertify.certifyCellPhone();
 
@@ -435,9 +431,7 @@ public class TsfCustomerController extends TsfBaseController {
 	 */
 	@RequestMapping("/nice/certify/callback")
 	public ModelAndView niceCertifyCallback(
-			@RequestParam(value = "EncodeData", required = false) String encodeData
-			, @RequestParam(value = "enc_data", required = false) String encData
-			, @RequestParam(value = "param_r1", required = false) String redirectUrl) {
+		@RequestParam(value = "EncodeData", required = false) String encodeData, @RequestParam(value = "enc_data", required = false) String encData, @RequestParam(value = "param_r1", required = false) String redirectUrl) {
 
 		ModelAndView mav = new ModelAndView();
 		String sEncData = "";
@@ -478,7 +472,7 @@ public class TsfCustomerController extends TsfBaseController {
 			throw new IllegalStateException("확인 할 아이디가 없습니다.");
 		}
 
-		boolean isFind  = customerService.getCustomerFindByCustIdCount(customer.getCustId());
+		boolean isFind = customerService.getCustomerFindByCustIdCount(customer.getCustId());
 
 		result.setBoolean("isFind", isFind);
 		return result;
@@ -537,7 +531,6 @@ public class TsfCustomerController extends TsfBaseController {
 		return result;
 	}
 
-
 	/**
 	 * 가입화면 - 나이스 휴대폰인증
 	 *
@@ -555,7 +548,6 @@ public class TsfCustomerController extends TsfBaseController {
 		customer.setCi(authInfo.getString("sCi"));
 		customer.setCellPhnno(authInfo.getString("sMobileNo"));
 
-
 		if ("N".equals(authInfo.getString("adult"))) {
 			throw new IllegalStateException("만14세 이상만 회원가입이 가능합니다.");
 		}
@@ -582,7 +574,7 @@ public class TsfCustomerController extends TsfBaseController {
 		result.setBoolean("isFind", false);
 		result.setString("cellPhnno", customer.getCellPhnno());
 
-		TscSession.setAttribute("encData",customer.getEncData());
+		TscSession.setAttribute("encData", customer.getEncData());
 
 		return result;
 	}
@@ -620,7 +612,6 @@ public class TsfCustomerController extends TsfBaseController {
 		customer.setFrontGb(TsfSession.getFrontGb());
 		customer.setAfLinkCd(TsfSession.getAttribute("afLinkCd"));
 
-
 		// 3. 가입 가능여부
 		GagaMap resultMap = customerService.generalCustomerValidation(customer);
 		boolean isPossible = resultMap.getBoolean("isPossibe");
@@ -808,6 +799,34 @@ public class TsfCustomerController extends TsfBaseController {
 		return customerService.updatePasswordDate(customer);
 	}
 
+	/**
+	 * 이용약관
+	 * @return ModelAndView
+	 * @author gagamel
+	 * @since 2021. 3. 18
+	 */
+	@GetMapping("/use/terms/form")
+	public ModelAndView useTermsForm() {
+		ModelAndView mav = new ModelAndView(super.getDeviceViewName("customer/UseTermsForm"));
+
+		mav.addObject("clause", clauseService.getClause(TscConstants.Site.STYLE24.value(), "G057_10"));
+
+		return mav;
+	}
+
+	/**
+	 * 개인정보취급방침
+	 * @return ModelAndView
+	 * @author gagamel
+	 * @since 2021. 3. 18
+	 */
+	@GetMapping("/privacy/policy/form")
+	public ModelAndView privacyPolicyForm() {
+		ModelAndView mav = new ModelAndView(super.getDeviceViewName("customer/PrivacyPolicyForm"));
 
+		mav.addObject("clause", clauseService.getClause(TscConstants.Site.STYLE24.value(), "G057_11"));
+
+		return mav;
+	}
 
 }

src/main/webapp/WEB-INF/views/web/customer/PrivacyPolicyFormWeb.html

@@ -0,0 +1,300 @@
+<!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  : PrivacyPolicyFormWeb.html
+ * @desc    : 개인정보취급방침 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.03.18   jsshin     최초 작성
+ *******************************************************************************
+ -->
+<body>
+
+<th:block layout:fragment="content">
+<div id="container" class="container ps">
+	<div class="breadcrumb"> 
+		<ul>
+			<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
+			<li class="bread_2depth">개인정보취급방침</li>
+		</ul> 
+	</div>
+	
+	<div class="wrap">
+		<div class="content ps_privacy"> <!-- 페이지특정 클래스 = ps_privacy -->
+			<div class="cont_head">
+				<div>
+					<h3>개인정보취급방침</h3>
+				</div>
+			</div>
+			<div class="cont_body" th:utext="${#strings.replace(#strings.replace(clause,'&amplt;','<'),'&ampgt;','>')}">
+				<!-- <p>
+                        아이스타일이십사 주식회사에서 운영하는 www.istyle24.com은 고객님의 개인정보를 소중히 여기며, 안전한 거래를 위해 관련법령의 규정을 반영하여 준수하고 있습니다.
+                    </p>                    
+                    <div class="hookGrp">
+                        <div class="hook_list">
+                            <ul>
+                                <li>
+                                    <a href="#prvc1"><span>제1조 개인정보의 수집, 이용목적</span></a>
+                                    <a href="#prvc2"><span>제2조 정의</span></a>
+                                    <a href="#prvc3"><span>제3조 약관 등의 명시와 설명 및 개정</span></a>
+                                    <a href="#prvc4"><span>제4조 서비스의 제공 및 변경</span></a>
+                                    <a href="#prvc5"><span>제5조 서비스의 중단</span></a>
+                                    <a href="#prvc6"><span>제6조 회원가입</span></a>
+                                    <a href="#prvc7"><span>제7조 회원 탈퇴 및 자격 상실 등</span></a>
+                                    <a href="#prvc8"><span>제8조 회원에 대한 통지</span></a>
+                                </li>
+                                <li>
+                                    <a href="#prvc9"><span>제9조 구매신청</span></a>
+                                    <a href="#prvc10"><span>제10조 계약의 성립</span></a>
+                                    <a href="#prvc11"><span>제 11조</span></a>
+                                    <a href="#prvc12"><span>제 12조</span></a>
+                                    <a href="#prvc13"><span>제 13조</span></a>
+                                    <a href="#prvc14"><span>제 14조</span></a>
+                                    <a href="#prvc15"><span>제 15조</span></a>
+                                    <a href="#prvc16"><span>제 16조</span></a>
+                                </li>
+                                <li>
+                                    <a href="#prvc17"><span>제 17조</a>
+                                    <a href="#prvc18"><span>제 18조</span></a>
+                                    <a href="#prvc19"><span>제 19조</span></a>
+                                    <a href="#prvc20"><span>제 20조</span></a>
+                                    <a href="#prvc21"><span>제 21조</span></a>
+                                    <a href="#prvc22"><span>제 22조</span></a>
+                                    <a href="#prvc23"><span>제 23조</span></a>
+                                    <a href="#prvc24"><span>제24조 재판권 및 준거법</span></a>
+                                </li>
+                            </ul>
+                            
+                        </div>
+                        <div class="hook_cont"> 
+                            <div id="prvc1">
+                                <h4><span>제1조 개인정보의 수집, 이용목적</span></h4>
+                                <p>
+                                    이 약관은 아이스타일이십사 주식회사가 운영하는 www.istyle24.com(이하 "몰"이라 한다)에서 제공하는 인터넷 관련 서비스 (이하 "서비스"라 한다)를 이용함에 있어 사이버 몰과 이용자의
+                                    권리, 의무 및 책임사항을 규정함을 목적으로 합니다.
+                                </p>
+                                <table>
+                                    <colgroup>
+                                        <col width="300">
+                                        <col width="*">
+                                    </colgroup>   
+                                    <thead>
+                                        <tr>
+                                            <th>구분</th>
+                                            <th>이용목적</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td rowspan="5">회원관리</td>
+                                            <td>회원제 서비스 이용에 따른 본인확인, 개인식별</td>
+                                        </tr>
+                                        <tr>
+                                            <td>불량회원의 부정이용 방지와 비인가 사용 방지, 중복가입방지</td>
+                                        </tr>
+                                        <tr>
+                                            <td></td>
+                                        </tr>
+                                        <tr>
+                                            <td></td>
+                                        </tr>
+                                        <tr>
+                                            <td></td>
+                                        </tr>
+                                        <tr>
+                                            <td rowspan="3">서비스 제공에 관한 계약의 이행 및 서비스 제공에 따른 요금정산</td>
+                                            <td>콘텐츠 제공, 이벤트 당첨 결과안내 및 경품배송</td>
+                                        </tr>
+                                        <tr>
+                                            <td>금융거래 본인 인증 및 금융 서비스</td>
+                                        </tr>
+                                        <tr>
+                                            <td>물품 배송, 구매 및 요금 결제</td>
+                                        </tr>
+                                        <tr>
+                                            <td rowspan="7">마케팅 광고에 활용</td>
+                                            <td></td>
+                                        </tr>
+                                        <tr>
+                                            <td></td>
+                                        </tr>
+                                        <tr>
+                                            <td></td>
+                                        </tr>
+                                        <tr>
+                                            <td></td>
+                                        </tr>
+                                        <tr>
+                                            <td></td>
+                                        </tr>
+                                        <tr>
+                                            <td></td>
+                                        </tr>
+                                        <tr>
+                                            <td></td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div id="prvc2">
+                                <h4><span>제2조 정의</span></h4>
+                                <p>1. “몰”이란 아이스타일24가 재화 또는 용역(이하 “재화 등”이라 함)을 이용자에게 제공하기 위하여 컴퓨터 등 정보통신설비를 이용하여 재화 등을 거래할 수 있도록 설정한 가상의 영업장을 말하며, 아울러 사이버몰을 운영하는 사업자의 의미로도 사용합니다.</p>
+                                <p>2. '이용자'란 "몰"에 접속하여 이 약관에 따라 "몰"이 제공하는 서비스를 받는 회원 및 비회원을 말합니다.</p>
+                                <p>3. '회원'이라 함은 "몰"에 개인정보를 제공하여 회원등록을 한 자로서, "몰"의 정보를 지속적으로 제공받으며, "몰"이 제공하는 서비스를 계속적으로 이용할 수 있는 자를 말합니다.</p>
+                                <p>4. ‘비회원’이라 함은 회원에 가입하지 않고 몰”이 제공하는 서비스를 이용하는 자를 말합니다.</p>
+                                <p>5. '아이디(ID)'란 이용자가 회원가입 당시 몰에 등록한 사용자 '개인이용문자'를 말합니다.</p>
+                                <p>6. '비밀번호'란 회원의 동일성 확인과 비밀보호를 위하여 회원 스스로가 설정하여 몰에 등록한 '개인이용문자'로 회원으로 로그인을 하기위해 아이디와 같이 사용됩니다.</p>
+                                <p>7. ‘영업일’이란 회사가 정상적으로 서비스를 제공한 날로서 토요일, 일요일 및 법정 공휴일을 제외한 날을 말합니다.</p>
+                                <p>8. ‘아이포인트’란 아이스타일24를 통하여 회원이 상품을 구매할 때, 구매금액의 일정 비율이 적립되는 ‘몰’전용 마일리지로 적립일로부터 3년이 지나면 자동 소멸 됩니다</p>
+                                <p>9. ‘아이머니’란 상품구매 시 현금과 같이 이용할 수 있는 ‘몰’ 전용 사이버머니로, 적립된 아이포인트를 일정한 단위로 환전하여 사용할 수 있습니다.</p>
+                                <p>10. 기타 ‘2조’에서 정의되지 아니한 이 약관상의 용어의 의미는 일반적인 거래관행에 의합니다.</p>
+                            </div>
+                            <div id="prvc3">
+                                <h4><span>제3조 약관 등의 명시와 설명 및 개정</span></h4>
+                                <p>1. "몰"은 이 약관의 내용과 상호 및 대표자 성명, 영업소 소재지 주소(소비자의 불만을 처리할 수 있는 곳의 주소를 포함), 전화번호, 팩스번호, 전자우편주소, 사업자등록번호,
+                                    통신판매업신고번호, 개인정보관리책임자 등을 이용자가 쉽게 알 수 있도록 www.istyle24.com의 초기 서비스화면(전면)에 게시합니다.
+                                    다만, 이용약관의 내용은 이용자가 연결화면을 통하여 볼 수 있도록 할 수 있습니다.</p>
+                                <p>2. "몰"은 이용자가 약관에 동의하기에 앞서 약관에 정하여져 있는 내용 중 청약철회 배송책임 환불조건 등과 같은 중요한 내용을 이용자가 이해할 수 있도록 별도의 연결화면 또는 팝업화면 등을
+                                    제공하여 이용자의 확인을 구하여야 합니다.</p>
+                                <p>3. "몰"은 전자상거래등에서의소비자보호에관한법률, 약관의규제에관한법률, 전자거래기본법, 전자서명법, 정보통신망이용촉진등에관한법률, 방문판매등에관한법률, 소비자보호법 등
+                                    관련법을 위배하지 않는 범위에서 이 약관을 개정할 수 있습니다.</p>
+                                <p>4. "몰"이 약관을 개정할 경우에는 적용일자 및 개정사유를 명시하여 현행약관과 함께 몰의 초기화면에 그 적용일자 7일 이전부터 적용일자 전일까지 공지합니다.
+                                    다만, 이용자에게 불리하게 약관내용을 변경하는 경우에는 최소한 30일 이상의 사전 유예기간을 두고 공지합니다. 이 경우 "몰"은 개정 전 내용과 개정 후 내용을 명확하게 비교하여 이용자가
+                                    알기 쉽도록 표시합니다.</p>
+                                <p>5. "몰"이 약관을 개정할 경우에는 그 개정 약관은 그 적용일자 이후에 체결되는 계약에만 적용되고 그 이전에 이미 체결된 계약에 대해서는 개정전의 약관조항이 그대로 적용됩니다.
+                                    다만 이미 계약을 체결한 이용자가 개정 약관 조항의 적용을 받기를 원하는 뜻을 제3조에 의한 개정약관의 공지기간내에 "몰"에 송신하여 "몰"의 동의를 받은 경우에는 개정약관 조항이
+                                    적용됩니다.</p>
+                                <p>6. 본 약관에서 정하지 아니한 사항과 이 약관의 해석에 관하여는 전자상거래등에서의 소비자보호에관한법률, 약관의규제등에관한법률, 공정거래위원회가 정하는 전자상거래등에서의
+                                    소비자보호지침 및 관계법령 또는 상관례에 따릅니다.</p>
+                            </div>
+                            <div id="prvc4">
+                                <h4><span>제4조 서비스의 제공 및 변경</span></h4>
+                                <p>1. “몰"은 다음과 같은 업무를 수행합니다.</p>
+                                <ol>
+                                    <li>① 재화 또는 용역에 대한 정보 제공 및 구매계약의 체결</li>
+                                    <li>② 구매계약이 체결된 재화 또는 용역의 배송</li>
+                                    <li>③ 기타 “몰”이 정하는 업무</li>
+                                </ol>
+                                <p>2. "몰"은 재화 또는 용역의 품절 또는 기술적 사양의 변경 등의 경우에는 장차 체결되는 계약에 의해 제공할 재화 또는 용역의 내용을 변경할 수 있습니다. 이 경우에는 변경된 재화 또는 용역의
+                                    내용 및 제공일자를 명시하여 현재의 재화 또는 용역의 내용을 게시한 곳에 즉시 공지합니다.단, "몰"이 합리적으로 예측할 수 없는 불가피한 여건이나 사정이 있는 경우, 위 공지를 하지 않을 수
+                                    있습니다.
+                                    </p>
+                                <p>3. "몰"이 제공하기로 이용자와 계약을 체결한 서비스의 내용을 재화등의 품절 또는 기술적 사양의 변경 등의 사유로 변경할 경우에는 그 사유를 이용자에게 통지 합니다.</p>
+                                <p>4. 전항의 경우 "몰"은 이로 인하여 이용자가 입은 손해를 배상합니다. 다만, "몰"이 고의 또는 과실이 없음을 입증하는 경우에는 그러하지 아니합니다.</p>
+                            </div>
+                            <div id="prvc5">
+                                <h4><span>제5조 서비스의 중단</span></h4>
+                                <p>1. "몰"은 컴퓨터 등 정보통신설비의 보수점검·교체 및 고장, 통신의 두절 등의 사유가 발생한 경우에는 서비스의 제공을 일시적으로 중단할 수 있습니다.</p>
+                                <p>2. "몰"은 제1항의 사유로 서비스의 제공이 일시적으로 중단됨으로 인하여 이용자 또는 제3자가 입은 손해에 대하여 배상합니다.단, "몰"에 고의 또는 과실이 없는 경우에는 그러하지
+                                    아니합니다.</p>
+                                <p>3. "사업종목의 전환, 사업의 포기, 업체간의 통합 등의 이유로 서비스를 제공할 수 없게 되는 경우에는 "몰"은 제8조에 정한 방법으로 이용자에게 통지하고 당초 "몰"에서 제시한 조건에 따라
+                                    소비자에게 보상합니다.</p>
+                                <p>4. 다만, "몰"이 보상기준 등을 고지하지 아니한 경우에는 이용자들의 적립금 등을 "몰"에서 통용되는 통화가치에 상응하는 현물 또는 현금으로 이용자에게 지급합니다.</p>
+                            </div>
+                            <div>
+                                <h4  id="prvc6"><span>제6조 회원가입</span></h4>
+                                <p>1. 이용자는 "몰"이 정한 가입 양식에 따라 회원정보를 기입한 후 이 약관에 동의한다는 의사표시를 함으로서 회원가입을 신청합니다.</p>
+                                <p>2. "몰"은 제1항과 같이 회원으로 가입할 것을 신청한 이용자 중 다음 각호에 해당하지 않는 한 회원으로 등록합니다.</p>
+                                <ol>
+                                    <li>① 가입신청자가 이 약관 제7조 제3항에 의하여 이전에 회원자격을 상실한 적이 있는 경우, 다만 제7조 제3항에 의한 회원자격 상실후 3년이 경과한 자로서 "몰"의 회원 재가입 승낙을 얻은
+                                        경우에는 예외로 한다.</li>
+                                    <li>② 등록 내용에 허위, 기재누락, 오기가 있는 경우</li>
+                                    <li>③ 만 14세가 되지 않은 자가 신청하였을 경우</li>
+                                    <li>④기타 회원으로 등록하는 것이 ＂몰＂의 기술상 현저히 지장이 있다고 판단되는 경우</li>
+                                </ol>
+                                <p>3. 회원가입계약의 성립시기는 "몰"의 승낙이 회원에게 도달한 시점으로 합니다.</p>
+                                <p>4. 가입신청자가 "몰"에 회원으로 가입하더라도 로그인하지 않은 상태에서 주문하는 경우는 회원주문이 아니라 비회원주문으로 인정합니다.</p>
+                                <p>5. 회원은 제15조 제1항에 의한 등록사항에 변경이 있는 경우, 즉시 전자우편 기타 방법으로 "몰"에 대하여 그 변경사항을 알려야 합니다.이러한 변경사항의 미 통보로 인해 발생하는 손해는
+                                    회원에게 그 책임이 있습니다.</p>
+                            </div>
+                            <div id="prvc7">
+                                <h4><span>제7조 회원 탈퇴 및 자격 상실 등</span></h4>
+                                <p>1. 회원은 "몰"에 언제든지 탈퇴를 요청할 수 있으며 "몰"은 즉시 회원탈퇴를 처리합니다.</p>
+                                <p>2. 회원이 다음 각호의 사유에 해당하는 경우, "몰"은 회원자격을 제한 및 정지시킬 수 있습니다.</p>
+                                <p>3. "몰"이 회원 자격을 제한 정지 시킨 후, 동일한 행위가 2회 이상 반복되거나 30일 이내에 그 사유가 시정되지 아니하는 경우 "몰"은 회원자격을 상실시킬 수 있습니다.</p>
+                                <p>4. "몰"이 회원자격을 상실시키는 경우에는 회원등록을 말소합니다. 이 경우 회원에게 이를 통지하고, 회원등록 말소 전에 최소한 30일 이상의 기간을 정하여 소명할 기회를 부여합니다.</p>
+                            </div>
+                            <div id="prvc8">
+                                <h4><span>제8조 회원에 대한 통지</span></h4>
+                                <p>1. "몰"이 회원에 대한 통지를 하는 경우, 회원이 "몰"에 제출하여 지정한 전자우편 주소로 할 수 있습니다.</p>
+                                <p>2. "몰"은 불특정다수 회원에 대한 통지의 경우 1주일이상 "몰" 게시판에 게시함으로서 개별 통지에 갈음할 수 있습니다.
+                                    다만, 회원 본인의 거래와 관련하여 중대한 영향을 미치는 사항에 대하여는 개별통지를 합니다.</p>
+                            </div>
+                            <div id="prvc9">
+                                <h4><span>제9조 구매신청</span></h4>
+                                <p>"몰"이용자는 "몰"상에서 다음 또는 이와 유사한 방법에 의하여 구매를 신청하며, "몰"은 이용자가 구매신청을 함에 있어서 다음의 각 내용을 알기 쉽게 제공하여야 합니다.
+                                    단, 회원인 경우 제2호 내지 제4호의 적용을 제외할 수 있습니다.</p>
+                                <p>1. 재화 등의 검색 및 선택</p>
+                                <p>2. 성명, 주소, 전화번호, 전자우편주소(또는 이동전화번호) 등의 입력</p>
+                                <p>3. 약관내용, 청약철회권이 제한되는 서비스, 배송료 설치비 등의 비용부담과 관련한 내용에 대한 확인</p>
+                                <p>4. 이 약관에 동의하고 위 3.호의 사항을 확인하거나 거부하는 표시(예, 마우스 클릭)</p>
+                                <p>5. 재화 등의 구매신청 및 이에 관한 확인 또는 "몰"의 확인에 대한 동의</p>
+                                <p>6. 결제방법의 선택</p>
+                            </div>
+                            <div id="prvc10">
+                                <h4><span>제10조 계약의 성립</span></h4>
+                                <p>1."몰"은 제9조와 같은 구매신청에 대하여 다음 각호에 해당하면 승낙하지 않을 수 있습니다. 다만, 미성년자와 계약을 체결하는 경우에는 법정대리인의 동의를 얻지 못하면 미성년자 본인 또는
+                                    법정대리인이 계약을 취소할 수 있다는 내용을 고지하여야 합니다.</p>
+                                    <ol>
+                                        <li>① 신청 내용에 허위, 기재누락, 오기가 있는 경우</li>
+                                        <li>② 미성년자가 담배, 주류 등 청소년보호법에서 금지하는 재화 및 용역을 구매하는 경우</li>
+                                        <li>③ 기타 구매신청에 승낙하는 것이 ＂몰＂ 기술상 현저히 지장이 있다고 판단하는 경우</li>
+                                    </ol>
+                                <p>2. "몰"의 승낙이 제12조 제1항의 수신확인통지형태로 이용자에게 도달한 시점에 계약이 성립한 것으로 봅니다.</p>
+                                <p>3. "몰"의 승낙의 의사표시에는 이용자의 구매 신청에 대한 확인 및 판매가능 여부, 구매신청의 정정 취소 등에 관한 정보 등을 포함하여야 합니다.</p>
+                                <p>4. 이 약관에 동의하고 위 3.호의 사항을 확인하거나 거부하는 표시(예, 마우스 클릭)</p>
+                                <p>5. 재화 등의 구매신청 및 이에 관한 확인 또는 "몰"의 확인에 대한 동의</p>
+                            </div>
+                            <div id="prvc24">
+                                <h4><span>제24조 재판권 및 준거법</span></h4>
+                                <p>1."몰"과 이용자간에 발생한 전자상거래 분쟁에 관한 소송은 제소 당시의 이용자의 주소에 의하고, 주소가 없는 경우에는 거소를 관할하는 지방법원의 전속관할로 합니다.
+                                    다만, 제소 당시 이용자의 주소 또는 거소가 분명하지 않거나 외국 거주자의 경우에는 민사소송법상의 관할법원에 제기합니다.</p>
+                                <p>2. "몰"과 이용자간에 제기된 전자상거래 소송에는 한국법을 적용합니다.</p>
+                            </div>
+                            <div id="prvc">
+                                <h4><span></span></h4>
+                                <p></p>
+                                <p></p>
+                                <p></p>
+                                <p></p>
+                                <p></p>
+                            </div>
+                            
+                            <div>
+                                <p>부칙 : 본 약관은 2016년 01월 04일부터 시행하며, 종전의 약관내용은 본 약관으로 대체합니다.</p>
+                            </div>
+
+                        </div>
+                    </div> -->
+			</div>
+		</div>
+	</div>
+</div>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	// 약관 내부 링크
+	$(function() {
+		$(".hook_list ul li a").on("click", function() {
+			var hookHeader = $("header").outerHeight() + 100;
+			var hookHref = $(this).attr("href");
+			var hookPot = $(hookHref == "#" || hookHref == "" ? "body" : hookHref);
+			var hookPos = hookPot.offset().top - hookHeader;
+			$("html, body").animate({ scrollTop: hookPos }, 300);
+		});
+	});
+/*]]>*/
+</script>
+
+</th:block>
+
+</body>
+</html>

src/main/webapp/WEB-INF/views/web/customer/UseTermsFormWeb.html

@@ -0,0 +1,235 @@
+<!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  : UseTermsFormWeb.html
+ * @desc    : 이용약관 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2021.03.18   jsshin     최초 작성
+ *******************************************************************************
+ -->
+<body>
+
+<th:block layout:fragment="content">
+<div id="container" class="container ps">
+	<div class="breadcrumb"> 
+		<ul>
+			<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
+			<li class="bread_2depth">이용약관</li>
+		</ul> 
+	</div>
+	
+	<div class="wrap">
+		<div class="content ps_terms"> <!-- 페이지특정 클래스 = ps_terms -->
+			<div class="cont_head">
+				<div>
+					<h3>이용약관</h3>
+				</div>
+			</div>
+			<div class="cont_body" th:utext="${#strings.replace(#strings.replace(clause,'&amplt;','<'),'&ampgt;','>')}">
+				<!-- <p>
+					아이스타일이십사 주식회사에서 운영하는 www.istyle24.com은 고객님의 개인정보를 소중히 여기며, 안전한 거래를 위해 관련법령의 규정을 반영하여 준수하고 있습니다.
+				</p>
+				<div class="hookGrp">
+					<div class="hook_list">
+						<ul>
+							<li>
+								<a href="#terms1"><span>제1조 목적</span></a>
+								<a href="#terms2"><span>제2조 정의</span></a>
+								<a href="#terms3"><span>제3조 약관 등의 명시와 설명 및 개정</span></a>
+								<a href="#terms4"><span>제4조 서비스의 제공 및 변경</span></a>
+								<a href="#terms5"><span>제5조 서비스의 중단</span></a>
+								<a href="#terms6"><span>제6조 회원가입</span></a>
+								<a href="#terms7"><span>제7조 회원 탈퇴 및 자격 상실 등</span></a>
+								<a href="#terms8"><span>제8조 회원에 대한 통지</span></a>
+							</li>
+							<li>
+								<a href="#terms9"><span>제9조 구매신청</span></a>
+								<a href="#terms10"><span>제10조 계약의 성립</span></a>
+								<a href="#terms11"><span>제 11조</span></a>
+								<a href="#terms12"><span>제 12조</span></a>
+								<a href="#terms13"><span>제 13조</span></a>
+								<a href="#terms14"><span>제 14조</span></a>
+								<a href="#terms15"><span>제 15조</span></a>
+								<a href="#terms16"><span>제 16조</span></a>
+							</li>
+							<li>
+								<a href="#terms17"><span>제 17조</a>
+								<a href="#terms18"><span>제 18조</span></a>
+								<a href="#terms19"><span>제 19조</span></a>
+								<a href="#terms20"><span>제 20조</span></a>
+								<a href="#terms21"><span>제 21조</span></a>
+								<a href="#terms22"><span>제 22조</span></a>
+								<a href="#terms23"><span>제 23조</span></a>
+								<a href="#terms24"><span>제24조 재판권 및 준거법</span></a>
+							</li>
+						</ul>
+					</div>
+					<div class="hook_cont">
+						<div id="terms1">
+							<h4><span>제1조 목적</span></h4>
+							<p>
+								이 약관은 아이스타일이십사 주식회사가 운영하는 www.istyle24.com(이하 "몰"이라 한다)에서 제공하는 인터넷 관련 서비스 (이하 "서비스"라 한다)를 이용함에 있어 사이버 몰과 이용자의
+								권리, 의무 및 책임사항을 규정함을 목적으로 합니다.
+							</p>
+						</div>
+						<div id="terms2">
+							<h4><span>제2조 정의</span></h4>
+							<p>1. “몰”이란 아이스타일24가 재화 또는 용역(이하 “재화 등”이라 함)을 이용자에게 제공하기 위하여 컴퓨터 등 정보통신설비를 이용하여 재화 등을 거래할 수 있도록 설정한 가상의 영업장을 말하며, 아울러 사이버몰을 운영하는 사업자의 의미로도 사용합니다.</p>
+							<p>2. '이용자'란 "몰"에 접속하여 이 약관에 따라 "몰"이 제공하는 서비스를 받는 회원 및 비회원을 말합니다.</p>
+							<p>3. '회원'이라 함은 "몰"에 개인정보를 제공하여 회원등록을 한 자로서, "몰"의 정보를 지속적으로 제공받으며, "몰"이 제공하는 서비스를 계속적으로 이용할 수 있는 자를 말합니다.</p>
+							<p>4. ‘비회원’이라 함은 회원에 가입하지 않고 몰”이 제공하는 서비스를 이용하는 자를 말합니다.</p>
+							<p>5. '아이디(ID)'란 이용자가 회원가입 당시 몰에 등록한 사용자 '개인이용문자'를 말합니다.</p>
+							<p>6. '비밀번호'란 회원의 동일성 확인과 비밀보호를 위하여 회원 스스로가 설정하여 몰에 등록한 '개인이용문자'로 회원으로 로그인을 하기위해 아이디와 같이 사용됩니다.</p>
+							<p>7. ‘영업일’이란 회사가 정상적으로 서비스를 제공한 날로서 토요일, 일요일 및 법정 공휴일을 제외한 날을 말합니다.</p>
+							<p>8. ‘아이포인트’란 아이스타일24를 통하여 회원이 상품을 구매할 때, 구매금액의 일정 비율이 적립되는 ‘몰’전용 마일리지로 적립일로부터 3년이 지나면 자동 소멸 됩니다</p>
+							<p>9. ‘아이머니’란 상품구매 시 현금과 같이 이용할 수 있는 ‘몰’ 전용 사이버머니로, 적립된 아이포인트를 일정한 단위로 환전하여 사용할 수 있습니다.</p>
+							<p>10. 기타 ‘2조’에서 정의되지 아니한 이 약관상의 용어의 의미는 일반적인 거래관행에 의합니다.</p>
+						</div>
+						<div id="terms3">
+							<h4><span>제3조 약관 등의 명시와 설명 및 개정</span></h4>
+							<p>1. "몰"은 이 약관의 내용과 상호 및 대표자 성명, 영업소 소재지 주소(소비자의 불만을 처리할 수 있는 곳의 주소를 포함), 전화번호, 팩스번호, 전자우편주소, 사업자등록번호,
+							통신판매업신고번호, 개인정보관리책임자 등을 이용자가 쉽게 알 수 있도록 www.istyle24.com의 초기 서비스화면(전면)에 게시합니다.
+							다만, 이용약관의 내용은 이용자가 연결화면을 통하여 볼 수 있도록 할 수 있습니다.</p>
+							<p>2. "몰"은 이용자가 약관에 동의하기에 앞서 약관에 정하여져 있는 내용 중 청약철회 배송책임 환불조건 등과 같은 중요한 내용을 이용자가 이해할 수 있도록 별도의 연결화면 또는 팝업화면 등을
+							제공하여 이용자의 확인을 구하여야 합니다.</p>
+							<p>3. "몰"은 전자상거래등에서의소비자보호에관한법률, 약관의규제에관한법률, 전자거래기본법, 전자서명법, 정보통신망이용촉진등에관한법률, 방문판매등에관한법률, 소비자보호법 등
+							관련법을 위배하지 않는 범위에서 이 약관을 개정할 수 있습니다.</p>
+							<p>4. "몰"이 약관을 개정할 경우에는 적용일자 및 개정사유를 명시하여 현행약관과 함께 몰의 초기화면에 그 적용일자 7일 이전부터 적용일자 전일까지 공지합니다.
+							다만, 이용자에게 불리하게 약관내용을 변경하는 경우에는 최소한 30일 이상의 사전 유예기간을 두고 공지합니다. 이 경우 "몰"은 개정 전 내용과 개정 후 내용을 명확하게 비교하여 이용자가
+							알기 쉽도록 표시합니다.</p>
+							<p>5. "몰"이 약관을 개정할 경우에는 그 개정 약관은 그 적용일자 이후에 체결되는 계약에만 적용되고 그 이전에 이미 체결된 계약에 대해서는 개정전의 약관조항이 그대로 적용됩니다.
+							다만 이미 계약을 체결한 이용자가 개정 약관 조항의 적용을 받기를 원하는 뜻을 제3조에 의한 개정약관의 공지기간내에 "몰"에 송신하여 "몰"의 동의를 받은 경우에는 개정약관 조항이
+							적용됩니다.</p>
+							<p>6. 본 약관에서 정하지 아니한 사항과 이 약관의 해석에 관하여는 전자상거래등에서의 소비자보호에관한법률, 약관의규제등에관한법률, 공정거래위원회가 정하는 전자상거래등에서의
+							소비자보호지침 및 관계법령 또는 상관례에 따릅니다.</p>
+						</div>
+						<div id="terms4">
+							<h4><span>제4조 서비스의 제공 및 변경</span></h4>
+							<p>1. “몰"은 다음과 같은 업무를 수행합니다.</p>
+							<ol>
+								<li>① 재화 또는 용역에 대한 정보 제공 및 구매계약의 체결</li>
+								<li>② 구매계약이 체결된 재화 또는 용역의 배송</li>
+								<li>③ 기타 “몰”이 정하는 업무</li>
+							</ol>
+							<p>2. "몰"은 재화 또는 용역의 품절 또는 기술적 사양의 변경 등의 경우에는 장차 체결되는 계약에 의해 제공할 재화 또는 용역의 내용을 변경할 수 있습니다. 이 경우에는 변경된 재화 또는 용역의
+							내용 및 제공일자를 명시하여 현재의 재화 또는 용역의 내용을 게시한 곳에 즉시 공지합니다.단, "몰"이 합리적으로 예측할 수 없는 불가피한 여건이나 사정이 있는 경우, 위 공지를 하지 않을 수
+							있습니다.
+							</p>
+							<p>3. "몰"이 제공하기로 이용자와 계약을 체결한 서비스의 내용을 재화등의 품절 또는 기술적 사양의 변경 등의 사유로 변경할 경우에는 그 사유를 이용자에게 통지 합니다.</p>
+							<p>4. 전항의 경우 "몰"은 이로 인하여 이용자가 입은 손해를 배상합니다. 다만, "몰"이 고의 또는 과실이 없음을 입증하는 경우에는 그러하지 아니합니다.</p>
+						</div>
+						<div id="terms5">
+							<h4><span>제5조 서비스의 중단</span></h4>
+							<p>1. "몰"은 컴퓨터 등 정보통신설비의 보수점검·교체 및 고장, 통신의 두절 등의 사유가 발생한 경우에는 서비스의 제공을 일시적으로 중단할 수 있습니다.</p>
+							<p>2. "몰"은 제1항의 사유로 서비스의 제공이 일시적으로 중단됨으로 인하여 이용자 또는 제3자가 입은 손해에 대하여 배상합니다.단, "몰"에 고의 또는 과실이 없는 경우에는 그러하지
+							아니합니다.</p>
+							<p>3. "사업종목의 전환, 사업의 포기, 업체간의 통합 등의 이유로 서비스를 제공할 수 없게 되는 경우에는 "몰"은 제8조에 정한 방법으로 이용자에게 통지하고 당초 "몰"에서 제시한 조건에 따라
+							소비자에게 보상합니다.</p>
+							<p>4. 다만, "몰"이 보상기준 등을 고지하지 아니한 경우에는 이용자들의 적립금 등을 "몰"에서 통용되는 통화가치에 상응하는 현물 또는 현금으로 이용자에게 지급합니다.</p>
+						</div>
+						<div>
+							<h4  id="terms6"><span>제6조 회원가입</span></h4>
+							<p>1. 이용자는 "몰"이 정한 가입 양식에 따라 회원정보를 기입한 후 이 약관에 동의한다는 의사표시를 함으로서 회원가입을 신청합니다.</p>
+							<p>2. "몰"은 제1항과 같이 회원으로 가입할 것을 신청한 이용자 중 다음 각호에 해당하지 않는 한 회원으로 등록합니다.</p>
+							<ol>
+								<li>① 가입신청자가 이 약관 제7조 제3항에 의하여 이전에 회원자격을 상실한 적이 있는 경우, 다만 제7조 제3항에 의한 회원자격 상실후 3년이 경과한 자로서 "몰"의 회원 재가입 승낙을 얻은
+								경우에는 예외로 한다.</li>
+								<li>② 등록 내용에 허위, 기재누락, 오기가 있는 경우</li>
+								<li>③ 만 14세가 되지 않은 자가 신청하였을 경우</li>
+								<li>④기타 회원으로 등록하는 것이 ＂몰＂의 기술상 현저히 지장이 있다고 판단되는 경우</li>
+							</ol>
+							<p>3. 회원가입계약의 성립시기는 "몰"의 승낙이 회원에게 도달한 시점으로 합니다.</p>
+							<p>4. 가입신청자가 "몰"에 회원으로 가입하더라도 로그인하지 않은 상태에서 주문하는 경우는 회원주문이 아니라 비회원주문으로 인정합니다.</p>
+							<p>5. 회원은 제15조 제1항에 의한 등록사항에 변경이 있는 경우, 즉시 전자우편 기타 방법으로 "몰"에 대하여 그 변경사항을 알려야 합니다.이러한 변경사항의 미 통보로 인해 발생하는 손해는
+							회원에게 그 책임이 있습니다.</p>
+						</div>
+						<div id="terms7">
+							<h4><span>제7조 회원 탈퇴 및 자격 상실 등</span></h4>
+							<p>1. 회원은 "몰"에 언제든지 탈퇴를 요청할 수 있으며 "몰"은 즉시 회원탈퇴를 처리합니다.</p>
+							<p>2. 회원이 다음 각호의 사유에 해당하는 경우, "몰"은 회원자격을 제한 및 정지시킬 수 있습니다.</p>
+							<p>3. "몰"이 회원 자격을 제한 정지 시킨 후, 동일한 행위가 2회 이상 반복되거나 30일 이내에 그 사유가 시정되지 아니하는 경우 "몰"은 회원자격을 상실시킬 수 있습니다.</p>
+							<p>4. "몰"이 회원자격을 상실시키는 경우에는 회원등록을 말소합니다. 이 경우 회원에게 이를 통지하고, 회원등록 말소 전에 최소한 30일 이상의 기간을 정하여 소명할 기회를 부여합니다.</p>
+						</div>
+						<div id="terms8">
+							<h4><span>제8조 회원에 대한 통지</span></h4>
+							<p>1. "몰"이 회원에 대한 통지를 하는 경우, 회원이 "몰"에 제출하여 지정한 전자우편 주소로 할 수 있습니다.</p>
+							<p>2. "몰"은 불특정다수 회원에 대한 통지의 경우 1주일이상 "몰" 게시판에 게시함으로서 개별 통지에 갈음할 수 있습니다.
+							다만, 회원 본인의 거래와 관련하여 중대한 영향을 미치는 사항에 대하여는 개별통지를 합니다.</p>
+						</div>
+						<div id="terms9">
+							<h4><span>제9조 구매신청</span></h4>
+							<p>"몰"이용자는 "몰"상에서 다음 또는 이와 유사한 방법에 의하여 구매를 신청하며, "몰"은 이용자가 구매신청을 함에 있어서 다음의 각 내용을 알기 쉽게 제공하여야 합니다.
+							단, 회원인 경우 제2호 내지 제4호의 적용을 제외할 수 있습니다.</p>
+							<p>1. 재화 등의 검색 및 선택</p>
+							<p>2. 성명, 주소, 전화번호, 전자우편주소(또는 이동전화번호) 등의 입력</p>
+							<p>3. 약관내용, 청약철회권이 제한되는 서비스, 배송료 설치비 등의 비용부담과 관련한 내용에 대한 확인</p>
+							<p>4. 이 약관에 동의하고 위 3.호의 사항을 확인하거나 거부하는 표시(예, 마우스 클릭)</p>
+							<p>5. 재화 등의 구매신청 및 이에 관한 확인 또는 "몰"의 확인에 대한 동의</p>
+							<p>6. 결제방법의 선택</p>
+						</div>
+						<div id="terms10">
+							<h4><span>제10조 계약의 성립</span></h4>
+							<p>1."몰"은 제9조와 같은 구매신청에 대하여 다음 각호에 해당하면 승낙하지 않을 수 있습니다. 다만, 미성년자와 계약을 체결하는 경우에는 법정대리인의 동의를 얻지 못하면 미성년자 본인 또는
+							법정대리인이 계약을 취소할 수 있다는 내용을 고지하여야 합니다.</p>
+							<ol>
+								<li>① 신청 내용에 허위, 기재누락, 오기가 있는 경우</li>
+								<li>② 미성년자가 담배, 주류 등 청소년보호법에서 금지하는 재화 및 용역을 구매하는 경우</li>
+								<li>③ 기타 구매신청에 승낙하는 것이 ＂몰＂ 기술상 현저히 지장이 있다고 판단하는 경우</li>
+							</ol>
+							<p>2. "몰"의 승낙이 제12조 제1항의 수신확인통지형태로 이용자에게 도달한 시점에 계약이 성립한 것으로 봅니다.</p>
+							<p>3. "몰"의 승낙의 의사표시에는 이용자의 구매 신청에 대한 확인 및 판매가능 여부, 구매신청의 정정 취소 등에 관한 정보 등을 포함하여야 합니다.</p>
+							<p>4. 이 약관에 동의하고 위 3.호의 사항을 확인하거나 거부하는 표시(예, 마우스 클릭)</p>
+							<p>5. 재화 등의 구매신청 및 이에 관한 확인 또는 "몰"의 확인에 대한 동의</p>
+						</div>
+						<div id="terms24">
+							<h4><span>제24조 재판권 및 준거법</span></h4>
+							<p>1."몰"과 이용자간에 발생한 전자상거래 분쟁에 관한 소송은 제소 당시의 이용자의 주소에 의하고, 주소가 없는 경우에는 거소를 관할하는 지방법원의 전속관할로 합니다.
+							다만, 제소 당시 이용자의 주소 또는 거소가 분명하지 않거나 외국 거주자의 경우에는 민사소송법상의 관할법원에 제기합니다.</p>
+							<p>2. "몰"과 이용자간에 제기된 전자상거래 소송에는 한국법을 적용합니다.</p>
+						</div>
+						<div id="terms">
+							<h4><span></span></h4>
+							<p></p>
+							<p></p>
+							<p></p>
+							<p></p>
+							<p></p>
+						</div>
+						<div>
+							<p>부칙 : 본 약관은 2016년 01월 04일부터 시행하며, 종전의 약관내용은 본 약관으로 대체합니다.</p>
+						</div>
+					</div>
+				</div> -->
+			</div>
+		</div>
+	</div>
+</div>
+
+<script th:inline="javascript">
+/*<![CDATA[*/
+	// 약관 내부 링크
+	$(function() {
+		$(".hook_list ul li a").on("click", function() {
+			var hookHeader = $("header").outerHeight() + 100;
+			var hookHref = $(this).attr("href");
+			var hookPot = $(hookHref == "#" || hookHref == "" ? "body" : hookHref);
+			var hookPos = hookPot.offset().top - hookHeader;
+			$("html, body").animate({ scrollTop: hookPos }, 300);
+		});
+	});
+/*]]>*/
+</script>
+
+</th:block>
+
+</body>
+</html>

src/main/webapp/WEB-INF/views/web/display/MallMainFormWeb2.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>

src/main/webapp/ux/style24_link.js

@@ -20,8 +20,9 @@ const _PAGE_CUSTOMER_PWD_CHANGE_FIND = _frontUrl + "/customer/password/change/fo
 const _PAGE_CUSTOMER_PWD_CHANGE_TEMP = _frontUrl + "/customer/password/change/form?pageGb=temp";	// 고객 > 임시비밀번호 로그인 > 비밀번호 변경 화면
 const _PAGE_CUSTOMER_DORMANT = _frontUrl + "/customer/dormant/certify/form";						// 고객 > 휴면회원
 const _PAGE_CUSTOMER_DORMANT_COMPLETE = _frontUrl + "/customer/dormant/certify/complete/form";		// 고객 > 휴면회원 > 완료페이지
-const _PAGE_CUSTOMER_CERTIFICATION = "/customer/certification/form"									// 고객 > 본인인증화면
-
+const _PAGE_CUSTOMER_CERTIFICATION = _frontUrl + "/customer/certification/form"						// 고객 > 본인인증화면
+const _PAGE_USE_TERMS = _frontUrl + "/customer/use/terms/form";										// Footer > 이용약관
+const _PAGE_PRIVACY_POLICY = _frontUrl + "/customer/privacy/policy/form";							// Footer > 개인정보취급방침
 
 //== 상품상세 ==/
 const _PAGE_GOODS_DETAIL = _frontUrl + "/goods/detail/form?goodsCd=";								// 상품 상세