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

<th:block layout:fragment="content">
<main role="" id="" class="container br">
	<section class="content br_main">
		<div class="inner sr-only">
			<p class="br_subtitle">브랜드 메인</p>
		</div>

		<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'}">
					<!-- 첫번째 슬라이드 -->
					<div class="inner wide">
						<div class="swiper-container submain_visual">
							<div class="swiper-wrapper">
								<th:block th:each="ContentsData, ContentsStat : ${brandMainLayoutData.ContentsList}">
									<div class="swiper-slide">
										<!-- 210506_추가 : 새창에 띄우기 -->
										<a th:href="${ContentsData.strVar1}" th:target="${ContentsData.contentsType=='SELF'?'_self':'_blank'}" title="현재 창으로 열기">
											<div class="img">
												<img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath2}" alt="">
											</div>
											<div class="txtWrap" th:classappend="${ContentsData.strVar7=='BLACK'?'':'w'}">
												<p class="bMainTitle">
													<input type="hidden" name="mainTitle" th:value="${ContentsData.strTitle1}"/>
												</p>
												<p class="txt_xs" th:text="${ContentsData.subText1}">신상 15% 쿠폰 할인</p>
											</div>
										</a>
									</div>
								</th:block>
							</div>
							<!-- Add Pagination -->
							<div class="swiper-pagination"></div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='005'}">
					<th:block th:each="ContentsData, ContentsStat : ${brandMainLayoutData.ContentsList}">
						<!-- 정보 -->
						<div class="inner">
							<div class="br_top_info" id="brandDesc">
								<p class="br_subtitle brand_title">
									<input type="hidden" name="title" th:value="${contentsTitle}">
								</p>
								<p class="cate">
									<input type="hidden" name="brandTitle" th:value="${ContentsData.strTitle1}">
								</p>
								<p class="desc">
									<input type="hidden" name="brandNote" th:value="${ContentsData.subText1}"/>
								</p>
								<th:block th:if="${ContentsData.strVar1!=null && ContentsData.strVar1!='' && ContentsData.strVar1!='#' }">
									<div class="btn_group_flex">
										<div>
											<a th:if="${isApp != null && isApp == 'true'}" th:href="${'public://?link='+ContentsData.strVar1}" th:target="${ContentsData.contentsType=='SELF'?'_self':'_blank'}" class="btn btn_default">브랜드 사이트<span></span></a>
											<a th:if="${(isApp == null || isApp == 'false' || isApp == '')}" th:href="${ContentsData.strVar1}" th:target="${ContentsData.contentsType=='SELF'?'_self':'_blank'}" class="btn btn_default">브랜드 사이트<span></span></a>
										</div>
									</div>
								</th:block>
							</div>
						</div>
					</th:block>
				</th:block>

				<th:block th:if="${contentsLoc=='007'}">
					<!-- 뉴아이템 슬라이드 -->
					<div class="inner" th:if="${brandMainLayoutData.goodsList != null and !brandMainLayoutData.goodsList.empty}">
						<div class="new_item">
							<p class="br_subtitle" th:text="${contentsTitle}"></p>
							<div class="area_slider">
								<div class="swiper-container">
									<div class="swiper-wrapper">
										<th:block th:each="goodsData, goodsStat : ${brandMainLayoutData.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='SBMM007', planDtlSq=''">관심상품 추가</button>
													<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SBMM007');">
														<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 video-autoplay" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="autoplay" allowFullScreen></iframe>
															</th:block>
															<img 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: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')}"></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,1,'COMMA')}">89,000</span>
															[[${#numbers.formatInteger(goodsData.currPrice,1,'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,1,'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>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='006' || contentsLoc=='014'||contentsLoc=='015'||contentsLoc=='016'}">
					<!-- 배너 슬라이드 -->
					<div class="inner wide" th:if="${brandMainLayoutData.ContentsList!=null and !brandMainLayoutData.ContentsList.empty}">
						<div class="main_1stage">
							<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}" target="_blank" title="새 창으로 열기">
												<div class="bnnbox"> <!-- 210528_ 삭제 : 인라인 style css 제거 -->
													<div class="txtWrap" id="bannerS">
														<p class="bText">
															<input type="hidden" name="bannerDesc" th:value="${ContentsData.strTitle1}">
														</p> <!-- 210614_ 수정 : 줄내림 방식 교체 -->
													</div>
													<img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
												</div>
											</a>
										</div>
									</th:block>
								</div>
								<!-- Add Pagination -->
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='008'}">
					<!-- 베스트아이템 슬라이드 -->
					<div class="inner" th:if="${brandMainLayoutData.goodsList != null and !brandMainLayoutData.goodsList.empty}">
						<div class="pd_together best_item">
							<p class="br_subtitle" th:text="${contentsTitle}">BEST ITEMS</p>
							<div class="area_slider">
								<!-- Swiper -->
								<div class="swiper-container">
									<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' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsFullNm}, ithrCd='', contentsLoc='SBMM008', planDtlSq=''">관심상품 추가</button>
														<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SBMM008');">
															<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 video-autoplay" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
																</th:block>
																<img 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:if="${not #strings.isEmpty(goodsData.goodsTnm)}" th:text="${goodsData.goodsTnm}">#가을 느낌 물씬!!</div>
															<div class="itemName"th:text="${goodsData.goodsFullNm}">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</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,1,'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,1,'COMMA')} + ' ~']]
															</p>
														</a>
													</div>
												</div>
											</div>
										</th:block>
									</div>
									<!-- Add Pagination -->
									<div class="swiper-pagination"></div>
								</div>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='010'}">
					<!-- 룩북 슬라이드 -->
					<div class="inner wide" th:if="${brandMainLayoutData.lookbookList != null and !brandMainLayoutData.lookbookList.empty}">
						<div class="br_lookbook">
							<p class="br_subtitle" th:text="${contentsTitle}"></p>
							<div class="recommendedArea">
								<!-- 상품이미지pic -->
								<div class="area_slider pic_img">
									<div class="swiper-container">
										<div class="swiper-wrapper">
											<th:block th:each="LookbookData, LookbookStat : ${brandMainLayoutData.lookbookList}">
												<div class="swiper-slide">
													<div class="page">
														<div class="pic">
															<span class="thumb" th:style="${'background-image:url(' + @environment.getProperty('domain.image') + LookbookData.sysFileNm + ');'}"></span>
															<!-- 상품피커 -->
															<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+'%;'}">
																	<div>
																		<button type="button" th:onclick="fnGoodsPopup([[${lookbookGoods.sysImgNm}]],[[${lookbookGoods.brandGroupNm}]],[[${lookbookGoods.goodsFullNm}]],[[${lookbookGoods.listPrice}]],[[${lookbookGoods.currPrice}]],[[${lookbookGoods.dcRate}]],[[${lookbookGoods.goodsCd}]],[[${lookbookGoods.stockQty}]],[[${lookbookGoods.soldoutYn}]])"><span class="ico ico_picker"></span></button>
																		<div class="pick_descr">
																			<a href="javascript:void(0);"></a>
																		</div>
																	</div>
																</div>
															</th:block>
															<!-- //상품피커 -->
														</div>
													</div>
												</div>
											</th:block>
										</div>
										<!-- Add Pagination -->
										<div class="swiper-pagination"></div>
									</div>
								</div>
								<!-- //상품이미지pic -->
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='009' or contentsLoc=='017' or contentsLoc=='018' or contentsLoc=='019'}">
					<!-- 엠디픽 슬라이드 -->
					<div class="inner" th:if="${brandMainLayoutData.goodsList != null and !brandMainLayoutData.goodsList.empty}">
						<div class="pd_together md_item">
							<p class="br_subtitle" th:text="${contentsTitle}"></p>
							<div class="area_slider">
								<!-- Swiper -->
								<div class="swiper-container">
									<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' : ''"  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}]], '', '', [[${contentsLoc}]]);">
															<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 video-autoplay" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
																</th:block>
																<img 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:if="${not #strings.isEmpty(goodsData.goodsTnm)}" th:text="${goodsData.goodsTnm}">#가을 느낌 물씬!!</div>
															<div class="itemName" th:text="${goodsData.goodsFullNm}">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</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>
									</div>
									<!-- Add Pagination -->
									<div class="swiper-pagination"></div>
								</div>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='011'}">
					<!-- 스페셜샵 슬라이드 -->
					<div class="inner" th:if="${brandMainLayoutData.planningList != null and !brandMainLayoutData.planningList.empty}">
						<div class="special_shop">
							<p class="br_subtitle" th:text="${contentsTitle}"></p>
							<div class="area_slider">
								<div class="swiper-container">
									<div class="swiper-wrapper">
										<th:block th:each="planningData, planningStat : ${brandMainLayoutData.planningList}">
											<div class="swiper-slide">
												<div class="sp_item">
													<div class="sp_img">
														<a href="javascript:void(0);" th:onclick="cfnGoToPlanDetail([[${planningData.planSq}]])">
															<img th:src="${@environment.getProperty('domain.image') + planningData.mainImg}" alt="">
															<div class="s-text">
																<p th:text="${planningData.planNm}">단 28시간 퓨어 아우터<br>최대 80%세일</p>
																<p th:text="${planningData.dtlTitle1}">신상 아우터 7만원~</p>
															</div>
														</a>
													</div>
													<div class="sp_item">
														<div class="itemsGrp rowtype">
															<th:block th:if="${planningData.planningGoodsList != null and !planningData.planningGoodsList.empty}" th:each="planningGoods, status : ${planningData.planningGoodsList}">
																<div class="item_prod" th:if="${status.count<3}">
																	<div class="item_state">
																		<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${planningGoods.goodsCd}]], '', '', 'SBMM011');">
																			<div class="itemPic">
																				<img class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + planningGoods.sysImgNm}" onerror="noneImg(this)">
																			</div>
																			<p class="itemBrand" th:text="${planningGoods.brandGroupNm}">BRAND NAME</p>
																			<div class="itemName" th:text="${planningGoods.goodsNm}">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
																			<p th:unless="${planningGoods.goodsType=='G056_D'}" class="itemPrice">
																				<span class="itemPrice_original" th:if="${planningGoods.currPrice != planningGoods.listPrice}" th:text="${#numbers.formatInteger(planningGoods.listPrice,1,'COMMA')}">89,000</span>
																				[[${#numbers.formatInteger(planningGoods.currPrice,0,'COMMA')}]]
																				<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>
															</th:block>
														</div>
													</div>
												</div>
											</div>
										</th:block>
									</div>
								</div>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='013'}">
					<!-- brand_product -->
					<div class="inner" th:if="${brandMainLayoutData.goodsList != null and !brandMainLayoutData.goodsList.empty}">
						<div class="brand_product">
							<p class="br_subtitle" th:text="${contentsTitle}"></p>
							<div class="itemsGrp">
							<th:block th:each="goodsData, goodsStat : ${brandMainLayoutData.goodsList}">
<!--								<th:block th:if="${(goodsStat.index%2)==0 or goodsStat.first}">-->

<!--								</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='SBMM013', planDtlSq=''">관심상품 추가</button>
										<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SBMM013');">
											<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 video-autoplay" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
												</th:block>
												<img class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
											</div>
											<p class="itemBrand" th:text="${goodsData.brandGroupNm}">BRAND NAME</p>
											<div class="itemComment" th:if="${not #strings.isEmpty(goodsData.goodsTnm)}" th:text="${goodsData.goodsTnm}">#주문 폭주 상품</div>
											<div class="itemName" th:text="${goodsData.goodsFullNm}">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</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>
											<div class="itemcolorchip" th:if="${goodsData.colorArr != null}">
												<th:block th:each="option, idx : ${goodsData.colorArr}" th:with="colorArray=${#strings.arraySplit(idx.current.replace(',',':'),':')}">
													<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.replace(',',':'),':')}" >
													<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 th:if="${(goodsStat.index%2)== 1 or goodsStat.last}">-->
