<!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/BrandLayoutWeb">
<!--
 *******************************************************************************
 * @source  : BrandMainFormWeb.html
 * @desc    : 브랜드메인 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.16   gagamel     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
<div id="container" class="container brand_main">
	<div class="wrap ">
		<th:block th:if="${brandMainLayoutList}" th:each="brandMainLayoutData, mainStat : ${brandMainLayoutList}" th:with="contentsLoc=${#strings.replace(brandMainLayoutData.contentsLoc,'SBM','')},contentsTitle=${brandMainLayoutData.contentsTitle}">
<!--			<th:block th:if="${brandMainLayoutData.ContentsList != null and !brandMainLayoutData.ContentsList.empty}">-->
				<th:block th:if="${contentsLoc=='004'}">
					<!-- 1. 비주얼 슬라이드 -->
					<div class="content wide main_visual brand_visual" th:if="${brandMainLayoutData.ContentsList != null}">
						<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 : ${brandMainLayoutData.ContentsList}">
										<div class="swiper-slide">
											<th:block th:if="${ContentsData.imgPath1!=null && ContentsData.imgPath1!=''}">
												<div class="txtWrap">
													<dl th:class="${ContentsData.strVar7=='BLACK'?'':'w'}" id="textArea">
														<dd class="bMainTitle">
															<input type="hidden" name="mainTitle" th:value="${ContentsData.strTitle1}"/>
														</dd>
														<dd class="txt_xs" th:text="${ContentsData.subText1}"></dd>
													</dl>
													<a th:if="${ContentsData.contentsType=='SELF'}" th:href="${ContentsData.strVar1}" target="_self" title="새 창으로 열기" class="btn"><span>자세히 보기</span></a>
													<a th:unless="${ContentsData.contentsType=='SELF'}" th:href="${ContentsData.strVar1}" target="_blank" title="새 창으로 열기" class="btn"><span>자세히 보기</span></a>
												</div>
												<div class="imgWrap">
													<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
												</div>
											</th:block>
										</div>
									</th:block>
								</div>
								<!-- If we need pagination -->
								<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>
							<!-- If we need navigation buttons -->
							<div class="swiper-button-prev sbtn01_lb"></div>
							<div class="swiper-button-next sbtn01_rb"></div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='005'}">
					<!-- brand_info -->
					<th:block th:each="ContentsData, ContentsStat : ${brandMainLayoutData.ContentsList}">
						<div class="content brand_info">
							<div class="cont_body clear">
								<div class="brand_tit">
									<p class="brand_title">
										<input type="hidden" name="title" th:value="${contentsTitle}">
									</p>
									<th:block th:if="${ContentsData.strVar1!=null && ContentsData.strVar1!='' && ContentsData.strVar1!='#' }">
										<a th:if="${ContentsData.contentsType=='SELF'}" th:href="${ContentsData.strVar1}" target="_self">브랜드 사이트</a>
										<a th:unless="${ContentsData.contentsType=='SELF'}" th:href="${ContentsData.strVar1}" target="_blank">브랜드 사이트</a>
									</th:block>
								</div>
								<div class="brand_desc" id="brandDesc">
									<p class="cate">
										<input type="hidden" name="brandTitle" th:value="${ContentsData.strTitle1}">
									</p>
									<p class="desc" > <!--th:text="${ContentsData.subText1}"-->
										<input type="hidden" name="brandNote" th:value="${ContentsData.subText1}"/>
									</p>
								</div>
							</div>
						</div>
					</th:block>
				</th:block>

				<!-- new_item -->
				<th:block th:if="${contentsLoc=='007'}">
					<div class="content new_item" th:if="${brandMainLayoutData.goodsList != null and !brandMainLayoutData.goodsList.empty}">
						<div class="cont_head">
							<p class="displayH t_c" th:text="${contentsTitle}"></p>
						</div>
						<div class="cont_body" th:if="${brandMainLayoutData.goodsList != null}">
							<div class="swiper-container post-trendy">
								<div class="swiper-wrapper">
									<th:block th:each="goodsData, goodsStat : ${brandMainLayoutData.goodsList}">
										<div class="swiper-slide">
											<div class="item_prod">
												<div class="item_state">
													<button type="button" class="itemLike" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit active' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsFullNm}, ithrCd='', contentsLoc='SBM007', planDtlSq=''">관심상품 추가</button>
													<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SBM007');">
														<div class=" itemPic">
															<th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current.replace(',',':'),':')}">
																<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}"></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 class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')+'원'}"></p>-->
														<p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice">
															[[${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')} + 원]]
															<span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,1,'COMMA')}"></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,1,'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=='006' || contentsLoc=='014'||contentsLoc=='015'||contentsLoc=='016'}">
					<div class="content wide main_1stage" th:classappend="${contentsLoc=='006' or contentsLoc=='014' or contentsLoc=='015' or contentsLoc=='016'?'bs'+contentsLoc :''}" th:if="${brandMainLayoutData.ContentsList != null and !brandMainLayoutData.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 : ${brandMainLayoutData.ContentsList}">
										<div class="swiper-slide">
											<a th:href="${ContentsData.strVar1}">
												<div class="bnnbox" id="bannerS" style="background:#e3e7ea;">
													<div class="txtWrap">
														<p class="bText">
															<input type="hidden" name="bannerDesc" th:value="${ContentsData.strTitle1}">
														</p>
														<!--<p>아우터 + 이너 단독세일</p>-->
<!--														<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>
										</div>
									</th:block>
								</div>
								<div class="swiper-button-prev "></div>
								<div class="swiper-button-next "></div>
							</div>
						</div>
					</div>
				</th:block>

				<!-- best_item -->
				<th:block th:if="${contentsLoc=='008'}">
					<div class="content best_item" th:if="${brandMainLayoutData.goodsList != null and !brandMainLayoutData.goodsList.empty}">
						<div class="cont_head">
							<p class="displayH t_c" th:text="${contentsTitle}"></p>
						</div>
						<div class="cont_body" th:if="${brandMainLayoutData.goodsList != null}">
							<div class="swiper-container">
								<div class="swiper-wrapper">
									<th:block th:each="goodsData, goodsStat : ${brandMainLayoutData.goodsList}">
										<div class="swiper-slide">
											<div class="item_prod sUiXc">
												<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='SBM008', planDtlSq=''">관심상품 추가</button>
													<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SBM008');">
														<div class="shape" th:classappend="${goodsStat.count==1}?'ranker'"><span th:text="${goodsStat.index+1}"></span></div>
														<div class="itemPic">
															<th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current.replace(',',':'),':')}">
																<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.replace('https:', '').replace('//image.istyle24.com/Upload/ProductImage/','')}" onerror="noneImg(this)">
														</div>
														<p class="itemBrand" th:text="${goodsData.brandGroupNm}"></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,1,'COMMA')} + 원]]
															<span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,1,'COMMA')}"></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,1,'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>

				<!-- LOOKBOOK -->
				<th:block th:if="${contentsLoc=='010'}">
					<div class="content wide br_lookbook" th:if="${brandMainLayoutData.lookbookList != null and !brandMainLayoutData.lookbookList.empty}">
						<div class="cont_head">
							<p class="displayH t_c" th:text="${contentsTitle}"></p>
						</div>
						<div class="cont_body">
							<div class="swiper-container">
								<div class="swiper-wrapper">
									<th:block th:each="LookbookData, LookbookStat : ${brandMainLayoutData.lookbookList}">
										<div class="swiper-slide">
											<div class="bt_lb_item">
												<img class="vLHTC lb_img" th:src="${@environment.getProperty('domain.image')+LookbookData.sysFileNm}" alt="BLUE-a" />
												<th:block th:if="${LookbookData.lookbookGoodsList != null and !LookbookData.lookbookGoodsList.empty}" th:each="lookbookGoods, status : ${LookbookData.lookbookGoodsList}">
													<div class="item_picker" th:style="${'left:'+lookbookGoods.xlim+'%; top:'+lookbookGoods.ylim+'%;'}">
														<!--<button type="button" id="btn_lookbook_picker01" ><span class="ico ico_picker"></span></button>-->
														<button type="button" th:onclick="fnGoodsPopup([[${lookbookGoods.sysImgNm}]],[[${lookbookGoods.brandGroupNm}]],[[${lookbookGoods.goodsFullNm}]],[[${lookbookGoods.listPrice}]],[[${lookbookGoods.currPrice}]],[[${lookbookGoods.dcRate}]],[[${lookbookGoods.goodsCd}]])"><span class="ico ico_picker"></span></button>
