FooterWeb.html 45 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <footer id="footer" th:fragment="footer">
  5. <!-- footer start -->
  6. <div class="common_footer">
  7. <div class="service_support">
  8. <h2>
  9. <i class="ico ico_logo_ft"></i>
  10. <em class="sr-only">STYLE24</em>
  11. </h2>
  12. <ul class="support_txt">
  13. <li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_USE_TERMS);"><span>이용약관</span></a></li>
  14. <li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_PRIVACY_POLICY);"><strong>개인정보취급방침</strong></a></li>
  15. <li><a href="#partnersPop" rel="modal:open" return false;><span>제휴/입점문의</span></a></li>
  16. <li><a href="http://zine.istyle24.com" target="_blank" title="새창 열림"><span data-font="lato">SN<em>@</em>PP</span><i class="ico ico_blank ml5"></i></a></li>
  17. </ul>
  18. <div class="family_link">
  19. <h2><a href="" class="btn ui_toggle" data-font="lato">FAMILY SITE<i class="ico ico_ft_arrow_b"></i></a></h2>
  20. <dl id="family_site" class="">
  21. <dt class="no_tit"><span class="blind">그룹없음</span></dt>
  22. <dd><a class="clickable" href="http://www.hansaeyes24.com" target="_blank" title="새창 열림">한세예스24홀딩스</a></dd>
  23. <dd><a class="clickable" href="https://www.hansae.com" target="_blank" title="새창 열림">한세실업</a></dd>
  24. <dd><a class="clickable" href="http://www.hansaedreams.co.kr" target="_blank" title="새창 열림">한세드림</a></dd>
  25. <dd><a class="clickable" href="https://www.curlysue.co.kr" target="_blank" title="새창 열림">컬리수</a></dd>
  26. <dd><a class="clickable" href="http://www.yes24.com/main/default.aspx" target="_blank" title="새창 열림">예스24</a></dd>
  27. <dd><a class="clickable" href="https://www.yes24.vn" target="_blank" title="새창 열림">YES24 Vietnam</a></dd>
  28. <dd><a class="clickable" href="http://www.yes24.co.id" target="_blank" title="새창 열림">YES24 Indonesia</a></dd>
  29. <dd><a class="clickable" href="http://www.bookdonga.com/main.donga" target="_blank" title="새창 열림">동아출판</a></dd>
  30. <!-- 그룹 구분 할 경우,
  31. <dt><span class="txt">그룹1</span></dt>
  32. <dd><a class="clickable" href="" target="_blank" title="새창 열림">그룹1의사이트맵1</a></dd>
  33. <dd><a class="clickable" href="" target="_blank" title="새창 열림">그룹1의사이트맵2</a></dd>
  34. <dd><a class="clickable" href="" target="_blank" title="새창 열림">그룹1의사이트맵3</a></dd>
  35. -->
  36. </dl>
  37. </div>
  38. <div class="connect">
  39. <div class="cs_box">
  40. <p>
  41. <span class="mb20"><a class="clickable" href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_FAQ);">고객센터<i class="ico ico_ft_arrow_r ml5"></i></a></span><br>
  42. <span class="time mb20">평일 <span data-font="lato"> 09:00 ~ 18:00</span> <br> (토/일공휴일 휴무)</span><br>
  43. <span class="tel mb10" data-font="lato">1544-5336</span><br>
  44. <span class="fax mb10" data-font="lato">F.02-780-0435</span><br>
  45. <span class="mail mb30" data-font="lato">Email : help@istyle24.com</span>
  46. </p>
  47. </div>
  48. <div class="sns_box clear">
  49. <a href="https://www.facebook.com/istyle24" class="fbook clickable fl mr5" target="_blank" title="새창 열림"><span class="sr-only">STYLE24 페이스북</span></a>
  50. <a href="https://instagram.com/istyle24.official?igshid=o3nzm9tydg9n" class="insta clickable fl" target="_blank" title="새창 열림"><span class="sr-only">STYLE24 인스타그램</span></a>
  51. </div>
  52. <div class="isms_box mt30">
  53. <a href="http://www.yes24.com/notice/pop_isms.html" onclick="window.open(this.href, '_blank','width=500,height=708,toolbars=no,scrollbars=no'); return false;">
  54. <p>정보보호관리체계<br>ISMS 인증획득</p>
  55. </a>
  56. </div>
  57. </div>
  58. </div>
  59. <div class="corporation_info">
  60. <div class="ft_cpinfo">
  61. <dl>
  62. <dt>아이스타일이십사 주식회사</dt>
  63. <dd>
  64. <div>
  65. <p>
  66. <span>대표이사 : 윤종선</span>
  67. <span>주소: 서울시 영등포구 은행로 <em data-font="lato">11</em>, <em data-font="lato">8</em>층 (여의도동, 일신빌딩)</span> <br>
  68. <span>사업자등록번호: <em data-font="lato">116-27-32499</em></span>
  69. <span>통신판매업 신고번호: 제<rm data-font="lato">2020</rm>-서울영등포-<rm data-font="lato">1432</rm></span>
  70. <span><a class="clickable" href="http://www.ftc.go.kr/bizCommPop.do?wrkr_no=2298137000" target="_blank" title="새창 열림">사업자정보확인</a></span><br>
  71. <span>개인정보보호책임자 : 김명인</span>
  72. <span>호스팅 서비스사업자 : 아이스타일이십사(주)</span>
  73. </p>
  74. </div>
  75. </dd>
  76. </dl>
  77. </div>
  78. <div class="ft_cpinfo">
  79. <dl>
  80. <dt>소비자피해보상보험</dt>
  81. <dd>
  82. <div>
  83. <p>
  84. 고객님은 안전거래를 위해 현금 결제 시 저희 쇼핑몰이 가입한<br>
  85. 소비자피해보상보험 서비스를 이용하실 수 있습니다.
  86. <a class="clickable" href="https://mall.sgic.co.kr/csh/iutf/sh/shop/CSHINFO004VM0.mvc?tm=3&q_sk=2&q_sv=2298137000" target="_blank" title="새창 열림">가입정보확인</a>
  87. </p>
  88. </div>
  89. </dd>
  90. </dl>
  91. </div>
  92. </div>
  93. <div class="copyright">
  94. <p data-font="lato">
  95. COPYRIGHT©2020. STYLE24 ALL RIGHTS RESERVED.
  96. </p>
  97. </div>
  98. <div class="mobile_version" style="display:none" id="_moveToMobileVer">
  99. <a href="javascript:appBroswer('http://m.ssg.com','mo');" class="btn_def">모바일 버전으로 가기</a>
  100. </div>
  101. </div>
  102. <!-- 제휴및입점팝업 -->
  103. <div class="modal fade partners_pop" id="partnersPop" tabindex="-1" role="dialog" aria-labelledby="modalScrollLabel" aria-hidden="true">
  104. <div class="modal-dialog" role="document">
  105. <div class="modal-content">
  106. <div class="modal-header">
  107. <h5 class="modal-title">제휴 및 입점문의</h5>
  108. </div>
  109. <div class="modal-body">
  110. <p>
  111. 스타일이십사㈜ 제휴를 통해 함께 성장하고자 하는 기업 및 개인께서는 아래<br>
  112. 담당자에게 메일을 주세요. 작성된 내용은 각 담당부서에서 검토 후 정성껏 <br>
  113. 회신 드리겠습니다.
  114. </p>
  115. <section class="order_row">
  116. <div class="tbl point_tbl track_tbl type2">
  117. <table>
  118. <colgroup>
  119. <col width="140px">
  120. <col width="100px">
  121. <col width="240px">
  122. </colgroup>
  123. <thead>
  124. <tr>
  125. <th>구분</th>
  126. <th>담당자</th>
  127. <th>연락처</th>
  128. </tr>
  129. </thead>
  130. <tbody>
  131. <tr>
  132. <td>입점 문의</td>
  133. <td>석혜민</td>
  134. <td>hmsuk@yes24.com</td>
  135. </tr>
  136. <tr>
  137. <td>제휴 문의</td>
  138. <td>정석헌</td>
  139. <td>blacktan01@yes24.com</td>
  140. </tr>
  141. </tbody>
  142. </table>
  143. </div>
  144. </section>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. <!-- 퀵메뉴 -->
  150. <div id="quick_menu">
  151. <ul class="quick_btn">
  152. <li>
  153. <button type="button" id="quick01" class="quick_btn01" data-tab="quick01">
  154. <img src="/images/pc/ico_qk_history.png" alt="최근 본 상품"/>
  155. <span class="count"></span>
  156. </button>
  157. </li>
  158. <li>
  159. <button type="button" id="" class="quick_btn02" data-tab="quick02">
  160. <img src="/images/pc/ico_qk_cart.png" alt="쇼핑백"/>
  161. <span class="count">2</span>
  162. </button>
  163. </li>
  164. <li>
  165. <button type="button" id="" class="quick_btn03" data-tab="quick03">
  166. <img src="/images/pc/ico_qk_like.png" alt="위시리스트"/>
  167. <span class="count">100</span>
  168. </button>
  169. </li>
  170. <li>
  171. <button type="button" id="" class="quick_btn04" data-tab="quick04">
  172. <img src="/images/pc/ico_qk_coupon.png" alt="쿠폰"/>
  173. <span class="count">100</span>
  174. </button>
  175. </li>
  176. <li>
  177. <button type="button" id="" class="quick_btn05" data-tab="quick05">
  178. <img src="/images/pc/ico_qk_cate.png" alt="카테고리"/>
  179. </button>
  180. </li>
  181. <li>
  182. <button type="button" id="top_btn">
  183. <img src="/images/pc/ico_qk_top.png" alt="상단으로가기 버튼"/>
  184. </button>
  185. </li>
  186. </ul>
  187. <div class="tabs_con">
  188. <button type="button" class="quick_close_btn"><span class="sr-only">퀵메뉴 닫기</span></button>
  189. <div class="history quick_con quick01"> <!-- 퀵메뉴_최근 본 상품 -->
  190. <div class="quick_head">
  191. <h3>최근 본 상품</h3>
  192. </div>
  193. <div class="quick_body" id="quickMenuTodayGoods"> <!-- 최근 본 상품 없을 시 nodata 클래스 추가 -->
  194. <!-- <div class="product_count"><span class='c_primary'>30</span>개의 상품</div>
  195. <div class="itemsGrp">
  196. <div class="item_prod">
  197. <div class="item_state">
  198. <a href="#none" class=" itemLink">
  199. <div class="itemPic">
  200. <img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
  201. </div>
  202. </a>
  203. </div>
  204. </div>
  205. <div class="item_prod">
  206. <div class="item_state">
  207. <a href="#none" class=" itemLink">
  208. <div class="itemPic">
  209. <img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
  210. </div>
  211. </a>
  212. </div>
  213. </div>
  214. <div class="item_prod">
  215. <div class="item_state">
  216. <a href="#none" class=" itemLink">
  217. <div class="itemPic">
  218. <img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
  219. </div>
  220. </a>
  221. </div>
  222. </div>
  223. <div class="item_prod">
  224. <div class="item_state">
  225. <a href="#none" class=" itemLink">
  226. <div class="itemPic">
  227. <img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
  228. </div>
  229. </a>
  230. </div>
  231. </div>
  232. <div class="item_prod">
  233. <div class="item_state">
  234. <a href="#none" class=" itemLink">
  235. <div class="itemPic">
  236. <img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
  237. </div>
  238. </a>
  239. </div>
  240. </div>
  241. <div class="item_prod">
  242. <div class="item_state">
  243. <a href="#none" class=" itemLink">
  244. <div class="itemPic">
  245. <img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
  246. </div>
  247. </a>
  248. </div>
  249. </div>
  250. <div class="item_prod">
  251. <div class="item_state">
  252. <a href="#none" class=" itemLink">
  253. <div class="itemPic">
  254. <img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
  255. </div>
  256. </a>
  257. </div>
  258. </div>
  259. <div class="item_prod">
  260. <div class="item_state">
  261. <a href="#none" class=" itemLink">
  262. <div class="itemPic">
  263. <img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
  264. </div>
  265. </a>
  266. </div>
  267. </div>
  268. <div class="item_prod">
  269. <div class="item_state">
  270. <a href="#none" class=" itemLink">
  271. <div class="itemPic">
  272. <img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
  273. </div>
  274. </a>
  275. </div>
  276. </div>
  277. <div class="no_item">
  278. 최근 본 상품이 없습니다.
  279. </div> -->
  280. </div>
  281. </div>
  282. </div>
  283. <div class="shopingbag quick_con quick02"> <!-- 퀵메뉴_쇼핑백 -->
  284. <div class="quick_head">
  285. <h3><a href="">쇼핑백</a></h3>
  286. </div>
  287. <div class="quick_body nodata"> <!-- 쇼핑백 상품 없을 시 nodata 클래스 추가 -->
  288. <div class="product_count"><span class='c_primary'>30</span>개의 상품</div>
  289. <div class="itemsGrp existence">
  290. <div class="item_prod">
  291. <button type="button" class="delete_btn"><span class="sr-only">해당상품 삭제</span></button>
  292. <div class="item_state">
  293. <div class="shape"><span>곧 품절돼요!</span></div>
  294. <a href="javascript:;" class="itemLink">
  295. <div class="itemPic">
  296. <img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
  297. </div>
  298. <p class="itemBrand">BRAND NAME</p>
  299. <div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
  300. <p class="itemSize">
  301. <span>105</span> / <span>블랙</span> / <span>1</span>
  302. </p>
  303. <p class="itemPrice">80,100
  304. <span class="itemPrice_original">89,000</span>
  305. </p>
  306. <div class="itemComment">다다익선 할인 적용</div>
  307. </a>
  308. </div>
  309. </div>
  310. <div class="item_prod">
  311. <button type="button" class="delete_btn"><span class="sr-only">해당상품 삭제</span></button>
  312. <div class="item_state">
  313. <div class="shape"><span>곧 품절돼요!</span></div>
  314. <a href="javascript:;" class="itemLink">
  315. <div class="itemPic">
  316. <img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
  317. </div>
  318. <p class="itemBrand">BRAND NAME</p>
  319. <div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
  320. <p class="itemSize">
  321. <span>105</span> / <span>블랙</span> / <span>1</span>
  322. </p>
  323. <p class="itemPrice">80,100
  324. <span class="itemPrice_original">89,000</span>
  325. </p>
  326. </a>
  327. </div>
  328. </div>
  329. <div class="item_prod">
  330. <button type="button" class="delete_btn"><span class="sr-only">해당상품 삭제</span></button>
  331. <div class="item_state">
  332. <a href="javascript:;" class="itemLink">
  333. <div class="itemPic">
  334. <img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
  335. </div>
  336. <p class="itemBrand">BRAND NAME</p>
  337. <div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
  338. <p class="itemSize">
  339. <span>105</span> / <span>블랙</span> / <span>1</span>
  340. </p>
  341. <p class="itemPrice">80,100
  342. <span class="itemPrice_original">89,000</span>
  343. </p>
  344. <div class="itemComment">다다익선 할인 적용</div>
  345. </a>
  346. </div>
  347. </div>
  348. <div class="item_prod">
  349. <button type="button" class="delete_btn"><span class="sr-only">해당상품 삭제</span></button>
  350. <div class="item_state">
  351. <a href="javascript:;" class="itemLink">
  352. <div class="itemPic">
  353. <img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
  354. </div>
  355. <p class="itemBrand">BRAND NAME</p>
  356. <div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
  357. <p class="itemSize">
  358. <span>105</span> / <span>블랙</span> / <span>1</span>
  359. </p>
  360. <p class="itemPrice">80,100
  361. <span class="itemPrice_original">89,000</span>
  362. </p>
  363. </a>
  364. </div>
  365. </div>
  366. </div>
  367. <!-- 쇼핑백 없을 시 -->
  368. <div class="itemsGrp empty">
  369. <p class="desc">쇼핑백에 담긴 상품이 없습니다.</p>
  370. <span class="subH3">지금 많이 보고있어요</span>
  371. <div class="item_prod">
  372. <div class="item_state">
  373. <a href="javascript:;" class="itemLink">
  374. <div class="itemPic">
  375. <img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
  376. </div>
  377. <p class="itemBrand">BRAND NAME</p>
  378. <div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
  379. <p class="itemPrice">80,100
  380. <span class="itemPrice_original">89,000</span>
  381. </p>
  382. <!-- 미사용 <button type="button" class="btn btn_sm cart_btn"><span>쇼핑백 담기</span></button> -->
  383. <div class="viewCount"><span>508</span>명 보는중</div>
  384. </a>
  385. </div>
  386. </div>
  387. <div class="item_prod">
  388. <div class="item_state">
  389. <a href="javascript:;" class="itemLink">
  390. <div class="itemPic">
  391. <img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
  392. </div>
  393. <p class="itemBrand">BRAND NAME</p>
  394. <div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
  395. <p class="itemPrice">80,100
  396. <span class="itemPrice_original">89,000</span>
  397. </p>
  398. <!-- 미사용 <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button> -->
  399. <div class="viewCount"><span>58</span>명 보는중</div>
  400. </a>
  401. </div>
  402. </div>
  403. <div class="item_prod">
  404. <div class="item_state">
  405. <a href="javascript:;" class="itemLink">
  406. <div class="itemPic">
  407. <img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
  408. </div>
  409. <p class="itemBrand">BRAND NAME</p>
  410. <div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
  411. <p class="itemPrice">80,100
  412. <span class="itemPrice_original">89,000</span>
  413. </p>
  414. <!-- 미사용 <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button> -->
  415. <div class="viewCount"><span>9</span>명 보는중</div>
  416. </a>
  417. </div>
  418. </div>
  419. <div class="item_prod">
  420. <div class="item_state">
  421. <a href="javascript:;" class="itemLink">
  422. <div class="itemPic">
  423. <img alt="BLACK-a" class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg"/>
  424. </div>
  425. <p class="itemBrand">BRAND NAME</p>
  426. <div class="itemName">[온라인 단독] 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼 여성 니트 후드 경량 다운 점퍼</div>
  427. <p class="itemPrice">80,100
  428. <span class="itemPrice_original">89,000</span>
  429. </p>
  430. <!-- 미사용 <button type="button" class="btn btn_sm cart_btn"><span>쇼핑백 담기</span></button> -->
  431. <div class="viewCount"><span>452</span>명 보는중</div>
  432. </a>
  433. </div>
  434. </div>
  435. </div>
  436. <!-- //쇼핑백 없을 시 -->
  437. <button type="button" class="btn btn_default purchase_btn"><span>전체 상품 구매하기</span></button>
  438. </div>
  439. </div>
  440. <div class="wishlist quick_con quick03"> <!-- 퀵메뉴_위시리스트 -->
  441. <div class="quick_head">
  442. <h3><a href="">위시리스트</a></h3>
  443. </div>
  444. <div class="quick_body"> <!-- 최근 본 상품 없을 시 nodata 클래스 추가 --> <!-- 비로그인 시 need_login 클래스 추가 -->
  445. <div class="product_count"><span class='c_primary'>50</span>개의 상품</div>
  446. <div class="itemsGrp">
  447. <div class="item_prod">
  448. <div class="item_state">
  449. <div class="shape"><span>곧 품절돼요!</span></div>
  450. <a href="#none" class=" itemLink">
  451. <div class="itemPic">
  452. <img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
  453. <button type="button" class="itemLike active">관심상품 추가</button>
  454. </div>
  455. </a>
  456. <div class="hover_con">
  457. <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
  458. </div>
  459. </div>
  460. </div>
  461. <div class="item_prod">
  462. <div class="item_state">
  463. <div class="shape"><span>곧 품절돼요!</span></div>
  464. <a href="#none" class=" itemLink">
  465. <div class="itemPic">
  466. <img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
  467. <button type="button" class="itemLike active">관심상품 추가</button>
  468. </div>
  469. </a>
  470. <div class="hover_con">
  471. <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
  472. </div>
  473. </div>
  474. </div>
  475. <div class="item_prod">
  476. <div class="item_state">
  477. <a href="#none" class=" itemLink">
  478. <div class="itemPic">
  479. <img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
  480. <button type="button" class="itemLike active">관심상품 추가</button>
  481. </div>
  482. </a>
  483. <div class="hover_con">
  484. <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
  485. </div>
  486. </div>
  487. </div>
  488. <div class="item_prod">
  489. <div class="item_state">
  490. <a href="#none" class=" itemLink">
  491. <div class="itemPic">
  492. <img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
  493. <button type="button" class="itemLike active">관심상품 추가</button>
  494. </div>
  495. </a>
  496. <div class="hover_con">
  497. <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
  498. </div>
  499. </div>
  500. </div>
  501. <div class="item_prod">
  502. <div class="item_state">
  503. <a href="#none" class=" itemLink">
  504. <div class="itemPic">
  505. <img class="vLHTC pd_img" src="/images/pc/thumb/prod2.jpg" alt="이미지설명"/>
  506. <button type="button" class="itemLike active">관심상품 추가</button>
  507. </div>
  508. </a>
  509. <div class="hover_con">
  510. <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
  511. </div>
  512. </div>
  513. </div>
  514. <div class="item_prod">
  515. <div class="item_state">
  516. <a href="#none" class=" itemLink">
  517. <div class="itemPic">
  518. <img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
  519. <button type="button" class="itemLike active">관심상품 추가</button>
  520. </div>
  521. </a>
  522. <div class="hover_con">
  523. <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
  524. </div>
  525. </div>
  526. </div>
  527. <div class="item_prod">
  528. <div class="item_state">
  529. <a href="#none" class=" itemLink">
  530. <div class="itemPic">
  531. <img class="vLHTC pd_img" src="/images/pc/thumb/prod1.jpg" alt="이미지설명"/>
  532. <button type="button" class="itemLike active">관심상품 추가</button>
  533. </div>
  534. </a>
  535. <div class="hover_con">
  536. <button type="button" class="btn btn_sm cart_btn on"><span>쇼핑백 담기</span></button>
  537. </div>
  538. </div>
  539. </div>
  540. <div class="no_item">
  541. 최근 본 상품이 없습니다.
  542. </div>
  543. </div>
  544. <div class="login_con">
  545. <div>
  546. <p>로그인 후 이용 가능한 서비스입니다.</p>
  547. <button type="button" class="btn btn_sm"><span>로그인</span></button>
  548. </div>
  549. </div>
  550. </div>
  551. </div>
  552. <div class="coupon quick_con quick04"> <!-- 퀵메뉴_나의 쿠폰 -->
  553. <div class="quick_head">
  554. <h3><a href="">나의 쿠폰</a></h3>
  555. </div>
  556. <div class="quick_body"> <!-- 비로그인 시 need_login 클래스 추가 -->
  557. <div class="coupon_tab">
  558. <a href="#coupon_type01" id="" class="">발급 가능 쿠폰</a>
  559. <a href="#coupon_type02" id="" class="">보유 쿠폰</a>
  560. </div>
  561. <div id="coupon_type01" class="coupon_area">
  562. <div class="pop_cont">
  563. <ul class="coupon_list">
  564. <li>
  565. <div class="coupon">
  566. <div>
  567. <p class="cp_name">
  568. TBJ 시즌오프 20% 할인쿠폰
  569. </p>
  570. <p class="cp_cont">
  571. <span><em>12,399,900</em>원</span>
  572. </p>
  573. <p class="cp_condition">
  574. 500,000원 이상 구매 시 최대 50,000원 할인
  575. <span>1인 최대 90장</span>
  576. </p>
  577. </div>
  578. <button type="button" class="btn btn_dark btn_block btn_coupon_down"><span>쿠폰받기</span></button>
  579. </div>
  580. </li>
  581. <li>
  582. <div class="coupon">
  583. <div>
  584. <p class="cp_name">
  585. 신규가입 40% 할인쿠폰
  586. </p>
  587. <p class="cp_cont">
  588. <span><em>40%</em></span>
  589. </p>
  590. <p class="cp_condition">
  591. 500,000원 이상 구매 시 최대 50,000원 할인
  592. <span>1인 최대 90장</span>
  593. </p>
  594. </div>
  595. <button type="button" class="btn btn_dark btn_block btn_coupon_done" disabled=""><span>받기완료</span></button>
  596. </div>
  597. </li>
  598. <li>
  599. <div class="coupon">
  600. <div>
  601. <p class="cp_name">
  602. TBJ 시즌오프 20% 할인쿠폰
  603. </p>
  604. <p class="cp_cont">
  605. <span><em>12,399,900</em>원</span>
  606. </p>
  607. <p class="cp_condition">
  608. 500,000원 이상 구매 시 최대 50,000원 할인
  609. <span>1인 최대 90장</span>
  610. </p>
  611. </div>
  612. <button type="button" class="btn btn_dark btn_block btn_coupon_down"><span>쿠폰받기</span></button>
  613. </div>
  614. </li>
  615. <li>
  616. <div class="coupon">
  617. <div>
  618. <p class="cp_name">
  619. 신규가입 40% 할인쿠폰
  620. </p>
  621. <p class="cp_cont">
  622. <span><em>40%</em></span>
  623. </p>
  624. <p class="cp_condition">
  625. 500,000원 이상 구매 시 최대 50,000원 할인
  626. <span>1인 최대 90장</span>
  627. </p>
  628. </div>
  629. <button type="button" class="btn btn_dark btn_block btn_coupon_done" disabled=""><span>받기완료</span></button>
  630. </div>
  631. </li>
  632. <li>
  633. <div class="coupon">
  634. <div>
  635. <p class="cp_name">
  636. TBJ 시즌오프 20% 할인쿠폰
  637. </p>
  638. <p class="cp_cont">
  639. <span><em>12,399,900</em>원</span>
  640. </p>
  641. <p class="cp_condition">
  642. 500,000원 이상 구매 시 최대 50,000원 할인
  643. <span>1인 최대 90장</span>
  644. </p>
  645. </div>
  646. <button type="button" class="btn btn_dark btn_block btn_coupon_down"><span>쿠폰받기</span></button>
  647. </div>
  648. </li>
  649. <li>
  650. <div class="coupon">
  651. <div>
  652. <p class="cp_name">
  653. 신규가입 40% 할인쿠폰
  654. </p>
  655. <p class="cp_cont">
  656. <span><em>40%</em></span>
  657. </p>
  658. <p class="cp_condition">
  659. 500,000원 이상 구매 시 최대 50,000원 할인
  660. <span>1인 최대 90장</span>
  661. </p>
  662. </div>
  663. <button type="button" class="btn btn_dark btn_block btn_coupon_done" disabled=""><span>받기완료</span></button>
  664. </div>
  665. </li>
  666. </ul>
  667. </div>
  668. </div>
  669. <div id="coupon_type02" class="coupon_area">
  670. <div class="coupon_list">
  671. <ul class="clear">
  672. <li>
  673. <div class="cp_top">
  674. <div class="cp_detail">
  675. <p class="tit">신규 가입 40% 할인쿠폰</p>
  676. <strong class="sale_t won_t"><span>12,399,900</span>원</strong>
  677. <p class="cp_cont"><span>9,500,500</span>원 이상 구매시 최대 <span>5,000,000</span>원 할인</p>
  678. <span class="cp_cnt"><span>999</span>장 보유</span>
  679. </div>
  680. <span class="cp_shape"></span>
  681. </div>
  682. <div class="cp_date">
  683. <span>2020.01.01</span> ~ <span>2021.01.31</span>
  684. </div>
  685. <div class="cp_info">
  686. <button type="button" class="coupon_pop_btn"><span>사용안내</span></button>
  687. </div>
  688. </li>
  689. <li class="off">
  690. <div class="cp_top">
  691. <div class="cp_detail">
  692. <p class="tit">신규 가입 40% 할인쿠폰</p>
  693. <strong class="sale_t"><span>40</span>%</strong>
  694. <p class="cp_cont"><span>9,500,500</span>원 이상 구매시 최대 <span>5,000,000</span>원 할인</p>
  695. <span class="cp_cnt"><span>999</span>장 보유</span>
  696. </div>
  697. <span class="cp_shape"></span>
  698. </div>
  699. <div class="cp_date">
  700. <span class="cp_off">사용완료</span>
  701. </div>
  702. <div class="cp_info">
  703. <button type="button" class="coupon_pop_btn"><span>사용안내</span></button>
  704. </div>
  705. </li>
  706. </ul>
  707. </div>
  708. </div>
  709. <a href="" class="more_btn">더 보기</a>
  710. <div class="login_con">
  711. <div>
  712. <p>로그인 후 이용 가능한 서비스입니다.</p>
  713. <button type="button" class="btn btn_sm"><span>로그인</span></button>
  714. </div>
  715. </div>
  716. </div>
  717. </div>
  718. <div class="category quick_con quick05"> <!-- 퀵메뉴_카테고리 -->
  719. <div class="quick_head">
  720. <h3>스타일24 카테고리</h3>
  721. </div>
  722. <div class="quick_body">
  723. <ul class="quick_cate_wrap" id="ulQuickMenuCate">
  724. <!-- <li><a href="javascript:;"><span>홈</span></a></li>
  725. <li class="has_children">
  726. <a href="javascript:;"><span>여성</span></a>
  727. <ul class="quick_depth">
  728. <li><a href="javascript:;"><span>티셔츠/셔츠</span></a></li>
  729. <li><a href="javascript:;"><span>니트/가디건/베스트</span></a></li>
  730. <li><a href="javascript:;"><span>원피스/스커트</span></a></li>
  731. <li><a href="javascript:;"><span>팬츠/레깅스</span></a></li>
  732. <li><a href="javascript:;"><span>데님</span></a></li>
  733. <li><a href="javascript:;"><span>자켓/점퍼/코트</span></a></li>
  734. <li><a href="javascript:;"><span>트레이닝/스포츠</span></a></li>
  735. <li><a href="javascript:;"><span>여성잡화</span></a></li>
  736. <li><a href="javascript:;"><span>언더웨어</span></a></li>
  737. </ul>
  738. </li>
  739. <li class="has_children">
  740. <a href="javascript:;"><span>남성</span></a>
  741. <ul class="quick_depth">
  742. <li><a href="javascript:;"><span>티셔츠/셔츠</span></a></li>
  743. <li><a href="javascript:;"><span>니트/가디건/베스트</span></a></li>
  744. <li><a href="javascript:;"><span>원피스/스커트</span></a></li>
  745. <li><a href="javascript:;"><span>팬츠/레깅스</span></a></li>
  746. <li><a href="javascript:;"><span>데님</span></a></li>
  747. <li><a href="javascript:;"><span>자켓/점퍼/코트</span></a></li>
  748. <li><a href="javascript:;"><span>트레이닝/스포츠</span></a></li>
  749. <li><a href="javascript:;"><span>여성잡화</span></a></li>
  750. <li><a href="javascript:;"><span>언더웨어</span></a></li>
  751. </ul>
  752. </li>
  753. <li class="has_children">
  754. <a href="javascript:;"><span>유아동</span></a>
  755. <ul class="quick_depth">
  756. <li><a href="javascript:;"><span>티셔츠/셔츠</span></a></li>
  757. <li><a href="javascript:;"><span>니트/가디건/베스트</span></a></li>
  758. <li><a href="javascript:;"><span>원피스/스커트</span></a></li>
  759. <li><a href="javascript:;"><span>팬츠/레깅스</span></a></li>
  760. <li><a href="javascript:;"><span>데님</span></a></li>
  761. <li><a href="javascript:;"><span>자켓/점퍼/코트</span></a></li>
  762. <li><a href="javascript:;"><span>트레이닝/스포츠</span></a></li>
  763. <li><a href="javascript:;"><span>여성잡화</span></a></li>
  764. <li><a href="javascript:;"><span>언더웨어</span></a></li>
  765. </ul>
  766. </li>
  767. <li class="has_children">
  768. <a href="javascript:;"><span>골프</span></a>
  769. <ul class="quick_depth">
  770. <li><a href="javascript:;"><span>티셔츠/셔츠</span></a></li>
  771. <li><a href="javascript:;"><span>니트/가디건/베스트</span></a></li>
  772. <li><a href="javascript:;"><span>원피스/스커트</span></a></li>
  773. <li><a href="javascript:;"><span>팬츠/레깅스</span></a></li>
  774. <li><a href="javascript:;"><span>데님</span></a></li>
  775. <li><a href="javascript:;"><span>자켓/점퍼/코트</span></a></li>
  776. <li><a href="javascript:;"><span>트레이닝/스포츠</span></a></li>
  777. <li><a href="javascript:;"><span>여성잡화</span></a></li>
  778. <li><a href="javascript:;"><span>언더웨어</span></a></li>
  779. </ul>
  780. </li>
  781. <li class="has_children">
  782. <a href="javascript:;"><span>라이프</span></a>
  783. <ul class="quick_depth">
  784. <li><a href="javascript:;"><span>티셔츠/셔츠</span></a></li>
  785. <li><a href="javascript:;"><span>니트/가디건/베스트</span></a></li>
  786. <li><a href="javascript:;"><span>원피스/스커트</span></a></li>
  787. <li><a href="javascript:;"><span>팬츠/레깅스</span></a></li>
  788. <li><a href="javascript:;"><span>데님</span></a></li>
  789. <li><a href="javascript:;"><span>자켓/점퍼/코트</span></a></li>
  790. <li><a href="javascript:;"><span>트레이닝/스포츠</span></a></li>
  791. <li><a href="javascript:;"><span>여성잡화</span></a></li>
  792. <li><a href="javascript:;"><span>언더웨어</span></a></li>
  793. </ul>
  794. </li>
  795. <li><a href="javascript:;"><span>베스트</span></a></li>
  796. <li><a href="javascript:;"><span>핫딜</span></a></li>
  797. <li><a href="javascript:;"><span>기획전</span></a></li>
  798. <li><a href="javascript:;"><span>총알배송</span></a></li>
  799. <li class="has_children">
  800. <a href="javascript:;"><span>아울렛</span></a>
  801. <ul class="quick_depth">
  802. <li><a href="javascript:;"><span>티셔츠/셔츠</span></a></li>
  803. <li><a href="javascript:;"><span>니트/가디건/베스트</span></a></li>
  804. <li><a href="javascript:;"><span>원피스/스커트</span></a></li>
  805. <li><a href="javascript:;"><span>팬츠/레깅스</span></a></li>
  806. <li><a href="javascript:;"><span>데님</span></a></li>
  807. <li><a href="javascript:;"><span>자켓/점퍼/코트</span></a></li>
  808. <li><a href="javascript:;"><span>트레이닝/스포츠</span></a></li>
  809. <li><a href="javascript:;"><span>여성잡화</span></a></li>
  810. <li><a href="javascript:;"><span>언더웨어</span></a></li>
  811. </ul>
  812. </li>
  813. <li><a href="/"><span>룩북</span></a></li>
  814. <li><a href="/"><span>이벤트/혜택</span></a></li> -->
  815. </ul>
  816. <div class="quick_cate_txt">
  817. <a th:if="${sessionInfo == null}" href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_LOGIN);">로그인</a>
  818. <a th:if="${sessionInfo != null}" href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_LOGOUT);">로그아웃</a>
  819. <a th:if="${sessionInfo == null}" href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);">회원가입</a>
  820. <a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE);">마이페이지</a>
  821. </div>
  822. </div>
  823. </div>
  824. </div>
  825. </div>
  826. <!-- 퀵메뉴 -->
  827. <!-- 쿠폰 사용 내역 팝업 -->
  828. <div class="modal coupon_popup" tabindex="-1" role="dialog" aria-labelledby="PopupBasicLabel" aria-hidden="true">
  829. <div class="modal-dialog" role="document">
  830. <div class="modal-content">
  831. <div class="modal-header">
  832. <h5 class="modal-title">사용 조건</h5>
  833. </div>
  834. <div class="modal-body">
  835. <section class="order_row">
  836. <div class="coupon_condition">
  837. <dl class="clear">
  838. <dt>사용조건</dt>
  839. <dd><span>9,999,999</span>원 구매 시 최대 <span>9,999,999</span>원 할인</dd>
  840. </dl>
  841. <dl class="clear">
  842. <dt>대상조건</dt>
  843. <dd>남성,여성,유아동 카테고리</dd>
  844. </dl>
  845. </div>
  846. </section>
  847. </div>
  848. </div>
  849. </div>
  850. </div>
  851. <script th:inline="javascript">
  852. /*<![CDATA[*/
  853. // 패밀리 사이트
  854. let fnGetFamilySite = function() {
  855. $.getJSON('/renderer/familysite/list'
  856. , function(result, status) {
  857. if (status == 'success') {
  858. if (result.length > 0) {
  859. $('#family_site').html('');
  860. let tag = '<dt class="no_tit"><span class="blind">그룹없음</span></dt>';
  861. $.each(result, function (idx, item) {
  862. if (!gagajf.isNull(item.cdNm)) {
  863. tag += '<dd><a class="clickable" href="' + item.cdNm.substring(0, item.cdNm.indexOf('|')) + '" target="_blank" title="새창 열림">' + item.cdNm.substring(item.cdNm.indexOf('|') + 1) + '</a></dd>\n';
  864. }
  865. });
  866. $('#family_site').html(tag);
  867. }
  868. }
  869. });
  870. }
  871. // 퀵메뉴카테고리
  872. let fnGetQuickMenuCategory = function(cate1) {
  873. let tag = '';
  874. if (cate1 != null) {
  875. tag += '<li class="has_children">\n';
  876. tag += ' <a href="javascript:;"><span>' + cate1.cate1Nm + '</span></a>\n';
  877. if (cate1.leafYn == 'N' && cate1.cate2List.length > 0) {
  878. tag += ' <ul class="quick_depth">\n';
  879. tag += ' <li><a href="javascript:void(0);" onclick="cfnGoToCategoryMain(\'' + cate1.cateGb + '\',' + cate1.cate1No + ');"><span>메인</span></a>\n';
  880. tag += ' <li><a href="javascript:void(0);" onclick="cfnGoToItemkindMain(\'' + cate1.cateGb + '\',' + cate1.cate1No + ');"><span>전체</span></a>\n';
  881. $.each(cate1.cate2List, function(idx2, cate2) {
  882. tag += ' <li><a href="javascript:void(0);" onclick="cfnGoToItemkindMain(\'' + cate2.cateGb + '\',' + cate2.cate1No + ',' + cate2.cate2No + ');"><span>' + cate2.cate2Nm + '</span></a>\n';
  883. });
  884. tag += ' </ul>\n';
  885. }
  886. tag += '</li>\n';
  887. }
  888. return tag;
  889. }
  890. // 퀵메뉴탭 생성
  891. let fnCreateQuickMenuTab = function() {
  892. $.getJSON('/display/gnb/tab/list'
  893. , function(result, status) {
  894. if (status == 'success') {
  895. if (result.length > 0) {
  896. $('#ulQuickMenuCate').html('');
  897. $('#ulQuickMenuCate').append('<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);"><span>홈</span></a></li>\n');
  898. let allCate = [[${allCateList}]];
  899. $.each(result, function(idx, item) {
  900. if (item.contentsType == 'C' || item.contentsType == 'O') { // 컨텐츠유형:카테고리, 아울렛
  901. $.each(allCate, function(allCateIdx, allCateItem) {
  902. if (item.cate1No == allCateItem.cate1No) {
  903. $('#ulQuickMenuCate').append(fnGetQuickMenuCategory(allCateItem));
  904. }
  905. });
  906. } else if (item.contentsType == 'L') { // 컨텐츠유형:링크
  907. $('#ulQuickMenuCate').append('<li><a href="' + item.linkUrl + '"><span>' + item.gtabNm + '</span></a></li>');
  908. }
  909. });
  910. }
  911. }
  912. });
  913. }
  914. // 최근본상품
  915. let fnGetRecentlyGoods = function() {
  916. // $('#quick01').on('click', function() {
  917. $.getJSON('/goods/recently/list'
  918. , function(result, status) {
  919. if (status == 'success') {
  920. $('#quickMenuTodayGoods').html('');
  921. $('#quick01').find('span').html(result.length);
  922. if (result.length > 0) {
  923. let tag = '<div class="product_count"><span class="c_primary">' + result.length + '</span>개의 상품</div>\n';
  924. tag += ' <div class="itemsGrp">\n';
  925. $.each(result, function (idx, item) {
  926. tag += ' <div class="item_prod">\n';
  927. tag += ' <div class="item_state">\n';
  928. tag += ' <a href="javascript:void(0);" onclick="cfnGoToGoodsDetail(\'' + item.goodsCd + '\', \'\', \'\', \'\');" class=" itemLink">\n';
  929. tag += ' <div class="itemPic">\n';
  930. tag += ' <img class="vLHTC pd_img" src="' + _uploadGoodsUrl + '/' + item.sysImgNm + '" alt="이미지설명"/>\n';
  931. tag += ' </div>\n';
  932. tag += ' </a>\n';
  933. tag += ' </div>\n';
  934. tag += ' </div>\n';
  935. });
  936. tag += ' </div>\n';
  937. $('#quickMenuTodayGoods').html(tag);
  938. } else {
  939. $('#quickMenuTodayGoods').addClass('nodata');
  940. }
  941. }
  942. });
  943. // });
  944. }
  945. $(document).ready( function() {
  946. // 퀵메뉴탭 조회
  947. fnCreateQuickMenuTab();
  948. // 패미리사이트 조회
  949. fnGetFamilySite();
  950. // 최근본상품 조회
  951. fnGetRecentlyGoods();
  952. // Family Site
  953. $('.family_link').on('click','.btn',function(e){
  954. e.preventDefault();
  955. $(this).parents('.family_link').find('#family_site').slideToggle(100);
  956. $(this).find('.ico.ico_ft_arrow_b').toggleClass('ico_ft_arrow_t');
  957. });
  958. //퀵메뉴
  959. var tabAnchor = $('.quick_btn button'),
  960. tabPanel = $('#quick_menu .quick_con');
  961. $(document).on('click','.quick_btn button:not(#top_btn)',function(e){
  962. e.preventDefault();
  963. $('body').addClass('lock');
  964. $('#quick_menu').addClass('active');
  965. tabAnchor.removeClass('active');
  966. $(this).addClass('active');
  967. var NewLink = $(this).attr('data-tab');
  968. tabPanel.hide();
  969. $('.' + NewLink).show();
  970. });
  971. //퀵메뉴_쿠폰
  972. var couponAnchor = $('.coupon_tab a'),
  973. couponPanel = $('.coupon_area');
  974. $(document).on('click','.coupon_tab a',function(e){
  975. e.preventDefault();
  976. couponAnchor.removeClass('active');
  977. $(this).addClass('active');
  978. var NewLink = $(this).attr('href');
  979. couponPanel.hide();
  980. $(NewLink).show();
  981. });
  982. couponAnchor.eq(0).trigger('click');
  983. //퀵메뉴 닫을 때
  984. $(document).on('click','#quick_menu .quick_close_btn',function(e){
  985. e.preventDefault();
  986. $('body').removeClass('lock');
  987. $('#quick_menu').removeClass('active');
  988. //$('#quick_menu .quick_con').hide();
  989. });
  990. //퀵메뉴 카테고리 메뉴 클릭시
  991. $(document).on('click','#quick_menu .category .quick_cate_wrap > li',function(e){
  992. $(this).toggleClass('active');
  993. $(this).find('> ul').slideToggle(300);
  994. $(this).siblings('li').find('> ul').slideUp(300);
  995. $(this).siblings('li').removeClass('active');
  996. });
  997. //퀵메뉴 탑버튼 클릭 시
  998. $(document).on('click','#top_btn',function(e){
  999. $('body,html').animate({scrollTop:0});
  1000. });
  1001. //퀵메뉴_쿠폰 사용안내 팝업
  1002. $(".coupon_pop_btn").click(function() {
  1003. $(".coupon_popup").modal("show");
  1004. });
  1005. });
  1006. /*]]>*/
  1007. </script>
  1008. <script th:inline="javascript">
  1009. /*<![CDATA[*/
  1010. var element_layer = document.getElementById('zipcode_layer');
  1011. var cfnGetDaumRoadAddr = function(data) {
  1012. // 팝업에서 검색결과 항목을 클릭했을 때 실행할 코드를 작성하는 부분입니다.
  1013. // 예제를 참고하여 다양한 활용법을 확인해 보세요.
  1014. // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분
  1015. // 도로명 주소의 노출 규칙에 따라 주소를 조합한다.
  1016. // 내려오는 변수가 값이 없는 경우엔 공백('') 값을 가지므로, 이를 참고하여 분기한다.
  1017. let fullRoadAddr = data.roadAddress; // 도로명 주소 변수
  1018. let extraRoadAddr = ''; // 도로명 조합형 주소 변수
  1019. // 법정동명이 있을 경우 추가한다. (법정리는 제외)
  1020. // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
  1021. if (data.bname !== '' && /[동|로|가]$/g.test(data.bname)) {
  1022. extraRoadAddr += data.bname;
  1023. }
  1024. // 건물명이 있고, 공동주택일 경우 추가한다.
  1025. if (data.buildingName !== '' && data.apartment === 'Y') {
  1026. extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
  1027. }
  1028. // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
  1029. if (extraRoadAddr !== '') {
  1030. extraRoadAddr = ' (' + extraRoadAddr + ')';
  1031. }
  1032. // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다.
  1033. if (fullRoadAddr !== '') {
  1034. fullRoadAddr += extraRoadAddr;
  1035. }
  1036. return fullRoadAddr;
  1037. }
  1038. var cfnOpenDaumAddr = function(daumZip) {
  1039. if ($('html').hasClass('is-ie')) {
  1040. daumZip.open();
  1041. } else {
  1042. daumZip.embed(element_layer);
  1043. // iframe을 넣은 element를 보이게 한다.
  1044. element_layer.style.display = 'block';
  1045. // iframe을 넣은 element의 위치를 화면의 가운데로 이동시킨다.
  1046. cfnInitLayerPosition();
  1047. }
  1048. }
  1049. var cfnCloseDaumAddr = function() {
  1050. // iframe을 넣은 element를 안보이게 한다.
  1051. element_layer.style.display = 'none';
  1052. }
  1053. // 브라우저의 크기 변경에 따라 레이어를 가운데로 이동시키고자 하실때에는
  1054. // resize이벤트나, orientationchange이벤트를 이용하여 값이 변경될때마다 아래 함수를 실행 시켜 주시거나,
  1055. // 직접 element_layer의 top,left값을 수정해 주시면 됩니다.
  1056. var cfnInitLayerPosition = function() {
  1057. let width = 420; //우편번호서비스가 들어갈 element의 width
  1058. let height = 470; //우편번호서비스가 들어갈 element의 height
  1059. let borderWidth = 1; //샘플에서 사용하는 border의 두께
  1060. // 위에서 선언한 값들을 실제 element에 넣는다.
  1061. element_layer.style.width = width + 'px';
  1062. element_layer.style.height = height + 'px';
  1063. element_layer.style.border = borderWidth + 'px solid';
  1064. // 실행되는 순간의 화면 너비와 높이 값을 가져와서 중앙에 뜰 수 있도록 위치를 계산한다.
  1065. /*
  1066. element_layer.style.left = (((window.innerWidth || document.documentElement.clientWidth) - width) / 2 - borderWidth) + 'px';
  1067. element_layer.style.top = (((window.innerHeight || document.documentElement.clientHeight) - height) / 2 - borderWidth) + 'px';
  1068. */
  1069. // 다음 레이어 적용
  1070. $("#__daum__layer_1").css("z-index", 3000);
  1071. }
  1072. /*]]>*/
  1073. </script>
  1074. </footer>
  1075. </html>