<!--									<th:block th:utext="'</div>'"></th:block>-->
<!--								</th:block>-->
							</th:block>
							</div>

							<div class="btn_group_flex">
								<div>
									<button class="btn btn_default"  th:onclick="cfnGoToGoodsList([[${brandGroupInfo.brandGroupNo}]],[[${brandGroupInfo.cateGb}]]);">더보기</button>
								</div>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='012'}">
					<!-- 유튜브 슬라이드 -->
					<div class="inner wide" th:if="${brandMainLayoutData.ContentsList != null and !brandMainLayoutData.ContentsList.empty}">
						<div class="youtube">
							<p class="br_subtitle" th:text="${contentsTitle}">STYLE24 TV</p>
							<div class="swiper-container br_youtube_slide">
								<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>
								<!-- Add Pagination -->
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
				</th:block>


<!--			</th:block>-->
		</th:block>
	</section>
</main>

<!-- 픽커모달 -->
<div class="modal fade" id="reco_pop" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

	<a href="#close-modal" rel="modal:close" class="close-modal ">Close</a>
</div>
<!-- //픽커모달 -->
<script th:inline="javascript">
	var goodsImgUrl = [[${@environment.getProperty('upload.goods.view')}]];

	// 픽커모달
	var fnGoodsPopup = function(obj1,obj2,obj3,obj4,obj5,obj6,obj7,obj8,obj9){
		$("#reco_pop .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"><span class="sr_only">제품정보</span></h5>\n';
		tag += '		</div>\n';
		tag += '		<div class="modal-body">\n';
		tag += '			<div class="itemsGrp rowtype">\n';
		tag += '				<div class="item_prod">\n';
		tag += '					<div class="item_state';
		if(obj8 < 1 || obj9 == 'Y'){
			tag += ' soldout';
		}
		tag += '">\n';
		tag += '						<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+obj7+'\',\'\',\'\')">\n';
		tag += '							<div class="itemPic">\n';
		tag += '								<img class="vLHTC pd_img" src="'+goodsImgUrl+'/'+obj1+'?RS=260" alt="" onerror="noneImg(this)">\n';
		tag += '							</div>\n';
		tag += '							<p class="itemBrand">'+obj2+'</p>\n';
		tag += '							<div class="itemName">'+obj3+'</div>\n';
		tag += '							<p class="itemPrice">'+obj5.addComma()+'</p>\n';
		tag += '						</a>\n';
		tag += '					</div>\n';
		tag += '				</div>\n';
		tag += '			</div>\n';
		tag += '		</div>\n';
		tag += '	</div>\n';
		tag += '</div>\n';

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

	$(document).ready(function () {
		$(document).on('click','.item_picker',function(e){
			//$("#reco_pop").modal("show");
			$("body").addClass("recoPop");
			return false;
		});
		$(document).on('click','#reco_pop .close-modal',function(e){
			$("body").removeClass("recoPop");
			return false;
		});

		var spc = $('.swiper-pagination-current');
		var spt = $('.swiper-pagination-total');
		setInterval(function(){
			for(var i=0; i<spc.length; i++){
				if(spc[i].innerText.length < 2){
					var itNum = spc[i].innerText.toString();
					spc[i].innerText = 0+itNum;
				}
			}
			for(var i=0; i<spt.length; i++){
				if(spt[i].innerText.length < 2){
					var itNum2 = spt[i].innerText.toString();
					spt[i].innerText = 0+itNum2;
				}
			}
		}, 10);


		var clNum = 0;
		$(document).on('click', '.br .pnb_mo > button',function(e){
			if(clNum === 0){
				$('.br .pnb_mo > button').css("background", "url(" + _uximgUrl + "/images/mo/ico_btn_narrow.png) center top/1.8rem 2.0rem no-repeat");
				clNum = 1;
			} else {
				$('.br .pnb_mo > button').css("background", "url(" + _uximgUrl + "/images/mo/ico_btn_expand.png) center top/1.8rem 2.0rem no-repeat");
				clNum = 0;
			}
		});


		if(typeof VgControllerClient == 'object' && document.getElementById('pdThumbVideo')){
			var controller = new VgControllerClient({
				target_window: document.getElementById('pdThumbVideo').contentWindow
			});
			controller.on('ready', function() {
	// 			controller.set_ratio('fill');
				controller.set_control_visibility(false);
				controller.play();
			});
		}



	});

	//210728_ 수정 : 슬라이드 1개일때 자동롤링 멈춤.
	// 서브비주얼 슬라이드
	var brCont = $('.submain_visual .swiper-slide');
	var brLength = brCont.length;
	if (brLength < 2) {
		var submainVisualSwiper = new Swiper('.swiper-container.submain_visual', {
			loop:false,
			//210414_자동롤링 추가
			speed: 1000,
			watchOverflow: true,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				firstSlideMessage: '첫번째 슬라이드 입니다',
				lastSlideMessage: '마지막 슬라이드 입니다',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			pagination: {
				el: '.swiper-pagination',
				type: 'fraction',
				//renderCustom: function (swiper, current, total) {
				//	return current + ' of ' + total;
				//}
			}
		});
	}else{
		var submainVisualSwiper = new Swiper('.swiper-container.submain_visual', {
			loop:true,
			//210414_자동롤링 추가
			speed: 1000,
			autoplay : {
				delay : 3000,   // 시간 설정
				disableOnInteraction: false,
			},
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				prevSlideMessage: '이전 슬라이드',
				nextSlideMessage: '다음 슬라이드',
				firstSlideMessage: '첫번째 슬라이드 입니다',
				lastSlideMessage: '마지막 슬라이드 입니다',
				paginationBulletMessage: '슬라이드 {{index}}로 이동',
			},
			pagination: {
				el: '.swiper-pagination',
				type: 'fraction',
				//renderCustom: function (swiper, current, total) {
				//	return current + ' of ' + total;
				//}
			}
		});
	}

	//210705_수정 : 기획전 배너 2개이상 등록시 슬라이드 각각 실행.
	// post-bnnWide (210602_ 교체)
	// 와이드배너 슬라이드 카운팅
	$(".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), {
				speed: 1000,
				loop: false,
				watchOverflow: true,
				autoplay: false,
				pagination: false,
			});
		} else {
			var post_bnnWide = new Swiper ($(this), {
				loop: true,
				slidesPerView: 1,
				speed: 1000,
				autoplay: {
					delay: 4000,
					disableOnInteraction: false,
				},
				pagination: {
					el: '.swiper-pagination',
				},
			});
		}
	});

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

	// 베스트아이템 슬라이드
	var bestItemSwiper = new Swiper('.best_item .area_slider .swiper-container', {
		slidesPerView: 2.22,
		speed: 1000,
		freeMode: true, // 0902
		spaceBetween: 8,
		a11y: {
			enabled: true,
			notificationClass: 'swiper-notification',
			prevSlideMessage: '이전 슬라이드',
			nextSlideMessage: '다음 슬라이드',
			firstSlideMessage: '첫번째 슬라이드 입니다',
			lastSlideMessage: '마지막 슬라이드 입니다',
			paginationBulletMessage: '슬라이드 {{index}}로 이동',
		},
	});

	// 엠디픽 슬라이드
	var mdItemSwiper = new Swiper('.md_item .area_slider .swiper-container', {
		slidesPerView: 2.22,
		speed: 1000,
		freeMode: true, // 0902
		spaceBetween: 8,
		a11y: {
			enabled: true,
			notificationClass: 'swiper-notification',
			prevSlideMessage: '이전 슬라이드',
			nextSlideMessage: '다음 슬라이드',
			firstSlideMessage: '첫번째 슬라이드 입니다',
			lastSlideMessage: '마지막 슬라이드 입니다',
			paginationBulletMessage: '슬라이드 {{index}}로 이동',
		},
	});

	// 스페셜샵 슬라이드
	var specialShopSwiper = new Swiper('.special_shop .area_slider .swiper-container', {
		slidesPerView: 1,
		speed: 1000,
		spaceBetween: 10,
		a11y: {
			enabled: true,
			notificationClass: 'swiper-notification',
			prevSlideMessage: '이전 슬라이드',
			nextSlideMessage: '다음 슬라이드',
			firstSlideMessage: '첫번째 슬라이드 입니다',
			lastSlideMessage: '마지막 슬라이드 입니다',
			paginationBulletMessage: '슬라이드 {{index}}로 이동',
		},
	});

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

	// 유튜브 슬라이드
	var swiperYoutu = new Swiper('.swiper-container.br_youtube_slide', {
		speed: 1000,
		a11y: {
			enabled: true,
			notificationClass: 'swiper-notification',
			prevSlideMessage: '이전 슬라이드',
			nextSlideMessage: '다음 슬라이드',
			firstSlideMessage: '첫번째 슬라이드 입니다',
			lastSlideMessage: '마지막 슬라이드 입니다',
			paginationBulletMessage: '슬라이드 {{index}}로 이동',
		},
		pagination: {
			el: '.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);
	}
</script>

</th:block>

</body>
</html>
