Главная Обзор Помощь
Вход
style24
/
style24.front
2
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

카테고리 상품 목록

bin2107 5 лет назад
Родитель
ce99e1850e
Сommit
057134a3f8
5 измененных файлов с 1407 добавлено и 269 удалено
Единый вид Показать статистику Diff
  1. 29 0
      src/main/java/com/style24/front/biz/web/TsfDisplayController.java
  2. 1076 0
      src/main/webapp/WEB-INF/views/web/display/CategoryGoodsListFormWeb.html
  3. 3 3
      src/main/webapp/ux/pc/css/common.css
  4. 178 232
      src/main/webapp/ux/pc/css/layout.css
  5. 121 34
      src/main/webapp/ux/pc/js/common-ui.js

+ 29 - 0
src/main/java/com/style24/front/biz/web/TsfDisplayController.java
Просмотреть файл 

@@ -7,6 +7,7 @@ import java.util.HashMap;
 
 
 
 import javax.servlet.http.HttpServletResponse;
 
 import javax.servlet.http.HttpServletResponse;
 
 
 
+import com.style24.core.support.env.TscConstants;
 
 import org.apache.commons.lang3.StringUtils;
 
 import org.apache.commons.lang3.StringUtils;
 
 import org.springframework.beans.factory.annotation.Autowired;
 
 import org.springframework.beans.factory.annotation.Autowired;
 
 import org.springframework.mobile.device.Device;
 
 import org.springframework.mobile.device.Device;
 
@@ -402,4 +403,32 @@ public class TsfDisplayController extends TsfBaseController {
 
 		popup.setViewDt(paramMap.get("viewDt"));
 
 		popup.setViewDt(paramMap.get("viewDt"));
 
 		return displayService.getPopupList(popup);
 
 		return displayService.getPopupList(popup);
 
 	}
 
 	}
 
+
 
+	/**
 
+	 * 카테고리 상품 목록
 
+	 * @param
 
+	 * @return
 
+	 * @author bin2107
 
+	 * @since 2021. 4. 2
 
+	 */
 
+	@GetMapping("/category/goods/list/form")
 
+	public ModelAndView categoryGoodsListForm(Device device, @RequestParam HashMap<String, String> paramMap) {
 
+		ModelAndView mav = new ModelAndView(super.getDeviceViewName("display/CategoryGoodsListForm"));
 
+
 
+		String siteCd = TscConstants.Site.STYLE24.value();
 
+		String cateGb = paramMap.get("cateGb");
 
+		String formalGb = paramMap.get("formalGb");
 
+		String brandCd = paramMap.get("brandCd");
 
+
 
+		mav.addObject("siteCd",siteCd);
 
+		mav.addObject("cateGb",cateGb);
 
+		mav.addObject("formalGb",formalGb);
 
+		mav.addObject("brandCd",brandCd);
 
+		mav.addObject("cate1No",paramMap.get("cate1No"));
 
+		mav.addObject("cate2No",paramMap.get("cate2No"));
 
+		mav.addObject("cate3No",paramMap.get("cate3No"));
 
+		mav.addObject("cate4No",paramMap.get("cate4No"));
 
+
 
+		return mav;
 
+	}
 
 }
 
 }

+ 1076 - 0
src/main/webapp/WEB-INF/views/web/display/CategoryGoodsListFormWeb.html
Просмотреть файл 

@@ -0,0 +1,1076 @@
 
+<!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  : CategoryGoodsListFormWeb.html
 
+ * @desc    : 카테고리 상품목록 Page
 
+ *============================================================================
 
+ * STYLE24
 
+ * Copyright(C) 2020 TSIT, All rights reserved.
 
+ *============================================================================
 
+ * VER  DATE         AUTHOR      DESCRIPTION
 
+ * ===  ===========  ==========  =============================================
 
+ * 1.0  2021.04.02   bin2107     최초 작성
 
+ *******************************************************************************
 
+ -->
 
+<body>
 
+
 
+<th:block layout:fragment="content">
 
+	<div id="container" class="container dp">
 
+		<div class="breadcrumb">
 
+			<ul>
 
+				<li class="bread_home"><a href="index.html">홈</a></li>
 
+				<li class="bread_2depth">여성</li>
 
+			</ul>
 
+		</div>
 
+		<div class="wrap">
 
+			<div class="content dp_list"> <!-- 페이지특정 클래스 = dp_list -->
 
+				<div class="cont_head">
 
+					<div>
 
+						<h3>여성</h3>
 
+					</div>
 
+				</div>
 
+				<div class="lnb">
 
+					<div class="lnb_tit">
 
+						<h3>카테고리</h3>
 
+					</div>
 
+					<div class="lnb_category">
 
+						<ul class="category" id="ulAllCate">
 
+							<!--<li>
 
+								<a href="javascript:;">전체</a>
 
+							</li>
 
+							<li>
 
+								<a href="javascript:;">여성</a>
 
+								&lt;!&ndash; 2뎁스 &ndash;&gt;
 
+								<div class="sub_cate">
 
+									<ul>
 
+										<li><a href="javascript:;">원피스</a></li>
 
+										<li>
 
+											<a href="javascript:;">니트/가디건/베스트</a>
 
+											<div class="sub_cate">
 
+												<ul>
 
+													<li><a href="javascript:;">티셔츠/셔츠01</a></li>
 
+													<li><a href="javascript:;">니트/가디건/베스트01</a></li>
 
+													<li><a href="javascript:;">팬츠/레깅스01</a></li>
 
+												</ul>
 
+											</div>
 
+										</li>
 
+										<li>
 
+											<a href="javascript:;">팬츠/레깅스</a>
 
+											&lt;!&ndash; 3뎁스 &ndash;&gt;
 
+											<div class="sub_cate">
 
+												<ul>
 
+													<li>
 
+														<a href="javascript:;">티셔츠/셔츠02</a>
 
+														&lt;!&ndash; 4뎁스 &ndash;&gt;
 
+														<div class="sub_cate">
 
+															<ul>
 
+																<li><a href="javascript:;">티셔츠/셔츠03</a></li>
 
+																<li><a href="javascript:;">니트/가디건/베스트03</a></li>
 
+																<li><a href="javascript:;">팬츠/레깅스03</a></li>
 
+															</ul>
 
+														</div>
 
+													</li>
 
+													<li><a href="javascript:;">니트/가디건/베스트02</a></li>
 
+													<li><a href="javascript:;">팬츠/레깅스02</a></li>
 
+												</ul>
 
+											</div>
 
+										</li>
 
+									</ul>
 
+								</div>
 
+							</li>
 
+							<li>
 
+								<a href="javascript:;">남성</a>
 
+								<div class="sub_cate">
 
+									<ul>
 
+										<li><a href="javascript:;">티셔츠/셔츠</a></li>
 
+										<li><a href="javascript:;">트레이닝/스포츠</a></li>
 
+										<li><a href="javascript:;">언더웨어</a></li>
 
+									</ul>
 
+								</div>
 
+							</li>
 
+							<li>
 
+								<a href="javascript:;">유아동</a>
 
+								<div class="sub_cate">
 
+									<ul>
 
+										<li><a href="javascript:;">티셔츠/셔츠</a></li>
 
+										<li><a href="javascript:;">언더웨어</a></li>
 
+									</ul>
 
+								</div>
 
+							</li>
 
+							<li>
 
+								<a href="javascript:;">라이프</a>
 
+								<div class="sub_cate">
 
+									<ul>
 
+										<li><a href="javascript:;">잡화</a></li>
 
+									</ul>
 
+								</div>
 
+							</li>-->
 
+						</ul>
 
+					</div>
 
+				</div>
 
+				<div class="cont">
 
+					<div class="cont_body">
 
+						<div class="filter_list">
 
+							<!-- 1depth -->
 
+							<ul>
 
+								<li data-id="tap02">
 
+									<a href="javascript:void(0)">브랜드</a>
 
+								</li>
 
+								<li data-id="tap03">
 
+									<a href="javascript:void(0)">사이즈</a>
 
+								</li>
 
+								<li data-id="tap04">
 
+									<a href="javascript:void(0)">가격</a>
 
+								</li>
 
+								<li data-id="tap05">
 
+									<a href="javascript:void(0)">할인율</a>
 
+								</li>
 
+								<li data-id="tap06">
 
+									<a href="javascript:void(0)">연령</a>
 
+								</li>
 
+								<li data-id="tap07">
 
+									<a href="javascript:void(0)">시즌</a>
 
+								</li>
 
+								<li data-id="tap08">
 
+									<a href="javascript:void(0)">컬러</a>
 
+								</li>
 
+								<li data-id="tap09">
 
+									<a href="javascript:void(0)">혜택</a>
 
+								</li>
 
+							</ul>
 
+							<div class="form_field">
 
+								<div>
 
+									<input id="price" type="checkbox"><label for="price"> <span>남여 공용만 보기</span> </label>
 
+								</div>
 
+								<div>
 
+									<input id="chk-2" type="checkbox" checked=""><label for="chk-2"> <span>신상품만 보기</span> </label>
 
+								</div>
 
+							</div>
 
+						</div>
 
+						<div class="filter_content">
 
+							<!-- 브랜드 -->
 
+							<div class="sort tap02">
 
+								<ul>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand00" data-name="chkFilterBrand00" name="filterBrandCds" value=""><span>모이몰른</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand01" data-name="chkFilterBrand01" name="filterBrandCds" value=""><span>컬리수</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand02" data-name="chkFilterBrand02" name="filterBrandCds" value=""><span>NBA</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand03" data-name="chkFilterBrand03" name="filterBrandCds" value=""><span>밀크마일</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand04" data-name="chkFilterBrand04" name="filterBrandCds" value=""><span>ANDEW</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand05" data-name="chkFilterBrand05" name="filterBrandCds" value=""><span>nba Kid's</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand06" data-name="chkFilterBrand06" name="filterBrandCds" value=""><span>몰리멜리</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand07" data-name="chkFilterBrand07" name="filterBrandCds" value=""><span>ab.plus</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand08" data-name="chkFilterBrand08" name="filterBrandCds" value=""><span>milkmile</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand09" data-name="chkFilterBrand09" name="filterBrandCds" value=""><span>버커루</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand10" data-name="chkFilterBrand10" name="filterBrandCds" value=""><span>BUCKAROO</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand11" data-name="chkFilterBrand11" name="filterBrandCds" value=""><span>sellys</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand12" data-name="chkFilterBrand12" name="filterBrandCds" value=""><span>올리비에스클로젯</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand13" data-name="chkFilterBrand13" name="filterBrandCds" value=""><span>FRJ</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand14" data-name="chkFilterBrand14" name="filterBrandCds" value=""><span>Olivier's CLOSET</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand15" data-name="chkFilterBrand15" name="filterBrandCds" value=""><span>지오지아</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand16" data-name="chkFilterBrand16" name="filterBrandCds" value=""><span>LPGA</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="brand_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBrand17" data-name="chkFilterBrand17" name="filterBrandCds" value=""><span>TRUZEN</span>
 
+										</label>
 
+									</li>
 
+								</ul>
 
+								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 
+							</div>
 
+							<!-- //브랜드 -->
 
+							<!-- 사이즈 -->
 
+							<div class="sort tap03">
 
+								<ul>
 
+									<li>
 
+										<strong>상의</strong>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize01" data-name="chkFilterSize01" name="filterSizeCds" value=""><span>80</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize02" data-name="chkFilterSize02" name="filterSizeCds" value=""><span>85</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize03" data-name="chkFilterSize03" name="filterSizeCds" value=""><span>90</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize04" data-name="chkFilterSize04" name="filterSizeCds" value=""><span>95</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize05" data-name="chkFilterSize05" name="filterSizeCds" value=""><span>100</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize06" data-name="chkFilterSize06" name="filterSizeCds" value=""><span>105</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize07" data-name="chkFilterSize07" name="filterSizeCds" value=""><span>110</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize08" data-name="chkFilterSize08" name="filterSizeCds" value=""><span>115</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize09" data-name="chkFilterSize09" name="filterSizeCds" value=""><span>S</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize10" data-name="chkFilterSize10" name="filterSizeCds" value=""><span>M</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize11" data-name="chkFilterSize11" name="filterSizeCds" value=""><span>L</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize12" data-name="chkFilterSize12" name="filterSizeCds" value=""><span>XL</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize13" data-name="chkFilterSize13" name="filterSizeCds" value=""><span>FREE</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<strong>하의</strong>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize14" data-name="chkFilterSize14" name="filterSizeCds" value=""><span>44</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize15" data-name="chkFilterSize15" name="filterSizeCds" value=""><span>55</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize16" data-name="chkFilterSize16" name="filterSizeCds" value=""><span>66</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize17" data-name="chkFilterSize17" name="filterSizeCds" value=""><span>77</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize18" data-name="chkFilterSize18" name="filterSizeCds" value=""><span>26</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize19" data-name="chkFilterSize19" name="filterSizeCds" value=""><span>27</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize20" data-name="chkFilterSize20" name="filterSizeCds" value=""><span>28</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize21" data-name="chkFilterSize21" name="filterSizeCds" value=""><span>29</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize22" data-name="chkFilterSize22" name="filterSizeCds" value=""><span>30</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize23" data-name="chkFilterSize23" name="filterSizeCds" value=""><span>32</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize24" data-name="chkFilterSize24" name="filterSizeCds" value=""><span>33</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize25" data-name="chkFilterSize25" name="filterSizeCds" value=""><span>34</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize26" data-name="chkFilterSize26" name="filterSizeCds" value=""><span>M</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize27" data-name="chkFilterSize27" name="filterSizeCds" value=""><span>L</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<strong>신발</strong>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize28" data-name="chkFilterSize28" name="filterSizeCds" value=""><span>120</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize29" data-name="chkFilterSize29" name="filterSizeCds" value=""><span>130</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize30" data-name="chkFilterSize30" name="filterSizeCds" value=""><span>140</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize31" data-name="chkFilterSize31" name="filterSizeCds" value=""><span>150</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize32" data-name="chkFilterSize32" name="filterSizeCds" value=""><span>140</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize33" data-name="chkFilterSize33" name="filterSizeCds" value=""><span>150</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize34" data-name="chkFilterSize34" name="filterSizeCds" value=""><span>220</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize35" data-name="chkFilterSize35" name="filterSizeCds" value=""><span>230</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize36" data-name="chkFilterSize36" name="filterSizeCds" value=""><span>235</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize37" data-name="chkFilterSize37" name="filterSizeCds" value=""><span>240</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize38" data-name="chkFilterSize38" name="filterSizeCds" value=""><span>245</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize39" data-name="chkFilterSize39" name="filterSizeCds" value=""><span>250</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize40" data-name="chkFilterSize40" name="filterSizeCds" value=""><span>255</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize41" data-name="chkFilterSize41" name="filterSizeCds" value=""><span>260</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize42" data-name="chkFilterSize42" name="filterSizeCds" value=""><span>265</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize43" data-name="chkFilterSize43" name="filterSizeCds" value=""><span>270</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize44" data-name="chkFilterSize44" name="filterSizeCds" value=""><span>275</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize45" data-name="chkFilterSize45" name="filterSizeCds" value=""><span>280</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize46" data-name="chkFilterSize46" name="filterSizeCds" value=""><span>285</span>
 
+										</label>
 
