Merge branch 'develop' of http://112.172.147.34:4936/style24/style24.front into develop

src/main/webapp/WEB-INF/views/web/common/fragments/GnbWeb.html

@@ -19,12 +19,37 @@
 	<!-- head start -->
 	<div class="common_header">
 		<!-- 프로모션 띠 배너 등록 시 노출 -->
-		<div class="hd_top_banner" style="background-color:#fd4801;display:none;">
-			<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="hd_top_banner"> -->
+<!-- 			<div class="bnrtype_open" style="background-color:#496ac9;"> -->
+<!-- 				<a href="" target=""> -->
+<!-- 					<img src="/images/pc/thumb/tmp_top_banner2.jpg" alt="">	 -->
+<!-- 					<div class="open_bnr_area"> -->
+<!-- 						<img src="/images/pc/thumb/tmp_top_banner2_open.jpg" alt=""/> -->
+<!-- 					</div> -->
+<!-- 				</a> -->
+<!-- 				<button class="btn_toggle_bnr"><span>열기</span></button> -->
+<!-- 			</div> -->
+<!-- 			<div class="bnrtype_img" style="background-color:#57799d;"> -->
+<!-- 				<a href="" target=""> -->
+<!-- 					<img src="/images/pc/thumb/tmp_top_banner1.jpg" alt=""/> -->
+<!-- 				</a> -->
+<!-- 			</div> -->
+<!-- 			<div class="bnrtype_text" style="background-color:#fd4801;"> -->
+<!-- 				<a href="" target=""> -->
+<!-- 					<div style="color:#fff; font-size:20px; font-weight:300;"> -->
+<!-- 						<span style="font-weight:500">APP</span> 수신동의 하면 <span style="font-weight:500">1</span>만 포인트 증정! -->
+<!-- 					</div> -->
+<!-- 				</a> -->
+<!-- 			</div> -->
+<!-- 			<div class="close_bnr_area"> -->
+<!-- 				<form class="form_wrap"> -->
+<!-- 					<div class="form_field"> -->
+<!-- 						<input id="chk-cookie" type="checkbox"><label for="chk-cookie"><span>오늘 하루 보지 않기</span></label> -->
+<!-- 					</div> -->
+<!-- 				</form> -->
+<!-- 				<button id="btn_close_bnr" class="btn_close"><span>닫기</span></button> -->
+<!-- 			</div> -->
+<!-- 		</div> -->
 		<!-- //프로모션 띠 배너 등록 시 노출 -->
 
 		<div class="area">
@@ -82,322 +107,712 @@
 
 			<!-- search -->
 			<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>
