style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GnbWeb.html
 * @desc    : GNB
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.01.28   gagamel     최초 작성
 *******************************************************************************
 -->
<header id="header" th:fragment="gnb">

	<!-- head start -->
	<div class="common_header">
		<!-- 프로모션 띠 배너 등록 시 노출 -->
		<div class="hd_top_banner" style="background-color:#fd4801;">
			<a href="" class="t_bnr">
				<span style="margin:0 auto;height:60px;line-height:60px;font-size: 20px;font-weight: 600;letter-spacing: -.025em; color:#fff;">APP 수신동의 하면 1만 포인트 증정!</span>
				<!--<img src="ABC.jpg" alt="프로모션"/>-->
			</a>
		</div>
		<!-- //프로모션 띠 배너 등록 시 노출 -->
	
		<div class="area">
			<div class="logo">
				<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">
					<h1>
						<i class="ico ico_logo"></i>
						<em class="blind">STYLE24</em>
					</h1>
				</a>
			</div>
			<div class="util_group">
				<span th:if="${sessionInfo == null}"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_LOGIN);" title="로그인 바로가기">로그인</a></span>
				<span th:if="${sessionInfo != null}"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_LOGOUT);" title="로그아웃">로그아웃</a></span>
				<span th:if="${sessionInfo == null}"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);" title="회원가입 바로가기">회원가입</a></span>
				<span><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE);" title="마이페이지 바로가기">마이페이지</a></span>
			</div>
		</div>
		
		<div class="gnb">
			<!-- nav -->
			<div class="nav">
				<ul class="bundle btn_home">
					<li><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);" class="">홈</a></li>
				</ul>
			
				<ul class="bundle">
					<li class="has_depth">
						<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_ALL_BRAND);">브랜드</a>
						<!-- 브랜드_depth -->
						<div class="depth_menu brand">
							<div class="head_category">
								<div class="tit">
									<p>브랜드</p>
									<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_ALL_BRAND);" class="more">전체보기</a>
								</div>
								<div class="menu" id="divBrandGrp">
								</div>
							</div>
						</div>
					</li>
				</ul>
				
				<ul class="bundle" id="divCate">
				</ul>
				
				<ul class="bundle" id="category3">
					<li class="active" ><a href="#">베스트</a></li>
				<li><a href="#">핫딜</a></li>
				<li><a href="#">기획전</a></li>
				<li><a href="#">총알배송</a></li>
				<li class="has_depth">
					<a href="#">아울렛</a>
					<!-- depth_menu start -->
					<div class="depth_menu category">
						<div class="head_category">
							<div class="tit">
								<p>아울렛</p>
								<a href="" class="more">전체보기</a>
							</div>
							<div class="menu">
								<ul class="maintabs">
									<li><a href="javascript:;">티셔츠/셔츠</a></li>
									<li>
										<a href="javascript:;">여성</a>
										<!-- 2depth -->
										<ul class="box_depth2">
											<li>
												<a href="/">상의</a>
											</li>
											<li>
												<a href="/">하의</a>
												<!-- 3depth -->
												<ul class="box_depth3">
													<li><a href="/">상의</a></li>
													<li><a href="/">하의</a></li>
													<li><a href="/">세트</a></li>
													<li><a href="/">시즌스포츠의류</a></li>
													<li>
														<a href="/">스포츠잡화</a>
														<!-- 4depth -->
														<ul class="box_depth4">
															<li><a href="/">운동화/등산화</a></li>
															<li><a href="/">가방/모자/잡화</a></li>
														</ul> 
													</li>
												</ul>                
											</li>
											<li>
												<a href="/">세트</a>
											</li>
											<li>
												<a href="/">시즌스포츠의류</a>
											</li>
											<li>
												<a href="javascript:;">스포츠잡화</a>
											</li>
										</ul>    
									</li>
									<li>
										<a href="">원피스/스커트</a>
									</li>
									<li><a href="">팬츠/레깅스</a></li>
									<li><a href="">데님</a></li>
									<li><a href="">자켓/점퍼/코트</a></li>
									<li><a href="">트레이닝/스포츠</a></li>
									<li><a href="">여성잡화</a></li>
									<li><a href="">언더웨어</a></li>
								</ul>   
							</div>
						</div>
						<div class="head_banner">
							<div class="tit">
								<p>가을의 신상 만나기</p>
							</div>
							<div class="list">
								<ul class="clear event_con">
									<li>
										<a href="">
											<div class="ev_img"><img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션"></div>
											<div class="txt">
												<p class="tit">2020 FALL COLLECTION 가을에는 이 컬러 2020 FALL COLLECTION 가을에는 이 컬러</p>
											</div>
										</a>
									</li>
									<li>
										<a href="">
											<div class="ev_img"><img src="/images/pc/thumb/ev_list_img02.jpg" alt="단 48시간, 퓨어캐시미어 최대 80%세일 PURE CASHMERE 48H POP-UP">
											</div>
											<div class="txt">
												<p class="tit">FALL NEW ARRIVAL</p>
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!-- //depth_menu end -->
				</li>
				<li><a href="#">룩북</a></li>
				<li><a href="#">이벤트/혜택</a></li>
				</ul>
			</div>
			<!-- // nav -->

			<div class="search">
				<div class="area">
					<form id="searchMainForm" name="searchMainForm">
						<fieldset>  
							<legend>통합검색</legend>
							<input type="text" id="search" name="search" value="" placeholder="모이몰론, 남들보다 빠르게! 신상 check" class="search_input" title="검색어 입력" maxlength="100">								
							<div class="search_group" id="ark" style="display: none;">
								<div id="ark_down" style="position: absolute; display: block; cursor: pointer; top: 3px; left: 366px;"></div>
								<div id="ark_up" style="position: absolute; display: none; cursor: pointer; top: 3px; left: 366px;"></div>
								<div class="area">
									<p class="blind">연관검색</p>
									<div class="search_list">
										<div id="ark_content_list" style="width: 410px;"></div>
										<div id="ark_category_list" class="category"></div>
										<div id="ark_event_list" class="exhibition"></div>
										<div id="ark_powerdeal_list"></div>
									</div>
									<div class="close">
										<a href="#" class="search_close">닫기<i class="ico ico_search_close_gray"><em>닫기</em></i></a>
									</div>
								</div>
							</div>
							<!-- 검색어 입력전 -->
							<div id="mykeyword" class="my_search_group sch_auto" style="display: none;">
								<p class="blind">인기 검색어 &amp; 최근 검색어</p>
								<div class="area">
									<div class="hot_search_list" id="popkeyword">
										<p>인기 검색어</p>
										<ul>
											<li>
												<a href="#"><span>1</span>나이키</a>
											</li>
											<li>
												<a href="#"><span>2</span>tamiya</a>
											</li>
											<li>
												<a href="#"><span>3</span>니콘 z6</a>
											</li>
											<li>
												<a href="#"><span>4</span>갤럭시 자켓</a>
											</li>
											<li>
												<a href="#"><span>5</span>아동운동화</a>
											</li>
											<li>
												<a href="#"><span>6</span>타미야</a>
											</li>
											<li>
												<a href="#"><span>7</span>널디</a>
											</li>
											<li>
												<a href="#"><span>8</span>호박목걸이</a>
											</li>
											<li>
												<a href="#"><span>9</span>제시뉴욕</a>
											</li>
											<li>
												<a href="#"><span>10</span>뉴에라</a>
											</li>
										</ul>
									</div>
									<div class="my_search_list" id="searchkeyword">
										<p>최근 검색어</p>
										<button type="button" onclick="removeMyKeyword();">최근 검색어 전체삭제<i class="ico ico_mysearch_delete"></i></button>
									</div>
								</div>
								<div class="close">
									<a href="#" class="search_close">닫기<i class="ico ico_search_close_gray"><em>닫기</em></i></a>
								</div>
							</div>
							<!-- // 검색어 입력전 -->
							<button type="button" class="close"><i class="ico ico_search_close"><em>닫기</em></i></button>
							<button type="button" class="sch_btn" onclick="goSearch();"><i class="ico ico_search"><em>검색</em></i></button>
						</fieldset>
					</form>
				</div>

				<a href="#" class="btn_ico btn_cart" title="장바구니 바로가기"><i class="ico ico_bag"></i><span class="circle_count">99+</span></a>
				
			</div>
			<!-- // search -->
		</div>
	</div>
	<!-- head end -->

