<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="web/common/layout/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : MallMainFormWeb.html
 * @desc    : 몰메인 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.01.28   gagamel     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<div id="container" class="container main">
	<!-- <div class="breadcrumb"> (breadcrumb) </div> -->

	<div class="wrap ">
		<th:block th:if="${mainLayoutList}" th:each="mainLayoutData, mainStat : ${mainLayoutList}" th:with="contentsLoc=${#strings.replace(mainLayoutData.contentsLoc,'SMM','')}">
				<th:block th:if="${contentsLoc=='001'}">
					<!-- 1. 비주얼 슬라이드 -->
					<div class="content wide main_visual" th:if="${mainLayoutData.ContentsList != null and !mainLayoutData.ContentsList.empty}">
						<div class="cont_head dpnone">
							<p class="t_c">비주얼 슬라이드</p>
						</div>
						<div class="cont_body">
							<div class="swiper-container post-visual">
								<div class="swiper-wrapper ">
									<th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
										<div class="swiper-slide">
											<th:block th:if="${ContentsData.imgPath1!=null && ContentsData.imgPath1!=''}">
												<div class="txtWrap">
													<th:block th:if="${ContentsData.strVar5!=null && ContentsData.strVar5!=''}">
														<p class="vrt_txt" th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt<2}" th:text="${ContentsData.planBrandGroupNm}"></p>
														<p class="vrt_txt" th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt>1}" th:text="${ContentsData.planBrandGroupNm+' 외'}"></p>
														<p class="vrt_txt" th:if="${ContentsData.strVar5=='P' and ContentsData.planGb=='E'}" >EVENT</p>
													</th:block>
													<dl th:class="${ContentsData.strVar7=='BLACK'?'':'w'}">
														<dt th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt<2}" th:text="${ContentsData.planBrandGroupNm}"></dt>
														<dt th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt>1}" th:text="${ContentsData.planBrandGroupNm+' 외'}"></dt>
														<dt th:if="${ContentsData.strVar5=='P' and ContentsData.planGb=='E' }" >EVENT</dt>
														<dd class="mainTitle">
															<input type="hidden" name="mainTitlee" th:value="${ContentsData.strTitle1}"/>
														</dd>
<!--														<dd>NEW ARRIVAL</dd>-->
														<dd class="txt_xs mainSubTitle" th:text="${ContentsData.subText1}">