+					<p class="promotion_search">모이몰론, 남들보다 빠르게! 신상 check</p>
+					<button type="button" class="btn_sch_promotion" id="btnGnbSearch"><i class="ico ico_search"><em>프로모션 검색 바로가기</em></i></button>
+				</div>
+				<!-- //프로모션 문구 노출 검색용-->
+				<!-- 통합검색 -->
+				<button type="button" class="btn_open_search"><i class="ico ico_search"><em>통합검색</em></i></button>
+				<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 class="black_screen"></div>
+	</div>
+	
+	<!-- 검색 레이어 -->
+	<div class="common_search">
+		<h2 class="sr-only">통합검색</h2>
+		<div class="cont_search">
+			<div class="area_input">
+				<form id="searchMainForm" name="searchMainForm">
+					<fieldset>  
+						<legend>통합검색</legend>
+						<input type="text" id="search" name="search" value="" placeholder="검색어를 입력하세요." class="search_input" title="검색어 입력" maxlength="100"/>
+						<button type="button" class="sch_btn"><i class="ico ico_search"><em>검색</em></i></button>
+					</fieldset>
+				</form>
+			</div>
+			<div class="area_result">
+				<!-- 검색결과 입력 전 -->
+				<div class="default_box">
+					<div class="recent_blk">
+						<h3>최근 검색어</h3>
+						<!-- 최근검색어 있을 시 노출 -->
+						<div class="list_recent_keword">
+							<ul>
+								<li>
+									<a href="">슬랙스</a>
+									<button type="button" class="btn_delete"><span>삭제</span></button>
+								</li>
+								<li>
+									<a href="">다운점퍼</a>
+									<button type="button" class="btn_delete"><span>삭제</span></button>
+								</li>
+								<li>
+									<a href="">특가세일</a>
+									<button type="button" class="btn_delete"><span>삭제</span></button>
+								</li>
+								<li>
+									<a href="">모이몰른 티셔츠</a>
+									<button type="button" class="btn_delete"><span>삭제</span></button>
+								</li>
+								<li>
+									<a href="">TBJ 패딩</a>
+									<button type="button" class="btn_delete"><span>삭제</span></button>
+								</li>
+								<li>
+									<a href="">트레이닝 팬츠</a>
+									<button type="button" class="btn_delete"><span>삭제</span></button>
+								</li>
+								<li>
+									<a href="">슬랙스</a>
+									<button type="button" class="btn_delete"><span>삭제</span></button>
+								</li>
+								<li>
+									<a href="">다운점퍼</a>
+									<button type="button" class="btn_delete"><span>삭제</span></button>
+								</li>
+								<li>
+									<a href="">특가세일</a>
+									<button type="button" class="btn_delete"><span>삭제</span></button>
+								</li>
+								<li>
+									<a href="">모이몰른 티셔츠</a>
+									<button type="button" class="btn_delete"><span>삭제</span></button>
+								</li>
+							</ul>
+						</div>
+						<button type="button" class="btn_underline"><span>전체삭제</span></button>
+						<!-- //최근검색어 있을 시 노출 -->
+						<!-- 최근검색어 없을 시 노출 -->
+						<div class="empty_txt">
+							최근 검색어가 없습니다.
+						</div>
+						<!-- //최근검색어 없을 시 노출 -->
+					</div>
+					<div class="popular_blk">
+						<h3>STYLE24에서 검색되고 있어요</h3>
+						<div class="list_popular_keword">
+							<ul>
+								<li>
+									<a href="">BUCKAROO</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="">BUCKAROO</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="realtime_blk">
+						<h3>지금 고객님들이 많이 보고 있어요</h3>
+						<div class="modify_timer">
+							<button type="button"><span><em class="time">17:30</em> 기준</span></button>
+						</div>
+						<div class="realtime_wrap">
+							<div class="itemsGrp">
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg"/>
+											</div>
+											<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
+											<div class="viewCount"><span>508</span>명 보는중</div>
+										</a>
+									</div>
+								</div>
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg"/>
+											</div>
+											<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
+											<div class="viewCount"><span>508</span>명 보는중</div>
+										</a>
+									</div>
+								</div>
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+											</div>
+											<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
+											<div class="viewCount"><span>508</span>명 보는중</div>
+										</a>
 									</div>
-									<div class="close">
-										<a href="#" class="search_close">닫기<i class="ico ico_search_close_gray"><em>닫기</em></i></a>
+								</div>
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg">
+											</div>
+											<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
+											<div class="viewCount"><span>508</span>명 보는중</div>
+										</a>
+									</div>
+								</div>
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdTogether1.jpg"/>
+											</div>
+											<div class="itemName">남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩 남성 로고 자카드 방풍 패딩</div>
+											<div class="viewCount"><span>508</span>명 보는중</div>
+										</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>
+				</div>
+				<!-- //검색결과 입력 전 -->
+				<!-- 검색결과 입력 후 -->
+				<div class="searching_box" style="display:none;">
+					<div class="autokeyword_blk">
+						<ul> 
+							<li><a href=""><em>가</em>을컬리수</a></li>
+							<li><a href=""><em>가</em>드상하</a></li>
+							<li><a href=""><em>가</em>죽자켓</a></li>
+							<li><a href=""><em>가</em>죽밸트</a></li>
+							<li><a href=""><em>가</em>운</a></li>
+							<li><a href=""><em>가</em>을</a></li>
+							<li><a href=""><em>가</em>디건</a></li>
+							<li><a href=""><em>가</em>디건형니트</a></li>
+							<li><a href=""><em>가</em>드밴드레깅스</a></li>
+							<li><a href=""><em>가</em>을잠옷</a></li>
+						</ul>
+					</div>
+					<div class="exfind_blk">
+						<!-- 검색어 매칭 브랜드 있을 시 노출  -->
+						<div class="find_brand">
+							<h3><a href="">나이키 주니어 샵 바로가기</a></h3>
+						</div>
+						<!-- //검색어 매칭 브랜드 있을 시 노출  -->
+						<!-- 검색어 매칭 카테고리 있을 시 노출  -->
+						<div class="find_category">
+							<ul>
+								<li>
+									<span class="category_txt">카테고리</span>
+									<a href="">
+										<span>여성</span>
+										<span>니트<em>가</em>디건/베스트</span>
+									</a>
+								</li>
+								<li>
+									<span class="category_txt">카테고리</span>
+									<a href="">
+										<span>남성</span>
+										<span>니트/<em>가</em>디건/베스트</span>
+										<span>가디건</span>
+										<span>롱가디건</span>
+									</a>
+								</li>
+							</ul>
+						</div>
+						<!-- //검색어 매칭 카테고리 있을 시 노출  -->
+					</div>
+					<div class="pd_list relate">
+						<h3>관련상품</h3>
+						<div class="realtime_wrap">
+							<div class="itemsGrp">
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg"/>
+											</div>
+											<p class="itemBrand">BRAND NAME1</p>
+											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+											<p class="itemPrice cols">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class="itemPercent">10%</span>
+											</p>
+											<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+										</a>
 									</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 class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg"/>
