style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738
							<!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="${mainLayoutData.ContentsList != null and !mainLayoutData.ContentsList.empty}">
				<th:block th:if="${contentsLoc=='001'}">
					<!-- 1. 비주얼 슬라이드 -->
					<div class="content wide main_visual">
						<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'}" th:text="${ContentsData.planBrandGroupNm}"></p>
														<p class="vrt_txt" th:if="${ContentsData.strVar5!='P'}">EVENT</p>
													</th:block>
													<dl th:class="${ContentsData.strVar7=='BLACK'?'':'w'}">
														<dt th:if="${ContentsData.strVar5=='P'}" th:text="${ContentsData.planBrandGroupNm}"></dt>
														<dt th:if="${ContentsData.strVar5!='P'}" >EVENT</dt>
														<dd th:text="${ContentsData.strTitle1}"></dd>
														<!--<dd>NEW ARRIVAL</dd>-->
														<dd class="txt_xs" th:text="${ContentsData.subText1}"></dd>
													</dl>
													<button type="button" class="btn"><span>자세히 보기</span></button>
												</div>
												<!--<img src="/images/pc/thumb/main_visual01.jpg" alt="">-->
												<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 class="cont_foot dpnone">
							CONT-FOOT
						</div>
					</div>
				</th:block>

				<!-- 2. 스타일리포트 -->
				<th:block th:if="${contentsLoc=='002'}">
					<div class="content main_stylereport">
						<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">
										<a th:href="${ContentsData.strVar1}">
											<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
											<dl>
												<dt th:text="${ContentsData.strTitle1}"></dt>
												<dd th:text="${ContentsData.subText1}"></dd>
												<!--<dd>당신을 위해 준비한 아우터 픽을 만나보자</dd>-->
											</dl>
										</a>
									</div>
								</th:block>
							</div>
						</div>
					</div>
				</th:block>

				<!-- 3. 트렌디한 신상아이템 -->
				<th:block th:if="${contentsLoc=='003'}">
					<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">
											<div class="item_prod">
												<div class="item_state">
													<button type="button" class="itemLike" th:classappend="${goodsData.likeIt}">관심상품 추가</button>
													<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM003');">
														<div class=" itemPic">
															<img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}">
														</div>
														<p class="itemBrand" th:text="${goodsData.brandGroupNm}">BRAND NAME</p>
														<div class=" itemName" th:text="${goodsData.goodsFullNm}">스타 착용 여성 퍼 아플리케 오버핏 투마일 웨어링 점퍼</div>
														<p class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">488,000원</p>
														<div class="itemComment">#가을느낌 물씬!</div>
													</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>

				<!-- 5. 프로모션배너 -->
				<th:block th:if="${contentsLoc=='005'}">
					<div class="content main_2stage">
						<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="ui_row" th:if="${ContentsData.contentsType=='1'}">
										<div class="ui_col_6">
											<a th:href="${ContentsData.strVar1}"><img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt=""></a>
										</div>
									</div>
									<div class="ui_row" th:if="${ContentsData.contentsType=='2'}">
										<div class="ui_col_6">
											<a th:href="${ContentsData.strVar1}"><img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt=""></a>
										</div>
										<div class="ui_col_6">
											<a th:href="${ContentsData.strVar2}"><img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath2}" alt=""></a>
										</div>
									</div>
								</th:block>
							</th:block>
						</div>
						<div class="cont_foot dpnone">
							CONT-FOOT
						</div>
					</div>
				</th:block>

				<!-- 6. 타임딜 : 슬라이드 -->
				<th:block th:if="${contentsLoc=='006'}">
					<div class="content wide main_deal" th:if="${mainLayoutData.socialInfo != null}">
						<div class="cont_head">
							<p class="displayH" th:text="${mainLayoutData.contentsTitle}">오늘만<br>이 가격에 만나요</p>
							<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_SOCIAL_MAIN);"><span>전체보기</span></a>
							<div class="deal_progress">
								<div class="bar_current" 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">
												<div class="item_prod">
													<div class="item_state">
														<button type="button" class="itemLike" th:classappend="${goodsData.likeIt}">관심상품 추가</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}">
															</div>
															<p class="itemBrand" th:text="${goodsData.brandEnm}">BRAND NAME</p>
															<div class="itemName" th:text="${goodsData.goodsNm}">여성 체인 프린트 큐롯 스커트 프린트 큐롯 스커트</div>
															<p class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">80,100
																<span class="itemPrice_original" th:text="${#numbers.formatInteger(planningGoods.listPrice,1,'COMMA')}">89,000</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>
															<div class="itemComment">#데일리웨어로 매일입고싶은</div>
														</a>
													</div>
												</div>
											</div>
										</th:block>
									</th:block>
								</div>
								<div class="swiper-controls">
									<div class="swiper-scrollbar"></div>
								</div>
							</div>
						</div>
					</div>
				</th:block>

				<!-- 7. 브랜드픽 -->
				<th:block th:if="${contentsLoc=='007'}">
					<div class="content main_pick">
						<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">
													<th:block th:each="bannerData, bannerStat : ${brandPickData.BannerList}">
														<div class="swiper-slide" th:if="${bannerData.imgPath1 != ''}">
															<div class="text_box">
																<p class="title" th:text="${bannerData.strTitle1}">BUCKAROO<br> 2020 가을 신상 오픈1</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>
														</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">관심상품 추가</button>
															<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM007');">
																<div class="itemPic">
																	<img alt="BLACK-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}">
																</div>
																<div class=" itemName" th:text="${goodsData.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
																<p class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">80,100
																	<span class="itemPrice_original" 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>
																<div class="itemComment">#데일리웨어로 매일입고싶은</div>
															</a>
														</div>
													</div>
												</th:block>
											</div>
										</div>
									</div>
								</th:block>
							</div>
						</div>
					</div>
				</th:block>

				<!-- 8. 가로 긴 배너 슬라이드 -->
				<!-- bnn_1stage -->
				<th:block th:if="${contentsLoc=='008'}">
					<div class="content wide main_1stage">
						<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">
											<th:block th:if="${ContentsData.imgPath1!=null && ContentsData.imgPath1!=''}">
												<a th:href="${ContentsData.strVar1}">
													<div class="bnnbox" style="background:#e3e7ea;">
														<div class="txtWrap ">
															<p th:text="${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>

				<!-- 9. MD추천 스타일 -->
				<th:block th:if="${contentsLoc=='009'}">
					<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" th:classappend="${goodsData.likeIt}">관심상품 추가</button>
																	<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM009');">
																		<div class="itemPic">
																			<img alt="" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}">
																		</div>
																		<p class="itemBrand" th:text="${goodsData.brandGroupNm}">BRAND NAME</p>
																		<div class=" itemName" th:text="${goodsData.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
																		<p class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">80,100
																			<span class="itemPrice_original" 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>
																		<div class="itemComment">#주문 폭주 상품</div>
																	</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:block>


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

