메인 수정중

src/main/webapp/WEB-INF/views/web/display/MallMainFormWeb.html

@@ -521,6 +521,47 @@
 						</div>
 					</div>
 				</th:block>
+				<th:block th:if="${contentsLoc=='010'}">
+					<!-- 10. 당신을 위한 제안 -->
+					<div class="content main_foryou">
+						<div class="cont_head">
+							<p class="displayH">당신을 위한 제안</p>
+							<span>스타일24에서 가장 주목받는 상품을 살펴보세요</span>
+						</div>
+						<div class="cont_body">
+							<div class="post-sug fy_nav">
+								<div class="swiper-container">
+									<div class="swiper-wrapper" id="keywordArea">
+										<div class="swiper-slide">
+											<ul>
+												<li><button class="btn btn_shape active" data-tab="fy1"><div><span class="number">1</span><span>BUCKAROO 기모청바지 겨울 팬츠 컨버스 주니어 모이몰른</span></div></button><a href="#none">자세히 보기</a></li>
+												<li><button class="btn btn_shape" data-tab="fy2"><div><span class="number">2</span><span>기모청바지</span></div></button><a href="#none">자세히 보기</a></li>
+												<li><button class="btn btn_shape" data-tab="fy3"><div><span class="number">3</span><span>겨울 팬츠</span></div></button><a href="#none">자세히 보기</a></li>
+												<li><button class="btn btn_shape" data-tab="fy4"><div><span class="number">4</span><span>컨버스 주니어</span></div></button><a href="#none">자세히 보기</a></li>
+												<li><button class="btn btn_shape" data-tab="fy5"><div><span class="number">5</span><span>모이몰른</span></div></button><a href="#none">자세히 보기</a></li>
+											</ul>
+										</div>
+										<div class="swiper-slide">
+											<ul>
+												<li><button class="btn btn_shape" data-tab="fy6"><div><span class="number">6</span><span>컨버스 주니어</span></div></button><a href="#none">자세히 보기</a></li>
+												<li><button class="btn btn_shape" data-tab="fy7"><div><span class="number">7</span><span>겨울 팬츠</span></div></button><a href="#none">자세히 보기</a></li>
+												<li><button class="btn btn_shape" data-tab="fy8"><div><span class="number">8</span><span>BUCKAROO</span></div></button><a href="#none">자세히 보기</a></li>
+												<li><button class="btn btn_shape" data-tab="fy9"><div><span class="number">9</span><span>모이몰른</span></div></button><a href="#none">자세히 보기</a></li>
+												<li><button class="btn btn_shape" data-tab="fy10"><div><span class="number">10</span><span>기모청바지</span></div></button><a href="#none">자세히 보기</a></li>
+											</ul>
+										</div>
+									</div>
+								</div>
+								<div class="swiper-controls">
+									<div class="swiper-pagination"></div>
+								</div>
+							</div>
+							<div id="recomItemArea">
+
+							</div>
+						</div>
+					</div>
+				</th:block>
 			</th:block>
 	<!-- End Of Main Contents -->
 	</div>
@@ -592,8 +633,430 @@ $(document).ready( function() {
 
 	let randomNum = Math.floor( ( Math.random() * 4 ) );
 	$(".it_nav .btn").eq(randomNum).trigger('click');
+
+	// 당신을 위한 제안 쿠키값 확인 (로그인시 확인됨)
+	var pcId = gagajf.getCookie("RB_PCID");
+	// 추천솔루션 API 호출
+	if(!gagajf.isNull(pcId)){
+		fnGetEigenApi(pcId);
+	}
 });
 