+											</div>
+											<p class="itemBrand">BRAND NAME1</p>
+											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+											<p class="itemPrice cols">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class="itemPercent">10%</span>
+											</p>
+											<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+										</a>
 									</div>
 								</div>
-								<div class="close">
-									<a href="#" class="search_close">닫기<i class="ico ico_search_close_gray"><em>닫기</em></i></a>
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg"/>
+											</div>
+											<p class="itemBrand">BRAND NAME1</p>
+											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+											<p class="itemPrice cols">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class="itemPercent">10%</span>
+											</p>
+											<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+										</a>
+									</div>
+								</div>
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg"/>
+											</div>
+											<p class="itemBrand">BRAND NAME1</p>
+											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+											<p class="itemPrice cols">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class="itemPercent">10%</span>
+											</p>
+											<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+										</a>
+									</div>
+								</div>
+								<div class="item_prod">
+									<div class="item_state">
+										<a href="#none" class="itemLink">
+											<div class="itemPic">
+												<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg"/>
+											</div>
+											<p class="itemBrand">BRAND NAME1</p>
+											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+											<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+											<p class="itemPrice cols">
+												<span class="itemPrice_original">89,000</span>
+												80,100
+												<span class="itemPercent">10%</span>
+											</p>
+											<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+										</a>
+									</div>
 								</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>
+					</div>
 				</div>
-
-				<a href="#" class="btn_ico btn_cart" title="장바구니 바로가기"><i class="ico ico_bag"></i><span class="circle_count"></span></a>
-
+				<!-- //검색결과 입력 후 -->
+				<!-- 검색결과 없을때 노출 -->
+				<div class="empty_box" style="display:none;">
+					<div class="nodata">
+						<p>
+							<span class="keyword">'티비제이 제기장 스웨터'</span>에 맞는 상품을 찾지 못했습니다.<br>
+							검색어를 변경해 보세요.
+						</p>
+					</div>
+					<div class="pd_list recommend">
+						<h3>이런 상품은 어떤가요?</h3>
+						<div class="itemsGrp">
+							<div class="item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg"/>
+										</div>
+										<p class="itemBrand">BRAND NAME1</p>
+										<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+										<p class="itemPrice cols">
+											<span class="itemPrice_original">89,000</span>
+											80,100
+											<span class="itemPercent">10%</span>
+										</p>
+										<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+									</a>
+								</div>
+							</div>
+							<div class="item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg"/>
+										</div>
+										<p class="itemBrand">BRAND NAME1</p>
+										<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+										<p class="itemPrice cols">
+											<span class="itemPrice_original">89,000</span>
+											80,100
+											<span class="itemPercent">10%</span>
+										</p>
+										<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+									</a>
+								</div>
+							</div>
+							<div class="item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg"/>
+										</div>
+										<p class="itemBrand">BRAND NAME1</p>
+										<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+										<p class="itemPrice cols">
+											<span class="itemPrice_original">89,000</span>
+											80,100
+											<span class="itemPercent">10%</span>
+										</p>
+										<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+									</a>
+								</div>
+							</div>
+							<div class="item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg"/>
+										</div>
+										<p class="itemBrand">BRAND NAME1</p>
+										<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+										<p class="itemPrice cols">
+											<span class="itemPrice_original">89,000</span>
+											80,100
+											<span class="itemPercent">10%</span>
+										</p>
+										<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+									</a>
+								</div>
+							</div>	
+							<div class="item_prod">
+								<div class="item_state">
+									<a href="#none" class="itemLink">
+										<div class="itemPic">
+											<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdLookbook_item1.jpg"/>
+										</div>
+										<p class="itemBrand">BRAND NAME1</p>
+										<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<!-- cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+										<p class="itemPrice cols">
+											<span class="itemPrice_original">89,000</span>
+											80,100
+											<span class="itemPercent">10%</span>
+										</p>
+										<!-- //cols 클래스 추가 후 itemPrice_original태그 위로 올려주시면 됩니다. -->
+									</a>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- //검색결과 없을때 노출 -->
 			</div>