var mainLayoutList = [[${mainLayoutList}]];

var targetTime = $("#socailForm").find("input[name=targetTime]").val();
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;
	}
}

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

/* 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: 2000,
		// 	disableOnInteraction: false,
		// },
		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: 2000,
		// 	disableOnInteraction: false,
		// },
		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();
});

/* SLIDE - MAIN_TRENDY */
var main_trendy_slide = new Swiper('.main_trendy .post-trendy', {
	watchSlidesProgress: true,
	watchSlidesVisibility: true,
	allowTouchMove: false,
	speed : 1000,
	autoplay: {
		delay: 30000,
		disableOnInteraction:false,
	},
	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)");
});

/* 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,
	},
});

/* SLIDE - MAIN_PICK */
var main_pick_nav = new Swiper('.main_pick .post-pick-nav', {
	slidesPerView: 6,
	freeMode: false,
	watchSlidesVisibility: true,
	watchSlidesProgress: true,
});
var main_pick_post = new Swiper('.main_pick .post-pick-for', {
	allowTouchMove: false,
	spaceBetween: 10,
	navigation: {
		nextEl: '.main_pick .swiper-button-next',
		prevEl: '.main_pick .swiper-button-prev',
	},
	thumbs: {
		swiper: main_pick_nav
	}
});
var main_pick_lookbook = new Swiper ('.main_pick .post-lookbook', {
	loop: true,
	slidesPerView: 1,
	speed : 1000,
	pagination: {
		el: '.main_pick .post-lookbook .swiper-pagination',
		clickable: true,
	},
});

/* SLIDE - MAIN_BANNER WIDE */
var main_bnnWide_slide = new Swiper ('.main_1stage .post-bnnWide', {
	loop: true,
	slidesPerView: 1,
	// centeredSlides: true,
	speed : 1500,
	autoplay: {
		delay: 4000,
		disableOnInteraction: false,
	},
	navigation: {
		nextEl: '.main_1stage .swiper-button-next',
		prevEl: '.main_1stage .swiper-button-prev',
	},
});

/* 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');
});

var main_recomm_slide = new Swiper ('.main_recomm .post-recomm', {
	slidesPerView: 5,
	speed : 1500,
	autoplay: false,
	spaceBetween: 20,
	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,
});

/* SLIDE - MAIN_RECOMM */
var main_foryou_slide = new Swiper ('.main_foryou .post-sug .swiper-container', {
	allowTouchMove: false,
	loop: true,
	effect: 'fade',
	autoplay: {
		delay: 5000,
		disableOnInteraction: false,
	},
	pagination: {
		el: '.post-sug .swiper-pagination',
		clickable: true,
	},
});
$(".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');
});

/* SLIDE - MAIN_TV */
var main_tv_slide = new Swiper ('.main_tv .post-tv', {
	loop: true,
	slidesPerView: 'auto',
	spaceBetween: 170,
	centeredSlides: true,
	speed : 800,
	autoplay: false,
	navigation: {
		nextEl: '.main_tv .swiper-button-next',
		prevEl: '.main_tv .swiper-button-prev',
	},
	pagination: {
		el: '.main_tv .swiper-pagination',
		clickable: true,
	},
});
/*]]>*/
</script>

</th:block>

</body>
</html>