<script th:inline="javascript">
/*<![CDATA[*/
	// 탭 > 브랜드 생성
	let fnCreateBrandGroup = function(brandGrpList) {
		let tag = '';
		
		if (brandGrpList.length > 0) {
			tag += '<div class="row">\n';
			tag += '	<p>캐주얼</p>\n';
			tag += '	<div class="brand_list swiper-container">\n';
			tag += '		<ul class="clear swiper-wrapper">\n';
			
			$.each(brandGrpList, function(idx, item) {
				tag += '			<li class="swiper-slide">\n';
				tag += '				<a href="javascript:void(0);" onclick="cfnGoToBrandMain(' + item.brandGroupNo + ');">\n';
				tag += '					<img src="' + _uploadDefaultUrl + item.logoFileNm + '" alt=""/>\n';
				tag += '					<span><em>' + item.brandGroupNm + '</em></span>\n';
				tag += '				</a>\n';
				tag += '			</li>\n';
			});
			
			tag += '		</ul>\n';
			tag += '	</div>\n';
			tag += '</div>\n';
		}
		
		return tag;
	}
	
	// 탭 > 카테고리 생성
	let fnCreateCategory = function(cateList) {
		let tag = '';
		
		if (cateList.length > 0) {
			$.each(cateList, function(idx1, cate1) {
				tag += '<li class="has_depth">\n'; //depth_menu 있을 시 has_depth 클래스 추가
				tag += '	<a href="javascript:void(0);" onclick="cfnGoToCategory(' + cate1.cate1Nm + ');">' + cate1.cate1Nm + '</a>\n';
				tag += '	<div class="depth_menu category">\n';
				tag += '		<div class="head_category">\n';
				tag += '			<div class="tit">\n';
				tag += '				<p>' + cate1.cate1Nm + '</p>\n';
				tag += '				<a href="javascript:void(0);" onclick="cfnGoToCategory(' + cate1.cate1No + ');" class="more">전체보기</a>\n';
				tag += '			</div>\n';
				
				if (cate1.leafYn == 'N' && cate1.cate2List.length > 0) {
					tag += '			<div class="menu">\n';
					tag += '				<ul class="maintabs">\n';
					
					$.each(cate1.cate2List, function(idx2, cate2) {
						tag += '					<li>\n';
						tag += '						<a href="javascript:void(0);" onclick="cfnGoToCategoryMain(\'' + cate2.cateGb + '\',\'' + cate2.cate1No + '\',\'' + cate2.cate2No + '\');">' + cate2.cate2Nm + '</a>\n';
						
						if (cate2.leafYn == 'N' && cate2.cate3List.length > 0) {
							tag += '						<ul class="box_depth2">\n';
							
							$.each(cate2.cate3List, function(idx3, cate3) {
								tag += '							<li>\n';
								tag += '								<a href="javascript:void(0);" onclick="cfnGoToCategoryMain(\'' + cate3.cateGb + '\',\'' + cate3.cate1No + '\',\'' + cate3.cate2No + '\',\'' + cate3.cate3No + '\');">' + cate3.cate3Nm + '</a>\n';
								
								if (cate3.leafYn == 'N' && cate3.cate4List.length > 0) {
									tag += '								<ul class="box_depth3">\n';
								
									$.each(cate3.cate4List, function(idx4, cate4) {
										tag += '									<li><a href="javascript:void(0);" onclick="cfnGoToCategoryMain(\'' + cate4.cateGb + '\',\'' + cate4.cate1No + '\',\'' + cate4.cate2No + '\',\'' + cate4.cate3No + '\',\'' + cate4.cate4No + '\');">' + cate4.cate4Nm + '</a></li>\n';
									});
									
									tag += '								</ul>\n';
								}
								
								tag += '							</li>\n';
							});
							
							tag += '						</ul>\n';
						}
						
						tag += '					</li>\n';
					});
					
					tag += '				</ul>\n';
					tag += '			</div>\n';
					tag += '		</div>\n';
					tag += '	</div>\n';
				}
				
				if (cate1.bannerList.length > 0) {
					tag += '	<div class="head_banner">\n';
					tag += '		<div class="tit">\n';
					tag += '			<p>가을의 신상 만나기</p>\n';
					tag += '		</div>\n';
					tag += '		<div class="list">\n';
					tag += '			<ul class="clear event_con">\n';
					tag += '				<li>\n';
					tag += '					<a href="">\n';
					tag += '						<div class="ev_img"><img src="/images/pc/thumb/ev_list_img01.jpg" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션"></div>\n';
					tag += '						<div class="txt">\n';
					tag += '							<p class="tit">2020 FALL COLLECTION 가을에는 이 컬러 2020 FALL COLLECTION 가을에는 이 컬러</p>\n';
					tag += '						</div>\n';
					tag += '					</a>\n';
					tag += '				</li>\n';
					tag += '				<li>\n';
					tag += '					<a href="">\n';
					tag += '						<div class="ev_img"><img src="/images/pc/thumb/ev_list_img02.jpg" alt="단 48시간, 퓨어캐시미어 최대 80%세일 PURE CASHMERE 48H POP-UP"></div>\n';
					tag += '						<div class="txt">\n';
					tag += '							<p class="tit">FALL NEW ARRIVAL</p>\n';
					tag += '						</div>\n';
					tag += '					</a>\n';
					tag += '				</li>\n';
					tag += '			</ul>\n';
					tag += '		</div>\n';
					tag += '	</div>\n';
				}
				
				tag += '</li>\n';
			});
		}
		
		return tag;
	}
	
	// 탭 목록
	let fnTapList = function() {
		$.getJSON('/display/tap/list'
			, function(result, status) {
				if (status == 'success') {
					$.each(result, function(idx, item) {
						if (item.contentsType == 'B') { // 컨텐츠유형:브랜드
							$('#divBrandGrp').html('');
							$('#divBrandGrp').append(fnCreateBrandGroup(item.casualBrandGroupList));
							$('#divBrandGrp').append(fnCreateBrandGroup(item.golfBrandGroupList));
							$('#divBrandGrp').append(fnCreateBrandGroup(item.kidsBrandGroupList));
						} else if (item.contentsType == 'C') { // 컨텐츠유형:카테고리
							$('#divCate').html('');
							$('#divCate').append(fnCreateCategory(item.cateList));
						}
					});
				}
			});
	}
	
	$(document).ready(function() {
		//검색창 호출
		$(".common_search").load("sch_layer_pop.html");
		
		// GNB toggle
		$(document).on('mouseenter','.common_header .gnb .nav > ul > li',function(e){
			if(!$(this).hasClass('has_depth')){
				$('.black_screen').hide();
				$('.common_header .gnb .depth_menu').hide();
			} else if($(this).hasClass('has_depth')){
				$('.black_screen').show();
				$(this).find('.depth_menu').show();
				$(this).parents('ul').siblings('ul').find('li.has_depth .depth_menu').hide();
				$(this).siblings('li.has_depth').find('.depth_menu').hide();
			}
		}).on('mouseleave','.common_header .gnb',function(e){
			$('.black_screen').hide();
			$('.common_header .gnb .depth_menu').hide();
		});

		// GNB 하위메뉴
		$(document).on('mouseenter','.common_header .maintabs li',function(e){
			if($(this).find('> ul').length > 0){
				$(this).addClass('on');
			}
			$(this).find('> ul').show();
			$(this).siblings('li').find('> ul').hide();
		});

		// GNB 더보기
		$(document).on('click','.more_category .btn_more_cate',function(e){
			$(this).parent('.more_category').toggleClass('on');
			$(this).parent('.more_category').find('.cate_list').toggle();
			return false;
		});

		// GNB - 슬라이드 > 브랜드_GNB
		var brand_gnb_slide = new Swiper('#header .gnb .brand_list', {
			observer: true,
			observeParents: true,
			centeredSlides: false,
			slidesPerView: 'auto',
			freeMode:true,
		});

		//통합검색 - 슬라이드 > 지금 고객님들이 많이 보고 있어요 
		var realtimeItemSwiper = new Swiper('.common_search .realtime_slider .swiper-container', {
			observer: true,
			observeParents: true,
			slidesPerView: 5,
			spaceBetween: 20,
			autoplay: {
				delay: 2500,
				disableOnInteraction:false,
			},
			navigation: {
				nextEl: '.common_search .realtime_slider .swiper-button-next',
				prevEl: '.common_search .realtime_slider .swiper-button-prev',
			},
			pagination: {
				el: '.common_search .realtime_slider .swiper-pagination',
				clickable: true,
			},
		});
		
		fnTapList();
	});
/*]]>*/
</script>

</header>

</html>