+										<label class="size_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSize47" data-name="chkFilterSize47" name="filterSizeCds" value=""><span>290</span>
 
+										</label>
 
+									</li>
 
+								</ul>
 
+								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 
+							</div>
 
+							<!-- //사이즈 -->
 
+							<!-- 가격 -->
 
+							<div class="sort tap04">
 
+								<div class="range">
 
+									<input type="text" class="js-range-slider01" name="my_range01" value="" />
 
+								</div>
 
+								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 
+							</div>
 
+							<!-- //가격 -->
 
+							<!-- 할인율 -->
 
+							<div class="sort tap05">
 
+								<ul style="display:none;">
 
+									<li><input type="checkbox" id="percent01" name="range" value="0"><label for="percent01"><span></span><span>0%</span></label></li>
 
+									<li><input type="checkbox" id="percent02" name="range" value="10"><label for="percent02"><span></span><span>10%</span></label></li>
 
+									<li><input type="checkbox" id="percent03" name="range" value="20"><label for="percent03"><span></span><span>20%</span></label></li>
 
+									<li><input type="checkbox" id="percent04" name="range" value="30"><label for="percent04"><span></span><span>30%</span></label></li>
 
+									<li><input type="checkbox" id="percent05" name="range" value="40"><label for="percent05"><span></span><span>40%</span></label></li>
 
+									<li><input type="checkbox" id="percent06" name="range" value="50"><label for="percent06"><span></span><span>50%</span></label></li>
 
+									<li><input type="checkbox" id="percent07" name="range" value="60"><label for="percent07"><span></span><span>60%</span></label></li>
 
+									<li><input type="checkbox" id="percent08" name="range" value="70"><label for="percent08"><span></span><span>70%</span></label></li>
 
+									<li><input type="checkbox" id="percent09" name="range" value="80"><label for="percent09"><span></span><span>80%</span></label></li>
 
+									<li><input type="checkbox" id="percent10" name="range" value="100"><label for="percent10"><span></span><span>100%</span></label></li>
 
+								</ul>
 
+								<div class="range">
 
+									<input type="text" class="js-range-slider02" name="my_range02" value="" />
 
+								</div>
 
+								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 
+							</div>
 
+							<!-- //할인율 -->
 
+							<!-- 연령 -->
 
+							<div class="sort tap06">
 
+								<ul>
 
+									<li>
 
+										<label class="Age_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterAge00" data-name="chkFilterAge00" name="filterAgeCds" value=""><span>베이비(0~18개월)</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="Age_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterAge00" data-name="chkFilterAge00" name="filterAgeCds" value=""><span>토들러(18~36개월)</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="Age_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterAge00" data-name="chkFilterAge00" name="filterAgeCds" value=""><span>키즈(4~7세)</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="Age_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterAge00" data-name="chkFilterAge00" name="filterAgeCds" value=""><span>주니어(7~13세)</span>
 
+										</label>
 
+									</li>
 
+								</ul>
 
+								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 
+							</div>
 
+							<!-- //연령 -->
 
+							<!-- 시즌 -->
 
+							<div class="sort tap07">
 
+								<ul>
 
+									<li>
 
+										<label class="Season_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSeason00" data-name="chkFilterSeason00" name="filterSeasonCds" value=""><span>봄</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="Season_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSeason00" data-name="chkFilterSeason00" name="filterSeasonCds" value=""><span>여름</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="Season_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSeason00" data-name="chkFilterSeason00" name="filterSeasonCds" value=""><span>가을</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="Season_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterSeason00" data-name="chkFilterSeason00" name="filterSeasonCds" value=""><span>겨울</span>
 
+										</label>
 
+									</li>
 
+								</ul>
 
+								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 
+							</div>
 
+							<!-- //시즌 -->
 
+							<!-- 컬러 -->
 
+							<div class="sort tap08">
 
+								<ul>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color01"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color02"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color03"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color04"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color05"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color06"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color07"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color08"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color09"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color10"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color11"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color12"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color13"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color14"></span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="color-check" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterColor0" data-name="chkFilterColor0" name="filterColorCds" value="DM^BEIGE^color35,E1^BEIGE^color35,T3^BEIGE^color35,VM^BEIGE^color35" filtervalue="">
 
+											<span class="pdColor-color15"></span>
 
+										</label>
 
+									</li>
 
+								</ul>
 
+								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 
+							</div>
 
+							<!-- //컬러 -->
 
+							<!-- 혜택 -->
 
+							<div class="sort tap09">
 
+								<ul>
 
+									<li>
 
+										<label class="Benefits_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBenefits00" data-name="chkFilterBenefits00" name="filterBenefitsCds" value=""><span>할인쿠폰</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="Benefits_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBenefits00" data-name="chkFilterBenefits00" name="filterBenefitsCds" value=""><span>사은품</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="Benefits_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBenefits00" data-name="chkFilterBenefits00" name="filterBenefitsCds" value=""><span>단독특가</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="Benefits_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBenefits00" data-name="chkFilterBenefits00" name="filterBenefitsCds" value=""><span>온라인단독</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="Benefits_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBenefits00" data-name="chkFilterBenefits00" name="filterBenefitsCds" value=""><span>무료배송</span>
 
+										</label>
 
+									</li>
 
+									<li>
 
+										<label class="Benefits_btn" onclick="filterSel();">
 
+											<input type="checkbox" group="filterValue" id="chkFilterBenefits00" data-name="chkFilterBenefits00" name="filterAgeCds" value=""><span>총알배송</span>
 
+										</label>
 
+									</li>
 
+								</ul>
 
+								<a href="javascript:void(0)" class="tap_close">delete-btn</a>
 
+							</div>
 
+							<!-- //혜택 -->
 
+							<!-- 필터 -->
 
+							<div class="fillter">
 
+								<div class="fillter_box">
 
+                                    <span>
 
+                                        모이몰른
 
+                                        <a href="javascript:;" class="filter_delete"></a >
 
+                                    </span>
 
+									<span>
 
+                                        85
 
+                                        <a href="javascript:;" class="filter_delete"></a>
 
+                                    </span>
 
+									<span>
 
+                                        버커루
 
+                                        <a href="javascript:;" class="filter_delete"></a>
 
+                                    </span>
 
+									<span>
 
+                                        TBJ
 
+                                        <a href="javascript:;" class="filter_delete"></a >
 
+                                    </span>
 
+									<span>
 
+                                        ANDEW
 
+                                        <a href="javascript:;" class="filter_delete"></a >
 
+                                    </span>
 
+									<span>
 
+                                        모이몰른
 
+                                        <a href="javascript:;" class="filter_delete"></a >
 
+                                    </span>
 
+									<span>
 
+                                        85
 
+                                        <a href="javascript:;" class="filter_delete"></a>
 
+                                    </span>
 
+									<span>
 
+                                        버커루
 
+                                        <a href="javascript:;" class="filter_delete"></a>
 
+                                    </span>
 
+									<span>
 
+                                        TBJ
 
+                                        <a href="javascript:;" class="filter_delete"></a >
 
+                                    </span>
 
+									<span>
 
+                                        ANDEW
 
+                                        <a href="javascript:;" class="filter_delete"></a >
 
+                                    </span>
 
+									<span>
 
+                                        모이몰른
 
+                                        <a href="javascript:;" class="filter_delete"></a >
 
+                                    </span>
 
+									<span>
 
+                                        85
 
+                                        <a href="javascript:;" class="filter_delete"></a>
 
+                                    </span>
 
+									<span>
 
+                                        버커루
 
+                                        <a href="javascript:;" class="filter_delete"></a>
 
+                                    </span>
 
+									<span>
 
+                                        TBJ
 
+                                        <a href="javascript:;" class="filter_delete"></a >
 
+                                    </span>
 
+									<span>
 
+                                        ANDEW
 
+                                        <a href="javascript:;" class="filter_delete"></a >
 
+                                    </span>
 
+									<span>
 
+                                        모이몰른
 
+                                        <a href="javascript:;" class="filter_delete"></a >
 
+                                    </span>
 
+									<span>
 
+                                        85
 
+                                        <a href="javascript:;" class="filter_delete"></a>
 
+                                    </span>
 
+									<span>
 
+                                        버커루
 
+                                        <a href="javascript:;" class="filter_delete"></a>
 
+                                    </span>
 
+									<span>
 
+                                        TBJ
 
+                                        <a href="javascript:;" class="filter_delete"></a >
 
+                                    </span>
 
+									<!-- 컬러 표시 -->
 
+									<span>
 
+                                        <span class="pdColor-color12"></span>
 
+                                        <a href="javascript:;" class="filter_delete"></a >
 
+                                    </span>
 
+									<span>
 
+                                        <span class="pdColor-color13"></span>
 
+                                        <a href="javascript:;" class="filter_delete"></a >
 
+                                    </span>
 
+									<!-- 컬러 표시 -->
 
+								</div>
 
+								<button class="fillter_reset"><span>전체 초기화</span></button>
 
+							</div>
 
+							<!-- //필터 -->
 
+						</div>
 
+						<div class="list_content"> <!-- 데이터 없을시 클래스 nodata 추가 -->
 
+							<div class="list_defult">
 
+								<div>
 
+									<p>선택하신 조건에 맞는 상품이 없습니다.<br>필터를 변경해 보세요.</p>
 
+								</div>
 
+								<div class="ui_row">
 
+									<button type="button" class="btn btn_default btn_md"><span>선택한 필터 초기화</span></button>
 
+								</div>
 
+							</div>
 
+							<div class="count_wrap">
 
+								<div>
 
+									<p><span>9999</span>개의 상품</p>
 
+								</div>
 
+								<div>
 
+									<ul>
 
+										<li>
 
+											<a href="" class="on">최신상품순</a>
 
+										</li>
 
+										<li>
 
+											<a href="">인기상품순</a>
 
+										</li>
 
+										<li>
 
+											<a href="">리뷰 많은순</a>
 
+										</li>
 
+									</ul>
 
+								</div>
 
+							</div>
 
+							<div class="itemsGrp"> <!-- itemsGrp rank hot deal -->
 
+								<div class="item_prod">
 
+									<div class="item_state">
 
+										<button type="button" class="itemLike">관심상품 추가</button>
 
+										<a href="#none" class="itemLink">
 
+											<div class="rank ranker"><span>1</span></div>
 
+											<div class="itemPic">
 
+												<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
 
+											</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="itemcolorchip">
 
+												<span class="chip_color35" value="ABM">BEIGE</span>
 
+												<span class="chip_color54" value="BDS">BLACK</span>
 
+												<span class="chip_color40" value="YBR">WHITE</span>
 
+											</div>
 
+											<p class="itemBadge">
 
+												<span class="badge13">베스트 </span>
 
+											</p>
 
+											<div class="itemComment">#주문 폭주 상품</div>
 
+										</a>
 
+									</div>
 
+								</div>
 
+								<div class="item_prod">
 
+									<div class="item_state">
 
+										<button type="button" class="itemLike">관심상품 추가</button>
 
+										<a href="#none" class="itemLink">
 
+											<div class="rank ranker"><span>1</span></div>
 
+											<div class="itemPic">
 
+												<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
 
+											</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="itemcolorchip">
 
+												<span class="chip_color35" value="ABM">BEIGE</span>
 
+												<span class="chip_color54" value="BDS">BLACK</span>
 
+												<span class="chip_color40" value="YBR">WHITE</span>
 
+											</div>
 
+											<p class="itemBadge">
 
+												<span class="badge13">베스트 </span>
 
+												<span class="badge13">쿠폰할인 </span>
 
+												<span class="badge13">무료배송 </span>
 
+											</p>
 
+											<div class="itemComment">#주문 폭주 상품</div>
 
+										</a>
 
+									</div>
 
+								</div>
 
+								<div class="item_prod">
 
+									<div class="item_state">
 
+										<button type="button" class="itemLike">관심상품 추가</button>
 
+										<a href="#none" class="itemLink">
 
+											<div class="rank ranker"><span>1</span></div>
 
+											<div class="itemPic">
 
+												<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
 
+											</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="itemcolorchip">
 
+												<span class="chip_color35" value="ABM">BEIGE</span>
 
+												<span class="chip_color54" value="BDS">BLACK</span>
 
+												<span class="chip_color40" value="YBR">WHITE</span>
 
+											</div>
 
+											<p class="itemBadge">
 
+												<span class="badge13">베스트 </span>
 
+												<span class="badge13">쿠폰할인 </span>
 
+												<span class="badge13">무료배송 </span>
 
+											</p>
 
+											<div class="itemComment">#주문 폭주 상품</div>
 
+										</a>
 
+									</div>
 
+								</div>
 
+								<div class="item_prod">
 
+									<div class="item_state">
 
+										<button type="button" class="itemLike">관심상품 추가</button>
 
+										<a href="#none" class="itemLink">
 
+											<div class="rank ranker"><span>1</span></div>
 
+											<div class="itemPic">
 
+												<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
 
+											</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="itemcolorchip">
 
+												<span class="chip_color35" value="ABM">BEIGE</span>
 
+												<span class="chip_color54" value="BDS">BLACK</span>
 
+												<span class="chip_color40" value="YBR">WHITE</span>
 
+											</div>
 
+											<p class="itemBadge">
 
+												<span class="badge13">베스트 </span>
 
+											</p>
 
+											<div class="itemComment">#주문 폭주 상품</div>
 
+										</a>
 
+									</div>
 
+								</div>
 
+								<div class="item_prod">
 
+									<div class="item_state">
 
+										<button type="button" class="itemLike">관심상품 추가</button>
 
+										<a href="#none" class="itemLink">
 
+											<div class="rank ranker"><span>1</span></div>
 
+											<div class="itemPic">
 
+												<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
 
+											</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="itemcolorchip">
 
+												<span class="chip_color35" value="ABM">BEIGE</span>
 
+												<span class="chip_color54" value="BDS">BLACK</span>
 
+												<span class="chip_color40" value="YBR">WHITE</span>
 
+											</div>
 
+											<p class="itemBadge">
 
+												<span class="badge13">베스트 </span>
 
+											</p>
 
+											<div class="itemComment">#주문 폭주 상품</div>
 
+										</a>
 
+									</div>
 
+								</div>
 
+								<div class="item_prod">
 
+									<div class="item_state">
 
+										<button type="button" class="itemLike">관심상품 추가</button>
 
+										<a href="#none" class="itemLink">
 
+											<div class="rank ranker"><span>1</span></div>
 
+											<div class="itemPic">
 
+												<img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
 
+											</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="itemcolorchip">
 
+												<span class="chip_color35" value="ABM">BEIGE</span>
 
+												<span class="chip_color54" value="BDS">BLACK</span>
 
+												<span class="chip_color40" value="YBR">WHITE</span>
 
+											</div>
 
+											<p class="itemBadge">
 
+												<span class="badge13">베스트 </span>
 
+											</p>
 
+											<div class="itemComment">#주문 폭주 상품</div>
 
+										</a>
 
+									</div>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	</div>
 
+	<form id="searchGoodsForm" name="searchGoodsForm">
 
+		<input type="hidden" name="pageNo" id="pageNo" value ="1"/>
 
+		<input type="hidden" name="pageSize" value ="32"/>
 
+		<input type="hidden" name="cateNo"/>
 
+		<input type="hidden" name="cateGb" th:value="${cateGb}"/>
 
+		<input type="hidden" name="brandCd" th:value="${brandCd}"/>
 
+		<input type="hidden" name="formalGb" th:value="${formalGb}"/>
 
