몰메인 수정

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

@@ -398,6 +398,329 @@
 			</th:block>
 		</th:block>
 
+		<!-- 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">
+							<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 class="fy_item active" id="fy1">
+					<div class="part">
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug01.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">자카드 방풍 패딩 스웨터 가디건 자카드 </div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug02.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+					<div class="part lg">
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug03.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+					<div class="part">
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug04.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug05.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+					<div class="part">
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug06.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug07.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="fy_item" id="fy2">
+					<div class="part">
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug04.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug05.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+					<div class="part">
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug01.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">자카드 방풍 패딩 스웨터 가디건 자카드 </div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug02.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+					<div class="part">
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug06.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug07.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+					<div class="part lg">
+						<div class="item_prod">
+							<div class="item_state">
+								<button type="button" class="itemLike" tabindex="0">관심상품 추가</button>
+								<a href="#none" class="itemLink" tabindex="0">
+									<div class="itemPic">
+										<img alt="BLACK-a" class=" vLHTC pd_img" src="/images/pc/thumb/main_sug03.jpg">
+									</div>
+									<div class="itemInfo">
+										<p class="itemBrand">BRAND NAME</p>
+										<div class=" itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
+										<p class="itemPrice">80,100</p>
+									</div>
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="fy_item" id="fy3"></div>
+				<div class="fy_item" id="fy4"></div>
+				<div class="fy_item" id="fy5"></div>
+				<div class="fy_item" id="fy6"></div>
+				<div class="fy_item" id="fy7"></div>
+				<div class="fy_item" id="fy8"></div>
+				<div class="fy_item" id="fy9"></div>
+				<div class="fy_item" id="fy10"></div>
+			</div>
+		</div>
+
+		<!-- 11. TV 슬라이드 -->
+		<div class="content wide main_tv">
+			<div class="cont_head">
+				<p class="displayH t_c">STYLE24 TV</p>
+			</div>
+			<div class="cont_body">
+				<div class="swiper-container post-tv">
+					<div class="swiper-wrapper">
+						<div class="swiper-slide">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/hqryeW6scd0?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/J7nowE2iTIM?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/cRiKrFk7FTM?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/hqryeW6scd0?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/J7nowE2iTIM?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+						<div class="swiper-slide">
+							<div class="movbox">
+								<iframe width="100%" height="100%" src="https://www.youtube.com/embed/cRiKrFk7FTM?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						</div>
+					</div>
+					<div class="swiper-button-prev white"></div> <!-- 클래스명 white 추가 -->
+					<div class="swiper-button-next white"></div>
+				</div>
+				<div class="swiper-controls">
+					<div class="swiper-pagination"></div>
+				</div>
+			</div>
+		</div>
 
 
 	<!-- End Of Main Contents -->