<!--															<input type="hidden" name="mainSubTitlee" th:value="${ContentsData.subText1}"/>-->
														</dd>
													</dl>
													<button type="button" class="btn" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);"><span>자세히 보기</span></button>
												</div>
												<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
											</th:block>
										</div>
									</th:block>
								</div>
								<div class="swiper-button-prev sbtn01_lb"></div>
								<div class="swiper-button-next sbtn01_rb"></div>
							</div>
							<div class="swiper-controls">
								<div class="swiper-pagination"></div>
								<div class="slide-curb">
									<div class="slide-curb-play sbtn01_play">슬라이드 재생</div>
									<div class="slide-curb-pause sbtn01_stop">슬라이드 정지</div>
								</div>
							</div>
						</div>
					</div>
				</th:block>
				<th:block th:if="${contentsLoc=='002'}">
					<!-- 2. 스타일리포트 -->
					<div class="content main_stylereport" th:if="${mainLayoutData.ContentsList != null and !mainLayoutData.ContentsList.empty}">
						<th:block th:if="${mainLayoutData.contentsTitle != null and !mainLayoutData.contentsTitle.empty}">
						<div class="cont_head">
							<p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}"></p>
						</div>
						</th:block>
						<div class="cont_body">
							<div class="ui_row">
								<th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
									<div class="ui_col_3 styleArea" th:if="${ContentsStat.count<5}">
										<a th:href="${ContentsData.strVar1}">
											<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
											<dl>
												<dt class="styleTitleC"> <!--th:text="${ContentsData.strTitle1}"-->
													<input type="hidden" name="styleTitle" th:value="${ContentsData.strTitle1}"/>
												</dt>
												<dd class="styleNoteC"> <!--th:text="${ContentsData.subText1}"-->
													<input type="hidden" name="styleNote" th:value="${ContentsData.subText1}"/>
												</dd>
												<!--<dd>당신을 위해 준비한 아우터 픽을 만나보자</dd>-->
											</dl>
										</a>
									</div>
								</th:block>
							</div>
						</div>
					</div>
				</th:block>
				<th:block th:if="${contentsLoc=='003'}">
					<!-- 3. 트렌디한 신상아이템 -->
					<div class="content main_trendy" th:if="${mainLayoutData.goodsList != null}">
						<div class="cont_head">
							<p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}"></p>
						</div>
						<div class="cont_body">
							<div class="swiper-container post-trendy">
								<div class="swiper-wrapper">
									<th:block th:each="goodsData, goodsStat : ${mainLayoutData.goodsList}">
										<div class="swiper-slide" th:if="${goodsStat.count<21}">
											<div class="item_prod">
												<div class="item_state">
													<button type="button" class="itemLike" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsFullNm}, ithrCd='', contentsLoc='SMM003', planDtlSq=''">관심상품 추가</button>
													<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM003');">
														<div class=" itemPic">
															<th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
																<iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
																<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
															</th:block>
															<img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
														</div>
														<p class="itemBrand" th:text="${goodsData.brandGroupNm}">BRAND NAME</p>
														<div class="itemComment" th:unless="${goodsData.goodsTnm == null or goodsData.goodsTnm == ''}" th:text="${goodsData.goodsTnm}">#가을느낌 물씬!</div>
														<div class="itemName" th:text="${goodsData.goodsFullNm}">스타 착용 여성 퍼 아플리케 오버핏 투마일 웨어링 점퍼</div>
														<p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
															<span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,3,'COMMA')}">89,000</span>
															<span class=" itemPercent" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${(goodsData.listPrice == 0 ? 0 : #numbers.formatDecimal((goodsData.listPrice - goodsData.currPrice) / (goodsData.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
														</p>
														<p th:if="${goodsData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]] ~</p>
													</a>
												</div>
											</div>
										</div>
									</th:block>
								</div>
							</div>
							<div class="swiper-pagination"></div>
							<div class="swiper-button-prev"></div>
							<div class="swiper-button-next"></div>
						</div>
					</div>
				</th:block>
				<th:block th:if="${contentsLoc=='004'}">
					<!-- 4. 잇 아이템 -->
					<div class="content main_it" th:if="${mainLayoutData.BestItemList != null}">
						<div class="cont_head">
							<p class="displayH" id="id004">
								<input type="hidden" name="title" th:value="${mainLayoutData.contentsTitle}">
							</p>
<!--						<th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">-->
							<!-- 2021.08.30 card007 메인 잇 아이템 전체보기 주석처리 추후 주석 제거 필요 -->
<!--							<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_BEST_MAIN);"><span>전체보기</span></a>-->
							<!-- //2021.08.30 card007 메인 잇 아이템 전체보기 주석처리 추후 주석 제거 필요 -->
<!--						</th:block>-->
						</div>
						<div class="cont_body">
							<div class="it_nav">
								<ul>
									<th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.BestItemList}">
										<li><button class="btn btn_link" th:attr="data-tab=${'it'+ContentsStat.count}"><span th:text="${ContentsData.cateNm}"></span></button></li>
									</th:block>
								</ul>
							</div>
							<th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.BestItemList}">
								<div class="swiper-container post-it it_item" th:id="${'it'+ContentsStat.count}">
									<div class="swiper-wrapper">
										<th:block th:each="bestItemData, bestItemStat : ${ContentsData.goodsList}">
											<div class="swiper-slide">
												<div class=" item_prod sUiXc "> <!-- item_prod ranker d_detail -->
													<div class="item_state"> <!-- item_state AD soldout -->
														<button type="button" class="itemLike" th:classappend="${bestItemData.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${bestItemData.goodsCd}, goodsNm=${bestItemData.goodsFullNm}, ithrCd='', contentsLoc='SMM004', planDtlSq=''">관심상품 추가</button>
														<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${bestItemData.goodsCd}]], '', '', 'SMM004');">
															<div class="shape" th:classappend="${bestItemStat.count==1}?'ranker'"><span th:text="${bestItemStat.count}"></span></div>
															<div class="itemPic">
																<th:block th:each="option,idx:${bestItemData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
																	<iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
																	<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
																</th:block>
																<!-- 2021.08.30 검색엔진데이타 https: 붙여서 넘어옴 처리 -->
																<th:block th:if="${#strings.indexOf(bestItemData.sysImgNm, 'https:')} == -1">
																	<img alt="BLACK-a" class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + bestItemData.sysImgNm.replace('//image.istyle24.com/Upload/ProductImage/','')}" onerror="noneImg(this)">
																</th:block>
																<th:block th:if="${#strings.indexOf(bestItemData.sysImgNm, 'https:')} == 0">
																	<img alt="BLACK-a" class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + bestItemData.sysImgNm.replace('https://image.istyle24.com/Upload/ProductImage/','')}" onerror="noneImg(this)">
																</th:block>
																<!-- //2021.08.30 검색엔진데이타 https: 붙여서 넘어옴 처리 -->
															</div>
															<p class=" itemBrand" th:text="${bestItemData.brandGroupNm}">BRAND NAME</p>
															<div class="itemComment" th:unless="${bestItemData.goodsTnm == null or bestItemData.goodsTnm == ''}" th:text="${bestItemData.goodsTnm}">#데일리웨어로 매일입고싶은</div>
															<div class="itemName" th:text="${bestItemData.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
															<p th:unless="${bestItemData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(bestItemData.currPrice,0,'COMMA')}]]
																<span class="itemPrice_original" th:if="${bestItemData.currPrice != bestItemData.listPrice}" th:text="${#numbers.formatInteger(bestItemData.listPrice,3,'COMMA')}">89,000</span>
																<span class=" itemPercent" th:if="${bestItemData.currPrice != bestItemData.listPrice}" th:text="${(bestItemData.listPrice == 0 ? 0 : #numbers.formatDecimal((bestItemData.listPrice - bestItemData.currPrice) / (bestItemData.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
															</p>
															<p th:if="${bestItemData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(bestItemData.currPrice,0,'COMMA')}]] ~</p>
														</a>
													</div>
												</div>
											</div>
										</th:block>
									</div>
									<div class="swiper-controls">
										<div class="swiper-scrollbar"></div>
									</div>
								</div>
							</th:block>
						</div>
					</div>
				</th:block>
				<th:block th:if="${contentsLoc=='005' and !mainLayoutData.ContentsList.empty}">
					<!-- 5. 프로모션배너 -->
					<div class="content main_2stage" th:if="${mainLayoutData.ContentsList != null}">
						<div class="cont_head dpnone">
							<p class="t_c">프로모션배너</p>
						</div>
						<div class="cont_body">
							<th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
								<th:block th:if="${ContentsData.contentsType!=null && ContentsData.contentsType!=''}">
									<div class="bnnbox_crop" th:if="${ContentsData.contentsType=='1'}">
										<div class=""> <!--style="width: 100%;height: 230px;float: none;overflow: hidden;"-->
											<a th:href="${ContentsData.strVar1}" target="_blank">
												<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
											</a>
										</div>
									</div>
									<div class="bnnbox_crop" th:if="${ContentsData.contentsType=='2'}">
										<div class="bnn_half">
											<a th:href="${ContentsData.strVar1}" target="_blank">
												<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
											</a>
										</div>
										<div class="bnn_half">
											<a th:href="${ContentsData.strVar2}" target="_blank">
												<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath2}" alt="">
											</a>
										</div>
									</div>
								</th:block>
							</th:block>
						</div>
					</div>
				</th:block>
				<th:block th:if="${contentsLoc=='006'}">
					<!-- 6. 타임딜 : 슬라이드 -->
					<th:block th:each="socialData, socialStat : ${mainLayoutData.socialInfo}">
					<div class="content wide main_deal" th:if="${socialData.socialGoodsList != null and !socialData.socialGoodsList.empty}">
						<div class="cont_head">
							<p class="displayH" id="id006">
								<input type="hidden" name="title" th:value="${mainLayoutData.contentsTitle}">
							</p>
							<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_SOCIAL_MAIN);"><span>전체보기</span></a>
							<div class="deal_progress">
								<div class="bar_current" id="barCurrent" style="width:33.333%"><span>HERE</span></div>
								<div class="bar_bg"></div>
							</div>
							<th:block th:each="socialData, socialStat : ${mainLayoutData.socialInfo}">
								<form name="socailForm" id="socailForm">
									<input type="hidden" name="targetTime" th:value="${socialData.socialEddt}">
								</form>
							</th:block>
							<div class="count" >
								<span class="count_tit">남은 시간</span>
								<div class="hotdeal">
									<div id="countdown">
										<div id="tiles"></div>
									</div>

									<div class="count_time">
										<span>HOURS</span>
										<span>MINS</span>
										<span>SECS</span>
									</div>
								</div>
							</div>
						</div>
						<div class="cont_body">
							<div class="swiper-container post-deal">
								<div class="swiper-wrapper">
<!--									<th:block th:each="socialData, socialStat : ${mainLayoutData.socialInfo}">-->
										<th:block th:each="goodsData, goodsStat : ${socialData.socialGoodsList}">
											<div class="swiper-slide" th:if="${goodsStat.count<21}">
												<div class="item_prod">
													<div class="item_state">
														<button type="button" class="itemLike" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsNm}, ithrCd='', contentsLoc='SMM006', planDtlSq=''">관심상품 추가</button>
														<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM006');">
															<div class="itemPic">
																<img alt="" class="pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
															</div>
															<p class="itemBrand" th:text="${goodsData.brandGroupNm}">BRAND NAME</p>
															<div class="itemComment" th:unless="${goodsData.goodsTnm == null or goodsData.goodsTnm == ''}" th:text="${goodsData.goodsTnm}">#데일리웨어로 매일입고싶은</div>
															<div class="itemName" th:text="${goodsData.goodsNm}">여성 체인 프린트 큐롯 스커트 프린트 큐롯 스커트</div>
															<p class="itemPrice">
																[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
																<span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,0,'COMMA')} + '원'"></span>
																<span class=" itemPercent" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatDecimal(goodsData.dcRate,1,0)} + '%'"></span>
																<!--<span class="itemPercent" th:if="${planningGoods.currPrice != planningGoods.listPrice}" th:text="${(planningGoods.listPrice == 0 ? 0 : #numbers.formatDecimal((planningGoods.listPrice - planningGoods.currPrice) / (planningGoods.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>-->
															</p>
														</a>
													</div>
												</div>
											</div>
										</th:block>
