<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  layout:decorator="mob/common/layout/DefaultLayoutMob">
<!--
 *******************************************************************************
 * @source  : MallMainFormMob.html
 * @desc    : 몰메인 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.10   gagamel     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">

	<main role="" id="" class="container">
		<section class="main">
			<th:block th:if="${mainLayoutList}" th:each="mainData, mainStat : ${mainLayoutList}" th:with="contentsLoc=${#strings.replace(mainData.contentsLoc,'SMM','')},contentsTitle=${#strings.replace(mainData.contentsTitle,'<br>',' ')}">
				<!--				<th:block th:if="${mainData.ContentsList != null and !mainData.ContentsList.empty}">-->
				<th:block th:if="${contentsLoc=='001'}">
					<!-- 1. 비주얼 슬라이드 -->
					<div class="inner wide" th:if="${mainData.ContentsList != null and !mainData.ContentsList.empty}">
						<div class="main_visual">
							<div class="swiper-container post-visual">
								<div class="swiper-wrapper">
									<th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
										<div class="swiper-slide">
											<a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
												<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath2}" alt="">
												<div class="txtWrap">
													<dl th:class="${ContentsData.strVar7=='BLACK'?'':'w'}">
														<dt th:if="${ContentsData.strVar5=='P'}" th:text="${ContentsData.planBrandGroupNm}">NBA</dt>
														<dt th:if="${ContentsData.strVar5=='P' 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>
												</div>
											</a>
										</div>
									</th:block>
								</div>
								<!-- Add Pagination -->
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='002'}">
					<!-- 2. 스타일리포트 -->
					<div class="inner bg_gray" th:if="${mainData.ContentsList != null and !mainData.ContentsList.empty}">
						<div class="main_stylereport">
							<th:block th:if="${mainData.contentsTitle != null and !mainData.contentsTitle.empty}">
								<div class="titWrap">
									<h2 th:text="${mainData.contentsTitle}"></h2>
								</div>
							</th:block>
							<div class="swiper-container post-stylereport">
								<div class="swiper-wrapper">
									<th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
										<div class="swiper-slide styleArea" th:if="${ContentsStat.count<5}">
											<a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
												<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
												<dl>
													<dt class="styleTitleC">
														<input type="hidden" name="styleTitle" th:value="${ContentsData.strTitle1}"/>
													</dt>
													<dd class="styleNoteC">
														<input type="hidden" name="styleNote" th:value="${ContentsData.subText1}"/>
													</dd>
													<!--											<dd>준비한 아우터 픽을 만나보자</dd>-->
												</dl>
											</a>
										</div>
									</th:block>
								</div>
								<!-- Add Pagination -->
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='003'}">
					<!-- 3. 트렌디한 신상아이템 -->
					<div class="inner" th:if="${mainData.goodsList != null}">
						<div class="main_trendy">
							<th:block th:if="${mainData.contentsTitle != null and !mainData.contentsTitle.empty}">
								<div class="titWrap">
									<h2 th:text="${mainData.contentsTitle}"></h2>
								</div>
							</th:block>
							<div class="swiper-container post-trendy">
								<div class="swiper-wrapper">
									<th:block th:each="goodsData, goodsStat : ${mainData.goodsList}">
										<th:block th:if="${(goodsStat.index%4)==0 or goodsStat.first}">

											<div class="swiper-slide">
										</th:block>
										<div class="item_prod">
											<div class="item_state">
												<button type="button" class="itemLike" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsFullNm}, ithrCd='', contentsLoc='SMM003', planDtlSq=''">관심상품 추가</button>
												<a href="javascript:void(0)" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM003');">
													<div class=" itemPic">
														<!-- <img alt="BLUE-a" class=" pd_img" src="/images/mo/thumb/main_trendy05.jpg">  onerror="img_check(this)"-->
														<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=" 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:if="${not #strings.isEmpty(goodsData.goodsTnm)}" th:text="${goodsData.goodsTnm}">#주문 폭주 상품</div>
													<div class=" itemName" th:text="${goodsData.goodsFullNm}">가을 신상 남성 스탠다드핏 로고맨 블루 볼 캡 유니 경량다운 시보리넥 베스트</div>
													<!--														<p class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">488,000</p>-->
													<p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice">
														<span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,3,'COMMA')}">89,000</span>[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
														<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 th:if="${(goodsStat.index%4)== 3 or goodsStat.last}">
											<th:block th:utext="'</div>'"></th:block>
										</th:block>
									</th:block>
								</div>
								<!-- Add Pagination -->
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='004' and !mainData.BestItemList.empty}">
					<!-- 4. 잇 아이템 -->
					<div class="inner">
						<div class="main_it">
							<div class="titWrap">
								<!-- 2021.08.30 card007 메인 잇 아이템 전체보기 주석처리 추후 주석 제거 필요 -->
								<a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_BEST_MAIN);">
									<h2 th:text="${mainData.contentsTitle.replace('<br>','')}"></h2>
								</a>
								<!-- //2021.08.30 card007 메인 잇 아이템 전체보기 주석처리 추후 주석 제거 필요 -->
							</div>
							<div class="inner_head">
								<ul class="it_nav">
									<th:block th:each="ContentsData, ContentsStat : ${mainData.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>
							<div class="inner_body">
								<th:block th:each="ContentsData, ContentsStat : ${mainData.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">
														<div class="item_state">
															<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><em class="number" th:text="${bestItemStat.count}">1</em></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="" class=" 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="" class=" 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}">TBJ</p>
																<div class="itemComment" th:if="${not #strings.isEmpty(bestItemData.goodsTnm)}" th:text="${bestItemData.goodsTnm}"># 가을 느낌 물씬!</div>
																<div class="itemName" th:text="${bestItemData.goodsFullNm}">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
																<p th:unless="${bestItemData.goodsType=='G056_D'}" class="itemPrice">
																	<span class="itemPrice_original" th:if="${bestItemData.currPrice != bestItemData.listPrice}" th:text="${#numbers.formatInteger(bestItemData.listPrice,3,'COMMA')}">89,000</span>[[${#numbers.formatInteger(bestItemData.currPrice,0,'COMMA')}]]
																	<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>
								</th:block>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='005' and !mainData.ContentsList.empty}">
					<!-- 5. 프로모션배너 -->
					<div class="inner wide">
						<div class="main_2stage">
							<div class="swiper-container post-bnnEvent">
								<th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
									<th:block th:if="${ContentsData.contentsType!=null && ContentsData.contentsType!=''}">
										<div class="swiper-wrapper" th:if="${ContentsData.contentsType=='1'}">
											<div class="swiper-slide">
												<a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
													<div class="bnnbox" style="background:#e3e7ea;">
														<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
													</div>
												</a>
											</div>
										</div>
										<div class="swiper-wrapper" th:if="${ContentsData.contentsType=='2'}">
											<div class="swiper-slide">
												<a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
													<div class="bnnbox" style="background:#e3e7ea;">
														<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
													</div>
												</a>
											</div>
											<div class="swiper-slide">
												<a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar2}]]);">
													<div class="bnnbox" style="background:#eef1f3;">
														<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath2}" alt="">
													</div>
												</a>
											</div>
										</div>
									</th:block>
								</th:block>
								<!-- Add Pagination -->
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='006'}">
					<!-- 6. 타임딜 : 슬라이드 -->
					<th:block th:each="socialData, socialStat : ${mainData.socialInfo}">
						<div class="inner bg_dark" th:if="${socialData.socialGoodsList != null and !socialData.socialGoodsList.empty}">
							<div class="main_deal">
								<div class="titWrap">
									<a href="javascript:void(0)" onclick="cfnGoToPage(_PAGE_SOCIAL_MAIN);">
										<h2 th:text="${contentsTitle}"></h2>
									</a>
									<th:block th:each="socialData, socialStat : ${mainData.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="hotdealcount" id="countdown">
											<div id="tiles"></div>
										</div>
									</div>
								</div>

								<div class="swiper-container post-deal">
									<div class="swiper-wrapper" >
										<!--										<th:block th:each="socialData, socialStat : ${mainData.socialInfo}">-->
										<th:block th:each="goodsData, goodsStat : ${socialData.socialGoodsList}">
											<div class="swiper-slide" th:if="${goodsStat.count<21}">
												<div class="item_prod" style="width:100%">
													<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}">TBJ</p>
															<div class="itemComment" th:if="${not #strings.isEmpty(goodsData.goodsTnm)}"  th:text="${goodsData.goodsTnm}"># 가을 느낌 물씬!</div>
															<div class="itemName" th:text="${goodsData.goodsNm}">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
															<p class="itemPrice">
																<span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,0,'COMMA')}">89,000</span>[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
																<span class=" itemPercent" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatDecimal(goodsData.dcRate,1,0)} + '%'">10%</span>
															</p>
														</a>
													</div>
												</div>
											</div>
										</th:block>
										<!--										</th:block>-->
									</div>
								</div>
							</div>
						</div>
					</th:block>
				</th:block>

				<th:block th:if="${contentsLoc=='007'}">
					<!-- 7. 브랜드픽 -->
					<div class="inner" th:if="${!mainData.brandPickList.empty}">
						<div class="main_pick">
							<div class="titWrap">
								<h2 th:text="${contentsTitle}"></h2>
							</div>
							<div class="inner_head">
								<div class="swiper-container pick-head"> <!--(pick-head)슬라이드 키클래스-->
									<ul class="swiper-wrapper">
										<th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
											<li class="swiper-slide" th:classappend="${ContentsStat.count==1}?'on'"> <!-- li.on / li .btn.active : 메뉴 표시 -->
												<button class="btn btn_link" th:id="${'pickBtn'+ContentsStat.count}" th:attr="data-tab=${'pick'+ContentsStat.count}"><span th:text="${ContentsData.brandGroupNm}">BUKAROO</span></button>
											</li>
										</th:block>
									</ul>
								</div>
							</div>
							<div class="inner_body">
								<th:block th:each="brandPickData, brandPickStat : ${mainData.brandPickList}">
									<div class="pick-cont" th:classappend="${brandPickStat.count==1}?'active'" th:id="${'pick'+brandPickStat.count}"> <!-- .pick-cont.active : 컨텐츠 표시 -->
										<!-- 210329 : 브랜드 pick 슬라이드 추가 -->
										<div class="swiper-container">
											<div class="swiper-wrapper" id="id007">
												<th:block th:each="bannerData, bannerStat : ${brandPickData.BannerList}">
													<div class="swiper-slide" th:if="${bannerData.imgPath1 != ''}">
														<a href="javascript:void(0)" th:onclick="cfnGoToPage([[${bannerData.strVar1}]]);"><!-- 해당 배너 상세 이동 -->
															<div class="txtWrap">
																<p class="title">
																	<input type="hidden" name="title" th:value="${bannerData.strTitle1}">
																</p>
																<span th:text="${bannerData.subText1}">2020 FALL/WINTER 신상살펴보기</span>
															</div>
															<img th:src="${@environment.getProperty('domain.image')+bannerData.imgPath1}" alt="">
														</a>
													</div>
												</th:block>
											</div>
										</div>
										<!-- //210329 : 브랜드 pick 슬라이드 추가 -->
										<!-- 210329 : 브랜드 pick 상품 swiper 제거 -->
										<div class="pick-post"><!-- (pick-post)슬라이드 키클래스(해당 배너 관련 상품) -->
											<th:block th:each="goodsData, goodsStat : ${brandPickData.goodsList}">
												<div class="item_prod" th:if="${goodsStat.count<4}">
													<div class="item_state">
														<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="" class=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
															</div>
															<div class="itemName" th:text="${goodsData.goodsFullNm}">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
															<p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">35,900</p>
															<p th:if="${goodsData.goodsType=='G056_D'}" class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA') + ' ~'}"></p>
														</a>
													</div>
												</div>
											</th:block>
										</div> <!--pick-post 종료 -->
										<!-- 210524 : pick-post 형제로 버튼그룹 이동 -->
										<div class="btn_group_flex">
											<div>
												<button class="btn btn_default" th:onclick="fnNextBrand([[${brandPickStat.size}]],[[${brandPickStat.count}]])">다음 브랜드 보기<span></span></button>
											</div>
										</div>
										<!-- //210329 : 브랜드 pick 상품 swiper 제거 -->
										<!-- 210329 : 브랜드 pick 상품 swiper 제거 -->
									</div>
								</th:block>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='008' and !mainData.ContentsList.empty}">
					<!-- 8. 가로 긴 배너 슬라이드 -->
					<div class="inner wide">
						<div class="main_1stage">
							<div class="swiper-container post-bnnWide">
								<div class="swiper-wrapper">
									<th:block th:each="ContentsData, ContentsStat : ${mainData.ContentsList}">
										<div class="swiper-slide silderBannerArea">
											<th:block th:if="${ContentsData.imgPath1!=null && ContentsData.imgPath1!=''}">
												<a href="javascript:void(0)" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);">
													<div class="bnnbox" style="background:#bdc3c7;">
														<div class="txtWrap bannerNote">
															<p class="noteArea">
																<input type="hidden" name="bannerNote" th:value="${ContentsData.strTitle1}"/>
															</p>
															<!--														<p>아우터 + 이너 단독세일</p>-->
														</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>
								<!-- Add Pagination -->
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='009'}">
					<!-- 9. MD추천 스타일 -->
					<div class="inner">
						<div class="main_recomm">
							<div class="titWrap">
								<h2 th:text="${contentsTitle}">MD가 추천하는 스타일</h2>
							</div>
							<div class="inner_head">
								<div class="swiper-container recomm-head"> <!--(recomm-head)슬라이드 키클래스-->
									<ul class="swiper-wrapper">
										<th:block th:each="titleData, titleStat : ${mainData.mdPickList}" >
											<th:block th:if="${titleData.goodsList!=null and !titleData.goodsList.empty}" >
												<li class="swiper-slide"> <!-- li .btn.active : 메뉴 표시 --><!--data-filter 사용 안하시면 제거하셔도 좋습니다-->
													<button class="btn btn_link" th:classappend="${titleStat.count==1}?'active'" th:attr="data-tab=${'recomm'+titleStat.count}" data-filter="tag_warm"><span th:text="${titleData.mdTitle}">따뜻한 무드</span></button>
												</li>
											</th:block>
										</th:block>
									</ul>
								</div>
							</div>
							<th:block th:each="titleData, titleStat : ${mainData.mdPickList}">
								<div class="inner_body">
									<div class="swiper-container recomm-post recomm_item" th:classappend="${titleStat.count==1}?'active'" th:id="${'recomm'+titleStat.count}">
										<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" 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=" pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
																	</div>
																	<p class="itemBrand" th:text="${goodsData.brandGroupNm}">TBJ</p>
																	<div class="itemComment" th:if="${not #strings.isEmpty(goodsData.goodsTnm)}" th:text="${goodsData.goodsTnm}"># 가을 느낌 물씬!</div>
																	<div class="itemName" th:text="${goodsData.goodsFullNm}">11111 남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
																	<p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice">
																		<span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,1,'COMMA')}">89,000</span>[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
																		<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>
										<!-- <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span> -->
									</div>
								</div>
							</th:block>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='010'}">
					<!-- 10. 당신을 위한 제안 -->
					<div class="inner wide">
						<div class="main_foryou">
							<div class="titWrap">
								<h2 th:text="${mainData.contentsTitle}">당신을 위한 제안</h2>
							</div>

							<div class="swiper-container post-sug" id="recomItemArea">

							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='011'}">
					<!-- 11. TV 슬라이드 -->
					<div class="inner wide bg_dark" th:if="${mainData.ContentsList != null}">
						<div class="titWrap">
							<h2 data-style="unusual" th:text="${mainData.contentsTitle}">STYLE24 TV</h2>
						</div>
						<div class="main_tv" >
							<div class="swiper-container post-tv">
								<div class="swiper-wrapper ">
									<div class="swiper-slide" th:each="item, stat : ${mainData.ContentsList}">
										<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>
											<!--										<iframe width="100%" height="100%" src="https://www.youtube.com/embed/hGjFwebN5ks" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>-->
										</div>
									</div>
								</div>
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
					<!--					</th:block>-->
				</th:block>


			</th:block>

		</section>
	</main>

	<script th:inline="javascript">
		/*<![CDATA[*/
		var targetTime = '';
		if(!gagajf.isNull($("#socailForm").find("input[name=targetTime]").val())){
			targetTime = $("#socailForm").find("input[name=targetTime]").val().toDate("YYYYMMDD");
		}
		if(targetTime != null && targetTime != ''){
			/* 핫딜 countDown */
			var endTime = new Date(targetTime); // 남은시간 지정
			endTime = (Date.parse(endTime) / 1000);

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

			getCountdown();

			setInterval(function () { getCountdown(); }, 1000);

			function getCountdown(){
				// find the amount of "seconds" between now and target
				var now = new Date();
				now = (Date.parse(now) / 1000);

				var timeLeft = endTime - now;

				var days = Math.floor(timeLeft / 86400);
				var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
				var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
				var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

				if (hours < '10') { hours = '0' + hours; }
				if (minutes < '10') { minutes = '0' + minutes; }
				if (seconds < '10') { seconds = '0' + seconds; }

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

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

		// 스크립트 제거
		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() {
			// 당신을 위한 제안 쿠키값 확인 (로그인시 확인됨)

			var pcId = gagajf.getCookie("RB_PCID");
			fnGetEigenApi(pcId);

			post_visual.slideTo(2, 0, false); // 접속 시, 슬라이드페이지 이동

			// 몰메인 띠배너 표출
			$("#divTopbanner").show();

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

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

			// 몰메인 <br> 태그
			// $('.mainSubTitle').each(function (){
			// 	var brText = $(this).find("input[name=mainSubTitlee]").val();
			// 	let tag = fnRemoveHTML(brText);
			// 	$(this).append(tag);
			// });

			// 브랜드픽 <br> 태그
			$('#id007 .title').each(function (){
				var brText = $(this).find("input[name=title]").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);
				}
			});
		});

		function setHtop() {
			if($('header').hasClass('main')) {
				$('#htopMain').show();
				$('#htopSub').hide();
			} else {
				$('#htopMain').hide();
				$('#gnb').hide();
				$('#htopSub').show();
			}
		}

		var fnNextBrand = function (tot, idx){
			if(tot == idx){
				$("#pickBtn1").click();
			}else{
				$("#pickBtn"+(idx+1)).click();
			}
		}

		/**
		 * EigenApi
		 * size : 상품수
		 * nh : 키워드수
		 * */
		var fnGetEigenApi = function (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 = '';

				let dataJson = result.groupedResults;
				let key1 = Object.keys(dataJson);
				if (status === 'success') {
					if (!gagajf.isNull(result.products) && result.products.length > 0) {
						$("#recomItemArea").html('');
						itemTag += '<div class="swiper-wrapper" >';

						$.each(result.products, function (idx, item) {
							if (idx == 0 || idx == 5) {
								itemTag += '<div class="swiper-slide';
								if(idx==0){
									itemTag += ' type1';
								}else{
									itemTag += ' type2';
								}
								itemTag += ' ">\n';
								itemTag += '	<ol class="list_cate">\n';
							}

							itemTag += '			<li ';
							if (idx == 0 || idx == 5) {
								itemTag += ' class="first" ';
							}
							itemTag += ' id="key'+idx+'" data-idx="'+idx+'" onclick="fnClickRecommendKey(this,\''+idx+'\');">\n';
							itemTag += '				<dl>\n';
							itemTag += '					<dt>\n';
							itemTag += '						<button>\n';
							itemTag += '							<span class="fold_rank">'+(idx+1)+'</span>\n';
							itemTag += '							<span class="fold_txt">'+ item.sourceId + '</span>\n';
							itemTag += '						</button>\n';
							itemTag += '					</dt>\n';
							itemTag += '					<dd>\n';
							itemTag += '						<div class="swiper-container post-sug-items">\n';
							itemTag += '							<div class="swiper-wrapper">\n';
							for (var i=0; i<key1.length; i++) {
								var key = key1[i];
								if(item.sourceId == key){
									$.each(dataJson[key], function (keyIdx, keyItem){
										itemTag += '						<div class="swiper-slide">\n';
										itemTag += '							<div class="item_prod">\n';
										itemTag += '								<div class="item_state">\n';
										itemTag += '									<a href="'+keyItem.product.itemUrl+'" class="itemLink">\n';
										itemTag += '										<div class="itemPic">\n';
										itemTag += '											<img alt="" class=" pd_img" src="'+keyItem.product.itemImage+'">\n';
										itemTag += '										</div>\n';
										itemTag += '										<div class="itemName">'+keyItem.product.itemName+'</div>\n';
										itemTag += '										<p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
										itemTag += '									</a>\n';
										itemTag += '								</div>\n';
										itemTag += '							</div>\n';
										itemTag += '						</div>\n';
									});

									//if(i == key1.length-1){
									itemTag += '						<div class="swiper-slide">\n';
									itemTag += '							<div class="item_prod">\n';
									itemTag += '								<div class="item_state">\n';
									itemTag += '									<a href="javascript:void(0)" class="itemLink" onclick="cfnGoToSearchGoodsListForm(\''+ item.sourceId + '\')">\n';
									itemTag += '										<div class="itemPic">\n';
									itemTag += '											<span class="more_txt">더보기</span>\n';
									itemTag += '										</div>\n';
									itemTag += '									</a>\n';
									itemTag += '								</div>\n';
									itemTag += '							</div>\n';
									itemTag += '						</div>\n';
									//}
								}
							}

							itemTag += '							</div>\n';
							itemTag += '						</div>\n';
							itemTag += '					</dd>\n';

							itemTag += '				</dl>\n';
							itemTag += '			</li>\n';


							if (idx == 4 || idx == 9) {
								itemTag += '	</ol>\n';
								itemTag += '</div>\n';
							}
						});

						itemTag += '</div>';
						itemTag += '<div class="swiper-pagination"></div>';

						if(itemTag.indexOf('swiper-slide') >-1 ){
							$("#recomItemArea").html(itemTag);
							fnSwiperScript();
						}
					}
				}
			});
		}
		/*]]>*/

	</script>

	<script type="text/javascript">
		var numCnt = 0;
		var foryouIndex = 0;
		var cntNum = 0;
		var fnSwiperScript = function (){
			// post_sug
			var post_sug = new Swiper('.swiper-container.post-sug', {

				a11y: {
					enabled: true,
					notificationClass: 'swiper-notification',
					prevSlideMessage: '이전 슬라이드',
					nextSlideMessage: '다음 슬라이드',
					firstSlideMessage: '첫번째 슬라이드 입니다',
					lastSlideMessage: '마지막 슬라이드 입니다',
					paginationBulletMessage: '슬라이드 {{index}}로 이동',
				},
				pagination: {
					el: '.swiper-pagination',
				},
				// autoplay: {
				// 	delay: 24700,
				// 	disableOnInteraction: false,
				// },
				on : {
					slideChange: function(){
						foryouIndex = 0;
						if(numCnt === 0){
							$(".swiper-slide.type1 .list_cate > li").removeClass('on');
							$(".swiper-slide.type2 .list_cate > li").removeClass('on');
							$(".swiper-slide.type2 .list_cate .first").addClass('on');
							numCnt = 1;
						} else {
							$(".swiper-slide.type1 .list_cate > li").removeClass('on');
							$(".swiper-slide.type2 .list_cate > li").removeClass('on');
							$(".swiper-slide.type1 .list_cate .first").addClass('on');
							numCnt = 0;
						}
					}
				},

			});

			function foryouInterval(_foryouIndex) {
				var foryouCateItems1 = $(".main_foryou .post-sug .swiper-slide.type1.swiper-slide-active .list_cate li");
				var foryouCateItems2 = $(".main_foryou .post-sug .swiper-slide.type2.swiper-slide-active .list_cate li");
				$(".main_foryou .post-sug .swiper-slide.type1 .list_cate li").removeClass("on");
				$(".main_foryou .post-sug .swiper-slide.type2 .list_cate li").removeClass("on");

				if($(".main_foryou .post-sug .swiper-slide.type1").hasClass("swiper-slide-active")){
					$(foryouCateItems1[(_foryouIndex) % 5]).addClass("on");
					if (_foryouIndex >= 5) foryouIndex = 0;
					foryouIndex++;
					// $(foryouCateItems1).click(function () {
					// 	foryouIndex = $(this).index();
					// 	clearInterval(stopInter);
					// 	stopInter = startTimeInterval();
					// });
				}
				if($(".main_foryou .post-sug .swiper-slide.type2").hasClass("swiper-slide-active")){
					$(foryouCateItems2[(_foryouIndex) % 5]).addClass("on");
					if (_foryouIndex >= 5) foryouIndex = 0;
					foryouIndex++;
					// $(foryouCateItems2).click(function () {
					// 	foryouIndex = $(this).index();
					// 	clearInterval(stopInter);
					// 	stopInter = startTimeInterval();
					// });
				}
			}
			function startTimeInterval(){
				return setInterval(function () {
					foryouInterval(foryouIndex);
				}, 5000);
			}
			var stopInter = startTimeInterval();

			var post_sug_items = new Swiper ('.swiper-container.post-sug-items', {
				autoHeight: true, //210720_ 추가
				slidesPerView: 3,
				spaceBetween: 10,
				speed : 1000,
				a11y: {
					enabled: true,
					notificationClass: 'swiper-notification',
					prevSlideMessage: '이전 슬라이드',
					nextSlideMessage: '다음 슬라이드',
					firstSlideMessage: '첫번째 슬라이드 입니다',
					lastSlideMessage: '마지막 슬라이드 입니다',
					paginationBulletMessage: '슬라이드 {{index}}로 이동',
				},
			});
		}

		var fnClickRecommendKey = function (obj, key){
			var onIdx = '';
			$(".main_foryou .post-sug .swiper-slide .list_cate li").each(function (){
				if($(this).hasClass("on")){
					onIdx = $(this).attr('data-idx');
					$(this).removeClass("on");
				}
			});

			if(onIdx == key){
				$("#key"+key).removeClass("on");
			}else{
				$("#key"+key).addClass("on");
			}

			$(".main_foryou .post-sug .swiper-slide .list_cate li").each(function (){
				if($(this).hasClass("on")){
					foryouIndex = $(this).attr('data-idx');
				}
			});
		}
	</script>

	<script type="text/javascript">
		//210624_ 추가 : 슬라이드 속성 추가.
		// post-visual
		// 비주얼 슬라이드 카운팅
		var pickvisualCont = $('.post-visual .swiper-slide');
		var pickvisualLength = pickvisualCont.length;
		if (pickvisualLength < 2) {
			// $(".main_visual .swiper-pagination").css({"display": "none"});
			var post_visual = new Swiper('.swiper-container.post-visual', {
				autoplay: false,
				loop:false,
				speed:1000,
				// pagination: false,
				a11y: {
					enabled: true,
					notificationClass: 'swiper-notification',
					prevSlideMessage: '이전 슬라이드',
					nextSlideMessage: '다음 슬라이드',
					firstSlideMessage: '첫번째 슬라이드 입니다',
					lastSlideMessage: '마지막 슬라이드 입니다',
					paginationBulletMessage: '슬라이드 {{index}}로 이동',
				},
				pagination: {
					el: '.swiper-pagination',
					type: 'fraction',
				},
			});
		} else {
			var post_visual = new Swiper('.swiper-container.post-visual', {
				slideTo: 2,
				speed:1000,
				autoplay: {
					delay: 3000,
					disableOnInteraction: false,
				},
				loop:true,
				pagination: {
					el: '.swiper-pagination',
					type: 'fraction',
				},
			});
		}


		// post-trendy
		var post_trendy = new Swiper('.swiper-container.post-trendy', {
			speed:1000,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				firstSlideMessage: '첫번째 슬라이드 입니다',
				lastSlideMessage: '마지막 슬라이드 입니다',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			pagination: {
				el: '.swiper-pagination',
			},
		});

		// post-it
		var post_it = new Swiper('.swiper-container.post-it', {
			slidesPerView: 2.22,
			spaceBetween: 8,
			observer: true,
			observeParents: true,
			speed : 1000,
			freeMode: true,
			autoplay: false,
		});
		$(".it_nav .btn").click(function(){
			var itActive = $(this).attr('data-tab');
			$(".it_nav .btn").removeClass('active');
			$(".it_item").removeClass('active');
			$(this).addClass('active');
			$('#'+itActive).addClass('active');
		});

		// post-stylereport
		var post_stylereport = new Swiper('.swiper-container.post-stylereport', {
			slidesPerView: 1,
			speed:1000,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				firstSlideMessage: '첫번째 슬라이드 입니다',
				lastSlideMessage: '마지막 슬라이드 입니다',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			pagination: {
				el: '.swiper-pagination',
			},
			spaceBetween: 8,
		});

		//post-deal
		var post_deal = new Swiper('.swiper-container.post-deal', {
			slidesPerView: 2.22,
			spaceBetween: 8,
			observer: true,
			observeParents: true,
			speed : 1000,
			freeMode: true,
			autoplay: false,
		});

		//post-pick
		//post-pick-head
		var Head_pick = new Swiper(".pick-head", {
			slidesPerView: "auto",
			spaceBetween: 0,
			autoHeight: true,
			preventClicks: true,
			preventClicksPropagation: false,
			observer: true,
			observeParents: true
		});
		var $pickHd = $('.pick-head .swiper-wrapper .swiper-slide .btn');
		$pickHd.click(function(){
			var target = $(this).parent();
			$pickHd.parent().removeClass('on')
			target.addClass('on');
			muCenter(target);
		})
		function muCenter(target){
			var snbwrap = $('.pick-head .swiper-wrapper');
			var targetPos = target.position();
			var box = $('.pick-head');
			var boxHarf = box.width()/2;
			var pos;
			var listWidth=0;

			snbwrap.find('.swiper-slide').each(function(){ listWidth += $(this).outerWidth(); })

			var selectTargetPos = targetPos.left + target.outerWidth()/2;
			if (selectTargetPos <= boxHarf) { // left
				pos = 0;
			}else if ((listWidth - selectTargetPos) <= boxHarf) { //right
				pos = listWidth-box.width();
			}else {
				pos = selectTargetPos - boxHarf;
			}

			setTimeout(function(){snbwrap.css({
				"transform": "translate3d("+ (pos*-1) +"px, 0, 0)",
				"transition-duration": "500ms"
			})}, 200);
		}
		$(".pick-head li .btn").click(function(){
			var itActive = $(this).attr('data-tab');
			$(".pick-head li .btn").removeClass('active');
			$(".pick-cont").removeClass('active');
			$(this).addClass('active');
			$('#'+itActive).addClass('active');
		});

		//post-pick-post
		var post_pick = new Swiper(".pick-cont .swiper-container", {
			//slidesPerView: 1,
			loop:true,
			// watchOverflow:true,
			//210520_ 추가 : 슬라이드 1개일 경우 롤링 제거.
			speed: 1000,
			//210520_ 추가 : 자동재생 시간 추가.
			autoplay: {
				delay: 3000,
				disableOnInteraction: false,
			},
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				firstSlideMessage: '첫번째 슬라이드 입니다',
				lastSlideMessage: '마지막 슬라이드 입니다',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			observer: true,
			observeParents: true
		});

		// post-recomm
		// recomm-head
		var Head_recomm = new Swiper(".swiper-container.recomm-head", {
			slidesPerView: "auto",
			spaceBetween: 10,
			autoHeight: true,
			loop:false,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				firstSlideMessage: '첫번째 슬라이드 입니다',
				lastSlideMessage: '마지막 슬라이드 입니다',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
		});
		$(".recomm-head li .btn").click(function(){
			var recommActive = $(this).attr('data-tab');
			$(".recomm-head li .btn").removeClass('active');
			$(".recomm-post").removeClass('active');
			$(this).addClass('active');
			$('#'+recommActive).addClass('active');
		});
		// recomm-post
		var post_recomm = new Swiper(".recomm-post", {
			slidesPerView: 2.22,
			spaceBetween: 8,
			observer: true,
			observeParents: true,
			speed : 1000,
			freeMode: true,
			autoplay: false,
		});

		//210705_수정 : 기획전 배너 2개이상 등록시 슬라이드 각각 실행.
		// post-bnnWide
		// 와이드배너 슬라이드 카운팅
		$(".main_1stage .post-bnnWide").each(function(index){
			var pickbnnWdCont = $(this).find('.swiper-slide');
			var pickbnnWdLength = pickbnnWdCont.length;
			if (pickbnnWdLength < 2) {
				var post_bnnWide = new Swiper ($(this), {
					loop: false,
					watchOverflow: true,
					autoplay: false,
					pagination: false,
				});
			} else {
				var post_bnnWide = new Swiper ($(this), {
					loop: true,
					slidesPerView: 1,
					speed : 1000,
					autoplay: {
						delay: 3000,
						disableOnInteraction: false,
					},
					pagination: {
						el: '.swiper-pagination',
					},
				});
			}
		});

		// post-bnnEvent
		// 이벤트배너 슬라이드 카운팅
		var pickbnnEvCont = $('.post-bnnEvent .swiper-slide');
		var pickbnnEvLength = pickbnnEvCont.length;
		if (pickbnnEvLength < 2) {
			var post_bnnEvent = new Swiper ('.swiper-container.post-bnnEvent', {
				loop: false,
				speed : 1000,
				autoplay: false,
				pagination:false,
			});
		} else {
			var post_bnnEvent = new Swiper ('.swiper-container.post-bnnEvent', {
				loop: true,
				slidesPerView: 1,
				speed : 1000,
				autoplay: {
					delay: 3000,
					disableOnInteraction: false,
				},
				pagination: {
					el: '.swiper-pagination',
				},
			});
		}

		// post-tv
		var post_tv = new Swiper ('.post-tv', {
			loop: true,
			centeredSlides: true,
			speed : 1000,
			autoplay: false,
			pagination: {
				el: '.main_tv .swiper-pagination',
				clickable: true,
			},
		});

	</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");

		// 네이버 인사이트 지연
		(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("202108222155731624_is24_6_01,202108222155731624_is24_6_02");
	</script>
	<!--// Enliple(모비온) Insite naver Quick end -->
</th:block>

</body>
</html>