+		<input type="hidden" name="cate1No" th:value="${cate1No}"/>
 
+		<input type="hidden" name="cate2No" th:value="${cate2No}"/>
 
+		<input type="hidden" name="cate3No" th:value="${cate3No}"/>
 
+		<input type="hidden" name="cate4No" th:value="${cate4No}"/>
 
+		<input type="hidden" name="sortGb"/>
 
+	</form>
 
+
 
+	<script th:inline="javascript">
 
+		/*<![CDATA[*/
 
+		// 컨텐츠 호출
 
+		$(document).ready( function() {
 
+			//가격 슬라이드
 
+			var custom_values = ['9,000원', '230,000원', '487,000원', '700,000원', '1,360,000원', '1,799,000원'];
 
+			var my_from = custom_values.indexOf('9,000원');
 
+			var my_to = custom_values.indexOf('230,000원');
 
+			$(".dp .js-range-slider01, .sch_result .js-range-slider01").ionRangeSlider({
 
+				type: "double",
 
+				min: 9000,
 
+				max: 1799000,
 
+				from: my_from,
 
+				to: my_to,
 
+				grid: true,
 
+				skin: "round",
 
+				postfix: "원",
 
+				prettify_separator: ",",
 
+				values: custom_values
 
+			});
 
+
 
+			//할인율
 
+			var custom_values02 = ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'];
 
+			var my_from02 = custom_values02.indexOf('0%');
 
+			var my_to02 = custom_values02.indexOf('10%');
 
+			$(".dp .js-range-slider02, .sch_result .js-range-slider02").ionRangeSlider({
 
+				type: "double",
 
+				min: 0,
 
+				max: 100,
 
+				from: my_from02,
 
+				to: my_to02,
 
+				grid: true,
 
+				skin: "round",
 
+				postfix: "%",
 
+				prettify_separator: ",",
 
+				values: custom_values02
 
+			});
 
+
 
+			fnCreateCategoryList();
 
+		});
 
+
 
+		var fnCreateCategoryList = function (){
 
+			$.getJSON('/display/gnb/tab/list'
 
+					, function(result, status) {
 
+						if (status == 'success') {
 
+							if (result.length > 0) {
 
+								$('#ulAllCate').html('');
 
+								$('#ulAllCate').append('<li><a href="javascript:void(0);">전체</a></li>\n');
 
+
 
+								let allCate = [[${allCateList}]];
 
+								$.each(result, function(idx, item) {
 
+									if (item.contentsType == 'C') { // 컨텐츠유형:카테고리
 
+										$.each(allCate, function(allCateIdx, allCateItem) {
 
+											if (item.cate1No == allCateItem.cate1No) {
 
+												$('#ulAllCate').append(fnGetCategoryList(allCateItem));
 
+											}
 
+										});
 
+									}
 
+								});
 
+							}
 
+						}
 
+					});
 
+		}
 
+
 
+		let fnGetCategoryList = function (cate1){
 
+			var brandCd = [[${brandCd}]];
 
+			var formalGb = [[${formalGb}]];
 
+			var cate1No = [[${cate1No}]];
 
+			var cate2No = [[${cate2No}]];
 
+			var cate3No = [[${cate3No}]];
 
+			var cate4No = [[${cate4No}]];
 
+
 
+			console.log('1.'+cate1.cate1No);
 
+			console.log('2.'+cate1No);
 
+			let tag = '';
 
+			if (cate1 != null) {
 
+				tag += '<li';
 
+					if(cate1.cate1No == cate1No){
 
+						tag += ' class="on"';
 
+					}
 
+				tag += '>\n';
 
+				tag += '	<a href="javascript:;"';
 
+				if(cate1.cate1No == cate1No){
 
+					tag += ' class="on"';
 
+				}
 
+				tag += '	>' + cate1.cate1Nm + '</a>\n';
 
+				if (cate1.leafYn == 'N' && cate1.cate2List.length > 0) {
 
+					tag += '<div class="sub_cate"';
 
+					if(cate1.cate1No == cate1No){
 
+						tag += ' style="display: block;"';
 
+					}
 
+					tag += '>\n';
 
+					tag += '	<ul>\n';
 
+					$.each(cate1.cate2List, function(idx2, cate2) {
 
+						tag += '		<li';
 
+						if(cate2.cate2No == cate2No){
 
+							tag += ' class="on"';
 
+						}
 
+						tag += '		>\n';
 
+						tag += '		<a href="javascript:;" ';
 
+						if(cate2.cate2No == cate2No){
 
+							tag += ' class="on"';
 
+						}
 
+						tag += '		>' + cate2.cate2Nm + '</a>\n';
 
+						if (cate2.leafYn == 'N' && cate2.cate3List != null && cate2.cate3List.length > 0) {
 
+							tag += '<div class="sub_cate"';
 
+							if(cate2.cate2No == cate2No){
 
+								tag += ' style="display: block;"';
 
+							}
 
+							tag += '>\n';
 
+							tag += '	<ul>\n';
 
+							$.each(cate2.cate3List, function (idx3, cate3){
 
+								tag += '<li';
 
+								if(cate3.cate3No == cate3No){
 
+									tag += ' class="on"';
 
+								}
 
+								tag += '>';
 
+								tag += '<a href="javascript:;"';
 
+								if(cate3.cate3No == cate3No){
 
+									tag += ' class="on"';
 
+								}
 
+								tag += '>' + cate3.cate3Nm + '</a>';
 
+								tag += '</li>\n';
 
+							});
 
+							tag += '	</ul>\n';
 
+							tag += '</div>\n';
 
+						}
 
+						tag += '</li>';
 
+					});
 
+					tag += '	</ul>\n';
 
+					tag += '</div>\n';
 
+				}
 
+				tag += '</li>\n';
 
+			}
 
+			return tag;
 
+		}
 
+
 
+		var test1 = $("#searchGoodsForm").find("input[name=cate2No]").val();
 
+		if(test1 == '1101'){
 
+
 
+		}
 
+
 
+		/*]]>*/
 
+	</script>
 
+
 
+</th:block>
 
+
 
+</body>
 
+</html>

+ 3 - 3
src/main/webapp/ux/pc/css/common.css
Просмотреть файл 