+/**
+ * EigenApi
+ * size : 상품수
+ * nh : 키워드수
+ * */
+var fnGetEigenApi = function (id){
+	console.log('[fnGetEigenApi ID]'+id);
+	$.getJSON('https://api.eigene.io/rec/p075?cuid=1252aed4-78dc-46e8-b784-94ac42e86dd4&size=10&nh=10&pcid='+id, function (result,status){
+		console.log('**************');
+		console.log(result);
+		console.log(status);
+		var keywordTag = '';
+		var itemTag = '';
+		var itemTag2 = '';
+		var dataJson;
+
+		if (status === 'success') {
+			if (!gagajf.isNull(result.products) && result.products.length > 0) {
+				$("#keywordArea").html('');
+				$("#recomItemArea").html('');
+				$.each(result.products, function (idx, item) {
+					if (idx == 0 || idx == 5) {
+						keywordTag += '<div class="swiper-slide">\n';
+						keywordTag += '	<ul>\n';
+					}
+					keywordTag += '<li>\n';
+					keywordTag += '	<button class="btn btn_shape active" data-tab="fy' + (idx + 1) + '">\n';
+					keywordTag += '		<div>\n';
+					keywordTag += '			<span class="number">' + (idx + 1) + '</span>\n';
+					keywordTag += '			<span>' + item.sourceId + '</span>\n';
+					keywordTag += '		</div>\n';
+					keywordTag += '	</button>\n';
+					keywordTag += '	<a href="javascript:void(0);" onclick="cfnGoToSearchGoodsListForm(\'' + item.sourceId + '\')">자세히 보기</a>\n';
+					keywordTag += '</li>\n';
+					if (idx == 4 || idx == 9) {
+						keywordTag += '	</ul>';
+						keywordTag += '</div>';
+					}
+
+/*
+					if(idx%2 == 0){
+						itemTag += '<div class="fy_item active" id="fy'+(idx+1)+'">\n';
+						itemTag += '	<div class="part">\n';
+						itemTag += '		<div class="item_prod">\n';
+						itemTag += '			<div class="item_state">\n';
+						itemTag += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag += '					<div class="itemPic">\n';
+						itemTag += '					<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug01.jpg">\n';
+						itemTag += '					</div>\n';
+						itemTag += '					<div class="itemInfo">\n';
+						itemTag += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag += '						<div class=" itemName">자카드 방풍 패딩 스웨터 가디건 자카드</div>\n';
+						itemTag += '						<p class="itemPrice">80,100</p>\n';
+						itemTag += '					</div>\n';
+						itemTag += '				</a>\n';
+						itemTag += '			</div>\n';
+						itemTag += '		</div>\n';
+						itemTag += '		<div class="item_prod">\n';
+						itemTag += '			<div class="item_state">\n';
+						itemTag += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag += '					<div class="itemPic">\n';
+						itemTag += '					<img alt="BLACK-a" className=" vLHTC pd_img" src="/images/pc/thumb/main_sug02.jpg">\n';
+						itemTag += '					</div>\n';
+						itemTag += '					<div class="itemInfo">\n';
+						itemTag += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag += '						<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>\n';
+						itemTag += '						<p class="itemPrice">80,100</p>\n';
+						itemTag += '					</div>\n';
+						itemTag += '				</a>\n';
+						itemTag += '			</div>\n';
+						itemTag += '		</div>\n';
+						itemTag += '	</div>\n';
+						itemTag += '	<div class="part lg">\n';
+						itemTag += '		<div class="item_prod">\n';
+						itemTag += '			<div class="item_state">\n';
+						itemTag += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag += '					<div class="itemPic">\n';
+						itemTag += '					<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug03.jpg">\n';
+						itemTag += '					</div>\n';
+						itemTag += '					<div class="itemInfo">\n';
+						itemTag += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag += '						<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 </div>\n';
+						itemTag += '						<p class="itemPrice">80,100</p>\n';
+						itemTag += '					</div>\n';
+						itemTag += '				</a>\n';
+						itemTag += '			</div>\n';
+						itemTag += '		</div>\n';
+						itemTag += '	</div>\n';
+						itemTag += '	<div class="part">\n';
+						itemTag += '		<div class="item_prod">\n';
+						itemTag += '			<div class="item_state">\n';
+						itemTag += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag += '					<div class="itemPic">\n';
+						itemTag += '					<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug04.jpg">\n';
+						itemTag += '					</div>\n';
+						itemTag += '					<div class="itemInfo">\n';
+						itemTag += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag += '						<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 </div>\n';
+						itemTag += '						<p class="itemPrice">80,100</p>\n';
+						itemTag += '					</div>\n';
+						itemTag += '				</a>\n';
+						itemTag += '			</div>\n';
+						itemTag += '		</div>\n';
+						itemTag += '		<div class="item_prod">\n';
+						itemTag += '			<div class="item_state">\n';
+						itemTag += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag += '					<div class="itemPic">\n';
+						itemTag += '					<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug05.jpg">\n';
+						itemTag += '					</div>\n';
+						itemTag += '					<div class="itemInfo">\n';
+						itemTag += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag += '						<div class=" itemName">남성 로고 자카드 방풍 패딩 가디건</div>\n';
+						itemTag += '						<p class="itemPrice">80,100</p>\n';
+						itemTag += '					</div>\n';
+						itemTag += '				</a>\n';
+						itemTag += '			</div>\n';
+						itemTag += '		</div>\n';
+						itemTag += '	</div>\n';
+						itemTag += '	<div class="part">\n';
+						itemTag += '		<div class="item_prod">\n';
+						itemTag += '			<div class="item_state">\n';
+						itemTag += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag += '					<div class="itemPic">\n';
+						itemTag += '					<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug06.jpg">\n';
+						itemTag += '					</div>\n';
+						itemTag += '					<div class="itemInfo">\n';
+						itemTag += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag += '						<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 </div>\n';
+						itemTag += '						<p class="itemPrice">80,100</p>\n';
+						itemTag += '					</div>\n';
+						itemTag += '				</a>\n';
+						itemTag += '			</div>\n';
+						itemTag += '		</div>\n';
+						itemTag += '		<div class="item_prod">\n';
+						itemTag += '			<div class="item_state">\n';
+						itemTag += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag += '					<div class="itemPic">\n';
+						itemTag += '					<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug07.jpg">\n';
+						itemTag += '					</div>\n';
+						itemTag += '					<div class="itemInfo">\n';
+						itemTag += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag += '						<div class=" itemName">남성 로고 자카드 방풍 패딩 가디건 자카드 방풍 패딩 스웨터 가디건</div>\n';
+						itemTag += '						<p class="itemPrice">80,100</p>\n';
+						itemTag += '					</div>\n';
+						itemTag += '				</a>\n';
+						itemTag += '			</div>\n';
+						itemTag += '		</div>\n';
+						itemTag += '	</div>\n';
+						itemTag += '</div>\n';
+					}else{
+						itemTag2 += '<div class="fy_item" id="fy2">\n';
+						itemTag2 += '	<div class="part">\n';
+						itemTag2 += '		<div class="item_prod">\n';
+						itemTag2 += '			<div class="item_state">\n';
+						itemTag2 += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag2 += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag2 += '					<div class="itemPic">\n';
+						itemTag2 += '					<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug04.jpg">\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '					<div class="itemInfo">\n';
+						itemTag2 += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag2 += '						<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 </div>\n';
+						itemTag2 += '						<p class="itemPrice">80,100</p>\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '				</a>\n';
+						itemTag2 += '			</div>\n';
+						itemTag2 += '		</div>\n';
+						itemTag2 += '		<div class="item_prod">\n';
+						itemTag2 += '			<div class="item_state">\n';
+						itemTag2 += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag2 += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag2 += '					<div class="itemPic">\n';
+						itemTag2 += '					<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug05.jpg">\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '					<div class="itemInfo">\n';
+						itemTag2 += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag2 += '						<div class=" itemName">남성 로고 자카드 방풍 패딩 가디건</div>\n';
+						itemTag2 += '						<p class="itemPrice">80,100</p>\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '				</a>\n';
+						itemTag2 += '			</div>\n';
+						itemTag2 += '		</div>\n';
+						itemTag2 += '	</div>\n';
+						itemTag2 += '	<div class="part">\n';
+						itemTag2 += '		<div class="item_prod">\n';
+						itemTag2 += '			<div class="item_state">\n';
+						itemTag2 += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag2 += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag2 += '					<div class="itemPic">\n';
+						itemTag2 += '					<img alt="BLACK-a" className=" vLHTC pd_img" src="/images/pc/thumb/main_sug01.jpg">\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '					<div class="itemInfo">\n';
+						itemTag2 += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag2 += '						<div class=" itemName">자카드 방풍 패딩 스웨터 가디건 자카드</div>\n';
+						itemTag2 += '						<p class="itemPrice">80,100</p>\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '				</a>\n';
+						itemTag2 += '			</div>\n';
+						itemTag2 += '		</div>\n';
+						itemTag2 += '		<div class="item_prod">\n';
+						itemTag2 += '			<div class="item_state">\n';
+						itemTag2 += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag2 += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag2 += '					<div class="itemPic">\n';
+						itemTag2 += '					<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug02.jpg">\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '					<div class="itemInfo">\n';
+						itemTag2 += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag2 += '						<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>\n';
+						itemTag2 += '						<p class="itemPrice">80,100</p>\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '				</a>\n';
+						itemTag2 += '			</div>\n';
+						itemTag2 += '		</div>\n';
+						itemTag2 += '	</div>\n';
+						itemTag2 += '	<div class="part">\n';
+						itemTag2 += '		<div class="item_prod">\n';
+						itemTag2 += '			<div class="item_state">\n';
+						itemTag2 += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag2 += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag2 += '					<div class="itemPic">\n';
+						itemTag2 += '					<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug06.jpg">\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '					<div class="itemInfo">\n';
+						itemTag2 += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag2 += '						<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건  자카드 방풍 패딩 스웨터 가디건 </div>\n';
+						itemTag2 += '						<p class="itemPrice">80,100</p>\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '				</a>\n';
+						itemTag2 += '			</div>\n';
+						itemTag2 += '		</div>\n';
+						itemTag2 += '		<div class="item_prod">\n';
+						itemTag2 += '			<div class="item_state">\n';
+						itemTag2 += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag2 += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag2 += '					<div class="itemPic">\n';
+						itemTag2 += '					<img alt="BLACK-a" className=" vLHTC pd_img" src="/images/pc/thumb/main_sug07.jpg">\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '					<div class="itemInfo">\n';
+						itemTag2 += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag2 += '						<div class=" itemName">남성 로고 자카드 방풍 패딩 가디건 자카드 방풍 패딩 스웨터 가디건 </div>\n';
+						itemTag2 += '						<p class="itemPrice">80,100</p>\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '				</a>\n';
+						itemTag2 += '			</div>\n';
+						itemTag2 += '		</div>\n';
+						itemTag2 += '	</div>\n';
+						itemTag2 += '	<div class="part lg">\n';
+						itemTag2 += '		<div class="item_prod">\n';
+						itemTag2 += '			<div class="item_state">\n';
+						itemTag2 += '				<button type="button" class="itemLike" tabIndex="0">관심상품 추가</button>\n';
+						itemTag2 += '				<a href="#none" class="itemLink" tabIndex="0">\n';
+						itemTag2 += '					<div class="itemPic">\n';
+						itemTag2 += '					<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug03.jpg">\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '					<div class="itemInfo">\n';
+						itemTag2 += '						<p class="itemBrand">BRAND NAME</p>\n';
+						itemTag2 += '						<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 </div>\n';
+						itemTag2 += '						<p class="itemPrice">80,100</p>\n';
+						itemTag2 += '					</div>\n';
+						itemTag2 += '				</a>\n';
+						itemTag2 += '			</div>\n';
+						itemTag2 += '		</div>\n';
+						itemTag2 += '	</div>\n';
+						itemTag2 += '</div>\n';
+					}
+				*/
+					// if((idx > 0 && idx % 4 == 0) || result.products.length == (idx)){
+					// }
+				});
+				$("#keywordArea").append(keywordTag);
+				$("#recomItemArea").append(itemTag);
+
+				/* SLIDE - MAIN_RECOMM */
+				//MAIN_RECOMM_키워드 탭
+				$(".main_recomm .tag_list .btn").click(function () {
+					var recommActive = $(this).attr('data-tab');
+					$(".main_recomm .tag_list .btn").removeClass('active');
+					$(".main_recomm .tagitem").removeClass('active');
+					$(this).addClass('active');
+					$('#' + recommActive).addClass('active');
+				});
+
+				function init() {
+
+					if (main_recomm_slide != null) main_recomm_slide.destroy();
+
+					var main_recomm_slide = new Swiper('.main_recomm .post-recomm', {
+						slidesPerView: 5,
+						slidesPerGroup: 5,
+						speed: 1000,
+						spaceBetween: 20,
+						loop: true,
+						a11y: {
+							enabled: true,
+							notificationClass: 'swiper-notification',
+							prevSlideMessage: '이전 슬라이드',
+							nextSlideMessage: '다음 슬라이드',
+							paginationBulletMessage: '슬라이드 {{index}}로 이동',
+						},
+						pagination: {
+							el: '.main_recomm .swiper-pagination',
+							clickable: true,
+						},
+						navigation: {
+							nextEl: '.main_recomm .swiper-button-next',
+							prevEl: '.main_recomm .swiper-button-prev',
+						},
+						observer: true,
+						observeParents: true,
+					});
+				}
+
+				init();
+
+				/* SLIDE - MAIN_FORYOU */
+				var cntNum = 0;
+				var main_foryou_slide = new Swiper('.main_foryou .post-sug .swiper-container', {
+					allowTouchMove: false,
+					loop: false,
+					effect: 'fade',
+					autoHeight: false,
+					autoplay: {
+						delay: 25000,
+						disableOnInteraction: false,
+					},
+					a11y: {
+						enabled: true,
+						notificationClass: 'swiper-notification',
+						prevSlideMessage: '이전 슬라이드',
+						nextSlideMessage: '다음 슬라이드',
+						paginationBulletMessage: '슬라이드 {{index}}로 이동',
+					},
+					pagination: {
+						el: '.post-sug .swiper-pagination',
+						clickable: true,
+					},
+					on: {
+						slideChange: function () {
+							$(".fy_nav .swiper-slide li").children('.btn_shape').removeClass('active');
+							$(".fy_nav .swiper-slide-next li").eq(0).children('.btn_shape').addClass('active');
+							$(".fy_nav .swiper-slide-prev li").eq(0).children('.btn_shape').addClass('active');
+							foryouIndex = -1;
+							if (cntNum === 0) {
+								$('.fy_item').removeClass('active');
+								$('#fy6').addClass('active');
+								cntNum = 1;
+							} else {
+								$('.fy_item').removeClass('active');
+								$('#fy1').addClass('active');
+								cntNum = 0;
+							}
+
+							clearInterval(ti);
+							ti = startTimeInterval();
+						}
+					},
+				});
+
+				function foryouInterval(_foryouIndex) {
+					var foryouCateItems = $(".main_foryou .fy_nav .swiper-slide-active ul li .btn_shape");
+					$(foryouCateItems[(_foryouIndex + 1) % 5]).addClass("active");
+					$(foryouCateItems[_foryouIndex % 5]).removeClass("active");
+				}
+
+				function foryouFy_item(_Fy_itemIndex) {
+					var fynavItems = $('.main_foryou .fy_nav .swiper-slide-active ul li .btn_shape.active');
+					var fyActive = $(fynavItems).attr('data-tab');
+					// $(".fy_nav .btn_shape").removeClass('active');
+					$(".fy_item").removeClass('active');
+					// $(".fy_item").addClass('active');
+					$('#' + fyActive).addClass('active');
+				}
+
+				var foryouIndex = 0;
+				var ti;
+
+				function startTimeInterval() {
+					return setInterval(function () {
+						$(".fy_nav .btn_shape").removeClass('active');
+						$(".fy_item").removeClass('active');
+						foryouInterval(foryouIndex);
+						foryouFy_item();
+						if (foryouIndex >= 5) foryouIndex = 0;
+						foryouIndex++;
+					}, 5000);
+				}
+
+				$(".fy_nav .btn_shape").click(function () {
+					var fyActive = $(this).attr('data-tab');
+					$(".fy_nav .btn_shape").removeClass('active');
+					$(".fy_item").removeClass('active');
+					$(this).addClass('active');
+					$('#' + fyActive).addClass('active');
+				});
+
+				$(".fy_nav ul li").click(function () {
+					foryouIndex = $(this).index();
+					clearInterval(ti);
+					ti = startTimeInterval();
+				});
+
+				ti = startTimeInterval();
+			}
+		}
+	});
+}
+
 /* SLIDE - MAIN_VISUAL */
 var agent = navigator.userAgent.toLowerCase();