-			<!-- // search -->
 		</div>
+		<button type="button" class="btn_close_search"><span>닫기</span></button>
 	</div>
-	<!-- head end -->
+	<!-- //검색 레이어 -->
 
-	<script th:inline="javascript">
-		/*<![CDATA[*/
-		// 전체카테고리 조회
-// 		let allCate;
-// 		let fnGetAllCategory = function() {
-// 			$.getJSON('/display/all/cate/list'
-// 				, function(result, status) {
-// 					if (status == 'success') {
-// 						allCate = result;
-						
-// 						// GNB탭 > 브랜드 생성
-// 						fnCreateGnbBrandGroup();
-// 					}
-// 			});
-// 		}
-		
-		// GNB탭 > 카테고리
-		let fnGetGnbCategory = function(cate1) {
-			let tag = '';
-			if (cate1 != null) {
-				tag += '<li class="has_depth">\n'; //depth_menu 있을 시 has_depth 클래스 추가
-				tag += '	<a href="javascript:void(0);" onclick="cfnGoToCategoryMain(\'' + cate1.cateGb + '\',' + cate1.cate1No + ');">' + 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="cfnGoToGoodsList(\'' + cate1.cateGb + '\',' + cate1.cate1No + ');" class="more">전체보기</a>\n';
+<script th:inline="javascript">
+/*<![CDATA[*/
+	// 전체카테고리 조회
+// 	let allCate;
+// 	let fnGetAllCategory = function() {
+// 		$.getJSON('/display/all/cate/list'
+// 			, function(result, status) {
+// 				if (status == 'success') {
+// 					allCate = result;
+					
+// 					// GNB탭 > 브랜드 생성
+// 					fnCreateGnbBrandGroup();
+// 				}
+// 		});
+// 	}
+	
+	// GNB탭 > 카테고리
+	let fnGetGnbCategory = function(cate1) {
+		let tag = '';
+		if (cate1 != null) {
+			tag += '<li class="has_depth">\n'; //depth_menu 있을 시 has_depth 클래스 추가
+			tag += '	<a href="javascript:void(0);" onclick="cfnGoToCategoryMain(\'' + cate1.cateGb + '\',' + cate1.cate1No + ');">' + 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="cfnGoToGoodsList(\'' + cate1.cateGb + '\',' + 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="cfnGoToGoodsList(\'' + cate2.cateGb + '\',' + cate2.cate1No + ',' + cate2.cate2No + ');">' + cate2.cate2Nm + '</a>\n';
+					if (cate2.leafYn == 'N' && cate2.cate3List != null && 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="cfnGoToGoodsList(\'' + cate3.cateGb + '\',' + cate3.cate1No + ',' + cate3.cate2No + ',' + cate3.cate3No + ');">' + cate3.cate3Nm + '</a>\n';
+							if (cate3.leafYn == 'N' && cate3.cate4List != null && cate3.cate4List.length > 0) {
+								tag += '								<ul class="box_depth3">\n';
+								$.each(cate3.cate4List, function(idx4, cate4) {
+									tag += '									<li><a href="javascript:void(0);" onclick="cfnGoToGoodsList(\'' + 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';
-				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="cfnGoToGoodsList(\'' + cate2.cateGb + '\',' + cate2.cate1No + ',' + cate2.cate2No + ');">' + cate2.cate2Nm + '</a>\n';
-						if (cate2.leafYn == 'N' && cate2.cate3List != null && 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="cfnGoToGoodsList(\'' + cate3.cateGb + '\',' + cate3.cate1No + ',' + cate3.cate2No + ',' + cate3.cate3No + ');">' + cate3.cate3Nm + '</a>\n';
-								if (cate3.leafYn == 'N' && cate3.cate4List != null && cate3.cate4List.length > 0) {
-									tag += '								<ul class="box_depth3">\n';
-									$.each(cate3.cate4List, function(idx4, cate4) {
-										tag += '									<li><a href="javascript:void(0);" onclick="cfnGoToGoodsList(\'' + 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';
+				tag += '		</div>\n';
+				tag += '	</div>\n';
 			}
-			return tag;
-		}
 
-		// GNB탭 생성
-		let fnCreateGnbTab = function() {
-			$.getJSON('/display/gnb/tab/list'
-				, function(result, status) {
-					if (status == 'success') {
-						if (result.length > 0) {
-							$('#divGnbTab').html('');
-							$('#ulGnbTab').html('');
-							
-							let allCate = [[${allCateList}]];
-							$.each(result, function(idx, item) {
-								if (item.contentsType == 'C' || item.contentsType == 'O') { // 컨텐츠유형:카테고리, 아울렛
-									$.each(allCate, function(allCateIdx, allCateItem) {
-										if (item.cate1No == allCateItem.cate1No) {
-											let gnbCate = fnGetGnbCategory(allCateItem);
-											$('#divGnbTab').append(gnbCate);
-											$('#ulGnbTab').append(gnbCate);
-										}
-									});
-								} else if (item.contentsType == 'L') { // 컨텐츠유형:링크
-									$('#divGnbTab').append('<li><a href="' + item.linkUrl + '">' + item.gtabNm + '</a></li>');
-									$('#ulGnbTab').append('<li><a href="' + item.linkUrl + '">' + item.gtabNm + '</a></li>');
-								}
-							});
-						}
-					}
-				});
+			// 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;
+	}
 
-		// GNB탭 > 브랜드 생성
-		let fnCreateGnbBrandGroup = function() {
-			$.getJSON('/display/gnb/brand/group/list'
-				, function(result, status) {
-					if (status == 'success') {
-						if (result.length > 0) {
-							$('#divGnbBrandGrp').html('');
-							let tag = '';
-							let prevTitle = '';
-							$.each(result, function (idx, item) {
-								if (prevTitle != item.title) {
-									if (idx > 0) {
-										tag += '		</ul>\n';
-										tag += '	</div>\n';
-										tag += '</div>\n';
+	// GNB탭 생성
+	let fnCreateGnbTab = function() {
+		$.getJSON('/display/gnb/tab/list'
+			, function(result, status) {
+				if (status == 'success') {
+					if (result.length > 0) {
+						$('#divGnbTab').html('');
+						$('#ulGnbTab').html('');
+						
+						let allCate = [[${allCateList}]];
+						$.each(result, function(idx, item) {
+							if (item.contentsType == 'C' || item.contentsType == 'O') { // 컨텐츠유형:카테고리, 아울렛
+								$.each(allCate, function(allCateIdx, allCateItem) {
+									if (item.cate1No == allCateItem.cate1No) {
+										let gnbCate = fnGetGnbCategory(allCateItem);
+										$('#divGnbTab').append(gnbCate);
+										$('#ulGnbTab').append(gnbCate);
 									}
-									tag += '<div class="row">\n';
-									tag += '	<p>' + item.title + '</p>\n';
-									tag += '	<div class="brand_list swiper-container">\n';
-									tag += '		<ul class="clear swiper-wrapper">\n';
-								} else {
-									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';
-								}
-								prevTitle = item.title;
-							});
-							tag += '		</ul>\n';
-							tag += '	</div>\n';
-							tag += '</div>\n';
-							$('#divGnbBrandGrp').html(tag);
-						}
-						fnCreateGnbTab();
+								});
+							} else if (item.contentsType == 'L') { // 컨텐츠유형:링크
+								$('#divGnbTab').append('<li><a href="' + item.linkUrl + '">' + item.gtabNm + '</a></li>');
+								$('#ulGnbTab').append('<li><a href="' + item.linkUrl + '">' + item.gtabNm + '</a></li>');
+							}
+						});
 					}
-			});
-		}
-
-		$(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');
+	// GNB탭 > 브랜드 생성
+	let fnCreateGnbBrandGroup = function() {
+		$.getJSON('/display/gnb/brand/group/list'
+			, function(result, status) {
+				if (status == 'success') {
+					if (result.length > 0) {
+						$('#divGnbBrandGrp').html('');
+						let tag = '';
+						let prevTitle = '';
+						$.each(result, function (idx, item) {
+							if (prevTitle != item.title) {
+								if (idx > 0) {
+									tag += '		</ul>\n';
+									tag += '	</div>\n';
+									tag += '</div>\n';
+								}
+								tag += '<div class="row">\n';
+								tag += '	<p>' + item.title + '</p>\n';
+								tag += '	<div class="brand_list swiper-container">\n';
+								tag += '		<ul class="clear swiper-wrapper">\n';
+							} else {
+								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';
+							}
+							prevTitle = item.title;
+						});
+						tag += '		</ul>\n';
+						tag += '	</div>\n';
+						tag += '</div>\n';
+						$('#divGnbBrandGrp').html(tag);
+					}
+					fnCreateGnbTab();
 				}
-				$(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;
-			});
+	$('#btnGnbSearch').on('click', function() {
+		//검색창 호출
+		$(".common_search").addClass('active');
+	});
+	
+	$(document).ready(function() {
+		//TOP BANNER close
+		$(document).on('click','#btn_close_bnr',function(e){
+			$('body').removeClass('lock');
+			$('.bnrtype_open').removeClass('fixed');
+			$('.hd_top_banner').remove();
+		});
+		
+		//TOP BANNER OPEN TYPE		
+		$(document).on('click','.bnrtype_open .btn_toggle_bnr',function(e){
+			$('body').toggleClass('lock');
+			$('.bnrtype_open').toggleClass('fixed');
+			$(this).text($(this).text() == '열기' ? '닫기' : '열기');
+		});
+		
+		// GNB toggle
+		$(document).on('mouseenter','.common_header .gnb .nav > ul > li',function(e){
+			$(this).parents('.nav').find('.bundle > li > a').removeClass('active');
+			$(this).children('a').addClass('active');
+			if(!$(this).hasClass('has_depth')){
+				$('.black_screen').hide();
+				$('.common_header .gnb .depth_menu, .box_depth2, .box_depth3, .box_depth4').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){
+			$(this).find('.bundle > li > a').removeClass('active');
+			$('.black_screen').hide();
+			$('.common_header .gnb .depth_menu, .box_depth2, .box_depth3, .box_depth4').hide();
+		});
 
-			// GNB - 슬라이드 > 브랜드_GNB
-			var brand_gnb_slide = new Swiper('#header .gnb .brand_list', {
-				observer: true,
-				observeParents: true,
-				centeredSlides: false,
-				slidesPerView: 'auto',
-				freeMode:true,
-			});
+		// 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();
+		});
 
-			//통합검색 - 슬라이드 > 지금 고객님들이 많이 보고 있어요
-			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,
-				},
-			});
+		// 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;
+		});
 
-// 			// 전체 카테고리 조회
-// 			fnGetAllCategory();
-			
-			// GNB탭 > 브랜드 생성
-			fnCreateGnbBrandGroup();
+		// GNB - 슬라이드 > 브랜드_GNB
+		var brand_gnb_slide = new Swiper('#header .gnb .brand_list', {
+			observer: true,
+			observeParents: true,
+			centeredSlides: false,
+			slidesPerView: 'auto',
+			freeMode:true,
 		});
-		/*]]>*/
-	</script>
+
+		//통합검색 - 슬라이드 > 지금 고객님들이 많이 보고 있어요
+		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,
+			},
+		});
+
+// 		// 전체 카테고리 조회
+// 		fnGetAllCategory();
+		
+		// GNB탭 > 브랜드 생성
+		fnCreateGnbBrandGroup();
+	});
+/*]]>*/
+</script>
 
 </header>
 

src/main/webapp/WEB-INF/views/web/common/fragments/HeadWeb.html

@@ -65,8 +65,8 @@
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
 	<script src="/ux/pc/js/jquery.modal.min.js"></script>
+	<script src="/ux/pc/js/slick.min.js"></script>
 	<script src="/ux/pc/js/jquery-ui.js"></script>
-<!-- 	<script src="/ux/pc/js/jquery.ui.datepicker.monthyearpicker.js"></script> -->
 	<script src="/ux/plugins/jquery.serializeObject.min.js"></script>
 	<script src="/ux/plugins/mcxdialog/mcxdialog_ui.js"></script>
 	

src/main/webapp/ux/pc/css/common.css

@@ -1252,7 +1252,7 @@ input[type="file"] {
 .quick_menu_group .area > div:first-child span:first-child a{margin-left:0}
 .quick_menu_group .area > div:first-child span:first-child a:after{display:none}
 .quick_menu_group .area > div:first-child span a:after{position:absolute;top:13px;left:0;width:1px;height:13px;background:#959596;content:''}
-.quick_menu_group .inr a{margin-left:16px;color:#eeeeee;}
+.quick_menu_group .inr a{margin-left:16px;color:#eeeeee;}*/