@@ -211,8 +211,8 @@ textarea {background-color:transparent; border:1px solid #d7d7d7; width:99%; ove
 
 .textarea_full {width:832px; padding:10px}
 
 .textarea_full {width:832px; padding:10px}
 
 .textarea_md {width:656px; width: 30%; height:108px; padding:10px; line-height:18px;}
 
 .textarea_md {width:656px; width: 30%; height:108px; padding:10px; line-height:18px;}
 
 .textarea_sm {width:360px; width: 18%; padding:10px;}
 
 .textarea_sm {width:360px; width: 18%; padding:10px;}
 
-.txt_cnt {text-align: right;margin-top: 10px;}
 
-
 
+.txt_cnt {text-align:right; margin-top: 10px;}
 
+.txt_cnt .c_primary {font-weight:500;}
 
 
 
 
 
 /* margin style */
 
 /* margin style */
 
@@ -873,7 +873,7 @@ content: "〉";font-size: 12px;padding-left: 8px;
 
 
 
 
 
 /* form style */
 
 /* form style */
 
-input,  textarea {font-size:12px; font-family:'LATO', 'Noto Sans KR', sans-serif; color:#666666; vertical-align:middle;}
 
+input,  textarea {font-size:14px; vertical-align:middle;}
 
 select{font-size:12px; font-family:'LATO', 'Noto Sans KR', sans-serif; color:#666666; vertical-align:middle;}
 
 select{font-size:12px; font-family:'LATO', 'Noto Sans KR', sans-serif; color:#666666; vertical-align:middle;}
 
 input[type="text"], input[type="password"] {padding:7px 0 7px 9px; border:1px solid #dddddd;box-sizing: border-box;}
 
 input[type="text"], input[type="password"] {padding:7px 0 7px 9px; border:1px solid #dddddd;box-sizing: border-box;}
 
 input[type="text"]:focus, input[type="password"]:focus,
 
 input[type="text"]:focus, input[type="password"]:focus,

+ 178 - 232
src/main/webapp/ux/pc/css/layout.css
Просмотреть файл 

@@ -685,16 +685,13 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 .modal .form_field input[type="checkbox"]:disabled + label:after {top:50%; transform:translateY(-50%);}
 
 .modal .form_field input[type="checkbox"]:disabled + label:after {top:50%; transform:translateY(-50%);}
 
 
 
 /* layout */
 
 /* layout */
 
-.container {width:100%; padding:0; margin: 0 auto; position:relative; *zoom:1;}
 
+.container {width:100%; padding:0; margin:0 auto; position:relative; overflow:hidden; *zoom:1;}
 
 .container:after {clear:both; content:"";display:block;}    
 .container:after {clear:both; content:"";display:block;}    
-.container .wrap {position:relative; width:100%; min-width: 1460px; max-width: 1920px; /*min-width: 1380px;*/ padding-left:70px; padding-right:70px; margin: 0px auto; box-sizing:border-box;}
 
-.container.main .wrap, .container.dp .wrap {position:relative; width:100%; min-width:auto; max-width:auto; padding-left:0px; padding-right:0px;}
 
-
 
-/* .container .wrap.wide {min-width: 100%;} */
 
-.container .wrap .content {position:relative;  /*max-width: 1460px; margin:0 auto;*/  margin-left:auto; margin-right:auto;}
 
-.container .wrap .content:after {content:''; display: block; clear:both;}
 
-.container .wrap .content.wide{width:100%; /*max-width: 1920px;padding: 0px 0px;*/ padding-left: 0px; padding-right: 0px; /*margin:0 auto;*/ margin-left:auto; margin-right:auto;}
 
-.container .wrap .content section {/*width: 100%;*/ display:block;}
 
+.container .wrap {position:relative; width:100%; min-width:1460px; max-width:1920px; /*min-width: 1380px;*/ margin:0px auto; box-sizing:border-box;}
 
+.container .wrap .content {position:relative; margin-left:auto; margin-right:auto; padding-left:70px; padding-right:70px;}
 
+.container .wrap .content:after {content:''; clear:both; display:block;}
 
+.container .wrap .content.wide {width:100%; padding-left:0px; padding-right:0px; margin-left:auto; margin-right:auto;}
 
+.container .wrap .content section {display:block;}
 
 
 
 /* max-width: 1820px; */
 
 /* max-width: 1820px; */
 
 /* min-width: 1350px; */
 
 /* min-width: 1350px; */
 
@@ -707,14 +704,12 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 
 
 
 
 /* breadcrumb */
 
 /* breadcrumb */
 
-.breadcrumb {padding:0px 70px; margin:42px auto 62px;}
 
+.breadcrumb {padding:0px 70px; margin:40px auto 60px;}
 
 .breadcrumb ul li {display: inline-block; color: #888;}
 
 .breadcrumb ul li {display: inline-block; color: #888;}
 
 .breadcrumb ul li:last-child {color:#222; font-weight: 300;}
 
 .breadcrumb ul li:last-child {color:#222; font-weight: 300;}
 
 .breadcrumb ul li:first-of-type::before {content:none;}
 
 .breadcrumb ul li:first-of-type::before {content:none;}
 
 .breadcrumb ul li::before {content:''; display: inline-block; width:6px; height: 11px; padding: 0 12px; background: url('/images/pc/ico_bread_root.png')no-repeat center center;}
 
 .breadcrumb ul li::before {content:''; display: inline-block; width:6px; height: 11px; padding: 0 12px; background: url('/images/pc/ico_bread_root.png')no-repeat center center;}
 
 
 
-.ev .breadcrumb ul li:nth-child(2) {color:#222; font-weight: 300;}
 
-
 
 .area_top_list_info {position:relative; width:100%; margin:60px auto 30px}
 
 .area_top_list_info {position:relative; width:100%; margin:60px auto 30px}
 
 .area_top_list_info .total_count {font-size:16px; color:#888; font-weight:200;}
 
 .area_top_list_info .total_count {font-size:16px; color:#888; font-weight:200;}
 
 .area_top_list_info .total_count span {color:#fd4802; font-weight:300;}
 
 .area_top_list_info .total_count span {color:#fd4802; font-weight:300;}
 
@@ -760,7 +755,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 .cont_body::after  {content: ''; display: block; clear: both;}
 
 .cont_body::after  {content: ''; display: block; clear: both;}
 
 
 
 @media screen and (max-width: 1620px){
 
 @media screen and (max-width: 1620px){
 
-	.container .wrap,
 
+	/*.container .wrap,*/
 
 	.breadcrumb,
 
 	.breadcrumb,
 
 	.common_header > .area,
 
 	.common_header > .area,
 
 	.gnb,
 
 	.gnb,
 
@@ -1000,7 +995,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 .taps > div > ul li.active a {border-color:#222; color:#222; font-weight:500;}
 
 .taps > div > ul li.active a {border-color:#222; color:#222; font-weight:500;}
 
 .taps > div > ul li a > span {display:inline-block;}
 
 .taps > div > ul li a > span {display:inline-block;}
 
 
 
-/* 안내 */
 
+/* 안내1 */
 
 .com_info_txt {padding:40px 40px 35px; border:1px solid #ddd;}
 
 .com_info_txt {padding:40px 40px 35px; border:1px solid #ddd;}
 
 .com_info_txt .tit {position: relative; font-size: 16px; color: #666; padding-left:30px; font-weight:300; line-height:1;}
 
 .com_info_txt .tit {position: relative; font-size: 16px; color: #666; padding-left:30px; font-weight:300; line-height:1;}
 
 .com_info_txt .tit:after {content:''; position: absolute; top:50%; left:0; transform:translateY(-50%); width: 20px; height: 20px; margin-top:-1px; background: url(/images/pc/ico_null02.png) no-repeat center}
 
 .com_info_txt .tit:after {content:''; position: absolute; top:50%; left:0; transform:translateY(-50%); width: 20px; height: 20px; margin-top:-1px; background: url(/images/pc/ico_null02.png) no-repeat center}
 
@@ -1009,6 +1004,19 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 .com_info_txt ul li:first-child {margin-top:0;}
 
 .com_info_txt ul li:first-child {margin-top:0;}
 
 .com_info_txt ul li:after {content:''; position: absolute; top:9px; left: 0; background: #858585; width: 3px; height: 3px;}
 
 .com_info_txt ul li:after {content:''; position: absolute; top:9px; left: 0; background: #858585; width: 3px; height: 3px;}
 
 
 
+/* 안내2 */
 
+.announce_txt {position:relative; max-width:1200px; margin:auto;}
 
+.announce_txt::after {content:''; clear:both; display:block;}
 
+.announce_txt .note_txt {float:left; width:65px; margin-top:2px; margin-right:60px; text-align:center;}
 
+.announce_txt .note_txt p {color:#888; font-size:18px; font-weight:300; margin-top:20px;}
 
+.announce_txt .announce_list {float:left; width:calc(100% - 125px);}
 
+.announce_txt .announce_list .tit {color:#888; font-size:16px; font-weight:300; margin-bottom:20px;}
 
+.announce_txt .announce_list ul {margin-bottom:40px;}
 
+.announce_txt .announce_list ul:last-of-type {margin-bottom:0px;}
 
+.announce_txt .announce_list ul li {position: relative; margin-top:5px; padding-left:12px; color:#888; font-size:16px; font-weight:200; line-height:24px;}
 
+.announce_txt .announce_list ul li:before {content:''; position:absolute; top:10px; left:0; width:2px; height:2px; background:#888;}
 
+.announce_txt .announce_list ul li:first-child {margin-top:0;}
 
+
 
 
 
 /* 주문내역 테이블 리스트 */
 
 /* 주문내역 테이블 리스트 */
 
 .part_deliver {position:relative;}
 
 .part_deliver {position:relative;}
 
@@ -1539,8 +1547,8 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 
 
 
 
 	/* cs_공통 */
 
 	/* cs_공통 */
 
-	.cs {line-height:1.2; padding-bottom:150px;}
 
-	.cs .wrap .content {max-width:1460px;}
 
+	.cs {line-height:1.2; padding-bottom:160px;}
 
+	.cs .wrap .content {max-width:1460px; padding-left:0; padding-right:0;}
 
 	.cs .foldGroup {margin-top: 60px;}
 
 	.cs .foldGroup {margin-top: 60px;}
 
 	.cs .history_wrap {width: 100%; height: 173px; padding: 50px; box-sizing: border-box;  background: #f5f5f5;}
 
 	.cs .history_wrap {width: 100%; height: 173px; padding: 50px; box-sizing: border-box;  background: #f5f5f5;}
 
 	.cs .history_wrap::after {content:''; display: block; clear:both;}
 
 	.cs .history_wrap::after {content:''; display: block; clear:both;}
 
@@ -1615,23 +1623,6 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.contactUs .ui_row.nodata {border-top:none;}
 
 	.contactUs .ui_row.nodata {border-top:none;}
 
 	.contactUs .fold_cont .img_group .thumb_pic {background:#fff;}
 
 	.contactUs .fold_cont .img_group .thumb_pic {background:#fff;}
 
 	.contactUs .fold_cont .img_group .thumb_pic img{position:absolute; left:50%; right:0; top:50%; bottom:auto; transform:translate(-50%, -50%); width:auto; height:auto; max-height:100%; max-width:100%; margin:auto 0; cursor:pointer;}
 
 	.contactUs .fold_cont .img_group .thumb_pic img{position:absolute; left:50%; right:0; top:50%; bottom:auto; transform:translate(-50%, -50%); width:auto; height:auto; max-height:100%; max-width:100%; margin:auto 0; cursor:pointer;}
 
-	
-	.modal.cs_pop.contact_img_pop {width:800px; height:800px; max-width:none; max-height:none; padding:60px; box-sizing:border-box;}
 
-	.modal.cs_pop.contact_img_pop .modal-body .pop_cont {max-height:none;}
 
-	.modal.cs_pop.contact_img_pop .swiper-slide {}
 
-	.modal.cs_pop.contact_img_pop .swiper-slide .pop_img {position:relative; width:100%; height:0; padding-top:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:contain;}
 
-	.modal.cs_pop.contact_img_pop .swiper-pagination {position:absolute; left:0; right:0; bottom:15px; width:100%; text-align:center;}
 
-	.modal.cs_pop.contact_img_pop .swiper-pagination .swiper-pagination-bullet {width:10px; height:10px; margin-left:10px; background:#ddd; opacity:1;}
 
-	.modal.cs_pop.contact_img_pop .swiper-pagination .swiper-pagination-bullet-active {background:#fd4802}
 
-	.modal.cs_pop.contact_img_pop .swiper-pagination .swiper-pagination-bullet:first-child {margin-left:0;} 
-	.modal.cs_pop.contact_img_pop .swiper-button-prev::after,
 
-	.modal.cs_pop.contact_img_pop .swiper-button-next::after {content: '';}
 
-	.modal.cs_pop.contact_img_pop .swiper-button-prev,
 
-	.modal.cs_pop.contact_img_pop .swiper-button-next {top:50%; transform:translateY(-50%); margin:0; display:inline-block; }
 
-	.modal.cs_pop.contact_img_pop .swiper-button-prev {left:-70px;}
 
-	.modal.cs_pop.contact_img_pop .swiper-button-next {right:-70px;}
 
-	.modal.cs_pop.contact_img_pop .swiper-button-prev:after {content:''; display:block; position:absolute; top:0px; left:0; width:34px; height:34px; border:2px solid #a7a7a7; border-width:2px 2px 0 0; transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
 
-	.modal.cs_pop.contact_img_pop .swiper-button-next:after {content:''; display:block; position:absolute; top:0px; right:0; width:34px; height:34px; border:2px solid #a7a7a7; border-width:2px 2px 0 0; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
 
 
 
 	/* cs_contactUs_my */
 
 	/* cs_contactUs_my */
 
 	.cs .contactUs_my {}
 
 	.cs .contactUs_my {}
 
@@ -1691,8 +1682,9 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.dp .itemsGrp {margin:0 -10px;}
 
 	.dp .itemsGrp {margin:0 -10px;}
 
 	.dp .wrap {padding-bottom:160px;}
 
 	.dp .wrap {padding-bottom:160px;}
 
 	.dp .cont_body {position:relative;}
 
 	.dp .cont_body {position:relative;}
 
-	.container.dp .content {padding-left:70px; padding-right:70px;/*max-width:1780px; margin:0 auto 120px !important;*/}
 
-	.container.dp .content.wide {max-width: 100%; padding-left:0; padding-right:0;}
 
+	.container.dp .wrap {position:relative; width:100%; min-width:auto; max-width:none; padding-left:0px; padding-right:0px;}
 
+	.container.dp .content {}
 
+	.container.dp .content.wide {}
 
 	.dp .content .cont_head .displayH {margin-bottom: 60px; text-align: center;}
 
 	.dp .content .cont_head .displayH {margin-bottom: 60px; text-align: center;}
 
 	.dp h3 {margin-bottom: 0; padding-bottom: 60px; font-size: 40px; line-height: 1; text-align: center;}
 
 	.dp h3 {margin-bottom: 0; padding-bottom: 60px; font-size: 40px; line-height: 1; text-align: center;}
 
 	.dp h4 {margin-bottom:60px; color:#222; font-size:30px; font-weight:500; text-align:center;}
 
 	.dp h4 {margin-bottom:60px; color:#222; font-size:30px; font-weight:500; text-align:center;}
 
@@ -1709,11 +1701,6 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.dp .list_defult > div:first-child {margin-bottom:46px;}
 
 	.dp .list_defult > div:first-child {margin-bottom:46px;}
 
 	.dp .list_defult > div:first-child p {line-height: 2;}
 
 	.dp .list_defult > div:first-child p {line-height: 2;}
 
 	.dp .list_defult .ui_row {justify-content: center; margin-bottom: 0;}
 
 	.dp .list_defult .ui_row {justify-content: center; margin-bottom: 0;}
 
-
 
-	/* dp_유의사항 */
 
-	.dp .announce_txt {position: relative; max-width: 1580px; margin: 0 auto; padding-top: 60px; padding-left: 315px;}
 
-	.dp .announce_txt:before {content:''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width:100%; height: 1px; background: #ddd;}
 
-	.dp .announce_txt .note_txt {top: 60px; left: 190px;}
 
 	
 	
 	/* dp_sticky_nav_리스트 */
 
 	/* dp_sticky_nav_리스트 */
 
 	.dp .sticky_nav_list {margin-top:60px}
 
 	.dp .sticky_nav_list {margin-top:60px}
 
@@ -1845,6 +1832,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	/********** dp_기획전상세_모듈 **********/
 
 	/********** dp_기획전상세_모듈 **********/
 
 	/* dp_기획전상세 : 상단 프로모션 배너 */
 
 	/* dp_기획전상세 : 상단 프로모션 배너 */
 
 	.dp .dp_detail_visual {padding-bottom:60px;}
 
 	.dp .dp_detail_visual {padding-bottom:60px;}
 
+	.dp .dp_detail_visual h3 {padding-top:10px; padding-bottom:80px;}
 
 	.dp_detail_visual .promotion_visual {position:relative; width:100%;}
 
 	.dp_detail_visual .promotion_visual {position:relative; width:100%;}
 
 	.dp_detail_visual .promotion_visual img {}
 
 	.dp_detail_visual .promotion_visual img {}
 
 	.dp_detail_visual .promotion_visual.type1 {}
 
 	.dp_detail_visual .promotion_visual.type1 {}
 
@@ -1855,13 +1843,14 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.dp_detail_visual .promotion_visual.type2 .swiper-pagination {width:100%; bottom:40px;}
 
 	.dp_detail_visual .promotion_visual.type2 .swiper-pagination {width:100%; bottom:40px;}
 
 	
 	
 	/* dp_기획전상세 : 할인쿠폰 */	
 	/* dp_기획전상세 : 할인쿠폰 */	
-	.dp .dp_coupon {padding-top:60px; padding-bottom:60px;}
 
+	.dp .dp_coupon {padding-top:60px; padding-bottom:60px; overflow:hidden;}
 
 	.dp_coupon .coupon_list {max-width:1200px; margin:auto;}
 
 	.dp_coupon .coupon_list {max-width:1200px; margin:auto;}
 
 	.dp_coupon .coupon_list ul {margin-top:-60px}
 
 	.dp_coupon .coupon_list ul {margin-top:-60px}
 
 	.dp_coupon .coupon_list ul::after {content:''; display:block; clear:both;}
 
 	.dp_coupon .coupon_list ul::after {content:''; display:block; clear:both;}
 
 	.dp_coupon .coupon_list ul li {float:left; width:calc((100% - 60px)/4); margin-left:20px; margin-top:60px}
 
 	.dp_coupon .coupon_list ul li {float:left; width:calc((100% - 60px)/4); margin-left:20px; margin-top:60px}
 
 	.dp_coupon .coupon_list ul li:nth-child(4n-3) {margin-left:0}
 
 	.dp_coupon .coupon_list ul li:nth-child(4n-3) {margin-left:0}
 
-	.dp_coupon .announce_txt {margin-top:80px}
 
+	.dp_coupon .announce_txt {margin-top:80px; padding-top:60px;}
 
+	.dp_coupon .announce_txt:before {content:''; position:absolute; top:0; left:-190px; right:-190px; height: 1px; background: #ddd;}
 
 
 
 	/* dp_기획전상세 : 리얼후기 */	
 	/* dp_기획전상세 : 리얼후기 */	
 	.dp .dp_review {margin-top:60px; margin-bottom:60px; padding-top:120px; padding-bottom:120px; background:#f5f5f5;}
 
 	.dp .dp_review {margin-top:60px; margin-bottom:60px; padding-top:120px; padding-bottom:120px; background:#f5f5f5;}
 
@@ -1930,13 +1919,13 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.dp_special .dp_listItems_cont.type3 {padding-left:70px; padding-right:70px;}
 
 	.dp_special .dp_listItems_cont.type3 {padding-left:70px; padding-right:70px;}
 
 
 
 	/* dp_기획전상세 : 다른 기획전 보기 */
 
 	/* dp_기획전상세 : 다른 기획전 보기 */
 
-	.dp .other_dp_slide {margin-bottom:100px; padding:0 70px;}
 
+	.dp .other_dp_slide {margin-bottom:100px; padding:0 140px!important;}
 
 	.dp .other_dp_slide .cont_head {position:relative; margin-bottom:60px;}
 
 	.dp .other_dp_slide .cont_head {position:relative; margin-bottom:60px;}
 
 	.dp .other_dp_slide .cont_head h4 {position:relative; margin-bottom:0;}
 
 	.dp .other_dp_slide .cont_head h4 {position:relative; margin-bottom:0;}
 
 	.dp .other_dp_slide .cont_head a {position:absolute; top: 50%; right: 0; transform:translateY(-50%); padding-right: 20px; background: url('/images/pc/ico_more_lg.png') no-repeat right top 1px; font-size: 18px; color:#888;}
 
 	.dp .other_dp_slide .cont_head a {position:absolute; top: 50%; right: 0; transform:translateY(-50%); padding-right: 20px; background: url('/images/pc/ico_more_lg.png') no-repeat right top 1px; font-size: 18px; color:#888;}
 
 	.dp .other_dp_slide .cont_body {position:relative;}
 
 	.dp .other_dp_slide .cont_body {position:relative;}
 
-	.dp .other_dp_slide .swiper-button-next {right:-70px;}
 
-	.dp .other_dp_slide .swiper-button-prev {left:-70px;}
 
+	.dp .other_dp_slide .swiper-button-next {right:-70px; margin-top:-70px;}
 
+	.dp .other_dp_slide .swiper-button-prev {left:-70px; margin-top:-70px;}
 
 	.dp .other_dp_slide .thumb {margin-bottom: 22px; position: relative; width: 100%; height: auto; padding-top: 100%;}
 
 	.dp .other_dp_slide .thumb {margin-bottom: 22px; position: relative; width: 100%; height: auto; padding-top: 100%;}
 
 	.dp .other_dp_slide .thumb img {position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); width: 100%; height: auto;}
 
 	.dp .other_dp_slide .thumb img {position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); width: 100%; height: auto;}
 
 	.dp .other_dp_slide .brand {display: inline-block; font-size: 12px; color:#888; font-weight: 300;}
 
 	.dp .other_dp_slide .brand {display: inline-block; font-size: 12px; color:#888; font-weight: 300;}
 
@@ -2046,7 +2035,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 
 
 
 
 	/* od 공통 */
 
 	/* od 공통 */
 
-	.container.od .wrap .content {max-width:1460px;}
 
+	.container.od .wrap .content {max-width:1460px; padding-left:0; padding-right:0;}
 
 	.od {}
 
 	.od {}
 
 	.od .wrap {padding-top:120px; padding-bottom:160px;}
 
 	.od .wrap {padding-top:120px; padding-bottom:160px;}
 
 	.od div::after {clear:both; display:block; content:'';}
 
 	.od div::after {clear:both; display:block; content:'';}
 
@@ -3145,10 +3134,11 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	[class*="pd_descrp"] .btn_more_box .btn.active span::after {transform:rotate(-90deg);}
 
 	[class*="pd_descrp"] .btn_more_box .btn.active span::after {transform:rotate(-90deg);}
 
 	[class*="pd_descrp"] .btn_more_box .btn .ico {margin-left:20px; margin-right:0;}
 
 	[class*="pd_descrp"] .btn_more_box .btn .ico {margin-left:20px; margin-right:0;}
 
 
 
-	.pd_clickother {}
 
-	.pd_clickother .area_slider .itemName {}
 
+	.pd_relate {padding-left:70px !important; padding-right:70px !important;}
 
+	.pd_brand {padding-left:70px !important; padding-right:70px !important;}
 
+	.pd_clickother {padding-left:70px !important; padding-right:70px !important;}
 
 
 
-	.pd_recommend {}
 
+	.pd_recommend {padding-left:70px !important; padding-right:70px !important;}
 
 	.pd_recommend .area_slider {padding-bottom:1px;}
 
 	.pd_recommend .area_slider {padding-bottom:1px;}
 
 	.pd_recommend .area_slider .page {position:relative; min-height:589px; border:1px solid #ddd; box-sizing: border-box;}
 
 	.pd_recommend .area_slider .page {position:relative; min-height:589px; border:1px solid #ddd; box-sizing: border-box;}
 
 	.pd_recommend .area_slider .page::after {content:''; clear:both; display:block;}
 
 	.pd_recommend .area_slider .page::after {content:''; clear:both; display:block;}
 
@@ -3211,7 +3201,6 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.pd.deal .tab_detail_nav ul li.active a {border:1px solid #222; border-bottom-color:#fff; color:#222; font-weight:300; background:#fff;}
 
 	.pd.deal .tab_detail_nav ul li.active a {border:1px solid #222; border-bottom-color:#fff; color:#222; font-weight:300; background:#fff;}
 
 	.pd.deal .tab_detail_nav ul li.active a em {color:#666;}
 
 	.pd.deal .tab_detail_nav ul li.active a em {color:#666;}
 
 	.pd.deal .tab_detail_cont {display:none; min-height:1000px;}
 
 	.pd.deal .tab_detail_cont {display:none; min-height:1000px;}
 
-	.pd.deal .pd_clickother {margin-bottom:160px}
 
 	.pd.deal .pd_detail .area_desc .desc_wrap .descript_box .desc_info {margin-top:20px}
 
 	.pd.deal .pd_detail .area_desc .desc_wrap .descript_box .desc_info {margin-top:20px}
 
 	.pd.deal .content.pd_desc_wrap {position:relative; margin:100px 0px 0px; box-sizing:border-box;}
 
 	.pd.deal .content.pd_desc_wrap {position:relative; margin:100px 0px 0px; box-sizing:border-box;}
 
 	.pd.deal .tab_detail_cont .select_custom.deal_opt_item {height:160px;}
 
 	.pd.deal .tab_detail_cont .select_custom.deal_opt_item {height:160px;}
 
@@ -3246,7 +3235,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.pd_desc_wrap .item_descrp .area_option {float:right;}
 
 	.pd_desc_wrap .item_descrp .area_option {float:right;}
 
 	.pd_desc_wrap .item_descrp .area_option .opt_wrap {width:500px; padding-left:60px; padding-top:30px;}
 
 	.pd_desc_wrap .item_descrp .area_option .opt_wrap {width:500px; padding-left:60px; padding-top:30px;}
 
 	.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixtop {position:fixed; right:70px; top:80px; width:500px}
 
 	.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixtop {position:fixed; right:70px; top:80px; width:500px}
 
-	.pd_desc_wrap .item_descrp .area_option .opt_wrap.absbottom {position:absolute; top:auto; bottom:0px; right:0;}
 
+	.pd_desc_wrap .item_descrp .area_option .opt_wrap.absbottom {position:absolute; top:auto; bottom:0px; right:70px;}
 
 	@media screen and (max-width:1459px) {
 
 	@media screen and (max-width:1459px) {
 
 		.pd.deal .tab_detail_nav.fix ul {position:absolute; left:0; top:0; width:100%; height:60px; z-index:2;}
 
 		.pd.deal .tab_detail_nav.fix ul {position:absolute; left:0; top:0; width:100%; height:60px; z-index:2;}
 
 		.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixtop,
 
 		.pd_desc_wrap .item_descrp .area_option .opt_wrap.fixtop,
 
@@ -3996,7 +3985,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.br_lookbook_list {}
 
 	.br_lookbook_list {}
 
 	
 	
 	/* br_lookbook_view */
 
 	/* br_lookbook_view */
 
-	.br_lookbook_view {width:100%}
 
+	.br_lookbook_view {}
 
 	.br_lookbook_view .cont_head {position:relative;}
 
 	.br_lookbook_view .cont_head {position:relative;}
 
 	.br_lookbook_view .swiper-button-next,
 
 	.br_lookbook_view .swiper-button-next,
 
 	.br_lookbook_view .swiper-button-prev {top:50%; transform:translateY(-50%); width:auto; height:auto; margin:0; padding:0; color:transparent;}
 
 	.br_lookbook_view .swiper-button-prev {top:50%; transform:translateY(-50%); width:auto; height:auto; margin:0; padding:0; color:transparent;}
 
@@ -4007,7 +3996,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.br_lookbook_view .swiper-button-next::after {background-position:100% 50%;}
 
 	.br_lookbook_view .swiper-button-next::after {background-position:100% 50%;}
 
 	.br_lookbook_view .swiper-button-prev::after {background-position:0% 50%;}
 
 	.br_lookbook_view .swiper-button-prev::after {background-position:0% 50%;}
 
 
 
-	.br_lookbook_view.cont_visual {padding-bottom:120px;}
 
+	.content.br_lookbook_view.cont_visual {padding-bottom:120px;}
 
 	.br_lookbook_view.cont_visual .cont_head {margin-bottom:60px}
 
 	.br_lookbook_view.cont_visual .cont_head {margin-bottom:60px}
 
 	.br_lookbook_view.cont_visual .cont_body .area_slider {margin-left:-70px; margin-right:-70px;}
 
 	.br_lookbook_view.cont_visual .cont_body .area_slider {margin-left:-70px; margin-right:-70px;}
 
 	.br_lookbook_view.cont_visual .swiper-slide {width: auto; height: 660px;}
 
 	.br_lookbook_view.cont_visual .swiper-slide {width: auto; height: 660px;}
 
@@ -4025,8 +4014,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.br_lookbook_view.cont_visual .swiper-button-prev::after {filter:invert(100%);}
 
 	.br_lookbook_view.cont_visual .swiper-button-prev::after {filter:invert(100%);}
 
 	.br_lookbook_view.cont_visual .text_cont {margin-top:80px; color:#666; font-size:16px; font-weight:200; line-height:26px;}
 
 	.br_lookbook_view.cont_visual .text_cont {margin-top:80px; color:#666; font-size:16px; font-weight:200; line-height:26px;}
 
 
 
-	.br_lookbook_view.cont_items {padding:120px 0px;}
 
-	.br_lookbook_view.cont_items::before {content:''; position:absolute; left:-70px; right:-70px; top:0; bottom:0; background:#f5f5f5; z-index:-1;}
 
+	.content.br_lookbook_view.cont_items {padding-top:120px; padding-bottom:120px; background:#f5f5f5;}
 
 
 
 	.br_lookbook_view.cont_items .cont_head h3 {margin-bottom:40px; color:#222; font-size:24px; font-weight:500;}
 
 	.br_lookbook_view.cont_items .cont_head h3 {margin-bottom:40px; color:#222; font-size:24px; font-weight:500;}
 
 	.br_lookbook_view.cont_items .cont_head h3 span.number {margin-left:4px; color:#888; font-weight:200;}
 
 	.br_lookbook_view.cont_items .cont_head h3 span.number {margin-left:4px; color:#888; font-weight:200;}
 
@@ -4040,9 +4028,11 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.br_lookbook_view.cont_items .area_slider .swiper-scrollbar-drag {border-radius:0; background:#222;}
 
 	.br_lookbook_view.cont_items .area_slider .swiper-scrollbar-drag {border-radius:0; background:#222;}
 
 	.br_lookbook_view.cont_items .area_slider .swiper-container-horizontal>.swiper-scrollbar {position:relative; left:auto; right:auto; bottom:auto; width:100%; height:2px; opacity: 1 !important;}
 
 	.br_lookbook_view.cont_items .area_slider .swiper-container-horizontal>.swiper-scrollbar {position:relative; left:auto; right:auto; bottom:auto; width:100%; height:2px; opacity: 1 !important;}
 
 
 
-	.br_lookbook_view.cont_others {padding:160px 70px 120px}
 
+	.content.br_lookbook_view.cont_others {padding-top:160px;}
 
+	.br_lookbook_view.cont_others .cont_head {margin-left:70px; margin-right:70px;}
 
 	.br_lookbook_view.cont_others .cont_head button {position:absolute; right:0; bottom:0; padding:0 17px 0 0; color:#888; font-size:18px; font-weight:300; background:url('/images/pc/ico_more_lg.png') no-repeat 100% 50%;}
 
 	.br_lookbook_view.cont_others .cont_head button {position:absolute; right:0; bottom:0; padding:0 17px 0 0; color:#888; font-size:18px; font-weight:300; background:url('/images/pc/ico_more_lg.png') no-repeat 100% 50%;}
 
 	.br_lookbook_view.cont_others .cont_head button span {display:inline-block; line-height:1;}
 
 	.br_lookbook_view.cont_others .cont_head button span {display:inline-block; line-height:1;}
 
+	.br_lookbook_view.cont_others .cont_body {position:relative; padding-left:70px; padding-right:70px;}
 
 	.br_lookbook_view.cont_others .area_slider {}
 
 	.br_lookbook_view.cont_others .area_slider {}
 
 	.br_lookbook_view.cont_others .swiper-slide {}
 
 	.br_lookbook_view.cont_others .swiper-slide {}
 
 	.br_lookbook_view.cont_others .swiper-slide a {display:block;}
 
 	.br_lookbook_view.cont_others .swiper-slide a {display:block;}
 
@@ -4071,7 +4061,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 
 
 
 
 	/* my */
 
 	/* my */
 
-	.container.my .wrap .content {max-width:1460px; margin-bottom:160px;}
 
+	.container.my .wrap .content {max-width:1460px; margin-bottom:160px; padding-left:0; padding-right:0;}
 
 	.my div:after,
 
 	.my div:after,
 
 	.my ul::after {content:''; clear:both; display:block;}
 
 	.my ul::after {content:''; clear:both; display:block;}
 
 	.my button span {line-height:1;}
 
 	.my button span {line-height:1;}
 
@@ -4462,8 +4452,8 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.modal.coupon_popup .modal-footer {margin-top: 40px;}*/
 
 	.modal.coupon_popup .modal-footer {margin-top: 40px;}*/
 
 		
 		
 	/* ev_공통 */
 
 	/* ev_공통 */
 
-	.container.ev .wrap {padding:0;}
 
-	.ev {padding-bottom:160px;}
 
+	.ev .wrap {padding-bottom:160px;}
 
+	.ev .cont_body {position:relative;}
 
 	.ev div::after,
 
 	.ev div::after,
 
 	.ev dl::after,
 
 	.ev dl::after,
 
 	.ev ul::after {content:''; clear:both; display:block;}
 
 	.ev ul::after {content:''; clear:both; display:block;}
 
@@ -4476,31 +4466,117 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.ev .icon.silver {background: #888;}
 
 	.ev .icon.silver {background: #888;}
 
 	.ev .icon.bronze {background: #bf966d;}
 
 	.ev .icon.bronze {background: #bf966d;}
 
 	.ev .icon.welcome {background: #222222;}	
 	.ev .icon.welcome {background: #222222;}	
+	.ev .cont_head > div {position:relative;}
 
+	.ev .cont_head > div .period {position:absolute; left:50%; bottom:40px; transform:translateX(-50%); font-size:14px; font-weight:300; color:#888; text-align:center;}
 
+	.ev .cont_head > div h2 {text-align:center; margin-bottom:0px; padding-bottom:60px;}
 
+	.ev .cont_head > div h3 {text-align:center; margin-bottom:0; padding-bottom:80px; font-size:40px;}
 
+	.ev .cont_head > div h4 {text-align:center; margin-bottom:60px; color:#222; font-size:30px; font-weight:500;}
 
+	.ev .event_banner {position: relative; width: 100%;}
 
+	.ev .event_banner img {position:relative; left:50%; transform:translateX(-50%);}
 
+	.ev .btn_wrap {margin-top:60px; margin-bottom:0; text-align:center;}
 
+	.ev .btn_wrap .btn {min-width:220px; height:60px; font-size:18px; font-weight:300; line-height:normal;}
 
+	.ev .btn_wrap .btn.go_next span {display:inline-block; padding-right:20px; background:url('/images/pc/ico_bread_root_w.png') no-repeat 100% 50%;}
 
+
 
+	.ev .form_field input[type="radio"] + label,
 
+	.ev .form_field input[type="checkbox"] + label {padding-left:30px; color:#222; font-size:16px; font-weight:200; line-height:1;}
 
+	.ev .form_field input[type="radio"] + label:before,
 
+	.ev .form_field input[type="radio"]:checked + label:after,
 
+	.ev .form_field input[type="checkbox"] + label:before,
 
+	.ev .form_field input[type="checkbox"]:checked + label:after {top:50%; transform:translateY(-50%);}
 
 
 
 
 
-	.ev .cont_head > div {position: relative;}
 
-	.ev .cont_head > div .share_btn {position: absolute; top: 0; right: 70px; }
 
-	.ev .cont_head > div h3 {text-align: center; margin-bottom: 0; padding-bottom: 60px; font-size: 40px; line-height: 1;}
 
-
 
-
 
-	/* ev_list */
 
-	.container.ev .wrap .content.ev_list {padding:0 70px;}
 
-	.ev .ev_list .area_thumb_list, .ev .ev_list .area_top_list_info {}
 
+	/* ev 다른 이벤트 보기 슬라이드 */
 
+	.ev .other_ev_slide {margin-top:160px; padding:0 140px!important;}
 
+	.ev .other_ev_slide .cont_head {position:relative; margin-bottom:60px;}
 
+	.ev .other_ev_slide .cont_head h4 {position:relative; margin-bottom:0;}
 
+	.ev .other_ev_slide .cont_head a {position:absolute; top: 50%; right: 0; transform:translateY(-50%); padding-right: 20px; background: url('/images/pc/ico_more_lg.png') no-repeat right top 1px; font-size: 18px; color:#888;}
 
+	.ev .other_ev_slide .cont_body {position:relative;}
 
+	.ev .other_ev_slide .swiper-button-next {right:-70px; margin-top:-55px;}
 
+	.ev .other_ev_slide .swiper-button-prev {left:-70px; margin-top:-55px;}
 
+	.ev .other_ev_slide .thumb {margin-bottom: 22px; position: relative; width: 100%; height: auto; padding-top: 100%;}
 
+	.ev .other_ev_slide .thumb img {position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); width: 100%; height: auto;}
 
+	.ev .other_ev_slide .brand {display: inline-block; font-size: 12px; color:#888; font-weight: 300;}
 
+	.ev .other_ev_slide .txt {margin:0 6px;}
 
+	.ev .other_ev_slide .txt .tit {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin: 20px 0 0; min-height:50px; max-height:50px; overflow: hidden; text-overflow: ellipsis; font-size: 18px; line-height: 1.5; color: #222; font-weight: 300; word-break: keep-all;}
 
+
 
+	/* ev_list 이벤트 리스트*/
 
+	.ev .ev_list {}
 
 	.ev_list .area_top_list_info .ui_right {}
 
 	.ev_list .area_top_list_info .ui_right {}
 
 	.ev_list .area_top_list_info .ui_right .btn {height:40px; padding:12px 20px; font-size:14px; font-weight:300; border:1px solid #a7a7a7;}
 
 	.ev_list .area_top_list_info .ui_right .btn {height:40px; padding:12px 20px; font-size:14px; font-weight:300; border:1px solid #a7a7a7;}
 
 	.ev_list .area_top_list_info .ui_right .btn span {display:inline-block; padding-right:17px; vertical-align:top; line-height:1; background:url('/images/pc/ico_more_sm.png') no-repeat 100% 50%;}
 
 	.ev_list .area_top_list_info .ui_right .btn span {display:inline-block; padding-right:17px; vertical-align:top; line-height:1; background:url('/images/pc/ico_more_sm.png') no-repeat 100% 50%;}
 
 	.ev_list .ev_mem_rank {position:relative; background:#f5f5f5; padding:60px 100px; margin-top:60px; margin-bottom:100px;}
 
 	.ev_list .ev_mem_rank {position:relative; background:#f5f5f5; padding:60px 100px; margin-top:60px; margin-bottom:100px;}
 
-	.ev_list .ev_mem_rank .txt {display:inline-block;}
 
+	.ev_list .ev_mem_rank .txt {float:left; display:inline-block;}
 
 	.ev_list .ev_mem_rank .txt strong {display:block; font-size: 20px; font-weight: 700;}
 
 	.ev_list .ev_mem_rank .txt strong {display:block; font-size: 20px; font-weight: 700;}
 
-	.ev_list .ev_mem_rank .txt p {font-size:30px; line-height:40px; color:#666; margin:15px 0 20px;}
 
-	.ev_list .ev_mem_rank .txt .btn {display:inline-block; font-size:14px; font-weight:300; padding:14px 25px;}
 
-	.ev_list .ev_mem_rank .mem_rank_list {position: absolute; top: 50%; right: 160px; transform:translateY(-50%);}
 
-	.ev_list .ev_mem_rank .mem_rank_list ul li {float:left; text-align: center; margin-right: 40px;}
 
-	.ev_list .ev_mem_rank .mem_rank_list ul li:last-child {margin-right:0;}
 
+	.ev_list .ev_mem_rank .txt p {font-size:30px; line-height:40px; color:#666; margin:10px 0 25px;}
 
+	.ev_list .ev_mem_rank .txt .btn {width:152px; height:42px; font-size:14px; font-weight:300; padding:14px 10px 0; line-height:1;}
 
+	.ev_list .ev_mem_rank .mem_rank_list {float:right; margin-top:30px; margin-right:60px;/*position: absolute; top: 50%; right: 160px; transform:translateY(-50%);*/}
 
+	.ev_list .ev_mem_rank .mem_rank_list ul li {float:left; text-align: center; margin-left: 40px;}
 
+	.ev_list .ev_mem_rank .mem_rank_list ul li:first-child {margin-right:0;}
 
+	@media screen and (max-width:1459px) {
 
+		.ev_list .ev_mem_rank {padding-left:70px; padding-right:70px;}
 
+	}
 
+
 
+	/* ev_stamp_event 출석 체크 이벤트 */
 
+	.ev .stamp_event {}
 
+	.stamp_event .event_calander {position: relative; padding:120px 0; overflow:hidden; background-color:#f4f3ef; background-image:url('/images/pc/bg_check01.png'), url('/images/pc/bg_check02.png'); background-position:0px 50%, 100% 50%; background-repeat:no-repeat;}
 
+	.stamp_event .event_calander .check_title {position: relative; z-index: 2; text-align: center;}
 
+	.stamp_event .event_calander .check_title > p {margin-bottom:30px; font-size: 30px; font-weight:200;}
 
+	.stamp_event .event_calander .check_title .title {font-size:90px; font-weight:700;}
 
+	.stamp_event .event_calander .check_title .title strong {color:#fd4802; font-weight:700;}
 
+	.stamp_event .event_calander .check_info {position: relative; margin:30px 0 20px; text-align:right;}
 
+	.stamp_event .event_calander .check_info span {position:relative; font-size:18px; margin-left:20px; padding-left:25px; font-weight:300;}
 
+	.stamp_event .event_calander .check_info span:after {content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:18px; height:18px; border-radius:50%; box-sizing:border-box;}
 
+	.stamp_event .event_calander .check_info span.today:after {background:#f9f2eb; border:2px solid #fd4b07;}
 
+	.stamp_event .event_calander .check_info span.complete:after {background:#ffa27f;}
 
+	.stamp_event .event_calander .my_attend_day {position:relative; height:74px; padding:25px 40px; overflow:hidden; background:#222;}
 
+	.stamp_event .event_calander .my_attend_day > p {float:left; color:#fff; font-size:24px; font-weight:500;}
 
+	.stamp_event .event_calander .my_attend_day > .day {float:right; color:#fff; font-size:24px; font-weight:300;}
 
+	.stamp_event .event_calander .my_attend_day > .day span {color:#ff6b47; font-weight:700;}
 
+	.stamp_event .event_calander .tbl {padding:20px 0; border:2px solid #222; border-top:none; text-align:center; background:#fff;}
 
+	.stamp_event .event_calander .tbl th {background: #fff; padding:20px 0; color:#222; font-size:20px;font-weight:300; vertical-align:middle;}
 
+	.stamp_event .event_calander .tbl td {position:relative; height:90px; font-size:24px; font-weight:300; vertical-align:middle;}
 
+	.stamp_event .event_calander .tbl td .date {position:relative; color:#222; z-index:1;}
 
+	.stamp_event .event_calander .tbl td .date.unused {color:#ddd}
 
+	.stamp_event .event_calander .tbl td .date::before {content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin-top:-2px; width:64px; height:64px; border-radius:50%; z-index:-1;}
 
+	.stamp_event .event_calander .tbl td.today .date::before {border:2px solid #fd4802;}
 
+	.stamp_event .event_calander .tbl td.complete .date::before {background:#ffa27f; border:none}
 
+	.stamp_event .event_calander .tbl td.complete .date.unused::before {opacity:0.3;}
 
+	.stamp_event .event_benefit {margin-top:80px;}
 
+	.stamp_event .event_benefit .title {color:#222; font-size:30px; font-weight:500; text-align:center;}
 
+	.stamp_event .event_benefit .benefit_con {margin-top:40px; text-align:center;}
 
+	.stamp_event .event_benefit .announce_txt {margin-top:80px; padding-top:60px;}
 
+	.stamp_event .event_benefit .announce_txt:before {content:''; position:absolute; top:0; left:-190px; right:-190px; height: 1px; background: #ddd;}
 
+
 
+	/* ev_renew 설문조사 참여이벤트 preview */
 
+	.ev .renew {}
 
+	.renew .announce_txt {margin-top:80px; padding-top:60px;}
 
+	.renew .announce_txt:before {content:''; position:absolute; top:0; left:-190px; right:-190px; height: 1px; background: #ddd;}
 
+
 
+	/* ev_renew 설문조사 참여이벤트 write */
 
+	.ev .survey {margin-bottom:-160px}
 
+	.survey .input_wrap {width:100%;}
 
+	.survey .survey_wrap {background:#f5f5f5; padding:60px 0 160px}
 
+	.survey .survey_wrap .survey_con {width: 740px; margin:0 auto; padding-top:20px; padding-bottom:60px; background: #fff; border-top: 3px solid #fe7f4d; box-shadow: 0px 4px 21px 0px rgba(0, 0, 0, 0.1);}
 
+	.survey .survey_wrap .survey_con .survey_row {padding:60px; border-top: 1px solid #ddd;}
 
+	.survey .survey_wrap .survey_con .survey_row:first-child {border-top:none;}
 
+	.survey .survey_wrap .survey_con .survey_row h4 {position:relative; margin:0; padding-left:40px; padding-right:60px; font-size:18px; font-weight: 300; line-height:28px; word-break:keep-all;}
 
+	.survey .survey_wrap .survey_con .survey_row h4 .question {position:absolute; top:0; left:0; font-weight:500;}
 
+	.survey .survey_wrap .survey_con .survey_row .answer {margin-top:25px}
 
+	.survey .survey_wrap .survey_con .survey_row .answer textarea,
 
+	.survey .survey_wrap .survey_con .survey_row .answer input[type='text'] {width:100%;}
 
+	.survey .survey_wrap .survey_con .survey_row .answer textarea {height:220px; padding:20px;}
 
+	.survey .survey_wrap .survey_con .survey_row .answer ul {margin-top:-30px; margin-right:-60px}
 
+	.survey .survey_wrap .survey_con .survey_row .answer ul li {float:left; position:relative; margin-top:30px; margin-right:48px;}
 
+	.survey .survey_wrap .survey_con .survey_row .answer input[type='text'].etc_input {margin-left:20px; width:300px !important; max-width:300px !important; height:52px;}
 
+	.survey .survey_wrap .survey_con .btn_wrap {margin-top:20px}
 
+
 
+
 
+
 
 
 
 	/* ev_rank */
 
 	/* ev_rank */
 
 	/*.container.ev .wrap {max-width:100%; min-width:1200px; padding-right: 0; padding-left: 0;}
 
 	/*.container.ev .wrap {max-width:100%; min-width:1200px; padding-right: 0; padding-left: 0;}
 
 	.container.ev .wrap .ev_list {padding:0 70px;}*/
 
 	.container.ev .wrap .ev_list {padding:0 70px;}*/
 
+	.ev .ev_rank {}
 
 	.ev_rank .inner {position: relative;}
 
 	.ev_rank .inner {position: relative;}
 
 	.ev_rank .my_rank_info {background: #fff6f2; padding:53px 0; min-height:260px; box-sizing: border-box; margin-bottom: 100px; }
 
 	.ev_rank .my_rank_info {background: #fff6f2; padding:53px 0; min-height:260px; box-sizing: border-box; margin-bottom: 100px; }
 
 	.ev_rank .my_rank_info .desc p {font-size: 24px; line-height: 1.4; font-weight: 200; color: #666;}
 
 	.ev_rank .my_rank_info .desc p {font-size: 24px; line-height: 1.4; font-weight: 200; color: #666;}
 
@@ -4552,13 +4628,12 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.ev_rank .pro_wrap.vip .progress_bar .current_bar {width: 100%;}
 
 	.ev_rank .pro_wrap.vip .progress_bar .current_bar {width: 100%;}
 
 
 
 	.ev_rank .my_rank_progress .benefit_txt {background: #fff; padding:26px 0; text-align: center; font-size: 18px; color: #444; font-weight: 300;}
 
 	.ev_rank .my_rank_progress .benefit_txt {background: #fff; padding:26px 0; text-align: center; font-size: 18px; color: #444; font-weight: 300;}
 
-	/* .er .my_rank_progress .benefit_txt span {color: #fd4802; font-weight: 600;} */
 
 	.ev_rank .my_rank_progress .benefit_txt strong {color: #222; font-weight: 600;}
 
 	.ev_rank .my_rank_progress .benefit_txt strong {color: #222; font-weight: 600;}
 
 
 
 	/* ev_rank 등급 혜택 테이블 */
 
 	/* ev_rank 등급 혜택 테이블 */
 
-	.modal.cmt_popup .swiper-button-next.swiper-button-disabled, .modal.cmt_popup .swiper-button-prev.swiper-button-disabled {opacity:1;}
 
-	.ev_benefit_tbl .rank_tbl_wrap {margin-bottom: 60px;}
 
+	.ev .ev_benefit_tbl {}
 
 	.ev_benefit_tbl  h3 {margin-bottom: 50px; font-size: 34px; font-weight: 500; text-align: center;}
 
 	.ev_benefit_tbl  h3 {margin-bottom: 50px; font-size: 34px; font-weight: 500; text-align: center;}
 
+	.ev_benefit_tbl .rank_tbl_wrap {margin-bottom: 60px;}
 
 	.ev_benefit_tbl .rank_tbl_wrap .icon {margin:0 auto 20px;}
 
 	.ev_benefit_tbl .rank_tbl_wrap .icon {margin:0 auto 20px;}
 
 	.ev_benefit_tbl .rank_tbl_wrap .icon + span {display: block; text-align: center; font-size: 18px; color: #222; font-weight: 500;}
 
 	.ev_benefit_tbl .rank_tbl_wrap .icon + span {display: block; text-align: center; font-size: 18px; color: #222; font-weight: 500;}
 
 	.ev_benefit_tbl .rank_tbl_wrap .tbl_wrap table {border:1px solid #ddd;}
 
 	.ev_benefit_tbl .rank_tbl_wrap .tbl_wrap table {border:1px solid #ddd;}
 
@@ -4570,163 +4645,34 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 
 	.ev_benefit_tbl .rank_tbl_wrap .tbl_wrap table td p {font-size: 16px; line-height: 1.4; color: #222; font-weight: 200; letter-spacing: -0.025em; margin-top: 20px;}
 
 	.ev_benefit_tbl .rank_tbl_wrap .tbl_wrap table td p {font-size: 16px; line-height: 1.4; color: #222; font-weight: 200; letter-spacing: -0.025em; margin-top: 20px;}
 
 	.ev_benefit_tbl .rank_tbl_wrap .tbl_wrap table td.bbn {padding-bottom: 0; border-bottom: 0;}
 
 	.ev_benefit_tbl .rank_tbl_wrap .tbl_wrap table td.bbn {padding-bottom: 0; border-bottom: 0;}
 
 
 
-	/* ev 안내사항_공통 */
 
-	.announce_txt {position: relative; padding-left: 125px; box-sizing: border-box; letter-spacing: -0.025em; }
 
-	.announce_txt .note_txt {position: absolute; left: 0; top: 0; text-align: center;}
 
-	.announce_txt .note_txt p {font-size: 18px; font-weight: 300; color: #888; margin-top: 20px;}
 
-	.announce_txt .announce_list .tit {font-size: 16px; font-weight: 300; color: #888; margin-bottom: 20px;}
 
-	.announce_txt .announce_list ul {margin-bottom: 40px;}
 
-	.announce_txt .announce_list ul:last-of-type {margin-bottom: 0;}
 
-	.announce_txt .announce_list ul li {position: relative; padding-left: 12px; font-size: 16px; font-weight: 200; color: #888; margin-bottom: 15px;}
 
-	.announce_txt .announce_list ul li:before {content:''; position: absolute; top: 50%; left: 0; width: 2px; height: 2px; background: #888; margin-top: -2px;}
 
-	.announce_txt .announce_list ul li:last-child {margin-bottom: 0;}
 
-	
-	.ev .announce_txt.type01 {max-width:1580px; margin:80px auto; padding-top: 80px; border-top: 1px solid #ddd; padding-left: 315px;}
 
-	.ev .announce_txt.type01 .note_txt {top: 80px; left: 185px;}
 
-
 
-	/* ev_check, ev_renew 출석 체크 이벤트 */
 
-	.ev .check {background: #f5f5f5;}
 
-	.ev .cont_head .renew_check_tit {padding-bottom: 40px;}
 
-	.ev .cont_head .renew_check_tit .period {font-size: 14px; font-weight: 300; color: #888; text-align: center;}
 
-	.ev .cont_head .renew_check_tit h3 {padding-bottom: 30px;}
 
-	.ev .event_calander {position: relative; background-color: #f4f3ef; padding:120px 0; overflow:hidden;}
 
-	.ev .event_calander:after {content:''; position: absolute; top: 12rem; left: 0; background:url('/images/pc/bg_check01.png'); background-size: 100%; width: 12.5rem; height: 84.1rem; z-index: 1;}
 
-	.ev .event_calander:before {content:''; position: absolute; top: 0; right: 0; background:url('/images/pc/bg_check02.png'); background-size: 100%; width: 12.5rem; height: 84.1rem; z-index: 1;}
 
-	.ev .event_calander .check_title {position: relative; z-index: 2; text-align: center;}
 
-	.ev .event_calander .check_title p {font-size: 30px; font-weight: 200; margin-bottom: 2rem;}
 
-	.ev .event_calander .check_title h3 {font-size: 90px; font-weight: 600;}
 
-	.ev .event_calander .check_title h3 strong {color: #fd4802;}
 
-	.ev .event_calander .check_info {margin:30px 0 18px; text-align: right; position: relative; z-index: 11; font-size: 0;}
 
-	.ev .event_calander .check_info span {position: relative; font-size: 18px; padding-left: 26px; font-weight: 300;}
 
-	.ev .event_calander .check_info span:after {content:''; position: absolute; top: 50%; left: 0; transform:translateY(-50%); width: 18px; height: 18px; border-radius:50%;}
 
-	.ev .event_calander .check_info span.today {margin-right: 1.4rem;}
 
-	.ev .event_calander .check_info span.today:after {background: #fff; border:1px solid #fd4802;}
 
-	.ev .event_calander .check_info span.complete:after {background: #fa8d64; border:1px solid #fa8d64;}
 
-
 
-	.ev .event_calander .my_attend_day {background: #222; position: relative; padding:25px 40px; overflow:hidden;}
 
-	.ev .event_calander .my_attend_day p {font-size: 24px; font-weight: 300; color: #fff; }
 
-	.ev .event_calander .my_attend_day span.day {position: absolute; top: 24px; right: 1.5rem; font-size: 24px; color: #fff; font-weight: 300;}
 
-	.ev .event_calander .my_attend_day span.day span {color: #ff6b47; font-weight: 600;}
 
-	.ev .event_calander .tbl_wrap, .ev .event_calander .btn_wrap {position: relative; z-index: 3;}
 
-	.ev .event_calander .tbl_wrap .tbl {}
 
-	.ev .event_calander .month_txt {padding-left: 15px; margin-bottom: 35px;}
 
-	.ev .event_calander .month_txt .kor_t {font-size: 42px; color: #000; font-weight: 600; margin-right: 16px;}
 
-	.ev .event_calander .month_txt .eng_t {font-size: 20px; color: #888; font-weight: 500; text-transform: uppercase;}
 
-	.ev .event_calander table {padding:20px 0; box-sizing: border-box; width: 100%; border:1px solid #222;}
 
-	.ev .event_calander table th {background: #fff; padding:40px 0; font-size: 20px; color: #222; font-weight: 300; box-sizing: border-box;}
 
-	/* .ev .event_calander table th.sun {color: #fd4802;}
 
-	.ev .event_calander table th.sat {color: #3158ea;} */
 
-	.ev .event_calander table td {height: 90px; box-sizing: border-box; text-align: center; vertical-align: middle;}
 
-	.ev .event_calander table td .date {font-size: 24px; font-weight: 300; width: 64px; height: 64px; line-height: 64px; border-radius:50%; margin:0 auto;}
 
-	.ev .event_calander table td.today .date {border:1px solid #fd4802;}
 
-	.ev .event_calander table td.complete .date {border:1px solid #fa8d64; background: #fa8d64;}
 
-	.ev .event_calander table tbody {background: #fff; }
 
-	.ev .event_calander .btn_wrap {margin:2rem 0 0; text-align: center;}
 
-	.ev .event_calander .btn_wrap button {width: 220px; font-size: 18px; font-weight: 500; background: #fd4802; border:none; height: 60px;}
 
-	.ev .event_benefit {padding-top: 30px;}
 
-	.ev .event_benefit h4 {font-size: 30px; padding-bottom: 20px ; margin-bottom: 0; text-align: center; font-weight: 500;}
 
-	.ev .event_benefit .benefit_con img {width: 100%;}
 
-
 
-	/* ev_renew 이벤트 */
 
-	.container .wrap .content.survey * {line-height: 1; letter-spacing: -0.025em; box-sizing:border-box;}
 
-	.ev .renew_banner {position: relative; width: 100%;}
 
-	.ev .renew_banner img {width: 100%;}
 
-	.ev .renew .btn_wrap {margin:60px auto 140px; text-align: center;}
 
-	.ev .renew .btn_wrap a.btn {padding:22px 65px 22px 50px; font-size: 18px; color: #fff; font-weight: 300; background:#fd4802 url(/images/pc/ico_bread_root_w.png) no-repeat right 40px top 24px; 
-	background-size:7px 13px;}
 
-
 
-	.container.ev .wrap .content.survey .cont_body {margin-bottom: 0;}
 
-	.ev .survey_wrap {background: #f5f5f5; padding:60px 0 160px}
 
-	.ev .survey_wrap .survey_con {width: 740px; margin:0 auto; background: #fff; border-top: 3px solid #fe7f4d; box-shadow: 0px 4px 21px 0px rgba(0, 0, 0, 0.1);}
 
-	.ev .survey_wrap .survey_con .survey_row {padding: 60px 55px; border-bottom: 1px solid #ddd;}
 
-	.ev .survey_wrap .survey_con .survey_row:last-child {border-bottom: 0;}
 
-	.ev .survey_wrap .survey_con .survey_row h4 {margin-bottom: 0; font-size: 17px; line-height: 1.5; font-weight: 300; position: relative; padding-left: 42px;}
 
-	.ev .survey_wrap .survey_con .survey_row h4:before {position: absolute; top: 0; left: 0;}
 
-	.ev .survey_wrap .survey_con .survey_row.q1 h4:before {content:'Q1.'}
 
-	.ev .survey_wrap .survey_con .survey_row.q2 h4:before {content:'Q2.'}
 
-	.ev .survey_wrap .survey_con .survey_row.q3 h4:before {content:'Q3.'}
 
-	.ev .survey_wrap .survey_con .survey_row.q4 h4:before {content:'Q4.'}
 
-	
-	.ev .survey_wrap .survey_con .survey_row ul li {float:left; margin-top: 30px; margin-right: 50px; position: relative;}
 
-	.ev .survey_wrap .survey_con .survey_row ul li:last-child input[type='text'] { padding: 10px; width: 300px; height: 52px; font-size: 16px; line-height: 1.5; color: #222; resize:none; position: absolute; top: 50%; left: 80px; transform:translateY(-50%);}
 
-	.ev .survey_wrap .survey_con .survey_row .form_field input + label {font-weight: 200; font-size: 16px; line-height: 1.7;}
 
-	.ev .survey_wrap .survey_con .survey_row .form_field input:checked + label {line-height: 1.7;}
 
-	.ev .survey_wrap .survey_con .survey_row .form_field input.etc:checked + label + input[type='text'] {}
 
-
 
-	.ev .survey_wrap .survey_con .survey_row.q1 ul li:nth-child(5n) {margin-right: 0;}
 
-	.ev .survey_wrap .survey_con .survey_row.q1 ul li:last-child {width: 100%;}
 
-
 
-	.ev .survey_wrap .survey_con .survey_row.q2 ul li:nth-child(4n) {margin-right: 0;}
 
-
 
-	.ev .survey_wrap .survey_con .survey_row.q3 .doc_ans {width: 100%; height: 220px; padding: 20px; font-size: 14px; line-height: 1.9; color: #888; font-weight: 200; resize:none; margin-top: 30px;}
 
-
 
-	.ev .survey_wrap .survey_con .survey_row.q4 {border-bottom: 0;}
 
-	.ev .survey_wrap .survey_con .survey_row.q4 .q4_ans {width: 100%; height: 40px; resize:none; margin-top: 30px; padding: 20px; font-size: 14px; line-height: 1.9; color: #888; font-weight: 200;}
 
-	.ev .survey_wrap .survey_con .btn_wrap {padding: 20px 0 60px; text-align: center;}
 
-	.ev .survey_wrap .survey_con .btn_wrap button.btn {padding:15px 80px; font-size: 18px; font-weight: 300;} 
-
 
 	/* ev_comment 사이트 리뉴얼 댓글 이벤트 */
 
 	/* ev_comment 사이트 리뉴얼 댓글 이벤트 */
 
-	.ev .comment_banner {position: relative; width: 100%;}
 
-	.ev .comment_banner img {width: 100%;}
 
-	.ev .wrap .content.cmt * {letter-spacing: -0.025em;}
 
-	.ev .wrap .content.cmt .fileAdd {width: 100px; height: 100px; background-color: #fff;}
 
-	.ev .wrap .content.cmt .cont_body {margin-bottom: 0;}
 
-	.ev .cmt .announce_txt {margin:60px auto;}
 
-	.ev .cmt_wrap {background: #f5f5f5; padding:60px 0 125px;}
 
-	.ev .cmt_wrap .cmt_write .cmt_tarea {margin-bottom: 20px;}
 
-	.ev .cmt_wrap .cmt_write .cmt_tarea textarea {box-sizing: border-box; background: #fff; padding: 20px; resize: none; width: 100%; height: 140px; font-size: 14px; line-height: 1.3; color: #888;}
 
-	.ev .cmt_wrap .pics {width: 100px; height: 100px;}
 
-	.ev .cmt_wrap .pics .picsThumbs {max-width: 100%; max-height: 100%;}
 
-	/* .ev .cmt_wrap .imgUpload .pics:last-of-type {display: none !important; margin-right: 0;} */
 
-	.ev .cmt_wrap .cmt_write .btn_wrap {margin:60px 0 100px; text-align: center;}
 
-	.ev .cmt_wrap .cmt_write .btn_wrap > div {display: inline-block;}
 
-	.ev .cmt_wrap .cmt_write .btn_wrap button, .ev .cmt_wrap .cmt_write .btn_wrap label {float:left; padding:0 !important; width: 220px; height: 60px; line-height: 60px; font-size: 18px; text-align: center; font-weight: 300;}
 
-	.ev .cmt_wrap .cmt_write .btn_wrap label {background: #fff;}
 
-	.ev .cmt_wrap .cmt_write .btn_wrap .file_btn {margin-right: 10px; border:1px solid #a1a1a1;}
 
-	/* .ev .cmt_wrap .cmt_write .btn_wrap .file_btn:hover {background:transparent;} */
 
-	.ev .cmt_wrap .cmt_write .btn_wrap .file_btn label {cursor:pointer; display: block; height: 60px; line-height: 60px;}
 
-	.ev .cmt_wrap .cmt_group .cmt_list_tit {padding-bottom: 32px; border-bottom: 1px solid #ddd;}
 
-	.ev .cmt_wrap .cmt_group .cmt_list_tit strong {margin-right: 10px; font-size: 26px; font-weight: 500;}
 
-	.ev .cmt_wrap .cmt_group .cmt_list_tit span {font-size: 24px; color: #666; font-weight: 200;}
 
-	.ev .cmt_wrap .cmt_group .cmt_list li {padding: 30px 0; border-bottom: 1px solid #ddd;}
 
-	.ev .cmt_wrap .cmt_group .cmt_list li .cmt_top {margin-bottom: 25px;}
 
-	.ev .cmt_wrap .cmt_group .cmt_list li .cmt_top .writer {float:left; color: #666; margin-right: 20px; padding-right: 20px; border-right:1px solid #ddd;}
 
-	.ev .cmt_wrap .cmt_group .cmt_list li .cmt_top .date {color: #888;}
 
-	.ev .cmt_wrap .cmt_group .cmt_list li .cmt_cont .img_wrap {margin-bottom: 20px;}
 
-	.ev .cmt_wrap .cmt_group .cmt_list li .cmt_cont p {color: #666; line-height: 1.7;}
 
-	.ev .cmt_wrap .cmt_group .cmt_list li .cmt_cont .btn_del {display: block; background:transparent url(/images/pc/ico_trash.png) no-repeat left 14px center; padding:7px 14px; padding-left: 33px; margin-top: 20px; font-size: 14px; color: #222; font-weight: 200;}
 
-	.ev .cmt_wrap .cmt_group .cmt_list li .cmt_cont .btn_del:hover {background:transparent url(/images/pc/ico_trash.png) no-repeat left 14px center;}
 
-	.ev .cmt_wrap .pageNav > li {display: inline-block; vertical-align: top;}
 
-	.ev .cmt_wrap .pageNav > li > a, 
-	.ev .cmt_wrap .pageNav > li > span, 
-	.ev .cmt_wrap .pageNav > .disabled > a {background: transparent; height: 34px;}
 
-	.ev .cmt_wrap .pageNav .prev a, .ev .cmt_wrap .pageNav > li:first-child a {background:url('/images/pc/ico_paging.png') no-repeat 0 11px; width: 8px; text-indent: -999em;}
 
-	.ev .cmt_wrap .pageNav .prev a {background-position: -23px 11px;}
 
-	.ev .cmt_wrap .pageNav .next a, .ev .cmt_wrap .pageNav > li:last-child a {background: url('/images/pc/ico_paging.png') no-repeat -64px 11px; width: 8px;}
 
-	.ev .cmt_wrap .pageNav > li:last-child a, .ev .cmt_wrap .pageNav > li:first-child a {width: 15px;}
 
-	.ev .cmt_wrap .pageNav .next a {background-position: -47px 11px;}
 
-	.ev .cmt_wrap .paging_wrap {margin-top: 50px; margin-bottom: 0; box-sizing:content-box;}
 
-	.ev .cmt_wrap.no_data .cmt_list, .ev .cmt_wrap.no_data .paging_wrap  {display: none;}
 
-	.ev .cmt_wrap.no_data .no_con {display: block;}
 
-	.ev .cmt_wrap.no_data .no_con li {text-align: center; border-bottom: 0; padding:120px 0 35px;}
 
-	.ev .cmt_wrap.no_data .no_con li span {display: block; margin-top: 25px; font-size: 16px; color:#666; font-weight: 300;}
 
-
 
-	/* ev_comment 댓글 이미지 팝업 */
 
-	.modal.cmt_popup {display: none; position: fixed; top: 50%; left: 50%; z-index: 9999; width: 100%; height: 100%; transform:translate(-50%, -50%); background: transparent; box-shadow: none;}
 
-	.modal.cmt_popup a.close-modal {display: none;}
 
-	.modal.cmt_popup .inner {position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); width: 700px; height: 700px;}
 
-	.modal.cmt_popup .pop_close_btn {position: absolute; top: -60px; right: 0; width: 24px; height: 24px; background: url(/images/pc/ico_pop_cls02.png) no-repeat center; cursor:pointer; text-indent:-999em;}
 
-	.modal.cmt_popup .swiper-container {height: 700px; background: #fff;}
 
-	.modal.cmt_popup .swiper-container .swiper-slide {display: table; height: 700px; text-align: center;}
 
-	.modal.cmt_popup .swiper-container .swiper-slide .pop_img {display: table-cell; width: 100%; height:700px; vertical-align: middle; }
 
-	.modal.cmt_popup .swiper-container .swiper-slide img {width: auto; height:auto; max-width:100%; max-height:100%; overflow: hidden;}
 
-	.modal.cmt_popup .swiper-button-prev:after, .modal.cmt_popup .swiper-button-next:after {content:'';}
 
-	.modal.cmt_popup .swiper-button-prev {left: -100px; width: 100px; height: 80px; background: url(/images/pc/pop_slide_prev.png) no-repeat center; margin-top: -40px; opacity: 0.6;}
 
-	.modal.cmt_popup .swiper-button-next {right: -100px; width: 100px; height: 80px; background: url(/images/pc/pop_slide_next.png) no-repeat center; margin-top: -40px; opacity: 0.6;}
 
-	.modal.cmt_popup .swiper-button-next.swiper-button-disabled, .modal.cmt_popup .swiper-button-prev.swiper-button-disabled {pointer-events:auto; opacity: 0.6;}
 
-	.modal.cmt_popup .swiper-pagination-bullet {width: 10px; height: 10px; opacity: 1; background: #ddd;}
 
-	.modal.cmt_popup .swiper-pagination-bullet-active {background: #fd4802;}
 
-	.modal.cmt_popup .swiper-container-horizontal>.swiper-pagination-bullets {bottom: 40px;}
 
+	.ev .cmt {}
 
+	.cmt .fileAdd {width:110px; height:110px; background-color:#fff;}
 
+	.cmt .announce_txt {margin-top:60px; margin-bottom:60px;}
 
+	.cmt_wrap {background: #f5f5f5; padding:60px 0 120px;}
 
+	.cmt_wrap .pics {border:none; width:110px; height: 110px; background:#fff;}
 
+	.cmt_wrap .pics .picsThumbs {max-width: 100%; max-height: 100%;}
 
+	.cmt_wrap .cmt_write .cmt_tarea {margin-bottom: 20px;}
 
+	.cmt_wrap .cmt_write .cmt_tarea textarea {background: #fff; padding: 20px; resize: none; width: 100%; height: 140px; font-size: 14px; line-height: 1.3;}
 
+	.cmt_wrap .cmt_write .btn_wrap {margin-top:40px;}
 
+	.cmt_wrap .cmt_group {margin-top:90px}
 
+	.cmt_wrap .cmt_group .cmt_list_tit {padding-bottom:30px; border-bottom:1px solid #ddd;}
 
+	.cmt_wrap .cmt_group .cmt_list_tit strong {margin-right: 10px; font-size: 26px; font-weight: 500;}
 
+	.cmt_wrap .cmt_group .cmt_list_tit .cnt {font-size:22px; color: #666; font-weight:200;}
 
+	.cmt_wrap .cmt_group .cmt_list li {padding: 30px 0; border-bottom: 1px solid #ddd;}
 
+	.cmt_wrap .cmt_group .cmt_list li .cmt_top span {float:left; margin-left:20px; padding-left:20px; border-left:1px solid #ddd;}
 
+	.cmt_wrap .cmt_group .cmt_list li .cmt_top span:first-child {margin-left:0px; padding-left:0px; border-left:none;}
 
+	.cmt_wrap .cmt_group .cmt_list li .cmt_top .writer {color: #666;}
 
+	.cmt_wrap .cmt_group .cmt_list li .cmt_top .date {color: #888;}
 
+	.cmt_wrap .cmt_group .cmt_list li .cmt_cont .img_wrap {margin-top:15px;}
 
+	.cmt_wrap .cmt_group .cmt_list li .cmt_cont p {margin-top:20px; color: #666; font-size:14px; line-height:24px;}
 
+	.cmt_wrap .cmt_group .cmt_list li .cmt_cont .btn {width:72px; height:34px; background:none; border-color:#a1a1a1; padding:0px; margin-top:20px; font-size:14px; color:#222; font-weight:200;}
 
+	.cmt_wrap .cmt_group .cmt_list li .cmt_cont .btn.btn_del span {position:relative; padding-left:20px;}
 
+	.cmt_wrap .cmt_group .cmt_list li .cmt_cont .btn.btn_del span::before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); margin-top:-1px; width:13px; height:16px; background:url('/images/pc/ico_trash.png') no-repeat 0% 50%; opacity:0.85;}
 
+	.cmt_wrap .cmt_group .nodata {margin-top:120px}
 
+	.cmt_wrap .pageNav > li > a,
 
+	.cmt_wrap .pageNav > li > span {background-color:transparent;}
 
+	.cmt_wrap .paging_wrap {margin-top: 50px; margin-bottom: 0; box-sizing:content-box;}
 
 
 
 	/* ev 다른 이벤트 보기 슬라이드 */
 
 	/* ev 다른 이벤트 보기 슬라이드 */
 
 	.ev .other_ev_slide {position: relative; margin:150px auto 0 !important; padding:0 140px;}
 
 	.ev .other_ev_slide {position: relative; margin:150px auto 0 !important; padding:0 140px;}

+ 121 - 34
src/main/webapp/ux/pc/js/common-ui.js
Просмотреть файл 

@@ -41,43 +41,21 @@ $(document).ready(function(){
 
 	$(function(){
 
 	$(function(){
 
 		$(window).scroll(function(){
 
 		$(window).scroll(function(){
 
 			//var scroll = $(this).scrollTop();
 
 			//var scroll = $(this).scrollTop();
 
-			var headerH =  $('#header .hd_top_banner').outerHeight() + $('#header .area').outerHeight();
 
-			var miniGnbH = $('#header.minify .gnb').outerHeight();
 
-			if ($(window).scrollTop() > headerH){
 
+			var headerH =  $('.common_header > .hd_top_banner').outerHeight() + $('.common_header > .area').outerHeight();
 
+			var miniGnbH = $('.common_header > .gnb').outerHeight();
 
+			if ($(window).scrollTop() >= headerH){
 
 				//header minify
 
 				//header minify
 
-				$("#header").addClass("minify");
 
-				$("#header .hd_top_banner,#header .common_header > .area").hide();
 
-				$("#container").css("padding-top",headerH + miniGnbH + 50);
 
+				$("header").addClass("minify");
 
+				$("#container").css("padding-top",miniGnbH);
 
 			}
 
 			}
 
 			else {
 
 			else {
 
 				//header minify
 
 				//header minify
 
-				$("#header").removeClass("minify");
 
-				$("#header .hd_top_banner,#header .common_header > .area").show();
 
+				$("header").removeClass("minify");
 
 				$("#container").css("padding-top","0px");
 
 				$("#container").css("padding-top","0px");
 
 			}
 
 			}
 
 		});
 
 		});
 
 	});
 
 	});
 
 
 
-	// brand-header minify
 
-	$(function(){
 
-		$(window).scroll(function(){
 
-			//var scroll = $(this).scrollTop();
 
-			var brheaderH =  $('#br_header').outerHeight();
 
-			if ($(window).scrollTop() > brheaderH){
 
-				//header minify
 
-				$("#br_header").addClass("minify");
 
-				$("#br_header .hd_top_banner,#br_header .common_header.br_header .area").hide();
 
-				$(".common_header.br_header .gnb .nav #brd_nav .home").show();
 
-			}
 
-			else {
 
-				//header minify
 
-				$("#br_header").removeClass("minify");
 
-				$("#br_header .hd_top_banner,#br_header .common_header.br_header .area").show();
 
-				$(".common_header.br_header .gnb .nav #brd_nav .home").hide();
 
-			}
 
-		});
 
-	});
 
-
 
 	// items like on/off
 
 	// items like on/off
 
 	$(function(){ 
 	$(function(){ 
 		$(".itemLike").click(function () {
 
 		$(".itemLike").click(function () {
 
@@ -377,6 +355,18 @@ $(document).ready( function() {
 
 		$('.common_search .realtime_slider .btn_pause').show();
 
 		$('.common_search .realtime_slider .btn_pause').show();
 
 	});
 
 	});
 
 
 
+	//LNB_상품리스트 카테고리
 
+	$(document).on('click','.lnb .lnb_category ul li a',function(e){
 
+		$(this).toggleClass('on');
 
+		$(this).parent('li').siblings('li').children('a').removeClass('on');
 
+		$(this).parent('li').siblings('li').removeClass('on');
 
+		$(this).parent('li').siblings('li').find('a').removeClass('on');
 
+
 
+		$(this).parent('li').toggleClass('on');
 
+		$(this).parent('li').siblings('li').find('.sub_cate').hide();
 
+		$(this).parent('li').children(".sub_cate").toggle();
 
+	});
 
+
 
 	/* 고객센터_accordion */
 
 	/* 고객센터_accordion */
 
 	$(document).on('click','.cs .foldGroup .fold_head',function(e){
 
 	$(document).on('click','.cs .foldGroup .fold_head',function(e){
 
 		$(this).parents('.foldGroup li').find('.fold_cont').slideToggle(100);
 
 		$(this).parents('.foldGroup li').find('.fold_cont').slideToggle(100);
 
@@ -461,7 +451,104 @@ $(document).ready( function() {
 
 
 
 	$("body").mouseup(function(e){down = false;});
 
 	$("body").mouseup(function(e){down = false;});
 
 	/* //드래그 스크롤 : 수정 예정 */
 
 	/* //드래그 스크롤 : 수정 예정 */
 
-	
+
 
+
 
+	/* 상품리스트 sticky_nav_header */
 
+	$(function(){
 
+		/* 스크롤시 효과 */
 
+		$(window).scroll(function(){
 
+			var windScroll = $(window).scrollTop();
 
+			var miniGnbH = $('.common_header > .gnb').outerHeight();
 
+			var stickyTopNavH = $('.common_header > .gnb').outerHeight();
 
+			var navOffsetTop = $('.sticky_nav_list').offset().top - miniGnbH;
 
+			var navOffsetBottom = navOffsetTop + $('.list_content').outerHeight();
 
+			var arr = [];
 
+
 
+			if (windScroll > navOffsetTop){
 
+				$('.sticky_nav_list').css('padding-top',stickyTopNavH);
 
+				$(".sticky_nav").addClass("sticky");
 
+			} else {
 
+				$('.sticky_nav_list').css('padding-top','0px');
 
+				$(".sticky_nav").removeClass("sticky");
 
+			}
 
+
 
+			if(windScroll > navOffsetBottom) {
 
+				$('.sticky_nav_list').css('padding-top','0px');
 
+				$(".sticky_nav").removeClass("sticky");
 
+			}
 
+
 
+			$(".list_content > div").each(function(i){
 
+				var obj = {};
 
+				obj.KEY = i;
 
+				obj.VALUE = $(this).offset().top;
 
+				arr.push(obj);
 
+			});
 
+
 
+			$('.sticky_nav li').find('a').removeClass('active');
 
+
 
+			$.each(arr, function(index, item) {
 
+				if(windScroll < item.VALUE) {
 
+					$('.sticky_nav li').eq(item.KEY).find('a').addClass('active');
 
+					return false;
 
+				}
 
+			});
 
+		});
 
+		/* 스크롤시 효과 */
 
+		//$(window).scroll(function(){
 
+		//	var windScroll = $(window).scrollTop();
 
+		//	var miniGnbH = $('.common_header > .gnb').outerHeight();
 
+		//	var stickyTopNavH = $('.common_header > .gnb').outerHeight();
 
+		//	var navOffset = $('.sticky_nav_list').offset().top - miniGnbH;
 
+		//	if (windScroll > navOffset){
 
+		//		$('.sticky_nav_list').css('padding-top',stickyTopNavH);
 
+		//		$(".sticky_nav").addClass("sticky");
 
+		//	}
 
+		//	else {
 
+		//		$('.sticky_nav_list').css('padding-top','0px');
 
+		//		$(".sticky_nav").removeClass("sticky");
 
+		//	}
 
+
 
+		//	var contentOffset0 = $('.list_content > div').eq(0).offset().top;
 
+		//	var contentOffset1 = $('.list_content > div').eq(1).offset().top;
 
+		//	var contentOffset2 = $('.list_content > div').eq(2).offset().top;
 
+		//	var contentOffset3 = $('.list_content > div').eq(3).offset().top;
 
+
 
+		//	var selTab = 0;
 
+
 
+		//	$('.sticky_nav li').find('a').removeClass('active');
 
+
 
+		//	if (windScroll < contentOffset0) {
 
+		//		selTab = 0;
 
+		//	} else if (windScroll < contentOffset1) {
 
+		//		selTab = 1;
 
+		//	} else if (windScroll < contentOffset2) {
 
+		//		selTab = 2;
 
+		//	} else if (windScroll < contentOffset3) {
 
+		//		selTab = 3;
 
+		//	} else {
 
+		//		selTab = 3;
 
+		//	}
 
+
 
+		//	$('.sticky_nav li').eq(selTab).find('a').addClass('active');
 
+
 
+		//});
 
+
 
+		/* 상품리스트 sticky_nav_link */
 
+		$(".sticky_nav li a").on("click", function(){
 
+			var hookHeader = $(".sticky_nav").outerHeight();
 
+			var hookHref = $(this).attr("href");
 
+			//var hookPot = $(hookHref == "#" || hookHref == "" ? "body" : hookHref);
 
+			var hookPot = $(hookHref);
 
+			var hookPos = hookPot.offset().top - hookHeader;
 
+			$("html, body").animate({scrollTop: hookPos}, 300);
 
+			$('.sticky_nav li a').removeClass('active');
 
+			$(this).addClass('active');
 
+		});
 
+	});
 
+
 
+
 
+
 
+
 
 	//상품 리스트_필터
 
 	//상품 리스트_필터
 
 	$('.filter_list ul li').click(function(){ 
 	$('.filter_list ul li').click(function(){ 
 		$(".filter_list ul li").removeClass('on');
 
 		$(".filter_list ul li").removeClass('on');
 
@@ -519,8 +606,8 @@ $(document).ready( function() {
 
 	// 상품 대표설명 > 좌측 상품썸네일 navi, 우측 상품정보 고정 
 	// 상품 대표설명 > 좌측 상품썸네일 navi, 우측 상품정보 고정 
 	$(window).scroll(function(){
 
 	$(window).scroll(function(){
 
 		var scrollTop= $(window).scrollTop();
 
 		var scrollTop= $(window).scrollTop();
 
-		var headerH =  $('#header .hd_top_banner').outerHeight() + $('#header .area').outerHeight();
 
-		var miniGnbH = $('#header.minify .gnb').outerHeight();
 
+		var headerH =  $('.common_header > .hd_top_banner').outerHeight() + $('.common_header > .area').outerHeight();
 
+		var miniGnbH = $('.common_header > .gnb').outerHeight();
 
 		var firstFixed =  headerH + miniGnbH;
 
 		var firstFixed =  headerH + miniGnbH;
 
 		var thumbListWrap_h = $('.pd_detail .thumb_list_wrap').outerHeight();
 
 		var thumbListWrap_h = $('.pd_detail .thumb_list_wrap').outerHeight();
 
 		var descWrap_h = $('.pd_detail .desc_wrap').outerHeight();
 
 		var descWrap_h = $('.pd_detail .desc_wrap').outerHeight();
 
@@ -578,7 +665,7 @@ $(document).ready( function() {
 
 		direction: 'vertical',
 
 		direction: 'vertical',
 
 		allowTouchMove: false,
 
 		allowTouchMove: false,
 
 		slidesPerView: 6,
 
 		slidesPerView: 6,
 
-		slidesPerGroup : 6,
 
+		slidesPerGroup : 1,
 
 		spaceBetween: 10,
 
 		spaceBetween: 10,
 
 		navigation: {
 
 		navigation: {
 
 			nextEl: '.area_pic .thumb_nav_wrap .swiper-button-next',
 
 			nextEl: '.area_pic .thumb_nav_wrap .swiper-button-next',
 
@@ -607,9 +694,9 @@ $(document).ready( function() {
 
 	//상품 대표설명 > 좌측 상품썸네일 navi 선택시 해당 대표 썸네일 위치로 이동
 
 	//상품 대표설명 > 좌측 상품썸네일 navi 선택시 해당 대표 썸네일 위치로 이동
 
 	$(document).on('click','.pd_detail .area_pic .thumbnav .swiper-slide a',function(e){
 
 	$(document).on('click','.pd_detail .area_pic .thumbnav .swiper-slide a',function(e){
 
 		e.preventDefault();
 
 		e.preventDefault();
 
-		var hdHeight = $('#header').outerHeight();
 
+		var miniGnbH = $('.common_header > .gnb').outerHeight();
 
 		var targetThumb = $($(this).attr('href'));
 
 		var targetThumb = $($(this).attr('href'));
 
-		var topThumb = targetThumb.offset().top - hdHeight;
 
+		var topThumb = targetThumb.offset().top - miniGnbH;
 
 		$(this).parents('.thumbnav').find('.swiper-slide').removeClass('on');
 
 		$(this).parents('.thumbnav').find('.swiper-slide').removeClass('on');
 
 		$(this).parent('.swiper-slide').addClass('on');
 
 		$(this).parent('.swiper-slide').addClass('on');
 
 		targetThumb.siblings('li').removeClass('on');
 
 		targetThumb.siblings('li').removeClass('on');