<!--									</th:block>-->
								</div>
								<div class="swiper-controls">
									<div class="swiper-scrollbar"></div>
								</div>
							</div>
						</div>
					</div>
					</th:block>
				</th:block>
				<th:block th:if="${contentsLoc=='007'}">
					<!-- 7. 브랜드픽 -->
					<div class="content main_pick" th:if="${mainLayoutData.ContentsList != null and !mainLayoutData.ContentsList.empty}">
						<div class="cont_head">
							<p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}">브랜드 PICK1</p>
						</div>
						<div class="cont_body">
							<div class="swiper-container post-pick-nav">
								<div class="swiper-wrapper">
									<th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
										<div class="swiper-slide"><img th:src="${@environment.getProperty('domain.image')+ContentsData.brandGroupImg}"></div>
									</th:block>
								</div>
								<div class="swiper-button-prev "></div>
								<div class="swiper-button-next "></div>
							</div>
						</div>
						<div class="swiper-container post-pick-for">
							<div class="swiper-wrapper">
								<th:block th:each="brandPickData, brandPickStat : ${mainLayoutData.brandPickList}">
									<div class="swiper-slide">
										<div class="pick_look">
											<div class="swiper-container post-lookbook">
												<div class="swiper-wrapper" id="id007">
													<th:block th:each="bannerData, bannerStat : ${brandPickData.BannerList}">
														<div class="swiper-slide" th:if="${bannerData.imgPath1 != ''}">
															<a th:href="${bannerData.strVar1}">
																<div class="text_box">
																	<p class="title">
																		<input type="hidden" name="title" th:value="${bannerData.strTitle1}">
																	</p>
																	<p class="sub_text" th:text="${bannerData.subText1}"> 2020 FALL / WINTER 신상살펴보기1</p>
																</div>
																<div class="img_box">
																	<img th:src="${@environment.getProperty('domain.image')+bannerData.imgPath1}" alt="barnd lookbook">
																</div>
															</a>
														</div>
													</th:block>
												</div>
												<div class="swiper-controls">
													<div class="swiper-pagination"></div>
												</div>
											</div>
										</div>
										<div class="pick_item">
											<div class="itemGrp">
												<th:block th:each="goodsData, goodsStat : ${brandPickData.goodsList}">
													<div class="item_prod" th:if="${goodsStat.count<4}">
														<div class="item_state">
															<button type="button" class="itemLike" tabindex="0" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsFullNm}, ithrCd='', contentsLoc='SMM007', planDtlSq=''">관심상품 추가</button>
															<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM007');">
																<div class="itemPic">
																	<th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
																		<iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
																		<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
																	</th:block>
																	<img alt="BLACK-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
																</div>
																<div class="itemComment" th:unless="${goodsData.goodsTnm == null or goodsData.goodsTnm == ''}" th:text="${goodsData.goodsTnm}">#데일리웨어로 매일입고싶은</div>
																<div class="itemName" th:text="${goodsData.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
																<p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">80,100
																	<span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,1,'COMMA')}">89,000</span>
																	<span class=" itemPercent" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${(goodsData.listPrice == 0 ? 0 : #numbers.formatDecimal((goodsData.listPrice - goodsData.currPrice) / (goodsData.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
																</p>
																<p th:if="${goodsData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]] ~</p>
															</a>
														</div>
													</div>
												</th:block>
											</div>
										</div>
									</div>
								</th:block>
							</div>
						</div>
					</div>
				</th:block>
				<th:block th:if="${contentsLoc=='008'}">
					<!-- 8. 가로 긴 배너 슬라이드 -->
					<!-- bnn_1stage -->
					<div class="content wide main_1stage" th:if="${!mainLayoutData.ContentsList.empty}">
						<div class="cont_head dpnone">
							<p class="t_c">배너 슬라이드</p>
						</div>
						<div class="cont_body">
							<div class="swiper-container post-bnnWide">
								<div class="swiper-wrapper ">
									<th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
										<div class="swiper-slide silderBannerArea">
											<th:block th:if="${ContentsData.imgPath1!=null && ContentsData.imgPath1!=''}">
												<a th:href="${ContentsData.strVar1}">
													<div class="bnnbox" style="background:#e3e7ea;">
														<div class="txtWrap bannerNote">
															<p class="noteArea"> <!--th:text="${ContentsData.strTitle1}"-->
																<input type="hidden" name="bannerNote" th:value="${ContentsData.strTitle1}"/>
															</p>
															<!--<p>아우터 + 이너 단독세일</p>-->	<!-- br 태그 줄바꿈해야함-->
<!--															<button type="button" class="btn">VIEW MORE</button>-->
														</div>
														<img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
													</div>
												</a>
											</th:block>
										</div>
									</th:block>
								</div>
								<div class="swiper-button-prev "></div>
								<div class="swiper-button-next "></div>
							</div>
						</div>
						<div class="cont_foot dpnone">
							CONT-FOOT
						</div>
					</div>
				</th:block>
				<th:block th:if="${contentsLoc=='009'}">
					<!-- 9. MD추천 스타일 -->
					<div class="content main_recomm" >
						<div class="cont_head">
							<p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}"></p>
						</div>
						<div class="cont_body">
							<div class="sec_head">
								<div class="filter action tag_list">
									<th:block th:each="titleData, titleStat : ${mainLayoutData.mdPickList}" >
										<th:block th:if="${titleData.goodsList!=null and !titleData.goodsList.empty}" >
											<button class="btn" th:attr="data-tab=${'tag'+titleStat.count}" th:text="${titleData.mdTitle}">따뜻한 무드2</button>
										</th:block>
									</th:block>
								</div>
							</div>
							<div class="sec_body">
								<th:block th:each="titleData, titleStat : ${mainLayoutData.mdPickList}">
									<div th:id="${'tag'+titleStat.count}" class="tagitem" > <!--th:classappend="${titleStat.count} == 1? active"-->
										<div class="swiper-container post-recomm">
											<div class="swiper-wrapper">
												<th:block th:if="${titleData.goodsList!=null and !titleData.goodsList.empty}">
													<th:block th:each="goodsData, goodsStat : ${titleData.goodsList}">
														<div class="swiper-slide">
															<div class="item_prod">
																<div class="item_state">
																	<button type="button" class="itemLike" tabindex="0" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsFullNm}, ithrCd='', contentsLoc='SMM009', planDtlSq=''">관심상품 추가</button>
																	<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM009');">
																		<div class="itemPic">
																			<th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
																				<iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
																				<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
																			</th:block>
																			<img alt="" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
																		</div>
																		<p class="itemBrand" th:text="${goodsData.brandGroupNm}">BRAND NAME</p>
																		<div class="itemComment" th:unless="${goodsData.goodsTnm == null or goodsData.goodsTnm == ''}" th:text="${goodsData.goodsTnm}">#주문 폭주 상품</div>
																		<div class="itemName" th:text="${goodsData.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
																		<p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
																			<span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,1,'COMMA')}">89,000</span>
																			<span class=" itemPercent" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${(goodsData.listPrice == 0 ? 0 : #numbers.formatDecimal((goodsData.listPrice - goodsData.currPrice) / (goodsData.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
																		</p>
																		<p th:if="${goodsData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]] ~</p>
																	</a>
																</div>
															</div>
														</div>
													</th:block>
												</th:block>
											</div>
											<div class="swiper-controls">
												<div class="swiper-pagination"></div>
											</div>
										</div>
										<div class="swiper-button-prev"></div>
										<div class="swiper-button-next"></div>
									</div>
								</th:block>
							</div>
						</div>
					</div>
				</th:block>
				<th:block th:if="${contentsLoc=='011'}">
					<!-- 11. TV 슬라이드 -->
					<div class="content wide main_tv" th:if="${mainLayoutData.ContentsList != null}">
						<div class="cont_head">
							<p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}"></p>
						</div>
						<div class="cont_body">
							<div class="swiper-container post-tv">
								<div class="swiper-wrapper">
									<th:block th:each="item, stat : ${mainLayoutData.ContentsList}">
										<div class="swiper-slide">
											<div class="movbox">
												<iframe th:if="${item.strVar1=='Y'}" width="100%" height="100%" th:src="${'https://www.youtube.com/embed/'+item.strVar2+'?rel=0'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
												<iframe th:if="${item.strVar1=='M'}" class="pd_mov"  th:src="${kollusMediaUrl+'/'+item.strVar2+'?enable_initialize_focus=false'}" allowfullscreen></iframe>
											</div>
										</div>
									</th:block>
								</div>
								<div class="swiper-button-prev white"></div> <!-- 클래스명 white 추가 -->
								<div class="swiper-button-next white"></div>
							</div>
							<div class="swiper-controls">
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
				</th:block>
				<th:block th:if="${contentsLoc=='010'}">
					<!-- 10. 당신을 위한 제안 -->
					<div class="content main_foryou">
						<div class="cont_head">
							<p class="displayH" th:text="${mainLayoutData.contentsTitle}">당신을 위한 제안</p>
							<span>스타일24에서 가장 주목받는 상품을 살펴보세요</span>
						</div>
						<div class="cont_body">
							<div class="post-sug fy_nav">
								<div class="swiper-container">
									<div class="swiper-wrapper" id="keywordArea">

									</div>
								</div>
								<div class="swiper-controls">
									<div class="swiper-pagination"></div>
								</div>
							</div>
							<div id="recomItemArea">

							</div>
						</div>
					</div>
				</th:block>
			</th:block>
	<!-- End Of Main Contents -->
	</div>
</div>
<script th:inline="javascript">

/* 핫딜 countDown */
var target_date = '';
if(!gagajf.isNull($("#socailForm").find("input[name=targetTime]").val())){
	target_date = $("#socailForm").find("input[name=targetTime]").val().toDate("YYYYMMDD");
}
if(target_date != null && target_date != ''){
	// var target_date = new Date().getTime() + (1000*3600*7); // set the countdown date
	var days, hours, minutes, seconds; // variables for time units

	var countdown = document.getElementById("tiles"); // get tag element

	getCountdown();

	var timerStop = setInterval(function () { getCountdown(); }, 1000);

	var fixDate = new Date().getTime();
	var fixTarget = (target_date - fixDate) / 1000;
	var width = (86400-fixTarget)*100/86400;

	function getCountdown(){

		// find the amount of "seconds" between now and target
		var current_date = new Date().getTime();
		var seconds_left = (target_date - current_date) / 1000;

		seconds_left = seconds_left % 86400;

		hours = pad( parseInt(seconds_left / 3600) );
		seconds_left = seconds_left % 3600;

		minutes = pad( parseInt(seconds_left / 60) );
		seconds = pad( parseInt( seconds_left % 60 ) );

		// format countdown string + set tag value
		countdown.innerHTML = "<span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";

		var elem = document.getElementById("barCurrent");
		function progressMove(){
			width += (100-width)/fixTarget;
			elem.style.width = width + "%";
		}
		progressMove();

		if(seconds_left < 1){
			clearInterval(timerStop);
			elem.style.width = "100%";
		}

	}

	function pad(n) {
		return (n < 10 ? '0' : '') + n;
	}
}



// 컨텐츠 호출
$(document).ready( function() {
	//$("#header").load("head.html");
	//$("#footer").load("foot.html");
	$(".tag_list .btn").eq(0).trigger('click');

	let randomNum = Math.floor( ( Math.random() * 4 ) );
	$(".it_nav .btn").eq(randomNum).trigger('click');

	// 당신을 위한 제안 쿠키값 확인 (로그인시 확인됨)
	var pcId = gagajf.getCookie("RB_PCID");
	// 추천솔루션 API 호출
	//if(!gagajf.isNull(pcId)){
		fnGetEigenApi(pcId);
	//}
});

/**
 * EigenApi
 * size : 상품수
 * nh : 키워드수
 * */
var fnGetEigenApi = function (id){
	// console.log('[fnGetEigenApi ID]'+id);
	$.getJSON('https://api.eigene.io/rec/p075?cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4&size=10&nh=10&pcid='+id, function (result,status){
		var keywordTag = '';
		var itemTag = '';
		var itemTag2 = '';
		let dataJson = result.groupedResults;
		let key1 = Object.keys(dataJson);

		if (status === 'success') {
			if (!gagajf.isNull(result.products) && result.products.length > 0) {
				$("#keywordArea").html('');
				$("#recomItemArea").html('');
				$.each(result.products, function (idx, item) {
					if (idx == 0 || idx == 5) {
						keywordTag += '<div class="swiper-slide">\n';
						keywordTag += '	<ul>\n';
					}
					keywordTag += '<li>\n';
					keywordTag += '	<button class="btn btn_shape active" data-tab="fy' + (idx + 1) + '">\n';
					keywordTag += '		<div>\n';
					keywordTag += '			<span class="number">' + (idx + 1) + '</span>\n';
					keywordTag += '			<span>' + item.sourceId + '</span>\n';
					keywordTag += '		</div>\n';
					keywordTag += '	</button>\n';
					keywordTag += '	<a href="javascript:void(0);" onclick="cfnGoToSearchGoodsListForm(\''+ item.sourceId + '\')">자세히 보기</a>\n';
					keywordTag += '</li>\n';
					if (idx == 4 || idx == 9) {
						keywordTag += '	</ul>';
						keywordTag += '</div>';
					}

					for (var i=0; i<key1.length; i++) {
						var key = key1[i];
						// console.log("key : " + key + ", value : " + dataJson[key])
						if(item.sourceId == key){
								itemTag += '<div class="fy_item" id="fy'+(idx+1)+'">\n';
								$.each(dataJson[key], function (keyIdx, keyItem){
									if(idx%2 == 0) {
										if(keyIdx==0){
											itemTag += '	<div class="part">\n';
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
										}else if(keyIdx==1){
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
											itemTag += '	</div>\n';
										}else if(keyIdx==2){
											itemTag += '	<div class="part lg">\n';
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
											itemTag += '	</div>\n';
										}else if(keyIdx==3){
											itemTag += '	<div class="part">\n';
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
										}else if(keyIdx==4){
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
											itemTag += '	</div>\n';
										}else if(keyIdx==5){
											itemTag += '	<div class="part">\n';
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
										}else if(keyIdx==6){
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
											itemTag += '	</div>\n';
										}
									}else{
										if(keyIdx==0){
											itemTag += '	<div class="part">\n';
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
										}else if(keyIdx==1){
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
											itemTag += '	</div>\n';
										}else if(keyIdx==2){
											itemTag += '	<div class="part">\n';
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
										}else if(keyIdx==3){
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
											itemTag += '	</div>\n';
										}else if(keyIdx==4){
											itemTag += '	<div class="part">\n';
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
										}else if(keyIdx==5){
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
											itemTag += '	</div>\n';
										}else if(keyIdx==6){
											itemTag += '	<div class="part lg">\n';
											itemTag += '		<div class="item_prod">\n';
											itemTag += '			<div class="item_state">\n';
											itemTag += '				<button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
											itemTag += '				<a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
											itemTag += '					<div class="itemPic">\n';
											itemTag += '						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
											itemTag += '					</div>\n';
											itemTag += '					<div class="itemInfo">\n';
											itemTag += '						<p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
											itemTag += '						<div class=" itemName">'+keyItem.product.itemName+'</div>\n';
											itemTag += '						<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
											itemTag += '					</div>\n';
											itemTag += '				</a>\n';
											itemTag += '			</div>\n';
											itemTag += '		</div>\n';
											itemTag += '	</div>\n';
										}
									}

								});
								itemTag += '</div>\n';
						}
					}
				});
				$("#keywordArea").append(keywordTag);
				$("#recomItemArea").append(itemTag);

				// 위시 좋아요 처리
				if (cfCheckLogin()) {
					let targetT = $('.main_foryou').find('#recomItemArea').find('.item_state').find('button');
					//let targetTSize = targetT.length;
					targetT.each(function(){
						let goodsCd = $(this).attr('goodscd');
						var $this = $(this);
						let url = "/mypage/wish/list/check/"+goodsCd;
						var result = '';
						$.ajax({
							type: 'get'
							, async: false
							, url: url
							, success: function (data) {
								//likeit active
								if ("Y" == data){
									$this.addClass('likeit').addClass('active');
								}
							}
						});
					});
				}


				/* SLIDE - MAIN_FORYOU */
				var cntNum = 0;
				var main_foryou_slide = new Swiper('.main_foryou .post-sug .swiper-container', {
					allowTouchMove: false,
					loop: false,
					effect: 'fade',
					autoHeight: false,
					autoplay: {
						delay: 25000,
						disableOnInteraction: false,
					},
					a11y: {
						enabled: true,
						notificationClass: 'swiper-notification',
						prevSlideMessage: '이전 슬라이드',
						nextSlideMessage: '다음 슬라이드',
						paginationBulletMessage: '슬라이드 {{index}}로 이동',
					},
					pagination: {
						el: '.post-sug .swiper-pagination',
						clickable: true,
					},
					on: {
						slideChange: function () {
							$(".fy_nav .swiper-slide li").children('.btn_shape').removeClass('active');
							$(".fy_nav .swiper-slide-next li").eq(0).children('.btn_shape').addClass('active');
							$(".fy_nav .swiper-slide-prev li").eq(0).children('.btn_shape').addClass('active');
							foryouIndex = -1;
							if (cntNum === 0) {
								$('.fy_item').removeClass('active');
								$('#fy6').addClass('active');
								cntNum = 1;
							} else {
								$('.fy_item').removeClass('active');
								$('#fy1').addClass('active');
								cntNum = 0;
							}

							clearInterval(ti);
							ti = startTimeInterval();
						}
					},
				});

				function foryouInterval(_foryouIndex) {
					var foryouCateItems = $(".main_foryou .fy_nav .swiper-slide-active ul li .btn_shape");
					$(foryouCateItems[(_foryouIndex + 1) % 5]).addClass("active");
					$(foryouCateItems[_foryouIndex % 5]).removeClass("active");
				}

				function foryouFy_item(_Fy_itemIndex) {
					var fynavItems = $('.main_foryou .fy_nav .swiper-slide-active ul li .btn_shape.active');
					var fyActive = $(fynavItems).attr('data-tab');
					// $(".fy_nav .btn_shape").removeClass('active');
					$(".fy_item").removeClass('active');
					// $(".fy_item").addClass('active');
					$('#' + fyActive).addClass('active');
				}

				var foryouIndex = 0;
				var ti;

				function startTimeInterval() {
					return setInterval(function () {
						$(".fy_nav .btn_shape").removeClass('active');
						$(".fy_item").removeClass('active');
						foryouInterval(foryouIndex);
						foryouFy_item();
						if (foryouIndex >= 5) foryouIndex = 0;
						foryouIndex++;
					}, 5000);
				}

				$(".fy_nav .btn_shape").click(function () {
					var fyActive = $(this).attr('data-tab');
					$(".fy_nav .btn_shape").removeClass('active');
					$(".fy_item").removeClass('active');
					$(this).addClass('active');
					$('#' + fyActive).addClass('active');
				});

				$(".fy_nav ul li").click(function () {
					foryouIndex = $(this).index();
					clearInterval(ti);
					ti = startTimeInterval();
				});

				ti = startTimeInterval();
			}
		}
	});
}

/* SLIDE - MAIN_VISUAL */
var agent = navigator.userAgent.toLowerCase();

if ( (navigator.appName == 'Netscape' && agent.indexOf('trident') != -1) || (agent.indexOf("msie") != -1)) {
	// ie일 경우
	var post01 = new Swiper('.main_visual .post-visual.swiper-container', {
		// Optional parameters
		loop: true,
		slidesPerView: 'auto',
		spaceBetween: 100,

		// initialSlide: 0,
		// 초기 슬라이드의 색인 번호입니다
		centeredSlides: true,
		// slidesOffsetBefore: 250,
		// 컨테이너 시작 부분 (모든 슬라이드 이전)에 슬라이드 오프셋 추가 (픽셀 단위)
		speed : 1000,
		// Navigation arrows
		//autoplay: false,
		autoplay: {
			delay: 3000,
			disableOnInteraction: false,
		},
		a11y: {
			enabled: true,
			notificationClass: 'swiper-notification',
			prevSlideMessage: '이전 슬라이드',
			nextSlideMessage: '다음 슬라이드',
			paginationBulletMessage: '슬라이드 {{index}}로 이동',
		},
		navigation: {
			nextEl: '.post-visual .swiper-button-next',
			prevEl: '.post-visual .swiper-button-prev',
		},
		pagination: {
			el: '.main_visual .swiper-pagination',
			clickable: true,
		},
	});
}else{
	// ie가 아닐 경우
	var post01 = new Swiper('.main_visual .post-visual', {
		// Optional parameters
		loop: true,
		slidesPerView: 'auto',
		spaceBetween: 70,

		// initialSlide: 0,
		// 초기 슬라이드의 색인 번호입니다
		centeredSlides: true,
		// slidesOffsetBefore: 250,
		// 컨테이너 시작 부분 (모든 슬라이드 이전)에 슬라이드 오프셋 추가 (픽셀 단위)
		speed : 1000,
		// Navigation arrows
		autoplay: {
			delay: 3000,
			disableOnInteraction: false,
		},
		a11y: {
			enabled: true,
			notificationClass: 'swiper-notification',
			prevSlideMessage: '이전 슬라이드',
			nextSlideMessage: '다음 슬라이드',
			paginationBulletMessage: '슬라이드 {{index}}로 이동',
		},
		navigation: {
			nextEl: '.post-visual .swiper-button-next',
			prevEl: '.post-visual .swiper-button-prev',
		},
		pagination: {
			el: '.main_visual .swiper-pagination',
			clickable: true,
		},
	});
}

//MAIN_VISUAL_자동재생 스탑
$(document).on('click','.main_visual .slide-curb-pause',function(e){
	post01.autoplay.stop();
	$(this).hide();
	$('.main_visual .slide-curb-play').show();
});

//MAIN_VISUAL_자동재생 시작
$(document).on('click','.main_visual .slide-curb-play',function(e){
	post01.autoplay.start();
	$(this).hide();
	$('.main_visual .slide-curb-pause').show();
});

//210624_ 수정 : autoplay delay 변경.
/* SLIDE - MAIN_TRENDY */
var main_trendy_slide = new Swiper('.main_trendy .post-trendy', {
	watchSlidesProgress: true,
	watchSlidesVisibility: true,
	allowTouchMove: false,
	loop: false,
	loopAdditionalSlides : 1,
	speed : 1000,
	autoplay: {
		delay: 3000,
		disableOnInteraction:false,
	},
	a11y: {
		enabled: true,
		notificationClass: 'swiper-notification',
		prevSlideMessage: '이전 슬라이드',
		nextSlideMessage: '다음 슬라이드',
		paginationBulletMessage: '슬라이드 {{index}}로 이동',
	},
	navigation: {
		nextEl: '.main_trendy .swiper-button-next',
		prevEl: '.main_trendy .swiper-button-prev',
	},
	// pagination: {
	// 	el: '.main_trendy .swiper-pagination',
	// 	clickable: true,
	// },
	slidesPerView: 'auto',
	spaceBetween: 22,
});

main_trendy_slide.on('slideChange', function () {
	var newitemIndex = main_trendy_slide.activeIndex;
	var slideWidth = $(".main_trendy .swiper-slide-visible").eq(0).width() + 22;

	$(".main_trendy .swiper-slide").removeClass('scaleBig');
	$(".main_trendy .swiper-slide-visible").eq(0).addClass('scaleBig');
	$(".main_trendy .swiper-slide-visible").eq(3).addClass('scaleBig');

	$(".main_trendy .swiper-wrapper").css("transform","translateX(-"+ (slideWidth * newitemIndex) +"px)");
});

main_trendy_slide.on('reachEnd', function () {
	var newitemIndex = main_trendy_slide.activeIndex + 1;
	var slideWidth = $(".main_trendy .swiper-slide-visible").eq(0).width() + 22;

	$(".main_trendy .swiper-slide").removeClass('scaleBig');
	$(".main_trendy .swiper-slide-visible").eq(1).addClass('scaleBig');
	$(".main_trendy .swiper-slide-visible").eq(4).addClass('scaleBig');

	$(".main_trendy .swiper-wrapper").css("transform","translateX(-"+ (slideWidth * newitemIndex) +"px)");
	function l(n) {
		if (n.direction !== "none")
		{
			var t = n.direction === "next" ? n.currentIndex + 1 : n.currentIndex - 1;
			o(t)
		}
	}
});

/* SLIDE - MAIN_IT */
var main_it_slide = new Swiper ('.main_it .post-it', {
	//loop: true,
	slidesPerView: 'auto',
	spaceBetween: 20,
	slidesPerView: 4,
	observer: true,
	observeParents: true,
	speed : 1000,
	freeMode: true,
	autoplay: false,
	scrollbar: {
		el: '.main_it .swiper-scrollbar',
		hide: false,
	},
});

//MAIN_IT_카테고리 탭
$(".main_it .it_nav .btn").click(function(){
	var itActive = $(this).attr('data-tab');
	$(".main_it .it_nav .btn").removeClass('active');
	$(".main_it .it_item").removeClass('active');
	$(this).addClass('active');
	$('#'+itActive).addClass('active');
});

/* SLIDE - MAIN_DEAL */
var main_deal_slide = new Swiper ('.main_deal .post-deal', {
	loop: false,
	slidesPerView: 4,
	// slidesToScroll: 4,
	// centeredSlides: true,
	speed : 1000,
	autoWidth: true,
	autoplay: false,
	freeMode:true,
	spaceBetween: 20,
	// autoplay: {
	// 	delay: 2000,
	// 	disableOnInteraction: false,
	// },
	scrollbar: {
		el: '.post-deal .swiper-scrollbar',
		hide: false,
	},
});

//210604_ 수정 : 브랜드 PICK 네비게이션 수정.
/* 브랜드 PICK 갯수체크 210430_수정 */
var pickCont = $('.post-pick-nav .swiper-slide');
var pickLength = pickCont.length;
if (pickLength < 7) { //210614_ 수정 : 슬라이드 갯수 7개 미만일시 롤링 기능 억제.
	/* SLIDE - MAIN_PICK */
	var main_pick_nav = new Swiper('.main_pick .post-pick-nav', { //top
		initialSlide: 0,
		slidesPerView: 6,
		// slidesPerGroup: 6,
		loop: false,
		watchOverflow : true,
		// slideToClickedSlide : true,
		slideToClickedSlide : true,
		loopAdditionalSlides : 1,
		watchSlidesVisibility: true,
		watchSlidesProgress: true,
		freeMode: false,
		a11y: {
			enabled: true,
			notificationClass: 'swiper-notification',
			prevSlideMessage: '이전 슬라이드',
			nextSlideMessage: '다음 슬라이드',
			paginationBulletMessage: '슬라이드 {{index}}로 이동',
		},
		navigation: {
			nextEl: '.main_pick .swiper-button-next',
			prevEl: '.main_pick .swiper-button-prev',
		},
	});
} else {
	/* SLIDE - MAIN_PICK */
	var main_pick_nav = new Swiper('.main_pick .post-pick-nav', { //top
		initialSlide: 0,
		slidesPerView: 6,
		slidesPerGroup: 6,
		loop: false,
		// slideToClickedSlide : true,
		slideToClickedSlide : true,
		//loopAdditionalSlides : 1,
		watchSlidesVisibility: true,
		watchSlidesProgress: true,
		freeMode: false,
		a11y: {
			enabled: true,
			notificationClass: 'swiper-notification',
			prevSlideMessage: '이전 슬라이드',
			nextSlideMessage: '다음 슬라이드',
			paginationBulletMessage: '슬라이드 {{index}}로 이동',
		},
		navigation: {
			nextEl: '.main_pick .swiper-button-next',
			prevEl: '.main_pick .swiper-button-prev',
		},
	});


}

//210622_ 삭제 : 슬라이드 주석 삭제.
var pickForCont = $('.post-pick-for > .swiper-wrapper > .swiper-slide');
var pickForLength = pickForCont.length;
if (pickForLength < 7) {
	var main_pick_post = new Swiper('.main_pick .post-pick-for', { //thumbs
		initialSlide: 0,
		slidesPerView: 1,
		loop: false,
		watchOverflow : true,
		loopeSlides: 6,
		spaceBetween: 10,
		loopAdditionalSlides: 1,
		allowTouchMove: false,
		a11y: {
			enabled: true,
			notificationClass: 'swiper-notification',
			prevSlideMessage: '이전 슬라이드',
			nextSlideMessage: '다음 슬라이드',
			paginationBulletMessage: '슬라이드 {{index}}로 이동',
		},
		thumbs: {
			swiper: main_pick_nav
		},
	});
}else{
	var main_pick_post = new Swiper('.main_pick .post-pick-for', { //thumbs
		initialSlide: 0,
		slidesPerView: 1,
		loop: true,
		loopeSlides: 6,
		loopAdditionalSlides: 1,
		allowTouchMove: false,
		a11y: {
			enabled: true,
			notificationClass: 'swiper-notification',
			prevSlideMessage: '이전 슬라이드',
			nextSlideMessage: '다음 슬라이드',
			paginationBulletMessage: '슬라이드 {{index}}로 이동',
		},
		thumbs: {
			swiper: main_pick_nav
		},
	});
}

$(".main_pick .post-lookbook").each(function(index){
	var lookbookBnnCont = $(this).find('.swiper-slide');
	var lookbookBnnLength = lookbookBnnCont.length;
	if (lookbookBnnLength < 2) {
		var main_pick_lookbook = new Swiper ($(this), {
			slidesPerView: 1,
			speed : 1000,
			loop: false,
			watchOverflow: true, //loop와 함께 사용 불가.
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			autoplay: {
				delay: 3000,
				disableOnInteraction: false,
			},
			pagination: {
				el: '.main_pick .post-lookbook .swiper-pagination',
				clickable: true,
			},
		});
	}else{
		var main_pick_lookbook = new Swiper ($(this), {
			slidesPerView: 1,
			speed : 1000,
			loop: true,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			autoplay: {
				delay: 3000,
				disableOnInteraction: false,
			},
			pagination: {
				el: '.main_pick .post-lookbook .swiper-pagination',
				clickable: true,
			},
		});
	}
});

//210705_수정 : 기획전 배너 2개이상 등록시 슬라이드 각각 실행.
$(".main_1stage .post-bnnWide").each(function(index){
	var pickBnnCont = $(this).find('.swiper-slide');
	var pickBnnLength = pickBnnCont.length;
	if (pickBnnLength < 2) {
		/* SLIDE - MAIN_BANNER WIDE */
		var main_bnnWide_slide = new Swiper ($(this), {
			slidesPerView: 1,
			speed : 1000,
			initialSlide: 0,
			loop: false,
			watchOverflow: true, //loop와 함께 사용 불가.
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			navigation: {
				nextEl: '.main_1stage .swiper-button-next',
				prevEl: '.main_1stage .swiper-button-prev',
			},
			// allowTouchMove : false,
			// centeredSlides: true,
		});
	}else{
		/* SLIDE - MAIN_BANNER WIDE */
		var main_bnnWide_slide = new Swiper ($(this), {
			slidesPerView: 1,
			speed : 1000,
			initialSlide: 0,
			loop: true,
			autoplay: {
				delay: 4000,
				disableOnInteraction: false,
			},
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			navigation: {
				nextEl: '.main_1stage .swiper-button-next',
				prevEl: '.main_1stage .swiper-button-prev',
			},
			// allowTouchMove : false,
			// centeredSlides: true,
		});
	}
});

/* SLIDE - MAIN_RECOMM */
//MAIN_RECOMM_키워드 탭
$(".main_recomm .tag_list .btn").click(function(){
	var recommActive = $(this).attr('data-tab');
	$(".main_recomm .tag_list .btn").removeClass('active');
	$(".main_recomm .tagitem").removeClass('active');
	$(this).addClass('active');
	$('#'+recommActive).addClass('active');
});
function init(){

	// md pick 섹션별 스와이프 개별설정으로 변경. 5개 이하는 loop 옵션에 false 적용 21.10.21
	for(var i=1; i<= $(".main_recomm .post-recomm").length; i++ ){
		var obj = $(".main_recomm #tag" +i + " .post-recomm");
		var len = $(".main_recomm #tag" +i + " .post-recomm .item_prod").length;
		var bool = true;
		if( len < 6 ) bool = false;
		
		var main_recomm_slide = new Swiper (obj, {
			slidesPerView: 5,
			slidesPerGroup: 5,
			speed : 1000,
			spaceBetween: 20,
			loop : bool,
			loopedSlides: 5,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			pagination: {
				el: '.main_recomm .swiper-pagination',
				clickable: true,
			},
			navigation: {
				nextEl: '.main_recomm .swiper-button-next',
				prevEl: '.main_recomm .swiper-button-prev',
			},
			observer:true,
			observeParents: true,
		});
	}
}

init();

/* SLIDE - MAIN_FORYOU */
var cntNum = 0;
var main_foryou_slide = new Swiper ('.main_foryou .post-sug .swiper-container', {
	allowTouchMove: false,
	loop: false,
	effect: 'fade',
	autoHeight: false,
	autoplay: {
		delay: 25000,
		disableOnInteraction: false,
	},
	a11y: {
		enabled: true,
		notificationClass: 'swiper-notification',
		prevSlideMessage: '이전 슬라이드',
		nextSlideMessage: '다음 슬라이드',
		paginationBulletMessage: '슬라이드 {{index}}로 이동',
	},
	pagination: {
		el: '.post-sug .swiper-pagination',
		clickable: true,
	},
	on : {
		slideChange: function(){
			$(".fy_nav .swiper-slide li").children('.btn_shape').removeClass('active');
			$(".fy_nav .swiper-slide-next li").eq(0).children('.btn_shape').addClass('active');
			$(".fy_nav .swiper-slide-prev li").eq(0).children('.btn_shape').addClass('active');
			foryouIndex = -1;
			if(cntNum === 0){
				$('.fy_item').removeClass('active');
				$('#fy6').addClass('active');
				cntNum = 1;
			} else {
				$('.fy_item').removeClass('active');
				$('#fy1').addClass('active');
				cntNum = 0;
			}

			clearInterval(ti);
			ti = startTimeInterval();
		}
	},
});

function foryouInterval(_foryouIndex) {
	var foryouCateItems = $(".main_foryou .fy_nav .swiper-slide-active ul li .btn_shape");
	$(foryouCateItems[(_foryouIndex + 1) % 5]).addClass("active");
	$(foryouCateItems[_foryouIndex % 5]).removeClass("active");
}
function foryouFy_item(_Fy_itemIndex) {
	var fynavItems = $('.main_foryou .fy_nav .swiper-slide-active ul li .btn_shape.active');
	var fyActive = $(fynavItems).attr('data-tab');
	// $(".fy_nav .btn_shape").removeClass('active');
	$(".fy_item").removeClass('active');
	// $(".fy_item").addClass('active');
	$('#'+fyActive).addClass('active');
}

var foryouIndex = 0;
var ti;
function startTimeInterval() {
	return setInterval(function () {
		$(".fy_nav .btn_shape").removeClass('active');
		$(".fy_item").removeClass('active');
		foryouInterval(foryouIndex);
		foryouFy_item();
		if (foryouIndex >= 5) foryouIndex = 0;
		foryouIndex++;
	}, 5000);
}
$(".fy_nav .btn_shape").click(function(){
	var fyActive = $(this).attr('data-tab');
	$(".fy_nav .btn_shape").removeClass('active');
	$(".fy_item").removeClass('active');
	$(this).addClass('active');
	$('#'+fyActive).addClass('active');
});

$(".fy_nav ul li").click(function(){
	foryouIndex = $(this).index();
	clearInterval(ti);
	ti = startTimeInterval();
});

ti = startTimeInterval();

/* SLIDE - MAIN_TV */
//210629_ 수정 : 슬라이드 1개일 때, loop랑 롤링 제거.
var mainTvCont = $('.main_tv .swiper-slide');
var mainTvLength = mainTvCont.length;
if (mainTvLength < 2) {
	var main_tv_slide = new Swiper ('.main_tv .post-tv', {
		loop: false,
		watchOverflow:true,
		slidesPerView: 'auto',
		spaceBetween: 170,
		centeredSlides: true,
		speed : 1000,
		autoplay: false,
		a11y: {
			enabled: true,
			notificationClass: 'swiper-notification',
			prevSlideMessage: '이전 슬라이드',
			nextSlideMessage: '다음 슬라이드',
			paginationBulletMessage: '슬라이드 {{index}}로 이동',
		},
		navigation: {
			nextEl: '.main_tv .swiper-button-next',
			prevEl: '.main_tv .swiper-button-prev',
		},
		pagination: {
			el: '.main_tv .swiper-pagination',
			clickable: true,
		},
	});
}else{
	var main_tv_slide = new Swiper ('.main_tv .post-tv', {
		loop: true,
		slidesPerView: 'auto',
		spaceBetween: 170,
		centeredSlides: true,
		speed : 1000,
		autoplay: false,
		a11y: {
			enabled: true,
			notificationClass: 'swiper-notification',
			prevSlideMessage: '이전 슬라이드',
			nextSlideMessage: '다음 슬라이드',
			paginationBulletMessage: '슬라이드 {{index}}로 이동',
		},
		navigation: {
			nextEl: '.main_tv .swiper-button-next',
			prevEl: '.main_tv .swiper-button-prev',
		},
		pagination: {
			el: '.main_tv .swiper-pagination',
			clickable: true,
		},
	});
}

// 스크립트 제거
function fnRemoveHTML(text){
	var reText = text.replace(/(<br>|<br\/>|<br \/>)/g, "\n");
	reText = reText.replace(/<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/ig, "");
	reText = reText.replace(/(?:\r\n|\r|\n)/g, '<br/>');
	return reText;
}

$(document).ready(function() {
	// 몰메인 <br> 태그
	$('.mainTitle').each(function (){
		var brText = $(this).find("input[name=mainTitlee]").val();
		// let tag = brText.replace(/(<br>|<br\/>|<br \/>)/g, '<br>');
		let tag = fnRemoveHTML(brText);
		$(this).append(tag);
	});

	// $('.mainSubTitle').each(function (){
	// 	var brText = $(this).find("input[name=mainSubTitlee]").val();
	// 	let tag = fnRemoveHTML(brText);
	// 	$(this).append(tag);
	// });

	// 가로긴배너 슬라이드
	$('.silderBannerArea').each(function (){
		let tag = '';
		if(!gagajf.isNull($(this).find("input[name=bannerNote]").val())) {
			var noteText = $(this).find("input[name=bannerNote]").val();
			tag = fnRemoveHTML(noteText);
			$(this).find('.noteArea').append(tag);
		}
	});

	// 스타일리포트 <br> 태그
	$('.styleArea').each(function (){
		let tag = '';
		let tag2 = '';
		if(!gagajf.isNull($(this).find("input[name=styleTitle]").val())) {
			var titleText = $(this).find("input[name=styleTitle]").val();
			tag = fnRemoveHTML(titleText);
			$(this).find('.styleTitleC').append(tag);
		}

		if(!gagajf.isNull($(this).find("input[name=styleNote]").val())) {
			var noteText = $(this).find("input[name=styleNote]").val();
			tag2 = fnRemoveHTML(noteText);
			$(this).find('.styleNoteC').append(tag2);
		}
	});

	// 잇아이템 <br> 태그
	if(!gagajf.isNull($("#id004").find("input[name=title]").val())){
		var id004Text = $("#id004").find("input[name=title]").val();
		let tag = fnRemoveHTML(id004Text);
		$("#id004").append(tag);
	}

	// 핫딜 <br> 태그
	if(!gagajf.isNull($("#id006").find("input[name=title]").val())){
		var id006Text = $("#id006").find("input[name=title]").val();
		let tag = fnRemoveHTML(id006Text);
		$("#id006").append(tag);
	}

	// 브랜드픽 <br> 태그
	$('#id007 .title').each(function (){
		let tag = '';
		if(!gagajf.isNull($(this).find("input[name=title]").val())){
			var brText = $(this).find("input[name=title]").val();
			tag = fnRemoveHTML(brText);
			$(this).append(tag);
		}
	});

});
/*]]>*/
</script>

	<!-- Criteo 홈페이지 태그 -->
	<script type="text/javascript">
		window.criteo_q = window.criteo_q || [];
		var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
		window.criteo_q.push(
			{ event: "setAccount", account: 6762}, // 이 라인은 업데이트하면 안됩니다
			{ event: "setEmail", email: criteoEmail }, // 빈 문자일 수 있습니다
			{ event: "setSiteType", type: deviceType},
			{ event: "viewHome"});
	</script>
	<!--// Criteo 홈페이지 태그 -->

	<!-- Enliple(모비온) Insite naver Quick  start -->
	<script type="text/javascript">
		// 인사이트 마케팅
		(function(m,b,r,i,s){m.mbris=m.mbris||function(){(m.mbris.q=m.mbris.q||[]).push(arguments)};i=b.createElement(r);i.async=!0;i.defer=!0;i.src="https://cdn.megadata.co.kr/dist/prod/enp_mbris.min.js";0<b.querySelectorAll("script[src*=enp_mbris]").length&&m.ENP_MBRIS_INVOKE?m.ENP_MBRIS_INVOKE():(s=b.getElementsByTagName(r)[0],s.parentNode.insertBefore(i,s))})(window,document,"script");mbris("202108222155731618_is24_1_01,202108222155731619_is24_1_02");
	</script>
	<!--// Enliple(모비온) Insite naver Quick end -->
</th:block>

</body>
</html>
