MallMainFormWeb.html 76 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org"
  4. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  5. layout:decorator="web/common/layout/DefaultLayoutWeb">
  6. <!--
  7. *******************************************************************************
  8. * @source : MallMainFormWeb.html
  9. * @desc : 몰메인 Page
  10. *============================================================================
  11. * STYLE24
  12. * Copyright(C) 2020 TSIT, All rights reserved.
  13. *============================================================================
  14. * VER DATE AUTHOR DESCRIPTION
  15. * === =========== ========== =============================================
  16. * 1.0 2021.01.28 gagamel 최초 작성
  17. *******************************************************************************
  18. -->
  19. <body>
  20. <th:block layout:fragment="content">
  21. <div id="container" class="container main">
  22. <!-- <div class="breadcrumb"> (breadcrumb) </div> -->
  23. <div class="wrap ">
  24. <th:block th:if="${mainLayoutList}" th:each="mainLayoutData, mainStat : ${mainLayoutList}" th:with="contentsLoc=${#strings.replace(mainLayoutData.contentsLoc,'SMM','')}">
  25. <th:block th:if="${contentsLoc=='001'}">
  26. <!-- 1. 비주얼 슬라이드 -->
  27. <div class="content wide main_visual" th:if="${mainLayoutData.ContentsList != null and !mainLayoutData.ContentsList.empty}">
  28. <div class="cont_head dpnone">
  29. <p class="t_c">비주얼 슬라이드</p>
  30. </div>
  31. <div class="cont_body">
  32. <div class="swiper-container post-visual">
  33. <div class="swiper-wrapper ">
  34. <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
  35. <div class="swiper-slide">
  36. <th:block th:if="${ContentsData.imgPath1!=null && ContentsData.imgPath1!=''}">
  37. <div class="txtWrap">
  38. <th:block th:if="${ContentsData.strVar5!=null && ContentsData.strVar5!=''}">
  39. <p class="vrt_txt" th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt<2}" th:text="${ContentsData.planBrandGroupNm}"></p>
  40. <p class="vrt_txt" th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt>1}" th:text="${ContentsData.planBrandGroupNm+' 외'}"></p>
  41. <p class="vrt_txt" th:if="${ContentsData.strVar5=='P' and ContentsData.planGb=='E'}" >EVENT</p>
  42. </th:block>
  43. <dl th:class="${ContentsData.strVar7=='BLACK'?'':'w'}">
  44. <dt th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt<2}" th:text="${ContentsData.planBrandGroupNm}"></dt>
  45. <dt th:if="${ContentsData.strVar5=='P' and ContentsData.planBrandCnt>1}" th:text="${ContentsData.planBrandGroupNm+' 외'}"></dt>
  46. <dt th:if="${ContentsData.strVar5=='P' and ContentsData.planGb=='E' }" >EVENT</dt>
  47. <dd class="mainTitle">
  48. <input type="hidden" name="mainTitlee" th:value="${ContentsData.strTitle1}"/>
  49. </dd>
  50. <!-- <dd>NEW ARRIVAL</dd>-->
  51. <dd class="txt_xs mainSubTitle" th:text="${ContentsData.subText1}">
  52. <!-- <input type="hidden" name="mainSubTitlee" th:value="${ContentsData.subText1}"/>-->
  53. </dd>
  54. </dl>
  55. <button type="button" class="btn" th:onclick="cfnGoToPage([[${ContentsData.strVar1}]]);"><span>자세히 보기</span></button>
  56. </div>
  57. <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
  58. </th:block>
  59. </div>
  60. </th:block>
  61. </div>
  62. <div class="swiper-button-prev sbtn01_lb"></div>
  63. <div class="swiper-button-next sbtn01_rb"></div>
  64. </div>
  65. <div class="swiper-controls">
  66. <div class="swiper-pagination"></div>
  67. <div class="slide-curb">
  68. <div class="slide-curb-play sbtn01_play">슬라이드 재생</div>
  69. <div class="slide-curb-pause sbtn01_stop">슬라이드 정지</div>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </th:block>
  75. <th:block th:if="${contentsLoc=='002'}">
  76. <!-- 2. 스타일리포트 -->
  77. <div class="content main_stylereport" th:if="${mainLayoutData.ContentsList != null and !mainLayoutData.ContentsList.empty}">
  78. <th:block th:if="${mainLayoutData.contentsTitle != null and !mainLayoutData.contentsTitle.empty}">
  79. <div class="cont_head">
  80. <p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}"></p>
  81. </div>
  82. </th:block>
  83. <div class="cont_body">
  84. <div class="ui_row">
  85. <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
  86. <div class="ui_col_3 styleArea" th:if="${ContentsStat.count<5}">
  87. <a th:href="${ContentsData.strVar1}">
  88. <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
  89. <dl>
  90. <dt class="styleTitleC"> <!--th:text="${ContentsData.strTitle1}"-->
  91. <input type="hidden" name="styleTitle" th:value="${ContentsData.strTitle1}"/>
  92. </dt>
  93. <dd class="styleNoteC"> <!--th:text="${ContentsData.subText1}"-->
  94. <input type="hidden" name="styleNote" th:value="${ContentsData.subText1}"/>
  95. </dd>
  96. <!--<dd>당신을 위해 준비한 아우터 픽을 만나보자</dd>-->
  97. </dl>
  98. </a>
  99. </div>
  100. </th:block>
  101. </div>
  102. </div>
  103. </div>
  104. </th:block>
  105. <th:block th:if="${contentsLoc=='003'}">
  106. <!-- 3. 트렌디한 신상아이템 -->
  107. <div class="content main_trendy" th:if="${mainLayoutData.goodsList != null}">
  108. <div class="cont_head">
  109. <p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}"></p>
  110. </div>
  111. <div class="cont_body">
  112. <div class="swiper-container post-trendy">
  113. <div class="swiper-wrapper">
  114. <th:block th:each="goodsData, goodsStat : ${mainLayoutData.goodsList}">
  115. <div class="swiper-slide" th:if="${goodsStat.count<21}">
  116. <div class="item_prod">
  117. <div class="item_state">
  118. <button type="button" class="itemLike" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsFullNm}, ithrCd='', contentsLoc='SMM003', planDtlSq=''">관심상품 추가</button>
  119. <a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM003');">
  120. <div class=" itemPic">
  121. <th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
  122. <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>
  123. <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>
  124. </th:block>
  125. <img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
  126. </div>
  127. <p class="itemBrand" th:text="${goodsData.brandGroupNm}">BRAND NAME</p>
  128. <div class="itemComment" th:unless="${goodsData.goodsTnm == null or goodsData.goodsTnm == ''}" th:text="${goodsData.goodsTnm}">#가을느낌 물씬!</div>
  129. <div class="itemName" th:text="${goodsData.goodsFullNm}">스타 착용 여성 퍼 아플리케 오버핏 투마일 웨어링 점퍼</div>
  130. <p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
  131. <span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,3,'COMMA')}">89,000</span>
  132. <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>
  133. </p>
  134. <p th:if="${goodsData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]] ~</p>
  135. </a>
  136. </div>
  137. </div>
  138. </div>
  139. </th:block>
  140. </div>
  141. </div>
  142. <div class="swiper-pagination"></div>
  143. <div class="swiper-button-prev"></div>
  144. <div class="swiper-button-next"></div>
  145. </div>
  146. </div>
  147. </th:block>
  148. <th:block th:if="${contentsLoc=='004'}">
  149. <!-- 4. 잇 아이템 -->
  150. <div class="content main_it" th:if="${mainLayoutData.BestItemList != null}">
  151. <div class="cont_head">
  152. <p class="displayH" id="id004">
  153. <input type="hidden" name="title" th:value="${mainLayoutData.contentsTitle}">
  154. </p>
  155. <!-- <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">-->
  156. <!-- 2021.08.30 card007 메인 잇 아이템 전체보기 주석처리 추후 주석 제거 필요 -->
  157. <!-- <a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_BEST_MAIN);"><span>전체보기</span></a>-->
  158. <!-- //2021.08.30 card007 메인 잇 아이템 전체보기 주석처리 추후 주석 제거 필요 -->
  159. <!-- </th:block>-->
  160. </div>
  161. <div class="cont_body">
  162. <div class="it_nav">
  163. <ul>
  164. <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.BestItemList}">
  165. <li><button class="btn btn_link" th:attr="data-tab=${'it'+ContentsStat.count}"><span th:text="${ContentsData.cateNm}"></span></button></li>
  166. </th:block>
  167. </ul>
  168. </div>
  169. <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.BestItemList}">
  170. <div class="swiper-container post-it it_item" th:id="${'it'+ContentsStat.count}">
  171. <div class="swiper-wrapper">
  172. <th:block th:each="bestItemData, bestItemStat : ${ContentsData.goodsList}">
  173. <div class="swiper-slide">
  174. <div class=" item_prod sUiXc "> <!-- item_prod ranker d_detail -->
  175. <div class="item_state"> <!-- item_state AD soldout -->
  176. <button type="button" class="itemLike" th:classappend="${bestItemData.likeIt == 'likeit'}? 'likeit' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${bestItemData.goodsCd}, goodsNm=${bestItemData.goodsFullNm}, ithrCd='', contentsLoc='SMM004', planDtlSq=''">관심상품 추가</button>
  177. <a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${bestItemData.goodsCd}]], '', '', 'SMM004');">
  178. <div class="shape" th:classappend="${bestItemStat.count==1}?'ranker'"><span th:text="${bestItemStat.count}"></span></div>
  179. <div class="itemPic">
  180. <th:block th:each="option,idx:${bestItemData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
  181. <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>
  182. <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>
  183. </th:block>
  184. <!-- 2021.08.30 검색엔진데이타 https: 붙여서 넘어옴 처리 -->
  185. <th:block th:if="${#strings.indexOf(bestItemData.sysImgNm, 'https:')} == -1">
  186. <img alt="BLACK-a" class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + bestItemData.sysImgNm.replace('//image.istyle24.com/Upload/ProductImage/','')}" onerror="noneImg(this)">
  187. </th:block>
  188. <th:block th:if="${#strings.indexOf(bestItemData.sysImgNm, 'https:')} == 0">
  189. <img alt="BLACK-a" class="vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + bestItemData.sysImgNm.replace('https://image.istyle24.com/Upload/ProductImage/','')}" onerror="noneImg(this)">
  190. </th:block>
  191. <!-- //2021.08.30 검색엔진데이타 https: 붙여서 넘어옴 처리 -->
  192. </div>
  193. <p class=" itemBrand" th:text="${bestItemData.brandGroupNm}">BRAND NAME</p>
  194. <div class="itemComment" th:unless="${bestItemData.goodsTnm == null or bestItemData.goodsTnm == ''}" th:text="${bestItemData.goodsTnm}">#데일리웨어로 매일입고싶은</div>
  195. <div class="itemName" th:text="${bestItemData.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
  196. <p th:unless="${bestItemData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(bestItemData.currPrice,0,'COMMA')}]]
  197. <span class="itemPrice_original" th:if="${bestItemData.currPrice != bestItemData.listPrice}" th:text="${#numbers.formatInteger(bestItemData.listPrice,3,'COMMA')}">89,000</span>
  198. <span class=" itemPercent" th:if="${bestItemData.currPrice != bestItemData.listPrice}" th:text="${(bestItemData.listPrice == 0 ? 0 : #numbers.formatDecimal((bestItemData.listPrice - bestItemData.currPrice) / (bestItemData.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
  199. </p>
  200. <p th:if="${bestItemData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(bestItemData.currPrice,0,'COMMA')}]] ~</p>
  201. </a>
  202. </div>
  203. </div>
  204. </div>
  205. </th:block>
  206. </div>
  207. <div class="swiper-controls">
  208. <div class="swiper-scrollbar"></div>
  209. </div>
  210. </div>
  211. </th:block>
  212. </div>
  213. </div>
  214. </th:block>
  215. <th:block th:if="${contentsLoc=='005' and !mainLayoutData.ContentsList.empty}">
  216. <!-- 5. 프로모션배너 -->
  217. <div class="content main_2stage" th:if="${mainLayoutData.ContentsList != null}">
  218. <div class="cont_head dpnone">
  219. <p class="t_c">프로모션배너</p>
  220. </div>
  221. <div class="cont_body">
  222. <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
  223. <th:block th:if="${ContentsData.contentsType!=null && ContentsData.contentsType!=''}">
  224. <div class="bnnbox_crop" th:if="${ContentsData.contentsType=='1'}">
  225. <div class=""> <!--style="width: 100%;height: 230px;float: none;overflow: hidden;"-->
  226. <a th:href="${ContentsData.strVar1}" target="_blank">
  227. <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
  228. </a>
  229. </div>
  230. </div>
  231. <div class="bnnbox_crop" th:if="${ContentsData.contentsType=='2'}">
  232. <div class="bnn_half">
  233. <a th:href="${ContentsData.strVar1}" target="_blank">
  234. <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}" alt="">
  235. </a>
  236. </div>
  237. <div class="bnn_half">
  238. <a th:href="${ContentsData.strVar2}" target="_blank">
  239. <img th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath2}" alt="">
  240. </a>
  241. </div>
  242. </div>
  243. </th:block>
  244. </th:block>
  245. </div>
  246. </div>
  247. </th:block>
  248. <th:block th:if="${contentsLoc=='006'}">
  249. <!-- 6. 타임딜 : 슬라이드 -->
  250. <th:block th:each="socialData, socialStat : ${mainLayoutData.socialInfo}">
  251. <div class="content wide main_deal" th:if="${socialData.socialGoodsList != null and !socialData.socialGoodsList.empty}">
  252. <div class="cont_head">
  253. <p class="displayH" id="id006">
  254. <input type="hidden" name="title" th:value="${mainLayoutData.contentsTitle}">
  255. </p>
  256. <a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_SOCIAL_MAIN);"><span>전체보기</span></a>
  257. <div class="deal_progress">
  258. <div class="bar_current" id="barCurrent" style="width:33.333%"><span>HERE</span></div>
  259. <div class="bar_bg"></div>
  260. </div>
  261. <th:block th:each="socialData, socialStat : ${mainLayoutData.socialInfo}">
  262. <form name="socailForm" id="socailForm">
  263. <input type="hidden" name="targetTime" th:value="${socialData.socialEddt}">
  264. </form>
  265. </th:block>
  266. <div class="count" >
  267. <span class="count_tit">남은 시간</span>
  268. <div class="hotdeal">
  269. <div id="countdown">
  270. <div id="tiles"></div>
  271. </div>
  272. <div class="count_time">
  273. <span>HOURS</span>
  274. <span>MINS</span>
  275. <span>SECS</span>
  276. </div>
  277. </div>
  278. </div>
  279. </div>
  280. <div class="cont_body">
  281. <div class="swiper-container post-deal">
  282. <div class="swiper-wrapper">
  283. <!-- <th:block th:each="socialData, socialStat : ${mainLayoutData.socialInfo}">-->
  284. <th:block th:each="goodsData, goodsStat : ${socialData.socialGoodsList}">
  285. <div class="swiper-slide" th:if="${goodsStat.count<21}">
  286. <div class="item_prod">
  287. <div class="item_state">
  288. <button type="button" class="itemLike" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsNm}, ithrCd='', contentsLoc='SMM006', planDtlSq=''">관심상품 추가</button>
  289. <a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM006');">
  290. <div class="itemPic">
  291. <img alt="" class="pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
  292. </div>
  293. <p class="itemBrand" th:text="${goodsData.brandGroupNm}">BRAND NAME</p>
  294. <div class="itemComment" th:unless="${goodsData.goodsTnm == null or goodsData.goodsTnm == ''}" th:text="${goodsData.goodsTnm}">#데일리웨어로 매일입고싶은</div>
  295. <div class="itemName" th:text="${goodsData.goodsNm}">여성 체인 프린트 큐롯 스커트 프린트 큐롯 스커트</div>
  296. <p class="itemPrice">
  297. [[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
  298. <span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,0,'COMMA')} + '원'"></span>
  299. <span class=" itemPercent" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatDecimal(goodsData.dcRate,1,0)} + '%'"></span>
  300. <!--<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>-->
  301. </p>
  302. </a>
  303. </div>
  304. </div>
  305. </div>
  306. </th:block>
  307. <!-- </th:block>-->
  308. </div>
  309. <div class="swiper-controls">
  310. <div class="swiper-scrollbar"></div>
  311. </div>
  312. </div>
  313. </div>
  314. </div>
  315. </th:block>
  316. </th:block>
  317. <th:block th:if="${contentsLoc=='007'}">
  318. <!-- 7. 브랜드픽 -->
  319. <div class="content main_pick" th:if="${mainLayoutData.ContentsList != null and !mainLayoutData.ContentsList.empty}">
  320. <div class="cont_head">
  321. <p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}">브랜드 PICK1</p>
  322. </div>
  323. <div class="cont_body">
  324. <div class="swiper-container post-pick-nav">
  325. <div class="swiper-wrapper">
  326. <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
  327. <div class="swiper-slide"><img th:src="${@environment.getProperty('domain.image')+ContentsData.brandGroupImg}"></div>
  328. </th:block>
  329. </div>
  330. <div class="swiper-button-prev "></div>
  331. <div class="swiper-button-next "></div>
  332. </div>
  333. </div>
  334. <div class="swiper-container post-pick-for">
  335. <div class="swiper-wrapper">
  336. <th:block th:each="brandPickData, brandPickStat : ${mainLayoutData.brandPickList}">
  337. <div class="swiper-slide">
  338. <div class="pick_look">
  339. <div class="swiper-container post-lookbook">
  340. <div class="swiper-wrapper" id="id007">
  341. <th:block th:each="bannerData, bannerStat : ${brandPickData.BannerList}">
  342. <div class="swiper-slide" th:if="${bannerData.imgPath1 != ''}">
  343. <a th:href="${bannerData.strVar1}">
  344. <div class="text_box">
  345. <p class="title">
  346. <input type="hidden" name="title" th:value="${bannerData.strTitle1}">
  347. </p>
  348. <p class="sub_text" th:text="${bannerData.subText1}"> 2020 FALL / WINTER 신상살펴보기1</p>
  349. </div>
  350. <div class="img_box">
  351. <img th:src="${@environment.getProperty('domain.image')+bannerData.imgPath1}" alt="barnd lookbook">
  352. </div>
  353. </a>
  354. </div>
  355. </th:block>
  356. </div>
  357. <div class="swiper-controls">
  358. <div class="swiper-pagination"></div>
  359. </div>
  360. </div>
  361. </div>
  362. <div class="pick_item">
  363. <div class="itemGrp">
  364. <th:block th:each="goodsData, goodsStat : ${brandPickData.goodsList}">
  365. <div class="item_prod" th:if="${goodsStat.count<4}">
  366. <div class="item_state">
  367. <button type="button" class="itemLike" tabindex="0" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsFullNm}, ithrCd='', contentsLoc='SMM007', planDtlSq=''">관심상품 추가</button>
  368. <a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM007');">
  369. <div class="itemPic">
  370. <th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
  371. <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>
  372. <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>
  373. </th:block>
  374. <img alt="BLACK-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
  375. </div>
  376. <div class="itemComment" th:unless="${goodsData.goodsTnm == null or goodsData.goodsTnm == ''}" th:text="${goodsData.goodsTnm}">#데일리웨어로 매일입고싶은</div>
  377. <div class="itemName" th:text="${goodsData.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
  378. <p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice" th:text="${#numbers.formatInteger(goodsData.currPrice,1,'COMMA')}">80,100
  379. <span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,1,'COMMA')}">89,000</span>
  380. <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>
  381. </p>
  382. <p th:if="${goodsData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]] ~</p>
  383. </a>
  384. </div>
  385. </div>
  386. </th:block>
  387. </div>
  388. </div>
  389. </div>
  390. </th:block>
  391. </div>
  392. </div>
  393. </div>
  394. </th:block>
  395. <th:block th:if="${contentsLoc=='008'}">
  396. <!-- 8. 가로 긴 배너 슬라이드 -->
  397. <!-- bnn_1stage -->
  398. <div class="content wide main_1stage" th:if="${!mainLayoutData.ContentsList.empty}">
  399. <div class="cont_head dpnone">
  400. <p class="t_c">배너 슬라이드</p>
  401. </div>
  402. <div class="cont_body">
  403. <div class="swiper-container post-bnnWide">
  404. <div class="swiper-wrapper ">
  405. <th:block th:each="ContentsData, ContentsStat : ${mainLayoutData.ContentsList}">
  406. <div class="swiper-slide silderBannerArea">
  407. <th:block th:if="${ContentsData.imgPath1!=null && ContentsData.imgPath1!=''}">
  408. <a th:href="${ContentsData.strVar1}">
  409. <div class="bnnbox" style="background:#e3e7ea;">
  410. <div class="txtWrap bannerNote">
  411. <p class="noteArea"> <!--th:text="${ContentsData.strTitle1}"-->
  412. <input type="hidden" name="bannerNote" th:value="${ContentsData.strTitle1}"/>
  413. </p>
  414. <!--<p>아우터 + 이너 단독세일</p>--> <!-- br 태그 줄바꿈해야함-->
  415. <!-- <button type="button" class="btn">VIEW MORE</button>-->
  416. </div>
  417. <img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('domain.image')+ContentsData.imgPath1}">
  418. </div>
  419. </a>
  420. </th:block>
  421. </div>
  422. </th:block>
  423. </div>
  424. <div class="swiper-button-prev "></div>
  425. <div class="swiper-button-next "></div>
  426. </div>
  427. </div>
  428. <div class="cont_foot dpnone">
  429. CONT-FOOT
  430. </div>
  431. </div>
  432. </th:block>
  433. <th:block th:if="${contentsLoc=='009'}">
  434. <!-- 9. MD추천 스타일 -->
  435. <div class="content main_recomm" >
  436. <div class="cont_head">
  437. <p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}"></p>
  438. </div>
  439. <div class="cont_body">
  440. <div class="sec_head">
  441. <div class="filter action tag_list">
  442. <th:block th:each="titleData, titleStat : ${mainLayoutData.mdPickList}" >
  443. <th:block th:if="${titleData.goodsList!=null and !titleData.goodsList.empty}" >
  444. <button class="btn" th:attr="data-tab=${'tag'+titleStat.count}" th:text="${titleData.mdTitle}">따뜻한 무드2</button>
  445. </th:block>
  446. </th:block>
  447. </div>
  448. </div>
  449. <div class="sec_body">
  450. <th:block th:each="titleData, titleStat : ${mainLayoutData.mdPickList}">
  451. <div th:id="${'tag'+titleStat.count}" class="tagitem" > <!--th:classappend="${titleStat.count} == 1? active"-->
  452. <div class="swiper-container post-recomm">
  453. <div class="swiper-wrapper">
  454. <th:block th:if="${titleData.goodsList!=null and !titleData.goodsList.empty}">
  455. <th:block th:each="goodsData, goodsStat : ${titleData.goodsList}">
  456. <div class="swiper-slide">
  457. <div class="item_prod">
  458. <div class="item_state">
  459. <button type="button" class="itemLike" tabindex="0" th:classappend="${goodsData.likeIt == 'likeit'}? 'likeit' : ''" onclick="cfnPutWishList(this);" th:attr="goodsCd=${goodsData.goodsCd}, goodsNm=${goodsData.goodsFullNm}, ithrCd='', contentsLoc='SMM009', planDtlSq=''">관심상품 추가</button>
  460. <a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${goodsData.goodsCd}]], '', '', 'SMM009');">
  461. <div class="itemPic">
  462. <th:block th:each="option,idx:${goodsData.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
  463. <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>
  464. <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>
  465. </th:block>
  466. <img alt="" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + goodsData.sysImgNm}" onerror="noneImg(this)">
  467. </div>
  468. <p class="itemBrand" th:text="${goodsData.brandGroupNm}">BRAND NAME</p>
  469. <div class="itemComment" th:unless="${goodsData.goodsTnm == null or goodsData.goodsTnm == ''}" th:text="${goodsData.goodsTnm}">#주문 폭주 상품</div>
  470. <div class="itemName" th:text="${goodsData.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
  471. <p th:unless="${goodsData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]]
  472. <span class="itemPrice_original" th:if="${goodsData.currPrice != goodsData.listPrice}" th:text="${#numbers.formatInteger(goodsData.listPrice,1,'COMMA')}">89,000</span>
  473. <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>
  474. </p>
  475. <p th:if="${goodsData.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(goodsData.currPrice,0,'COMMA')}]] ~</p>
  476. </a>
  477. </div>
  478. </div>
  479. </div>
  480. </th:block>
  481. </th:block>
  482. </div>
  483. <div class="swiper-controls">
  484. <div class="swiper-pagination"></div>
  485. </div>
  486. </div>
  487. <div class="swiper-button-prev"></div>
  488. <div class="swiper-button-next"></div>
  489. </div>
  490. </th:block>
  491. </div>
  492. </div>
  493. </div>
  494. </th:block>
  495. <th:block th:if="${contentsLoc=='011'}">
  496. <!-- 11. TV 슬라이드 -->
  497. <div class="content wide main_tv" th:if="${mainLayoutData.ContentsList != null}">
  498. <div class="cont_head">
  499. <p class="displayH t_c" th:text="${mainLayoutData.contentsTitle}"></p>
  500. </div>
  501. <div class="cont_body">
  502. <div class="swiper-container post-tv">
  503. <div class="swiper-wrapper">
  504. <th:block th:each="item, stat : ${mainLayoutData.ContentsList}">
  505. <div class="swiper-slide">
  506. <div class="movbox">
  507. <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>
  508. <iframe th:if="${item.strVar1=='M'}" class="pd_mov" th:src="${kollusMediaUrl+'/'+item.strVar2+'?enable_initialize_focus=false'}" allowfullscreen></iframe>
  509. </div>
  510. </div>
  511. </th:block>
  512. </div>
  513. <div class="swiper-button-prev white"></div> <!-- 클래스명 white 추가 -->
  514. <div class="swiper-button-next white"></div>
  515. </div>
  516. <div class="swiper-controls">
  517. <div class="swiper-pagination"></div>
  518. </div>
  519. </div>
  520. </div>
  521. </th:block>
  522. <th:block th:if="${contentsLoc=='010'}">
  523. <!-- 10. 당신을 위한 제안 -->
  524. <div class="content main_foryou">
  525. <div class="cont_head">
  526. <p class="displayH" th:text="${mainLayoutData.contentsTitle}">당신을 위한 제안</p>
  527. <span>스타일24에서 가장 주목받는 상품을 살펴보세요</span>
  528. </div>
  529. <div class="cont_body">
  530. <div class="post-sug fy_nav">
  531. <div class="swiper-container">
  532. <div class="swiper-wrapper" id="keywordArea">
  533. </div>
  534. </div>
  535. <div class="swiper-controls">
  536. <div class="swiper-pagination"></div>
  537. </div>
  538. </div>
  539. <div id="recomItemArea">
  540. </div>
  541. </div>
  542. </div>
  543. </th:block>
  544. </th:block>
  545. <!-- End Of Main Contents -->
  546. </div>
  547. </div>
  548. <script th:inline="javascript">
  549. /* 핫딜 countDown */
  550. var target_date = '';
  551. if(!gagajf.isNull($("#socailForm").find("input[name=targetTime]").val())){
  552. target_date = $("#socailForm").find("input[name=targetTime]").val().toDate("YYYYMMDD");
  553. }
  554. if(target_date != null && target_date != ''){
  555. // var target_date = new Date().getTime() + (1000*3600*7); // set the countdown date
  556. var days, hours, minutes, seconds; // variables for time units
  557. var countdown = document.getElementById("tiles"); // get tag element
  558. getCountdown();
  559. var timerStop = setInterval(function () { getCountdown(); }, 1000);
  560. var fixDate = new Date().getTime();
  561. var fixTarget = (target_date - fixDate) / 1000;
  562. var width = (86400-fixTarget)*100/86400;
  563. function getCountdown(){
  564. // find the amount of "seconds" between now and target
  565. var current_date = new Date().getTime();
  566. var seconds_left = (target_date - current_date) / 1000;
  567. seconds_left = seconds_left % 86400;
  568. hours = pad( parseInt(seconds_left / 3600) );
  569. seconds_left = seconds_left % 3600;
  570. minutes = pad( parseInt(seconds_left / 60) );
  571. seconds = pad( parseInt( seconds_left % 60 ) );
  572. // format countdown string + set tag value
  573. countdown.innerHTML = "<span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>";
  574. var elem = document.getElementById("barCurrent");
  575. function progressMove(){
  576. width += (100-width)/fixTarget;
  577. elem.style.width = width + "%";
  578. }
  579. progressMove();
  580. if(seconds_left < 1){
  581. clearInterval(timerStop);
  582. elem.style.width = "100%";
  583. }
  584. }
  585. function pad(n) {
  586. return (n < 10 ? '0' : '') + n;
  587. }
  588. }
  589. // 컨텐츠 호출
  590. $(document).ready( function() {
  591. //$("#header").load("head.html");
  592. //$("#footer").load("foot.html");
  593. $(".tag_list .btn").eq(0).trigger('click');
  594. let randomNum = Math.floor( ( Math.random() * 4 ) );
  595. $(".it_nav .btn").eq(randomNum).trigger('click');
  596. // 당신을 위한 제안 쿠키값 확인 (로그인시 확인됨)
  597. var pcId = gagajf.getCookie("RB_PCID");
  598. // 추천솔루션 API 호출
  599. //if(!gagajf.isNull(pcId)){
  600. fnGetEigenApi(pcId);
  601. //}
  602. });
  603. /**
  604. * EigenApi
  605. * size : 상품수
  606. * nh : 키워드수
  607. * */
  608. var fnGetEigenApi = function (id){
  609. // console.log('[fnGetEigenApi ID]'+id);
  610. $.getJSON('https://api.eigene.io/rec/p075?cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4&size=10&nh=10&pcid='+id, function (result,status){
  611. var keywordTag = '';
  612. var itemTag = '';
  613. var itemTag2 = '';
  614. let dataJson = result.groupedResults;
  615. let key1 = Object.keys(dataJson);
  616. if (status === 'success') {
  617. if (!gagajf.isNull(result.products) && result.products.length > 0) {
  618. $("#keywordArea").html('');
  619. $("#recomItemArea").html('');
  620. $.each(result.products, function (idx, item) {
  621. if (idx == 0 || idx == 5) {
  622. keywordTag += '<div class="swiper-slide">\n';
  623. keywordTag += ' <ul>\n';
  624. }
  625. keywordTag += '<li>\n';
  626. keywordTag += ' <button class="btn btn_shape active" data-tab="fy' + (idx + 1) + '">\n';
  627. keywordTag += ' <div>\n';
  628. keywordTag += ' <span class="number">' + (idx + 1) + '</span>\n';
  629. keywordTag += ' <span>' + item.sourceId + '</span>\n';
  630. keywordTag += ' </div>\n';
  631. keywordTag += ' </button>\n';
  632. keywordTag += ' <a href="javascript:void(0);" onclick="cfnGoToSearchGoodsListForm(\''+ item.sourceId + '\')">자세히 보기</a>\n';
  633. keywordTag += '</li>\n';
  634. if (idx == 4 || idx == 9) {
  635. keywordTag += ' </ul>';
  636. keywordTag += '</div>';
  637. }
  638. for (var i=0; i<key1.length; i++) {
  639. var key = key1[i];
  640. // console.log("key : " + key + ", value : " + dataJson[key])
  641. if(item.sourceId == key){
  642. itemTag += '<div class="fy_item" id="fy'+(idx+1)+'">\n';
  643. $.each(dataJson[key], function (keyIdx, keyItem){
  644. if(idx%2 == 0) {
  645. if(keyIdx==0){
  646. itemTag += ' <div class="part">\n';
  647. itemTag += ' <div class="item_prod">\n';
  648. itemTag += ' <div class="item_state">\n';
  649. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  650. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  651. itemTag += ' <div class="itemPic">\n';
  652. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  653. itemTag += ' </div>\n';
  654. itemTag += ' <div class="itemInfo">\n';
  655. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  656. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  657. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  658. itemTag += ' </div>\n';
  659. itemTag += ' </a>\n';
  660. itemTag += ' </div>\n';
  661. itemTag += ' </div>\n';
  662. }else if(keyIdx==1){
  663. itemTag += ' <div class="item_prod">\n';
  664. itemTag += ' <div class="item_state">\n';
  665. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  666. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  667. itemTag += ' <div class="itemPic">\n';
  668. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  669. itemTag += ' </div>\n';
  670. itemTag += ' <div class="itemInfo">\n';
  671. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  672. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  673. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  674. itemTag += ' </div>\n';
  675. itemTag += ' </a>\n';
  676. itemTag += ' </div>\n';
  677. itemTag += ' </div>\n';
  678. itemTag += ' </div>\n';
  679. }else if(keyIdx==2){
  680. itemTag += ' <div class="part lg">\n';
  681. itemTag += ' <div class="item_prod">\n';
  682. itemTag += ' <div class="item_state">\n';
  683. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  684. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  685. itemTag += ' <div class="itemPic">\n';
  686. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  687. itemTag += ' </div>\n';
  688. itemTag += ' <div class="itemInfo">\n';
  689. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  690. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  691. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  692. itemTag += ' </div>\n';
  693. itemTag += ' </a>\n';
  694. itemTag += ' </div>\n';
  695. itemTag += ' </div>\n';
  696. itemTag += ' </div>\n';
  697. }else if(keyIdx==3){
  698. itemTag += ' <div class="part">\n';
  699. itemTag += ' <div class="item_prod">\n';
  700. itemTag += ' <div class="item_state">\n';
  701. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  702. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  703. itemTag += ' <div class="itemPic">\n';
  704. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  705. itemTag += ' </div>\n';
  706. itemTag += ' <div class="itemInfo">\n';
  707. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  708. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  709. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  710. itemTag += ' </div>\n';
  711. itemTag += ' </a>\n';
  712. itemTag += ' </div>\n';
  713. itemTag += ' </div>\n';
  714. }else if(keyIdx==4){
  715. itemTag += ' <div class="item_prod">\n';
  716. itemTag += ' <div class="item_state">\n';
  717. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  718. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  719. itemTag += ' <div class="itemPic">\n';
  720. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  721. itemTag += ' </div>\n';
  722. itemTag += ' <div class="itemInfo">\n';
  723. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  724. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  725. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  726. itemTag += ' </div>\n';
  727. itemTag += ' </a>\n';
  728. itemTag += ' </div>\n';
  729. itemTag += ' </div>\n';
  730. itemTag += ' </div>\n';
  731. }else if(keyIdx==5){
  732. itemTag += ' <div class="part">\n';
  733. itemTag += ' <div class="item_prod">\n';
  734. itemTag += ' <div class="item_state">\n';
  735. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  736. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  737. itemTag += ' <div class="itemPic">\n';
  738. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  739. itemTag += ' </div>\n';
  740. itemTag += ' <div class="itemInfo">\n';
  741. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  742. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  743. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  744. itemTag += ' </div>\n';
  745. itemTag += ' </a>\n';
  746. itemTag += ' </div>\n';
  747. itemTag += ' </div>\n';
  748. }else if(keyIdx==6){
  749. itemTag += ' <div class="item_prod">\n';
  750. itemTag += ' <div class="item_state">\n';
  751. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  752. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  753. itemTag += ' <div class="itemPic">\n';
  754. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  755. itemTag += ' </div>\n';
  756. itemTag += ' <div class="itemInfo">\n';
  757. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  758. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  759. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  760. itemTag += ' </div>\n';
  761. itemTag += ' </a>\n';
  762. itemTag += ' </div>\n';
  763. itemTag += ' </div>\n';
  764. itemTag += ' </div>\n';
  765. }
  766. }else{
  767. if(keyIdx==0){
  768. itemTag += ' <div class="part">\n';
  769. itemTag += ' <div class="item_prod">\n';
  770. itemTag += ' <div class="item_state">\n';
  771. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  772. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  773. itemTag += ' <div class="itemPic">\n';
  774. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  775. itemTag += ' </div>\n';
  776. itemTag += ' <div class="itemInfo">\n';
  777. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  778. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  779. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  780. itemTag += ' </div>\n';
  781. itemTag += ' </a>\n';
  782. itemTag += ' </div>\n';
  783. itemTag += ' </div>\n';
  784. }else if(keyIdx==1){
  785. itemTag += ' <div class="item_prod">\n';
  786. itemTag += ' <div class="item_state">\n';
  787. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  788. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  789. itemTag += ' <div class="itemPic">\n';
  790. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  791. itemTag += ' </div>\n';
  792. itemTag += ' <div class="itemInfo">\n';
  793. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  794. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  795. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  796. itemTag += ' </div>\n';
  797. itemTag += ' </a>\n';
  798. itemTag += ' </div>\n';
  799. itemTag += ' </div>\n';
  800. itemTag += ' </div>\n';
  801. }else if(keyIdx==2){
  802. itemTag += ' <div class="part">\n';
  803. itemTag += ' <div class="item_prod">\n';
  804. itemTag += ' <div class="item_state">\n';
  805. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  806. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  807. itemTag += ' <div class="itemPic">\n';
  808. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  809. itemTag += ' </div>\n';
  810. itemTag += ' <div class="itemInfo">\n';
  811. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  812. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  813. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  814. itemTag += ' </div>\n';
  815. itemTag += ' </a>\n';
  816. itemTag += ' </div>\n';
  817. itemTag += ' </div>\n';
  818. }else if(keyIdx==3){
  819. itemTag += ' <div class="item_prod">\n';
  820. itemTag += ' <div class="item_state">\n';
  821. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  822. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  823. itemTag += ' <div class="itemPic">\n';
  824. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  825. itemTag += ' </div>\n';
  826. itemTag += ' <div class="itemInfo">\n';
  827. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  828. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  829. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  830. itemTag += ' </div>\n';
  831. itemTag += ' </a>\n';
  832. itemTag += ' </div>\n';
  833. itemTag += ' </div>\n';
  834. itemTag += ' </div>\n';
  835. }else if(keyIdx==4){
  836. itemTag += ' <div class="part">\n';
  837. itemTag += ' <div class="item_prod">\n';
  838. itemTag += ' <div class="item_state">\n';
  839. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  840. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  841. itemTag += ' <div class="itemPic">\n';
  842. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  843. itemTag += ' </div>\n';
  844. itemTag += ' <div class="itemInfo">\n';
  845. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  846. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  847. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  848. itemTag += ' </div>\n';
  849. itemTag += ' </a>\n';
  850. itemTag += ' </div>\n';
  851. itemTag += ' </div>\n';
  852. }else if(keyIdx==5){
  853. itemTag += ' <div class="item_prod">\n';
  854. itemTag += ' <div class="item_state">\n';
  855. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  856. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  857. itemTag += ' <div class="itemPic">\n';
  858. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  859. itemTag += ' </div>\n';
  860. itemTag += ' <div class="itemInfo">\n';
  861. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  862. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  863. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  864. itemTag += ' </div>\n';
  865. itemTag += ' </a>\n';
  866. itemTag += ' </div>\n';
  867. itemTag += ' </div>\n';
  868. itemTag += ' </div>\n';
  869. }else if(keyIdx==6){
  870. itemTag += ' <div class="part lg">\n';
  871. itemTag += ' <div class="item_prod">\n';
  872. itemTag += ' <div class="item_state">\n';
  873. itemTag += ' <button type="button" class="itemLike" tabindex="0" goodsCd="'+keyItem.product.itemId+'" goodsNm="'+keyItem.product.itemName+'" onclick="cfnPutWishList(this);">관심상품 추가</button>\n';
  874. itemTag += ' <a href="'+keyItem.product.itemUrl+'" class="itemLink" tabindex="0">\n';
  875. itemTag += ' <div class="itemPic">\n';
  876. itemTag += ' <img alt="BLACK-a" class=" vLHTC pd_img" src="'+keyItem.product.itemImage+'">\n';
  877. itemTag += ' </div>\n';
  878. itemTag += ' <div class="itemInfo">\n';
  879. itemTag += ' <p class="itemBrand">'+keyItem.product.brandName+'</p>\n';
  880. itemTag += ' <div class=" itemName">'+keyItem.product.itemName+'</div>\n';
  881. itemTag += ' <p class="itemPrice">'+keyItem.product.salePrice.addComma()+'</p>\n';
  882. itemTag += ' </div>\n';
  883. itemTag += ' </a>\n';
  884. itemTag += ' </div>\n';
  885. itemTag += ' </div>\n';
  886. itemTag += ' </div>\n';
  887. }
  888. }
  889. });
  890. itemTag += '</div>\n';
  891. }
  892. }
  893. });
  894. $("#keywordArea").append(keywordTag);
  895. $("#recomItemArea").append(itemTag);
  896. // 위시 좋아요 처리
  897. if (cfCheckLogin()) {
  898. let targetT = $('.main_foryou').find('#recomItemArea').find('.item_state').find('button');
  899. //let targetTSize = targetT.length;
  900. targetT.each(function(){
  901. let goodsCd = $(this).attr('goodscd');
  902. var $this = $(this);
  903. let url = "/mypage/wish/list/check/"+goodsCd;
  904. var result = '';
  905. $.ajax({
  906. type: 'get'
  907. , async: false
  908. , url: url
  909. , success: function (data) {
  910. //likeit active
  911. if ("Y" == data){
  912. $this.addClass('likeit').addClass('active');
  913. }
  914. }
  915. });
  916. });
  917. }
  918. /* SLIDE - MAIN_RECOMM */
  919. //MAIN_RECOMM_키워드 탭
  920. $(".main_recomm .tag_list .btn").click(function () {
  921. var recommActive = $(this).attr('data-tab');
  922. $(".main_recomm .tag_list .btn").removeClass('active');
  923. $(".main_recomm .tagitem").removeClass('active');
  924. $(this).addClass('active');
  925. $('#' + recommActive).addClass('active');
  926. });
  927. function init() {
  928. if (main_recomm_slide != null) main_recomm_slide.destroy();
  929. var main_recomm_slide = new Swiper('.main_recomm .post-recomm', {
  930. slidesPerView: 5,
  931. slidesPerGroup: 5,
  932. speed: 1000,
  933. spaceBetween: 20,
  934. loop: true,
  935. a11y: {
  936. enabled: true,
  937. notificationClass: 'swiper-notification',
  938. prevSlideMessage: '이전 슬라이드',
  939. nextSlideMessage: '다음 슬라이드',
  940. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  941. },
  942. pagination: {
  943. el: '.main_recomm .swiper-pagination',
  944. clickable: true,
  945. },
  946. navigation: {
  947. nextEl: '.main_recomm .swiper-button-next',
  948. prevEl: '.main_recomm .swiper-button-prev',
  949. },
  950. observer: true,
  951. observeParents: true,
  952. });
  953. }
  954. init();
  955. /* SLIDE - MAIN_FORYOU */
  956. var cntNum = 0;
  957. var main_foryou_slide = new Swiper('.main_foryou .post-sug .swiper-container', {
  958. allowTouchMove: false,
  959. loop: false,
  960. effect: 'fade',
  961. autoHeight: false,
  962. autoplay: {
  963. delay: 25000,
  964. disableOnInteraction: false,
  965. },
  966. a11y: {
  967. enabled: true,
  968. notificationClass: 'swiper-notification',
  969. prevSlideMessage: '이전 슬라이드',
  970. nextSlideMessage: '다음 슬라이드',
  971. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  972. },
  973. pagination: {
  974. el: '.post-sug .swiper-pagination',
  975. clickable: true,
  976. },
  977. on: {
  978. slideChange: function () {
  979. $(".fy_nav .swiper-slide li").children('.btn_shape').removeClass('active');
  980. $(".fy_nav .swiper-slide-next li").eq(0).children('.btn_shape').addClass('active');
  981. $(".fy_nav .swiper-slide-prev li").eq(0).children('.btn_shape').addClass('active');
  982. foryouIndex = -1;
  983. if (cntNum === 0) {
  984. $('.fy_item').removeClass('active');
  985. $('#fy6').addClass('active');
  986. cntNum = 1;
  987. } else {
  988. $('.fy_item').removeClass('active');
  989. $('#fy1').addClass('active');
  990. cntNum = 0;
  991. }
  992. clearInterval(ti);
  993. ti = startTimeInterval();
  994. }
  995. },
  996. });
  997. function foryouInterval(_foryouIndex) {
  998. var foryouCateItems = $(".main_foryou .fy_nav .swiper-slide-active ul li .btn_shape");
  999. $(foryouCateItems[(_foryouIndex + 1) % 5]).addClass("active");
  1000. $(foryouCateItems[_foryouIndex % 5]).removeClass("active");
  1001. }
  1002. function foryouFy_item(_Fy_itemIndex) {
  1003. var fynavItems = $('.main_foryou .fy_nav .swiper-slide-active ul li .btn_shape.active');
  1004. var fyActive = $(fynavItems).attr('data-tab');
  1005. // $(".fy_nav .btn_shape").removeClass('active');
  1006. $(".fy_item").removeClass('active');
  1007. // $(".fy_item").addClass('active');
  1008. $('#' + fyActive).addClass('active');
  1009. }
  1010. var foryouIndex = 0;
  1011. var ti;
  1012. function startTimeInterval() {
  1013. return setInterval(function () {
  1014. $(".fy_nav .btn_shape").removeClass('active');
  1015. $(".fy_item").removeClass('active');
  1016. foryouInterval(foryouIndex);
  1017. foryouFy_item();
  1018. if (foryouIndex >= 5) foryouIndex = 0;
  1019. foryouIndex++;
  1020. }, 5000);
  1021. }
  1022. $(".fy_nav .btn_shape").click(function () {
  1023. var fyActive = $(this).attr('data-tab');
  1024. $(".fy_nav .btn_shape").removeClass('active');
  1025. $(".fy_item").removeClass('active');
  1026. $(this).addClass('active');
  1027. $('#' + fyActive).addClass('active');
  1028. });
  1029. $(".fy_nav ul li").click(function () {
  1030. foryouIndex = $(this).index();
  1031. clearInterval(ti);
  1032. ti = startTimeInterval();
  1033. });
  1034. ti = startTimeInterval();
  1035. }
  1036. }
  1037. });
  1038. }
  1039. /* SLIDE - MAIN_VISUAL */
  1040. var agent = navigator.userAgent.toLowerCase();
  1041. if ( (navigator.appName == 'Netscape' && agent.indexOf('trident') != -1) || (agent.indexOf("msie") != -1)) {
  1042. // ie일 경우
  1043. var post01 = new Swiper('.main_visual .post-visual.swiper-container', {
  1044. // Optional parameters
  1045. loop: true,
  1046. slidesPerView: 'auto',
  1047. spaceBetween: 100,
  1048. // initialSlide: 0,
  1049. // 초기 슬라이드의 색인 번호입니다
  1050. centeredSlides: true,
  1051. // slidesOffsetBefore: 250,
  1052. // 컨테이너 시작 부분 (모든 슬라이드 이전)에 슬라이드 오프셋 추가 (픽셀 단위)
  1053. speed : 1000,
  1054. // Navigation arrows
  1055. //autoplay: false,
  1056. autoplay: {
  1057. delay: 3000,
  1058. disableOnInteraction: false,
  1059. },
  1060. a11y: {
  1061. enabled: true,
  1062. notificationClass: 'swiper-notification',
  1063. prevSlideMessage: '이전 슬라이드',
  1064. nextSlideMessage: '다음 슬라이드',
  1065. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1066. },
  1067. navigation: {
  1068. nextEl: '.post-visual .swiper-button-next',
  1069. prevEl: '.post-visual .swiper-button-prev',
  1070. },
  1071. pagination: {
  1072. el: '.main_visual .swiper-pagination',
  1073. clickable: true,
  1074. },
  1075. });
  1076. }else{
  1077. // ie가 아닐 경우
  1078. var post01 = new Swiper('.main_visual .post-visual', {
  1079. // Optional parameters
  1080. loop: true,
  1081. slidesPerView: 'auto',
  1082. spaceBetween: 70,
  1083. // initialSlide: 0,
  1084. // 초기 슬라이드의 색인 번호입니다
  1085. centeredSlides: true,
  1086. // slidesOffsetBefore: 250,
  1087. // 컨테이너 시작 부분 (모든 슬라이드 이전)에 슬라이드 오프셋 추가 (픽셀 단위)
  1088. speed : 1000,
  1089. // Navigation arrows
  1090. autoplay: {
  1091. delay: 3000,
  1092. disableOnInteraction: false,
  1093. },
  1094. a11y: {
  1095. enabled: true,
  1096. notificationClass: 'swiper-notification',
  1097. prevSlideMessage: '이전 슬라이드',
  1098. nextSlideMessage: '다음 슬라이드',
  1099. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1100. },
  1101. navigation: {
  1102. nextEl: '.post-visual .swiper-button-next',
  1103. prevEl: '.post-visual .swiper-button-prev',
  1104. },
  1105. pagination: {
  1106. el: '.main_visual .swiper-pagination',
  1107. clickable: true,
  1108. },
  1109. });
  1110. }
  1111. //MAIN_VISUAL_자동재생 스탑
  1112. $(document).on('click','.main_visual .slide-curb-pause',function(e){
  1113. post01.autoplay.stop();
  1114. $(this).hide();
  1115. $('.main_visual .slide-curb-play').show();
  1116. });
  1117. //MAIN_VISUAL_자동재생 시작
  1118. $(document).on('click','.main_visual .slide-curb-play',function(e){
  1119. post01.autoplay.start();
  1120. $(this).hide();
  1121. $('.main_visual .slide-curb-pause').show();
  1122. });
  1123. //210624_ 수정 : autoplay delay 변경.
  1124. /* SLIDE - MAIN_TRENDY */
  1125. var main_trendy_slide = new Swiper('.main_trendy .post-trendy', {
  1126. watchSlidesProgress: true,
  1127. watchSlidesVisibility: true,
  1128. allowTouchMove: false,
  1129. loop: false,
  1130. loopAdditionalSlides : 1,
  1131. speed : 1000,
  1132. autoplay: {
  1133. delay: 3000,
  1134. disableOnInteraction:false,
  1135. },
  1136. a11y: {
  1137. enabled: true,
  1138. notificationClass: 'swiper-notification',
  1139. prevSlideMessage: '이전 슬라이드',
  1140. nextSlideMessage: '다음 슬라이드',
  1141. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1142. },
  1143. navigation: {
  1144. nextEl: '.main_trendy .swiper-button-next',
  1145. prevEl: '.main_trendy .swiper-button-prev',
  1146. },
  1147. // pagination: {
  1148. // el: '.main_trendy .swiper-pagination',
  1149. // clickable: true,
  1150. // },
  1151. slidesPerView: 'auto',
  1152. spaceBetween: 22,
  1153. });
  1154. main_trendy_slide.on('slideChange', function () {
  1155. var newitemIndex = main_trendy_slide.activeIndex;
  1156. var slideWidth = $(".main_trendy .swiper-slide-visible").eq(0).width() + 22;
  1157. $(".main_trendy .swiper-slide").removeClass('scaleBig');
  1158. $(".main_trendy .swiper-slide-visible").eq(0).addClass('scaleBig');
  1159. $(".main_trendy .swiper-slide-visible").eq(3).addClass('scaleBig');
  1160. $(".main_trendy .swiper-wrapper").css("transform","translateX(-"+ (slideWidth * newitemIndex) +"px)");
  1161. });
  1162. main_trendy_slide.on('reachEnd', function () {
  1163. var newitemIndex = main_trendy_slide.activeIndex + 1;
  1164. var slideWidth = $(".main_trendy .swiper-slide-visible").eq(0).width() + 22;
  1165. $(".main_trendy .swiper-slide").removeClass('scaleBig');
  1166. $(".main_trendy .swiper-slide-visible").eq(1).addClass('scaleBig');
  1167. $(".main_trendy .swiper-slide-visible").eq(4).addClass('scaleBig');
  1168. $(".main_trendy .swiper-wrapper").css("transform","translateX(-"+ (slideWidth * newitemIndex) +"px)");
  1169. function l(n) {
  1170. if (n.direction !== "none")
  1171. {
  1172. var t = n.direction === "next" ? n.currentIndex + 1 : n.currentIndex - 1;
  1173. o(t)
  1174. }
  1175. }
  1176. });
  1177. /* SLIDE - MAIN_IT */
  1178. var main_it_slide = new Swiper ('.main_it .post-it', {
  1179. //loop: true,
  1180. slidesPerView: 'auto',
  1181. spaceBetween: 20,
  1182. slidesPerView: 4,
  1183. observer: true,
  1184. observeParents: true,
  1185. speed : 1000,
  1186. freeMode: true,
  1187. autoplay: false,
  1188. scrollbar: {
  1189. el: '.main_it .swiper-scrollbar',
  1190. hide: false,
  1191. },
  1192. });
  1193. //MAIN_IT_카테고리 탭
  1194. $(".main_it .it_nav .btn").click(function(){
  1195. var itActive = $(this).attr('data-tab');
  1196. $(".main_it .it_nav .btn").removeClass('active');
  1197. $(".main_it .it_item").removeClass('active');
  1198. $(this).addClass('active');
  1199. $('#'+itActive).addClass('active');
  1200. });
  1201. /* SLIDE - MAIN_DEAL */
  1202. var main_deal_slide = new Swiper ('.main_deal .post-deal', {
  1203. loop: false,
  1204. slidesPerView: 4,
  1205. // slidesToScroll: 4,
  1206. // centeredSlides: true,
  1207. speed : 1000,
  1208. autoWidth: true,
  1209. autoplay: false,
  1210. freeMode:true,
  1211. spaceBetween: 20,
  1212. // autoplay: {
  1213. // delay: 2000,
  1214. // disableOnInteraction: false,
  1215. // },
  1216. scrollbar: {
  1217. el: '.post-deal .swiper-scrollbar',
  1218. hide: false,
  1219. },
  1220. });
  1221. //210604_ 수정 : 브랜드 PICK 네비게이션 수정.
  1222. /* 브랜드 PICK 갯수체크 210430_수정 */
  1223. var pickCont = $('.post-pick-nav .swiper-slide');
  1224. var pickLength = pickCont.length;
  1225. if (pickLength < 7) { //210614_ 수정 : 슬라이드 갯수 7개 미만일시 롤링 기능 억제.
  1226. /* SLIDE - MAIN_PICK */
  1227. var main_pick_nav = new Swiper('.main_pick .post-pick-nav', { //top
  1228. initialSlide: 0,
  1229. slidesPerView: 6,
  1230. // slidesPerGroup: 6,
  1231. loop: false,
  1232. watchOverflow : true,
  1233. // slideToClickedSlide : true,
  1234. slideToClickedSlide : true,
  1235. loopAdditionalSlides : 1,
  1236. watchSlidesVisibility: true,
  1237. watchSlidesProgress: true,
  1238. freeMode: false,
  1239. a11y: {
  1240. enabled: true,
  1241. notificationClass: 'swiper-notification',
  1242. prevSlideMessage: '이전 슬라이드',
  1243. nextSlideMessage: '다음 슬라이드',
  1244. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1245. },
  1246. navigation: {
  1247. nextEl: '.main_pick .swiper-button-next',
  1248. prevEl: '.main_pick .swiper-button-prev',
  1249. },
  1250. });
  1251. } else {
  1252. /* SLIDE - MAIN_PICK */
  1253. var main_pick_nav = new Swiper('.main_pick .post-pick-nav', { //top
  1254. initialSlide: 0,
  1255. slidesPerView: 6,
  1256. slidesPerGroup: 6,
  1257. loop: false,
  1258. // slideToClickedSlide : true,
  1259. slideToClickedSlide : true,
  1260. //loopAdditionalSlides : 1,
  1261. watchSlidesVisibility: true,
  1262. watchSlidesProgress: true,
  1263. freeMode: false,
  1264. a11y: {
  1265. enabled: true,
  1266. notificationClass: 'swiper-notification',
  1267. prevSlideMessage: '이전 슬라이드',
  1268. nextSlideMessage: '다음 슬라이드',
  1269. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1270. },
  1271. navigation: {
  1272. nextEl: '.main_pick .swiper-button-next',
  1273. prevEl: '.main_pick .swiper-button-prev',
  1274. },
  1275. });
  1276. }
  1277. //210622_ 삭제 : 슬라이드 주석 삭제.
  1278. var pickForCont = $('.post-pick-for > .swiper-wrapper > .swiper-slide');
  1279. var pickForLength = pickForCont.length;
  1280. if (pickForLength < 7) {
  1281. var main_pick_post = new Swiper('.main_pick .post-pick-for', { //thumbs
  1282. initialSlide: 0,
  1283. slidesPerView: 1,
  1284. loop: false,
  1285. watchOverflow : true,
  1286. loopeSlides: 6,
  1287. spaceBetween: 10,
  1288. loopAdditionalSlides: 1,
  1289. allowTouchMove: false,
  1290. a11y: {
  1291. enabled: true,
  1292. notificationClass: 'swiper-notification',
  1293. prevSlideMessage: '이전 슬라이드',
  1294. nextSlideMessage: '다음 슬라이드',
  1295. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1296. },
  1297. thumbs: {
  1298. swiper: main_pick_nav
  1299. },
  1300. });
  1301. }else{
  1302. var main_pick_post = new Swiper('.main_pick .post-pick-for', { //thumbs
  1303. initialSlide: 0,
  1304. slidesPerView: 1,
  1305. loop: true,
  1306. loopeSlides: 6,
  1307. loopAdditionalSlides: 1,
  1308. allowTouchMove: false,
  1309. a11y: {
  1310. enabled: true,
  1311. notificationClass: 'swiper-notification',
  1312. prevSlideMessage: '이전 슬라이드',
  1313. nextSlideMessage: '다음 슬라이드',
  1314. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1315. },
  1316. thumbs: {
  1317. swiper: main_pick_nav
  1318. },
  1319. });
  1320. }
  1321. $(".main_pick .post-lookbook").each(function(index){
  1322. var lookbookBnnCont = $(this).find('.swiper-slide');
  1323. var lookbookBnnLength = lookbookBnnCont.length;
  1324. if (lookbookBnnLength < 2) {
  1325. var main_pick_lookbook = new Swiper ($(this), {
  1326. slidesPerView: 1,
  1327. speed : 1000,
  1328. loop: false,
  1329. watchOverflow: true, //loop와 함께 사용 불가.
  1330. a11y: {
  1331. enabled: true,
  1332. notificationClass: 'swiper-notification',
  1333. prevSlideMessage: '이전 슬라이드',
  1334. nextSlideMessage: '다음 슬라이드',
  1335. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1336. },
  1337. autoplay: {
  1338. delay: 3000,
  1339. disableOnInteraction: false,
  1340. },
  1341. pagination: {
  1342. el: '.main_pick .post-lookbook .swiper-pagination',
  1343. clickable: true,
  1344. },
  1345. });
  1346. }else{
  1347. var main_pick_lookbook = new Swiper ($(this), {
  1348. slidesPerView: 1,
  1349. speed : 1000,
  1350. loop: true,
  1351. a11y: {
  1352. enabled: true,
  1353. notificationClass: 'swiper-notification',
  1354. prevSlideMessage: '이전 슬라이드',
  1355. nextSlideMessage: '다음 슬라이드',
  1356. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1357. },
  1358. autoplay: {
  1359. delay: 3000,
  1360. disableOnInteraction: false,
  1361. },
  1362. pagination: {
  1363. el: '.main_pick .post-lookbook .swiper-pagination',
  1364. clickable: true,
  1365. },
  1366. });
  1367. }
  1368. });
  1369. //210705_수정 : 기획전 배너 2개이상 등록시 슬라이드 각각 실행.
  1370. $(".main_1stage .post-bnnWide").each(function(index){
  1371. var pickBnnCont = $(this).find('.swiper-slide');
  1372. var pickBnnLength = pickBnnCont.length;
  1373. if (pickBnnLength < 2) {
  1374. /* SLIDE - MAIN_BANNER WIDE */
  1375. var main_bnnWide_slide = new Swiper ($(this), {
  1376. slidesPerView: 1,
  1377. speed : 1000,
  1378. initialSlide: 0,
  1379. loop: false,
  1380. watchOverflow: true, //loop와 함께 사용 불가.
  1381. a11y: {
  1382. enabled: true,
  1383. notificationClass: 'swiper-notification',
  1384. prevSlideMessage: '이전 슬라이드',
  1385. nextSlideMessage: '다음 슬라이드',
  1386. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1387. },
  1388. navigation: {
  1389. nextEl: '.main_1stage .swiper-button-next',
  1390. prevEl: '.main_1stage .swiper-button-prev',
  1391. },
  1392. // allowTouchMove : false,
  1393. // centeredSlides: true,
  1394. });
  1395. }else{
  1396. /* SLIDE - MAIN_BANNER WIDE */
  1397. var main_bnnWide_slide = new Swiper ($(this), {
  1398. slidesPerView: 1,
  1399. speed : 1000,
  1400. initialSlide: 0,
  1401. loop: true,
  1402. autoplay: {
  1403. delay: 4000,
  1404. disableOnInteraction: false,
  1405. },
  1406. a11y: {
  1407. enabled: true,
  1408. notificationClass: 'swiper-notification',
  1409. prevSlideMessage: '이전 슬라이드',
  1410. nextSlideMessage: '다음 슬라이드',
  1411. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1412. },
  1413. navigation: {
  1414. nextEl: '.main_1stage .swiper-button-next',
  1415. prevEl: '.main_1stage .swiper-button-prev',
  1416. },
  1417. // allowTouchMove : false,
  1418. // centeredSlides: true,
  1419. });
  1420. }
  1421. });
  1422. /* SLIDE - MAIN_RECOMM */
  1423. //MAIN_RECOMM_키워드 탭
  1424. $(".main_recomm .tag_list .btn").click(function(){
  1425. var recommActive = $(this).attr('data-tab');
  1426. $(".main_recomm .tag_list .btn").removeClass('active');
  1427. $(".main_recomm .tagitem").removeClass('active');
  1428. $(this).addClass('active');
  1429. $('#'+recommActive).addClass('active');
  1430. });
  1431. function init(){
  1432. if(main_recomm_slide != null) main_recomm_slide.destroy();
  1433. var main_recomm_slide = new Swiper ('.main_recomm .post-recomm', {
  1434. slidesPerView: 5,
  1435. slidesPerGroup: 5,
  1436. speed : 1000,
  1437. spaceBetween: 20,
  1438. loop : true,
  1439. a11y: {
  1440. enabled: true,
  1441. notificationClass: 'swiper-notification',
  1442. prevSlideMessage: '이전 슬라이드',
  1443. nextSlideMessage: '다음 슬라이드',
  1444. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1445. },
  1446. pagination: {
  1447. el: '.main_recomm .swiper-pagination',
  1448. clickable: true,
  1449. },
  1450. navigation: {
  1451. nextEl: '.main_recomm .swiper-button-next',
  1452. prevEl: '.main_recomm .swiper-button-prev',
  1453. },
  1454. observer:true,
  1455. observeParents: true,
  1456. });
  1457. }
  1458. init();
  1459. /* SLIDE - MAIN_FORYOU */
  1460. var cntNum = 0;
  1461. var main_foryou_slide = new Swiper ('.main_foryou .post-sug .swiper-container', {
  1462. allowTouchMove: false,
  1463. loop: false,
  1464. effect: 'fade',
  1465. autoHeight: false,
  1466. autoplay: {
  1467. delay: 25000,
  1468. disableOnInteraction: false,
  1469. },
  1470. a11y: {
  1471. enabled: true,
  1472. notificationClass: 'swiper-notification',
  1473. prevSlideMessage: '이전 슬라이드',
  1474. nextSlideMessage: '다음 슬라이드',
  1475. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1476. },
  1477. pagination: {
  1478. el: '.post-sug .swiper-pagination',
  1479. clickable: true,
  1480. },
  1481. on : {
  1482. slideChange: function(){
  1483. $(".fy_nav .swiper-slide li").children('.btn_shape').removeClass('active');
  1484. $(".fy_nav .swiper-slide-next li").eq(0).children('.btn_shape').addClass('active');
  1485. $(".fy_nav .swiper-slide-prev li").eq(0).children('.btn_shape').addClass('active');
  1486. foryouIndex = -1;
  1487. if(cntNum === 0){
  1488. $('.fy_item').removeClass('active');
  1489. $('#fy6').addClass('active');
  1490. cntNum = 1;
  1491. } else {
  1492. $('.fy_item').removeClass('active');
  1493. $('#fy1').addClass('active');
  1494. cntNum = 0;
  1495. }
  1496. clearInterval(ti);
  1497. ti = startTimeInterval();
  1498. }
  1499. },
  1500. });
  1501. function foryouInterval(_foryouIndex) {
  1502. var foryouCateItems = $(".main_foryou .fy_nav .swiper-slide-active ul li .btn_shape");
  1503. $(foryouCateItems[(_foryouIndex + 1) % 5]).addClass("active");
  1504. $(foryouCateItems[_foryouIndex % 5]).removeClass("active");
  1505. }
  1506. function foryouFy_item(_Fy_itemIndex) {
  1507. var fynavItems = $('.main_foryou .fy_nav .swiper-slide-active ul li .btn_shape.active');
  1508. var fyActive = $(fynavItems).attr('data-tab');
  1509. // $(".fy_nav .btn_shape").removeClass('active');
  1510. $(".fy_item").removeClass('active');
  1511. // $(".fy_item").addClass('active');
  1512. $('#'+fyActive).addClass('active');
  1513. }
  1514. var foryouIndex = 0;
  1515. var ti;
  1516. function startTimeInterval() {
  1517. return setInterval(function () {
  1518. $(".fy_nav .btn_shape").removeClass('active');
  1519. $(".fy_item").removeClass('active');
  1520. foryouInterval(foryouIndex);
  1521. foryouFy_item();
  1522. if (foryouIndex >= 5) foryouIndex = 0;
  1523. foryouIndex++;
  1524. }, 5000);
  1525. }
  1526. $(".fy_nav .btn_shape").click(function(){
  1527. var fyActive = $(this).attr('data-tab');
  1528. $(".fy_nav .btn_shape").removeClass('active');
  1529. $(".fy_item").removeClass('active');
  1530. $(this).addClass('active');
  1531. $('#'+fyActive).addClass('active');
  1532. });
  1533. $(".fy_nav ul li").click(function(){
  1534. foryouIndex = $(this).index();
  1535. clearInterval(ti);
  1536. ti = startTimeInterval();
  1537. });
  1538. ti = startTimeInterval();
  1539. /* SLIDE - MAIN_TV */
  1540. //210629_ 수정 : 슬라이드 1개일 때, loop랑 롤링 제거.
  1541. var mainTvCont = $('.main_tv .swiper-slide');
  1542. var mainTvLength = mainTvCont.length;
  1543. if (mainTvLength < 2) {
  1544. var main_tv_slide = new Swiper ('.main_tv .post-tv', {
  1545. loop: false,
  1546. watchOverflow:true,
  1547. slidesPerView: 'auto',
  1548. spaceBetween: 170,
  1549. centeredSlides: true,
  1550. speed : 1000,
  1551. autoplay: false,
  1552. a11y: {
  1553. enabled: true,
  1554. notificationClass: 'swiper-notification',
  1555. prevSlideMessage: '이전 슬라이드',
  1556. nextSlideMessage: '다음 슬라이드',
  1557. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1558. },
  1559. navigation: {
  1560. nextEl: '.main_tv .swiper-button-next',
  1561. prevEl: '.main_tv .swiper-button-prev',
  1562. },
  1563. pagination: {
  1564. el: '.main_tv .swiper-pagination',
  1565. clickable: true,
  1566. },
  1567. });
  1568. }else{
  1569. var main_tv_slide = new Swiper ('.main_tv .post-tv', {
  1570. loop: true,
  1571. slidesPerView: 'auto',
  1572. spaceBetween: 170,
  1573. centeredSlides: true,
  1574. speed : 1000,
  1575. autoplay: false,
  1576. a11y: {
  1577. enabled: true,
  1578. notificationClass: 'swiper-notification',
  1579. prevSlideMessage: '이전 슬라이드',
  1580. nextSlideMessage: '다음 슬라이드',
  1581. paginationBulletMessage: '슬라이드 {{index}}로 이동',
  1582. },
  1583. navigation: {
  1584. nextEl: '.main_tv .swiper-button-next',
  1585. prevEl: '.main_tv .swiper-button-prev',
  1586. },
  1587. pagination: {
  1588. el: '.main_tv .swiper-pagination',
  1589. clickable: true,
  1590. },
  1591. });
  1592. }
  1593. // 스크립트 제거
  1594. function fnRemoveHTML(text){
  1595. var reText = text.replace(/(<br>|<br\/>|<br \/>)/g, "\n");
  1596. reText = reText.replace(/<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/ig, "");
  1597. reText = reText.replace(/(?:\r\n|\r|\n)/g, '<br/>');
  1598. return reText;
  1599. }
  1600. $(document).ready(function() {
  1601. // 몰메인 <br> 태그
  1602. $('.mainTitle').each(function (){
  1603. var brText = $(this).find("input[name=mainTitlee]").val();
  1604. // let tag = brText.replace(/(<br>|<br\/>|<br \/>)/g, '<br>');
  1605. let tag = fnRemoveHTML(brText);
  1606. $(this).append(tag);
  1607. });
  1608. // $('.mainSubTitle').each(function (){
  1609. // var brText = $(this).find("input[name=mainSubTitlee]").val();
  1610. // let tag = fnRemoveHTML(brText);
  1611. // $(this).append(tag);
  1612. // });
  1613. // 가로긴배너 슬라이드
  1614. $('.silderBannerArea').each(function (){
  1615. let tag = '';
  1616. if(!gagajf.isNull($(this).find("input[name=bannerNote]").val())) {
  1617. var noteText = $(this).find("input[name=bannerNote]").val();
  1618. tag = fnRemoveHTML(noteText);
  1619. $(this).find('.noteArea').append(tag);
  1620. }
  1621. });
  1622. // 스타일리포트 <br> 태그
  1623. $('.styleArea').each(function (){
  1624. let tag = '';
  1625. let tag2 = '';
  1626. if(!gagajf.isNull($(this).find("input[name=styleTitle]").val())) {
  1627. var titleText = $(this).find("input[name=styleTitle]").val();
  1628. tag = fnRemoveHTML(titleText);
  1629. $(this).find('.styleTitleC').append(tag);
  1630. }
  1631. if(!gagajf.isNull($(this).find("input[name=styleNote]").val())) {
  1632. var noteText = $(this).find("input[name=styleNote]").val();
  1633. tag2 = fnRemoveHTML(noteText);
  1634. $(this).find('.styleNoteC').append(tag2);
  1635. }
  1636. });
  1637. // 잇아이템 <br> 태그
  1638. if(!gagajf.isNull($("#id004").find("input[name=title]").val())){
  1639. var id004Text = $("#id004").find("input[name=title]").val();
  1640. let tag = fnRemoveHTML(id004Text);
  1641. $("#id004").append(tag);
  1642. }
  1643. // 핫딜 <br> 태그
  1644. if(!gagajf.isNull($("#id006").find("input[name=title]").val())){
  1645. var id006Text = $("#id006").find("input[name=title]").val();
  1646. let tag = fnRemoveHTML(id006Text);
  1647. $("#id006").append(tag);
  1648. }
  1649. // 브랜드픽 <br> 태그
  1650. $('#id007 .title').each(function (){
  1651. let tag = '';
  1652. if(!gagajf.isNull($(this).find("input[name=title]").val())){
  1653. var brText = $(this).find("input[name=title]").val();
  1654. tag = fnRemoveHTML(brText);
  1655. $(this).append(tag);
  1656. }
  1657. });
  1658. });
  1659. /*]]>*/
  1660. </script>
  1661. <!-- Criteo 홈페이지 태그 -->
  1662. <script type="text/javascript">
  1663. window.criteo_q = window.criteo_q || [];
  1664. var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
  1665. window.criteo_q.push(
  1666. { event: "setAccount", account: 6762}, // 이 라인은 업데이트하면 안됩니다
  1667. { event: "setEmail", email: criteoEmail }, // 빈 문자일 수 있습니다
  1668. { event: "setSiteType", type: deviceType},
  1669. { event: "viewHome"});
  1670. </script>
  1671. <!--// Criteo 홈페이지 태그 -->
  1672. <!-- Enliple(모비온) Insite naver Quick start -->
  1673. <script type="text/javascript">
  1674. // 인사이트 마케팅
  1675. (function(m,b,r,i,s){m.mbris=m.mbris||function(){(m.mbris.q=m.mbris.q||[]).push(arguments)};i=b.createElement(r);i.async=!0;i.defer=!0;i.src="https://cdn.megadata.co.kr/dist/prod/enp_mbris.min.js";0<b.querySelectorAll("script[src*=enp_mbris]").length&&m.ENP_MBRIS_INVOKE?m.ENP_MBRIS_INVOKE():(s=b.getElementsByTagName(r)[0],s.parentNode.insertBefore(i,s))})(window,document,"script");mbris("202108222155731618_is24_1_01,202108222155731619_is24_1_02");
  1676. </script>
  1677. <!--// Enliple(모비온) Insite naver Quick end -->
  1678. </th:block>
  1679. </body>
  1680. </html>