<!--														<button type="button" th:onclick="fnLookbookPicker(this,[[${lookbookGoods.goodsCd}]]);"><span class="ico ico_picker"></span></button>-->
														<div class="pick_descr">
															<a href="javascript:void(0);">
															</a>
														</div>
													</div>
												</th:block>
											</div>
										</div>
									</th:block>
								</div>
								<div class="swiper-button-prev white"></div>
								<div class="swiper-button-next white"></div>
							</div>
							<div class="swiper-pagination"></div>
						</div>
					</div>
				</th:block>

				<!-- MD’s PICK -->
				<th:block th:if="${contentsLoc=='009' or contentsLoc=='017' or contentsLoc=='018' or contentsLoc=='019'}">
					<div class="content md_item" th:classappend="${contentsLoc=='009' or contentsLoc=='017' or contentsLoc=='018' or contentsLoc=='019'?'md'+contentsLoc :''}" th:if="${brandMainLayoutData.goodsList != null and !brandMainLayoutData.goodsList.empty}">
						<div class="cont_head">
							<p class="displayH t_c" th:text="${contentsTitle}"></p>
						</div>
						<div class="cont_body" th:if="${brandMainLayoutData.goodsList != null}">
							<div class="swiper-container">
								<div class="swiper-wrapper">
									<th:block th:each="goodsData, goodsStat : ${brandMainLayoutData.goodsList}">
									<div class="swiper-slide">
										<div class="item_prod sUiXc">
											<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=${contentsLoc}, planDtlSq=''">관심상품 추가</button>
												<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SBM009');">
													<div class="itemPic">
														<th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current.replace(',',':'),':')}">
															<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.replace('https:', '').replace('//image.istyle24.com/Upload/ProductImage/','')}" 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}">#베이직 셔츠의 정수1</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,1,'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>

				<!-- special_shop -->
				<th:block th:if="${contentsLoc=='011'}">
					<div class="content wide special_shop" th:if="${brandMainLayoutData.planningList != null and !brandMainLayoutData.planningList.empty}">
						<div class="cont_head">
							<p class="displayH t_c" th:text="${contentsTitle}"></p>
						</div>
						<div class="cont_body" th:if="${brandMainLayoutData.planningList != null}">
							<div class="spe_thumb">
								<div class="swiper-container">
									<div class="swiper-wrapper">
										<th:block th:each="planningData, planningStat : ${brandMainLayoutData.planningList}">
										<div class="swiper-slide">
											<a href="javascript:void(0);" th:onclick="cfnGoToPlanDetail([[${planningData.planSq}]],[[${brandGroupInfo.brandGroupNo}]]);">
												<div class="txtWrap">
													<p th:text="${planningData.planNm}">티.바지.점퍼의 계절!</p>
													<!--<p>가을 전격 오픈</p>-->
													<span th:text="${planningData.dtlTitle1}"></span>
												</div>
												<img th:src="${@environment.getProperty('domain.image') + '/' + planningData.mainImg}"> alt="">
											</a>
										</div>
										</th:block>
									</div>
								</div>
								<div class="swiper-button-prev white"></div>
								<div class="swiper-button-next white"></div>
							</div>
							<div class="spe_pr_list" >
								<div class="slide_wrap">
									<th:block th:each="planningData, planningStat : ${brandMainLayoutData.planningList}">
										<div class="spe_sl">
											<div class="swiper-container">
												<div class="swiper-wrapper">
													<th:block th:if="${planningData.planningGoodsList != null and !planningData.planningGoodsList.empty}" th:each="planningGoods, status : ${planningData.planningGoodsList}">
														<div class="swiper-slide view">
															<div class="item_prod">
																<div class="item_state">
																	<a href="javascript:void(0);" class=" itemLink" th:onclick="cfnGoToGoodsDetail([[${planningGoods.goodsCd}]], '', '', 'SBM011');">
																		<div class="itemPic">
																			<img alt="BLACK-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + planningGoods.sysImgNm}" onerror="noneImg(this)">
																		</div>
																		<div class="itemName" th:text="${planningGoods.goodsNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
																		<p th:unless="${planningGoods.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(planningGoods.currPrice,0,'COMMA')} + 원]]
																			<span class="itemPrice_original" th:if="${planningGoods.currPrice != planningGoods.listPrice}" 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>
																		<p th:if="${planningGoods.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(planningGoods.currPrice,0,'COMMA')} + '원 ~']]
																		</p>
																	</a>
																</div>
															</div>
														</div>
													</th:block>
												</div>
											</div>
											<div class="swiper-scrollbar"></div>
										</div>
									</th:block>
								</div>
							</div>
						</div>
					</div>
				</th:block>

				<!-- brand_product -->
				<th:block th:if="${contentsLoc=='013'}">
					<div class="content brand_product" th:if="${brandMainLayoutData.goodsList != null and !brandMainLayoutData.goodsList.empty}">
						<div class="cont_head">
							<p class="displayH t_c" th:text="${contentsTitle}"></p>
						</div>
						<div class="cont_body">
							<div class="itemsGrp">
								<th:block th:each="goodsData, goodsStat : ${brandMainLayoutData.goodsList}">
									<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='SBM013', planDtlSq=''">관심상품 추가</button>
											<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SBM013');">
												<div class="itemPic">
													<th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current.replace(',',':'),':')}">
														<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>
												<p class="itemBrand" th:text="${goodsData.brandGroupNm}"></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>
												<div class="itemcolorchip" th:if="${goodsData.colorArr != null}">
													<th:block th:each="option, idx : ${goodsData.colorArr}" th:with="colorArray=${#strings.arraySplit(idx.current,':')}">
														<span th:if="${colorArray[1]=='#FFFFFF'}" th:style="${'background-color:'+colorArray[1]+';border:1px solid #aaa;'}" class="chip_color" th:value="${colorArray[0]}"></span>
														<span th:if="${colorArray[1]!='#FFFFFF'}" th:style="${'background-color:'+colorArray[1]+';'}" class="chip_color" th:value="${colorArray[0]}"></span>
													</th:block>
												</div>
												<p class="itemBadge" th:if="${goodsData.benefitArr != null}">
													<th:block th:each="option, idx : ${goodsData.benefitArr}" th:with="iconArray=${#strings.arraySplit(idx.current,':')}" >
														<span class="badge13" th:if="${idx.index<3}" th:value="${iconArray[0]}" th:text="${iconArray[1]}"></span>
													</th:block>
												</p>
											</a>
										</div>
									</div>
								</th:block>
							</div>
							<div class="btn_wrap">
								<button type="button" class="btn btn_md" th:onclick="cfnGoToGoodsList([[${brandGroupInfo.brandGroupNo}]],[[${brandGroupInfo.cateGb}]]);"><span>더 많은 상품보기</span></button>
							</div>
						</div>
					</div>
				</th:block>

				<!-- main_tv -->
				<th:block th:if="${contentsLoc=='012'}">
					<div class="content wide main_tv" th:if="${brandMainLayoutData.ContentsList != null and !brandMainLayoutData.ContentsList.empty}">
						<div class="cont_head">
							<p class="displayH t_c" th:text="${contentsTitle}">TBJ`S TV</p>
						</div>
						<div class="cont_body">
							<div class="slide_wrap">
								<div class="swiper-container post-tv">
									<div class="swiper-wrapper">
										<th:block th:each="item, stat : ${brandMainLayoutData.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-pagination"></div>
							</div>
						</div>
					</div>
				</th:block>
<!--			</th:block>-->
		</th:block>
	</div>
</div>

	<!-- lookbook_picker_상품_팝업 -->
	<div class="modal fade br_lookbook_popup" id="brLookbookPopup" tabindex="-1" role="dialog" aria-labelledby="br_lookbook_label" aria-hidden="true">
<!--		<div class="modal-dialog" role="document">-->
<!--			<div class="modal-content">-->
<!--				<div class="modal-header">-->
<!--					<h5 class="modal-title sr-only" id="br_lookbook_label">상품정보</h5>-->
<!--				</div>-->
<!--				<div class="modal-body">-->
<!--					<div class="itemsGrp">-->
<!--						<div class="item_prod"> &lt;!&ndash; 품절일때 sold_out 클래스 추가 요청 &ndash;&gt;-->
<!--							<div class="item_state">-->
<!--								<div class="itemLink">-->
<!--									<div class="itemPic">-->
<!--										<img alt="BLACK-a" class=" vLHTC pd_img" src="">-->
<!--									</div>-->
<!--									<p class="itemBrand"></p>-->
<!--									<div class="itemName"></div>-->
<!--									<span class="itemPrice_original"></span>-->
<!--									<p class="itemPrice">-->
<!--										<span class="itemPercent"></span>-->
<!--									</p>-->
<!--									<button type="button" class="btn btn_default"><span>자세히 보기</span></button>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--				</div>-->
<!--			</div>-->
<!--		</div>-->
	</div>
	<!-- //lookbook_picker_상품_팝업 -->
<script th:inline="javascript">
/*<![CDATA[*/
var brandMainLayoutList = [[${brandMainLayoutList}]];
var goodsImgUrl = [[${@environment.getProperty('upload.goods.view')}]];
var fnGoodsPopup = function(obj1,obj2,obj3,obj4,obj5,obj6,obj7){
	$("#brLookbookPopup .modal-dialog").remove();
	var tag = '';

	tag += '	<div class="modal-dialog" role="document">\n';
	tag += '		<div class="modal-content">\n';
	tag += '			<div class="modal-header">\n';
	tag += '				<h5 class="modal-title sr-only" id="br_lookbook_label">상품정보</h5>\n';
	tag += '			</div>\n';
	tag += '			<div class="modal-body">\n';
	tag += '				<div class="itemsGrp">\n';
	tag += '					<div class="item_prod">\n';
	tag += '						<div class="item_state">\n';
	tag += '							<div class="itemLink">\n';
	tag += '								<div class="itemPic">\n';
	tag += '									<img alt="BLACK-a" class=" vLHTC pd_img" src="'+goodsImgUrl+'/'+obj1+'?RS=260"  onerror="noneImg(this)">\n'; //onerror="this.src='/images/pc/thumb/bg_item_none.png'"
	tag += '								</div>\n';
	tag += '								<p class="itemBrand">'+obj2+'</p>\n';
	tag += '								<div class="itemName">'+obj3+'</div>\n';
	tag += '								<span class="itemPrice_original">'+obj4.addComma()+'</span>\n';
	tag += '								<p class="itemPrice">'+obj5.addComma()+'\n';
	if(obj6>0){
		tag += '									<span class="itemPercent">'+obj6+'%</span>\n';
	}
	tag += '								</p>\n';
	tag += '								<button type="button" class="btn btn_default" onclick="cfnGoToGoodsDetail(\''+obj7+'\',\'\',\'\')"><span>자세히 보기</span></button>\n';
	tag += '							</div>\n';
	tag += '						</div>\n';
	tag += '					</div>\n';
	tag += '				</div>\n';
	tag += '			</div>\n';
	tag += '		</div>\n';
	tag += '	</div>\n';

	$("#brLookbookPopup").append(tag);
	$('#brLookbookPopup').modal("show");
}

$(document).ready( function() {

	// 브랜드메인 첫번째 컨텐츠가 메인배너가 아닐때 처리
	$.each(brandMainLayoutList, function (idx, item){
		let firstLoc = '';
		if(item.contentsLoc!='SBM001'&&item.contentsLoc!='SBM002'&&item.contentsLoc!='SBM003'){
			firstLoc = item.contentsLoc;
			if(firstLoc=='SBM004' && item.contentsCnt > 0){
				return false;
			}else{
				$("#container").css('backgroundColor','#fff');
				$(".brand_visual .swiper-slide").each(function (idx,item){
					$(this).find('[id=textArea]').removeClass();
				});
				return false;
			}
		}
	});
	// 컨텐츠 호출
	//$("#br_header").load("br_head.html");
	//$("#footer").load("foot.html");

	/* 210503_수정 : 배너 2개 이상일시 자동 롤링 */
	var postVisualCont = $('.brand_visual .post-visual .swiper-slide');
	var postVisualLength = postVisualCont.length;
	if (postVisualLength < 2) {
		//배너 1개일 때
		var br_post_slide = new Swiper('.brand_main .brand_visual .post-visual', {
			loop: false,
			watchOverflow : true,
			spaceBetween: 60,
			slidesPerView: 'auto',
			centeredSlides: true,
			speed : 1000,
			autoplay: {
				delay: 7000, //210422_수정 : delay 시간 늘림.
				disableOnInteraction: false,
			},
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				firstSlideMessage: '첫번째 슬라이드 입니다',
				lastSlideMessage: '마지막 슬라이드 입니다',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			navigation: {
				nextEl: '.brand_main .brand_visual .swiper-button-next',
				prevEl: '.brand_main .brand_visual .swiper-button-prev',
			},
			pagination: {
				el: '.brand_main .brand_visual .swiper-pagination',
				clickable: true,
			},

			on: {
				slideChangeTransitionStart: function () {
					$('.brand_main .post-visual .swiper-slide-prev').css({'opacity':'0'});
				},
			},
		});
	}else{
		//배너 1개 이상일 때
		var br_post_slide = new Swiper('.brand_main .brand_visual .post-visual', {
			loop: true,
			spaceBetween: 60,
			slidesPerView: 'auto',
			centeredSlides: true,
			speed : 1000,
			autoplay: {
				delay: 7000, //210422_수정 : delay 시간 늘림.
				disableOnInteraction: false,
			},
			navigation: {
				nextEl: '.brand_main .brand_visual .swiper-button-next',
				prevEl: '.brand_main .brand_visual .swiper-button-prev',
			},
			pagination: {
				el: '.brand_main .brand_visual .swiper-pagination',
				clickable: true,
			},

			on: {
				slideChangeTransitionStart: function () {
					$('.brand_main .post-visual .swiper-slide-prev').css({'opacity':'0'});
				},
			},
		});
	}
	/* //210503_수정 : 배너 2개 이상일시 자동 롤링 */

	//VISUAL SLIDE Control - PAUSE
	$(document).on('click','.brand_main .brand_visual .slide-curb-pause',function(e){
		br_post_slide.autoplay.stop();
		$(this).hide();
		$('.brand_main .brand_visual .slide-curb-play').show();
	});

	//VISUAL SLIDE Control - PLAY
	$(document).on('click','.brand_main .brand_visual .slide-curb-play',function(e){
		br_post_slide.autoplay.start();
		$(this).hide();
		$('.brand_main .brand_visual .slide-curb-pause').show();
	});


	/* SLIDE - NEW ITEMS */
	var br_trendy_slide = new Swiper('.brand_main .new_item .swiper-container', {
		watchSlidesProgress: true,
		watchSlidesVisibility: true,
		allowTouchMove: false,
		speed : 1000,
		autoplay: {
			delay: 3000,
			disableOnInteraction:false,
		},
		a11y: {
			enabled: true,
			notificationClass: 'swiper-notification',
			prevSlideMessage: '이전 슬라이드',
			nextSlideMessage: '다음 슬라이드',
			firstSlideMessage: '첫번째 슬라이드 입니다',
			lastSlideMessage: '마지막 슬라이드 입니다',
			paginationBulletMessage: '슬라이드 {{index}}로 이동',
		},
		navigation: {
			nextEl: '.new_item .swiper-button-next',
			prevEl: '.new_item .swiper-button-prev',
		},
		// pagination: {
		// 	el: '.new_item .swiper-pagination',
		// 	clickable: true,
		// },
		slidesPerView: 'auto',
		spaceBetween: 22,
	});

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

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

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

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

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

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

	//210705_수정 : 기획전 배너 2개이상 등록시 슬라이드 각각 실행.
	$(".brand_main .main_1stage .post-bnnWide").each(function(index){
		var pickBnnCont = $(this).find('.swiper-slide');
		var pickBnnLength = pickBnnCont.length;
		if (pickBnnLength < 2) {
			/* SLIDE - WIDE BANNER */
			var br_bn_slide = new Swiper ($(this), {
				loop: false,
				watchOverflow : true, //210503_추가 : 슬라이드 1개일때 롤링 막는 기능 추가.
				autoHeight : true,
				slidesPerView: 1,
				speed : 1000,
				a11y: {
					enabled: true,
					notificationClass: 'swiper-notification',
					prevSlideMessage: '이전 슬라이드',
					nextSlideMessage: '다음 슬라이드',
					paginationBulletMessage: '슬라이드 {{index}}로 이동',
				},
				navigation: {
					nextEl: '.main_1stage .swiper-button-next',
					prevEl: '.main_1stage .swiper-button-prev',
				},
			});
		}else{
			/* SLIDE - WIDE BANNER */
			var br_bn_slide = new Swiper ($(this), {
				loop: true,
				autoHeight : true,
				slidesPerView: 1,
				speed : 1000,
				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',
				},
			});
		}
	});

	/* SLIDE - BEST ITEMS */
	var bestItemCont = $('.best_item .swiper-slide');
	var bestItemLength = bestItemCont.length;
	if(bestItemLength < 6){
		var br_best_slide = new Swiper('.brand_main .best_item .swiper-container', {
			navigation: {
				nextEl: '.best_item .swiper-button-next',
				prevEl: '.best_item .swiper-button-prev',
			},
			loop:false,
			slidesPerView: 5,
			// slidesPerGroup:5, //210429_추가 : slidesPerGroup 추가.
			spaceBetween: 22,
			speed : 1000,
			pagination: {
				el: '.best_item .swiper-pagination',
				clickable: true,
			},
		});
	}else{
		var br_best_slide = new Swiper('.brand_main .best_item .swiper-container', {
			navigation: {
				nextEl: '.best_item .swiper-button-next',
				prevEl: '.best_item .swiper-button-prev',
			},
			loop:true,
			slidesPerView: 5,
			slidesPerGroup:5, //210429_추가 : slidesPerGroup 추가.
			spaceBetween: 22,
			speed : 1000,
			pagination: {
				el: '.best_item .swiper-pagination',
				clickable: true,
			},
		});
	}


	/* md추천, 추천상품1,2,3 같은 모듈써서 스크립트 충돌나 컨텐츠별로 분리함 */
	/* SLIDE - MD’S PICK */
	var mdPick009Cont = $('.md009 .swiper-slide');
	var mdPick009Length = mdPick009Cont.length;
	if(mdPick009Length < 6){
		var br_md_slide = new Swiper('.brand_main .md009 .swiper-container', {
			initialSlide: 0,
			navigation: {
				nextEl: '.md009 .swiper-button-next',
				prevEl: '.md009 .swiper-button-prev',
			},
			loop: false,
			slidesPerView: 5,
			//slidesPerGroup:5, //210429_추가 : slidesPerGroup 추가.
			spaceBetween: 22,
			speed : 1000,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			pagination: {
				el: '.md009 .swiper-pagination',
				clickable: true,
			},
		});
	}else{
		var br_md_slide = new Swiper('.brand_main .md009 .swiper-container', {
			navigation: {
				nextEl: '.md009 .swiper-button-next',
				prevEl: '.md009 .swiper-button-prev',
			},
			loop:true,
			slidesPerView: 5,
			slidesPerGroup:5, //210429_추가 : slidesPerGroup 추가.
			spaceBetween: 22,
			speed : 1000,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			pagination: {
				el: '.md009 .swiper-pagination',
				clickable: true,
			},
		});
	}

	/* SLIDE - MD’S PICK */
	var mdPick017Cont = $('.md017 .swiper-slide');
	var mdPick017Length = mdPick017Cont.length;
	if(mdPick017Length < 6){
		var br_md_slide = new Swiper('.brand_main .md017 .swiper-container', {
			initialSlide: 0,
			navigation: {
				nextEl: '.md017 .swiper-button-next',
				prevEl: '.md017 .swiper-button-prev',
			},
			loop: false,
			slidesPerView: 5,
			//slidesPerGroup:5, //210429_추가 : slidesPerGroup 추가.
			spaceBetween: 22,
			speed : 1000,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			pagination: {
				el: '.md017 .swiper-pagination',
				clickable: true,
			},
		});
	}else{
		var br_md_slide = new Swiper('.brand_main .md017 .swiper-container', {
			navigation: {
				nextEl: '.md017 .swiper-button-next',
				prevEl: '.md017 .swiper-button-prev',
			},
			loop:true,
			slidesPerView: 5,
			slidesPerGroup:5, //210429_추가 : slidesPerGroup 추가.
			spaceBetween: 22,
			speed : 1000,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			pagination: {
				el: '.md017 .swiper-pagination',
				clickable: true,
			},
		});
	}

	/* SLIDE - MD’S PICK */
	var mdPick018Cont = $('.md018 .swiper-slide');
	var mdPick018Length = mdPick018Cont.length;
	if(mdPick018Length < 6){
		var br_md_slide = new Swiper('.brand_main .md018 .swiper-container', {
			initialSlide: 0,
			navigation: {
				nextEl: '.md018 .swiper-button-next',
				prevEl: '.md018 .swiper-button-prev',
			},
			loop: false,
			slidesPerView: 5,
			//slidesPerGroup:5, //210429_추가 : slidesPerGroup 추가.
			spaceBetween: 22,
			speed : 1000,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			pagination: {
				el: '.md018 .swiper-pagination',
				clickable: true,
			},
		});
	}else{
		var br_md_slide = new Swiper('.brand_main .md018 .swiper-container', {
			navigation: {
				nextEl: '.md018 .swiper-button-next',
				prevEl: '.md018 .swiper-button-prev',
			},
			loop:true,
			slidesPerView: 5,
			slidesPerGroup:5, //210429_추가 : slidesPerGroup 추가.
			spaceBetween: 22,
			speed : 1000,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			pagination: {
				el: '.md018 .swiper-pagination',
				clickable: true,
			},
		});
	}

	/* SLIDE - MD’S PICK */
	var mdPick019Cont = $('.md019 .swiper-slide');
	var mdPick019Length = mdPick019Cont.length;
	if(mdPick019Length < 6){
		var br_md_slide = new Swiper('.brand_main .md019 .swiper-container', {
			initialSlide: 0,
			navigation: {
				nextEl: '.md019 .swiper-button-next',
				prevEl: '.md019 .swiper-button-prev',
			},
			loop: false,
			slidesPerView: 5,
			//slidesPerGroup:5, //210429_추가 : slidesPerGroup 추가.
			spaceBetween: 22,
			speed : 1000,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			pagination: {
				el: '.md019 .swiper-pagination',
				clickable: true,
			},
		});
	}else{
		var br_md_slide = new Swiper('.brand_main .md019 .swiper-container', {
			navigation: {
				nextEl: '.md019 .swiper-button-next',
				prevEl: '.md019 .swiper-button-prev',
			},
			loop:true,
			slidesPerView: 5,
			slidesPerGroup:5, //210429_추가 : slidesPerGroup 추가.
			spaceBetween: 22,
			speed : 1000,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			pagination: {
				el: '.md019 .swiper-pagination',
				clickable: true,
			},
		});
	}

	/* SLIDE - SPECIAL SHOP */
	$('.brand_main .special_shop .spe_pr_list .spe_sl').hide();
	$('.brand_main .special_shop .spe_pr_list .spe_sl').eq(0).show();

	var br_special_left_slide = new Swiper('.brand_main .special_shop .spe_thumb .swiper-container', {
		navigation: {
			nextEl: '.brand_main .special_shop .swiper-button-next',
			prevEl: '.brand_main .special_shop .swiper-button-prev',
		},
		on: {
			slideChangeTransitionStart: function () {
				$('.brand_main .spe_pr_list .spe_sl').hide();
				$('.brand_main .spe_pr_list .spe_sl').eq(this.realIndex).show();
			},
		},

		loop:true,
	});

	$(".brand_main .special_shop .spe_pr_list .spe_sl .swiper-container").each(function(index, element){
		var $this = $(this);
		$this.addClass('spe' + index);

		var br_special_right_slide = new Swiper('.spe' + index, {
			observer: true,
			observeParents: true,
			watchSlidesProgress: true,
			watchSlidesVisibility: true,
			slidesPerView: 'auto',
			freeMode: true,
			spaceBetween: 20,
			speed:1000,
			scrollbar: {
				el: $('.spe' + index).siblings('.swiper-scrollbar'),
				hide: false,
			},
			watchOverflow: true,
		});

		br_special_right_slide.on('slideChange', function () {
			$(".special_shop .spe_sl .spe" + index).find(".swiper-slide").removeClass('view');
			$(".special_shop .spe_sl .spe" + index).find(".swiper-slide-visible").eq(0).addClass('view');
			$(".special_shop .spe_sl .spe" + index).find(".swiper-slide-visible").eq(1).addClass('view');
			$(".special_shop .spe_sl .spe" + index).find(".swiper-slide-visible").eq(2).addClass('view');
		});

	});

	/* SLIDE - BRAND_LOOKBOOK */
	var br_lookbook_slide = new Swiper('.brand_main .br_lookbook .swiper-container', {
		loop: true,
		slidesPerView: 'auto',
		spaceBetween: 20,
		speed : 1000,
		autoWidth: true,
		autoHeight: true,
		centeredSlides: true,
		autoplay: false,
		navigation: {
			nextEl: '.brand_main .br_lookbook .swiper-button-next',
			prevEl: '.brand_main .br_lookbook .swiper-button-prev',
		},
		pagination: {
			el: '.brand_main .br_lookbook .swiper-pagination',
			clickable: true,
		},
	});


	// BRAND_LOOKBOOK > picker - 룩북_피커_상품정보 팝업
	$(document).on('click','#btn_lookbook_picker01',function(e){
		$("#brLookbookPopup").modal("show");
		return false;
	});


	/* 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: '다음 슬라이드',
				firstSlideMessage: '첫번째 슬라이드 입니다',
				lastSlideMessage: '마지막 슬라이드 입니다',
				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,
			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;
	}

	// 브랜드메인 배너 <br> 처리
	$('.bMainTitle').each(function (){
		let tag = '';
		if(!gagajf.isNull($(this).find("input[name=mainTitle]").val())){
			var brText = $(this).find("input[name=mainTitle]").val();
			tag = fnRemoveHTML(brText);
			$(this).append(tag);
		}
	});

	// 브랜드소개 <br> 처리
	if(!gagajf.isNull($("#brandDesc").find("input[name=brandTitle]").val())){
		var brandDesc = $("#brandDesc").find("input[name=brandTitle]").val();
		var tag = fnRemoveHTML(brandDesc);
		$("#brandDesc .cate").append(tag);
	}

	if(!gagajf.isNull($("#brandDesc").find("input[name=brandNote]").val())){
		var brandDesc = $("#brandDesc").find("input[name=brandNote]").val();
		var tag = fnRemoveHTML(brandDesc);
		$("#brandDesc .desc").append(tag);
	}

	// 배너 슬라이더 <br> 처리
	$('.bText').each(function (){
		let tag = '';
		if(!gagajf.isNull($(this).find("input[name=bannerDesc]").val())){
			var brText = $(this).find("input[name=bannerDesc]").val();
			tag = fnRemoveHTML(brText);
			$(this).append(tag);
		}
	});
	
	// 브랜드 타이틀 <br> 처리
	if(!gagajf.isNull($(".brand_title").find("input[name=title]").val())){
		var brText = $(".brand_title").find("input[name=title]").val();
		let tag = fnRemoveHTML(brText);
		$(".brand_title").append(tag);
	}

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

</th:block>

</body>
</html>
