Files
sake/src/main/webapp/WEB-INF/views/index.jsp

3110 lines
173 KiB
Plaintext

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui"%>
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld"%>
<spring:eval expression="@environment.getProperty('sopmalfo.common.fileupload.cdnurl')" var="cdnurl"/>
<spring:eval expression="@environment.getProperty('currency-unit.default')" var="curUnit"/>
<!DOCTYPE html>
<html lang="ko">
<head>
<%-- 공통 include --%>
<jsp:include page="/WEB-INF/views/comm/Include.jsp"/>
</head>
<c:choose>
<c:when test = "${empty prevewVO.mainSiteInnb && prevewVO.evtPageAt ne 'Y'}"> <%--이벤트게시글 아님--%>
<body>
<%-- 공통 Header --%>
<jsp:include page="/WEB-INF/views/comm/Header.jsp"/>
<!-- 메인 컨텐츠 영역 -->
<main>
<!-- 영역 리스트 -->
<c:forEach items="${ resultMap.relmList }" var="relmList" varStatus="status">
<!-- 메인 롤링 배너 -->
<!-- 배너 이미지 사이즈 1280x480 -->
<c:if test="${ relmList.relmDvCd eq '01'}">
<section class="main-section main-section__main-banner">
<div class="main-banner" id="main-banner${ relmList.ordr }">
<c:forEach items="${ resultMap.case01 }" var="case01" varStatus="status">
<c:if test="${ relmList.ordr eq case01.sOrdr }">
<div><a href="${ case01.itmeCnncUrl }"><img src="${cdnurl}${ case01.filCours }/${ case01.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'"></a></div>
</c:if>
</c:forEach>
</div>
<div class="main-banner__btn-container">
<button class="main-banner__prev" id="main-banner__prev${ relmList.ordr }"><i class="icon icon_prev01"></i><span
class="visually-hidden">이전</span>
</button>
<button class="main-banner__next" id="main-banner__next${ relmList.ordr }"><i class="icon icon_next01"></i><span
class="visually-hidden">다음</span>
</button>
</div>
</section>
</c:if>
<!-- 상품 - 그룹별 타입 -->
<c:if test="${ relmList.relmDvCd eq '02'}">
<div class="main-section__container section-2">
<input type="hidden" name="section-ordr" value="${ relmList.ordr }" />
<section class="main-section">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
</div>
<div class="product-tab">
<ul>
<!-- 그룹별 리스트 출력 -->
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '02' && relmList.ordr eq baseCase.sOrdr }">
<li><button class="product-tab__btn product-tab__btn-${ relmList.ordr }" id="product-tab__btn-${ relmList.ordr }-${ baseCase.iOrdr }" onclick="fn_product_group_type('${ relmList.ordr }', '${ baseCase.iOrdr }'); return false;">${ baseCase.goodsGroupNm }</button></li>
</c:if>
</c:forEach>
</ul>
</div>
<!-- 상품 리스트 출력 -->
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '02' && relmList.ordr eq baseCase.sOrdr }">
<div class="product-list-type1 product-list-type-group product-list-type-group-${ relmList.ordr }" id="product-list-type-group-${ relmList.ordr }-${ baseCase.iOrdr }">
<div class="product-list-type1__list product-list-type1__list-group">
<c:forEach items="${ resultMap.case02 }" var="case02" varStatus="status">
<c:if test="${ relmList.ordr eq case02.sOrdr && baseCase.iOrdr eq case02.iOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case02.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>SOLD OUT</span>
</div>
</c:when>
<c:when test="${case02.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case02.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case02.goodsInnb});">
<img src="${cdnurl}${ case02.goodsImgCours }" alt="${case02.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case02.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case02.iconExpsrOrdr-1}" style="order:${case02.iconExpsrOrdr-1}">
<c:if test="${not empty case02.goodsIconCd}">
<c:forEach items="${fn:split(case02.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case02.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case02.goodsNmExpsrOrdr-1}" style="order:${case02.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case02.goodsInnb});">${ case02.goodsNm }</a>
</div>
</c:if>
<c:if test="${case02.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case02.pricExpsrOrdr-1}" style="order:${case02.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case02.cnsmrpric}" pattern="#,###"/>${curUnit} </span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case02.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent"><c:out value="${case02.slePercent}"/>%</span>
</div>
</div>
</c:if>
<c:if test="${case02.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case02.reprsntDcExpsrOrdr-1}" style="order:${case02.reprsntDcExpsrOrdr-1}">
<c:out value="${case02.reprsntDc}"/>
</div>
</c:if>
<c:if test="${case02.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case02.rvwEvlScreExpsrOrdr-1}" style="order:${case02.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case02.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case02.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case02.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case02.dlvyExpsrOrdr-1}" style="order:${case02.dlvyExpsrOrdr-1}">
<c:out value="${case02.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
</div>
</c:if>
</c:forEach>
</section>
</div>
</c:if>
<!-- 상품 - 카테고리별 타입 -->
<c:if test="${ relmList.relmDvCd eq '03'}">
<div class="main-section__container section-3">
<input type="hidden" name="section-ordr" value="${ relmList.ordr }" />
<section class="main-section">
<div class="main-section-header" style="margin-bottom: 48px;">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
<div class="category-type-tab">
<ul class="category-type-tab__list">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '03' && relmList.ordr eq baseCase.sOrdr }">
<li>
<button class="category-type-tab__btn category-type-tab__btn-${ relmList.ordr }" id="category-type-tab__btn-${ relmList.ordr }-${ baseCase.iOrdr }" onclick="fn_product_category_type('${ relmList.ordr }', '${ baseCase.iOrdr }'); return false;">
<c:if test = "${not empty baseCase.filCours}">
<i class="icon icon_category-type-tab01" >
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</i>
</c:if>
<span class="category-type-tab__name">${ baseCase.ctgryNm}</span>
</button>
</li>
</c:if>
</c:forEach>
</ul>
</div>
</div>
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '03' && relmList.ordr eq baseCase.sOrdr }">
<div class="product-list-type1 product-list-type-category product-list-type-category-${ relmList.ordr }" id="product-list-type-category-${ relmList.ordr }-${ baseCase.iOrdr }">
<div class="product-list-type1__list ">
</div>
</div>
</c:if>
</c:forEach>
</section>
</div>
</c:if>
<!-- 상품 - 이미지 배너 타입 -->
<!-- 이미지 사이즈 410x410 -->
<!-- 상품 - 이미지 배너 타입 (배경 이미지 X ".no-bg" 클래스 추가) -->
<c:if test="${ relmList.relmDvCd eq '04'}">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
<c:if test="${ baseCase.relmDvCd eq '04' && relmList.ordr eq baseCase.sOrdr }">
<c:choose>
<c:when test="${ empty baseCase.filCours}">
<div class="main-section__container product-banner no-bg">
</c:when>
<c:otherwise>
<div class="main-section__container product-banner" style="background-image: url('${ baseCase.filCours }');" >
</c:otherwise>
</c:choose>
</c:if>
</c:forEach>
<section class="main-section main-section__product-banner">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
</div>
<div class="product-banner">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
<c:if test="${ baseCase.relmDvCd eq '04' && relmList.ordr eq baseCase.sOrdr }">
<div class="product-banner__left">
<a href="${ baseCase.itmeCnncUrl }">
<div class="product-banner__image">
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" alt="기획전 이미지 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'">
</div>
</a>
</div>
</c:if>
</c:forEach>
<div class="product-banner__right">
<div class="product-list-type2">
<div class="product-banner-slick">
<c:forEach items="${ resultMap.case04 }" var="case04" varStatus="status" >
<c:if test="${ relmList.ordr eq case04.sOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case04.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>SOLD OUT</span>
</div>
</c:when>
<c:when test="${case04.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case04.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case04.goodsInnb});">
<img src="${cdnurl}${ case04.goodsImgCours }" alt="${case04.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case04.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case04.iconExpsrOrdr-1}" style="order:${case04.iconExpsrOrdr-1}">
<c:if test="${not empty case04.goodsIconCd}">
<c:forEach items="${fn:split(case04.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case04.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case04.goodsNmExpsrOrdr-1}" style="order:${case04.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case04.goodsInnb});">${ case04.goodsNm }</a>
</div>
</c:if>
<c:if test="${case04.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case04.pricExpsrOrdr-1}" style="order:${case04.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case04.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case04.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent">${ case04.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case04.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case04.reprsntDcExpsrOrdr-1}" style="order:${case04.reprsntDcExpsrOrdr-1}">
${case04.reprsntDc}
</div>
</c:if>
<c:if test="${case04.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case04.rvwEvlScreExpsrOrdr-1}" style="order:${case04.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case04.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case04.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case04.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case04.dlvyExpsrOrdr-1}" style="order:${case04.dlvyExpsrOrdr-1}">
<c:out value="${case04.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<div class="product-banner-slick__btn-container">
<button class="product-banner-slick__prev"><i class="icon icon_prev03"></i><span
class="visually-hidden">이전</span></button>
<button class="product-banner-slick__next"><i class="icon icon_next03"></i><span
class="visually-hidden">다음</span></button>
</div>
</div>
</div>
</div>
</section>
</div>
</c:if>
<!-- 기획전 -->
<!-- 기획전 소개 이미지 사이즈 510x700 -->
<c:if test="${ relmList.relmDvCd eq '05'}">
<div class="main-section__container">
<section class="main-section main-section__exhibition">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${relmList.mainSj}
</h2>
</div>
</div>
<div class="exhibition">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
<c:if test="${ baseCase.relmDvCd eq '05' && relmList.ordr eq baseCase.sOrdr }">
<div class="exhibition__left">
<a href="${ baseCase.itmeCnncUrl }">
<div class="exhibition__image">
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" alt="기획전 이미지 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'">
</div>
<div class="exhibition__description">
<h4 class="exhibition__description-title">${ baseCase.itemMainDc }</h4>
<c:if test = "${not empty baseCase.itemSubDc}">
<span class="exhibition__description-subtitle">${ baseCase.itemSubDc }
<i class="icon icon_exhibition-arrow"></i>
</span>
</c:if>
</div>
</a>
</div>
</c:if>
</c:forEach>
<div class="exhibition__right">
<div class="product-list-type2">
<div class="product-list-type2__list">
<c:forEach items="${ resultMap.case05 }" var="case05" varStatus="status" >
<c:if test="${ relmList.ordr eq case05.sOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case05.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>SOLD OUT</span>
</div>
</c:when>
<c:when test="${case05.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case05.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case05.goodsInnb});">
<img src="${cdnurl}${ case05.goodsImgCours }" alt="${ case05.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case05.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case05.iconExpsrOrdr-1}" style="order:${case05.iconExpsrOrdr-1}">
<c:if test="${not empty case05.goodsIconCd}">
<c:forEach items="${fn:split(case05.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case05.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case05.goodsNmExpsrOrdr-1}" style="order:${case05.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case05.goodsInnb});">${ case05.goodsNm }</a>
</div>
</c:if>
<c:if test="${case05.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case05.pricExpsrOrdr-1}" style="order:${case05.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case05.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case05.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent">${ case05.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case05.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case05.reprsntDcExpsrOrdr-1}" style="order:${case05.reprsntDcExpsrOrdr-1}">
${case05.reprsntDc}
</div>
</c:if>
<c:if test="${case05.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case05.rvwEvlScreExpsrOrdr-1}" style="order:${case05.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case05.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case05.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case05.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case05.dlvyExpsrOrdr-1}" style="order:${case05.dlvyExpsrOrdr-1}">
<c:out value="${case05.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
</div>
</div>
</div>
</section>
</div>
</c:if>
<!-- 상품 - 2x2 타입 -->
<!-- 상품 - 2x2 타입 (배경 이미지 X, ".no-bg" 클래스 추가) -->
<c:if test="${ relmList.relmDvCd eq '06'}">
<div class="main-section__container TwoXTwo-type no-bg">
<section class="main-section main-section__TwoXTwo-type">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd eq '06' && relmList.ordr eq baseCase.sOrdr && baseCase.iOrdr eq '01'}">
<div class="TwoXTwo-left">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ baseCase.itemSubSj }</span>
<h2 class="main-section-title__title">
${ baseCase.itemMainSj }
</h2>
</div>
</div>
<div class="TwoXTwo-left__container">
<div class="TwoXTwo-left-slick">
<c:forEach items="${ resultMap.case06 }" var="case06" varStatus="status">
<c:if test="${ relmList.ordr eq case06.sOrdr && baseCase.iOrdr eq case06.iOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case06.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>SOLD OUT</span>
</div>
</c:when>
<c:when test="${case06.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case06.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">
<img src="${cdnurl}${ case06.goodsImgCours }" alt="${case06.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case06.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case06.iconExpsrOrdr-1}" style="order:${case06.iconExpsrOrdr-1}">
<c:if test="${not empty case06.goodsIconCd}">
<c:forEach items="${fn:split(case04.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case06.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case06.goodsNmExpsrOrdr-1}" style="order:${case06.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">${ case06.goodsNm }</a>
</div>
</c:if>
<c:if test="${case06.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case06.pricExpsrOrdr-1}" style="order:${case06.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case06.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case06.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent">${ case06.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case06.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case06.reprsntDcExpsrOrdr-1}" style="order:${case06.reprsntDcExpsrOrdr-1}">
${case06.reprsntDc}
</div>
</c:if>
<c:if test="${case06.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case06.rvwEvlScreExpsrOrdr-1}" style="order:${case06.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case06.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case06.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case06.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case06.dlvyExpsrOrdr-1}" style="order:${case06.dlvyExpsrOrdr-1}">
<c:out value="${case06.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<div class="TwoXTwo-left-slick__btn-container">
<button class="TwoXTwo-left-slick__prev"><i class="icon icon_prev03"></i><span
class="visually-hidden">이전</span></button>
<button class="TwoXTwo-left-slick__next"><i class="icon icon_next03"></i><span
class="visually-hidden">다음</span></button>
</div>
</div>
</div>
</c:if>
</c:forEach>
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd eq '06' && relmList.ordr eq baseCase.sOrdr && baseCase.iOrdr eq '02'}">
<div class="TwoXTwo-right">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ baseCase.itemSubSj }</span>
<h2 class="main-section-title__title">
${ baseCase.itemMainSj }
</h2>
</div>
</div>
<div class="TwoXTwo-right__container">
<div class="TwoXTwo-right-slick">
<c:forEach items="${ resultMap.case06 }" var="case06" varStatus="status">
<c:if test="${ relmList.ordr eq case06.sOrdr && baseCase.iOrdr eq case06.iOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">
<img src="${cdnurl}${ case06.goodsImgCours }" alt="${ case06.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case06.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case06.iconExpsrOrdr-1}" style="order:${case06.iconExpsrOrdr-1}">
<c:if test="${not empty case06.goodsIconCd}">
<c:forEach items="${fn:split(case06.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case06.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case06.goodsNmExpsrOrdr-1}" style="order:${case06.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">${ case06.goodsNm }</a>
</div>
</c:if>
<c:if test="${case06.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case06.pricExpsrOrdr-1}" style="order:${case06.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case06.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case06.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent">${ case06.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case06.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case06.reprsntDcExpsrOrdr-1}" style="order:${case06.reprsntDcExpsrOrdr-1}">
${case06.reprsntDc}
</div>
</c:if>
<c:if test="${case06.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case06.rvwEvlScreExpsrOrdr-1}" style="order:${case06.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case06.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case06.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case06.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case06.dlvyExpsrOrdr-1}" style="order:${case06.dlvyExpsrOrdr-1}">
<c:out value="${case06.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<div class="TwoXTwo-right-slick__btn-container">
<button class="TwoXTwo-right-slick__prev"><i class="icon icon_prev03"></i><span
class="visually-hidden">이전</span></button>
<button class="TwoXTwo-right-slick__next"><i class="icon icon_next03"></i><span
class="visually-hidden">다음</span></button>
</div>
</div>
</div>
</c:if>
</c:forEach>
</section>
</div>
</c:if>
<!-- 상품 - 4열 슬라이드 타입 -->
<c:if test="${ relmList.relmDvCd eq '07'}">
<div class="main-section__container">
<section class="main-section main-section__four-row">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '07' && relmList.ordr eq baseCase.sOrdr and not empty baseCase.goodsGroupInnb }">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ baseCase.subSj }</span>
<h2 class="main-section-title__title">
${ baseCase.mainSj }
</h2>
</div>
</div>
</c:if>
</c:forEach>
<div class="product-list-type1">
<div class="four-row-slick">
<c:forEach items="${ resultMap.case07 }" var="case07" varStatus="status">
<c:if test="${ relmList.ordr eq case07.sOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case07.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>SOLD OUT</span>
</div>
</c:when>
<c:when test="${case07.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case07.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case07.goodsInnb});">
<img src="${cdnurl}${ case07.goodsImgCours }" alt="${ case07.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case07.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case07.iconExpsrOrdr-1}" style="order:${case07.iconExpsrOrdr-1}">
<c:if test="${not empty case07.goodsIconCd}">
<c:forEach items="${fn:split(case07.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case07.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case07.goodsNmExpsrOrdr-1}" style="order:${case07.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case07.goodsInnb});">${ case07.goodsNm }</a>
</div>
</c:if>
<c:if test="${case07.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case07.pricExpsrOrdr-1}" style="order:${case07.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case07.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case07.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent">${ case07.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case07.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case07.reprsntDcExpsrOrdr-1}" style="order:${case07.reprsntDcExpsrOrdr-1}">
${case07.reprsntDc}
</div>
</c:if>
<c:if test="${case07.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case07.rvwEvlScreExpsrOrdr-1}" style="order:${case07.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case07.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case07.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case07.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case07.dlvyExpsrOrdr-1}" style="order:${case07.dlvyExpsrOrdr-1}">
<c:out value="${case07.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<div class="four-row-slick__btn-container">
<button class="four-row-slick__prev"><i class="icon icon_prev02"></i><span
class="visually-hidden">이전</span></button>
<button class="four-row-slick__next"><i class="icon icon_next02"></i><span
class="visually-hidden">다음</span></button>
</div>
</div>
</section>
</div>
</c:if>
<!-- 타임세일 -->
<!-- 타임세일 (배경 이미지 X, ".no-bg" 클래스 추가) -->
<c:if test="${ relmList.relmDvCd eq '08'}">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
<c:if test="${ baseCase.relmDvCd eq '08' && relmList.ordr eq baseCase.sOrdr }">
<c:choose>
<c:when test="${ empty baseCase.filCours}">
<div class="main-section__container time-sale no-bg">
</c:when>
<c:otherwise>
<div class="main-section__container time-sale" style="background-image: url('${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }');" >
</c:otherwise>
</c:choose>
</c:if>
</c:forEach>
<section class="main-section main-section__time-sale">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '08' && relmList.ordr eq baseCase.sOrdr }">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">얼마 남지 않았어요!</span>
<h2 class="main-section-title__title">
타임세일⏰
</h2>
</div>
</div>
</c:if>
</c:forEach>
<div class="time-sale">
<span class="visually-hidden">타임세일</span>
<div class="wrapper">
<div class="time-sale-slick">
<c:forEach items="${ resultMap.case08 }" var="case08" varStatus="status">
<c:if test="${ relmList.ordr eq case08.sOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case08.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>SOLD OUT</span>
</div>
</c:when>
<c:when test="${case08.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case08.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<c:if test="${(case08.evtTmeExpsrAt eq 'Y' and case08.remainTime ne 'N') or (case08.rltmQyBannerExpsrAt eq 'Y' and case08.remainQy > 0) }">
<div class="time-sale__top">
<c:if test="${case08.evtTmeExpsrAt eq 'Y' and case08.remainTime ne 'N'}">
<span class="time" name="remainTime">${case08.remainTime}</span>
<%-- <span class="time" name="tmeSetup">${case08.tmeSetup}</span> --%>
<%-- <input type="hidden" name="tmeSetupValue" value="${ case08.tmeSetup }" /> --%>
</c:if>
<c:if test="${case08.rltmQyBannerExpsrAt eq 'Y' and case08.remainQy > 0 }">
<span class="left">남은수량 ${ case08.remainQy }개</span>
</c:if>
</div>
</c:if>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case08.goodsInnb});">
<img src="${cdnurl}${ case08.goodsImgCours }" alt="${ case08.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case08.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case08.iconExpsrOrdr-1}" style="order:${case08.iconExpsrOrdr-1}">
<c:if test="${not empty case08.goodsIconCd}">
<c:forEach items="${fn:split(case08.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case08.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case08.goodsNmExpsrOrdr-1}" style="order:${case08.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case08.goodsInnb});">${ case08.goodsNm }</a>
</div>
</c:if>
<c:if test="${case08.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case08.pricExpsrOrdr-1}" style="order:${case08.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case08.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case08.slepric }" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent">${ case08.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case08.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case08.reprsntDcExpsrOrdr-1}" style="order:${case08.reprsntDcExpsrOrdr-1}">
${case08.reprsntDc}
</div>
</c:if>
<c:if test="${case08.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case08.rvwEvlScreExpsrOrdr-1}" style="order:${case08.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case08.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case08.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case08.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case08.dlvyExpsrOrdr-1}" style="order:${case08.dlvyExpsrOrdr-1}">
<c:out value="${case08.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
</div>
<div class="time-sale-slick__btn-container">
<button class="time-sale-slick__prev"><i class="icon icon_prev02"></i><span
class="visually-hidden">이전</span></button>
<button class="time-sale-slick__next"><i class="icon icon_next02"></i><span
class="visually-hidden">다음</span></button>
</div>
</div>
</section>
</div>
</c:if>
<!-- 베스트 리뷰 -->
<c:if test="${ relmList.relmDvCd eq '09'}">
<div class="main-section__container">
<section class="main-section main-section__best-review">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '09' && relmList.ordr eq baseCase.sOrdr }">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ baseCase.subSj }</span>
<h2 class="main-section-title__title">
${ baseCase.mainSj }
</h2>
</div>
</div>
</c:if>
</c:forEach>
<div class="best-review">
<div class="best-review-slick">
<c:forEach items="${ resultMap.case09 }" var="case09" varStatus="status">
<c:if test="${ relmList.ordr eq case09.sOrdr }">
<div class="best-review__item">
<div class="best-review__review">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case09.goodsInnb});" class="best-review__review_a">
<div class="best-review__review-image">
<input type="hidden" class="npayBbscttSnb" value="${ case09.npayBbscttSnb }"/>
<c:choose>
<c:when test="${ case09.photoRvwAt eq 'Y' }">
<img src="${cdnurl}${ case09.reviwImg }" class="reviwImg" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
</c:when>
<c:when test="${ case09.photoRvwAt eq 'N' }">
<img src="${cdnurl}${ case09.goodsImgCours }" class="reviwImg" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
</c:when>
</c:choose>
</div>
<span class="best-review__title">${ case09.sj }
</span>
<div class="best-review__paragraph">
${ case09.cn }
</div>
</a>
</div>
<div class="best-review__product">
<div class="best-review__product-image">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case09.goodsInnb});">
<img src="${cdnurl}${ case09.goodsImgCours }" alt="${case09.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner">
<div class="product-unit-title">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case09.goodsInnb});">${ case09.goodsNm }</a>
</div>
</div>
<div class="product-unit-misc">
<div class="product-unit-rating">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case09.avgEvlScore}" default="0.0"/></span>
</div>
<div class="product-unit-price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case09.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case09.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
</div>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<div class="best-review-slick__btn-container">
<button class="best-review-slick__prev"><i class="icon icon_prev02"></i><span
class="visually-hidden">이전</span></button>
<button class="best-review-slick__next"><i class="icon icon_next02"></i><span
class="visually-hidden">다음</span></button>
</div>
</div>
</section>
</div>
</c:if>
<!-- 매거진 -->
<!-- 매거진 썸네일 이미지 사이즈 500x360 -->
<c:if test="${ relmList.relmDvCd eq '10'}">
<div class="main-section__container magazine">
<section class="main-section main-section__magazine">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
</div>
<div class="magazine">
<div class="magazine-slick col-2">
<c:forEach items="${ resultMap.case10 }" var="case10" varStatus="status">
<c:if test="${ relmList.ordr eq case10.sOrdr }">
<div>
<a href="/sopmal/csc/selectBbscttAuth?bbsId=${ case10.bbsId }&bbscttInnb=${ case10.bbscttInnb }">
<img src="${cdnurl}${ case10.reprsntImgSysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
</c:if>
</c:forEach>
</div>
<div class="magazine-slick__btn-container">
<button class="magazine-slick__prev"><i class="icon icon_prev02"></i><span
class="visually-hidden">이전</span></button>
<button class="magazine-slick__next"><i class="icon icon_next02"></i><span
class="visually-hidden">다음</span></button>
</div>
</div>
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=subPage&bbsId=magazine" class="magazine__more-link">더보기
<i class="icon icon_magazine-more-icon"></i>
</a>
</section>
</div>
</c:if>
<!-- 브랜드 및 제품 바로가기 -->
<!-- 좌측이미지 사이즈 영역 620x400 -->
<!-- 우측이미지 2개 사이즈 영역 각각 620x180 -->
<c:if test="${ relmList.relmDvCd eq '11'}">
<div class="main-section__container">
<section class="main-section main-section__brand-link">
<div class="brand-link">
<c:forEach items="${ resultMap.case11 }" var="case11" varStatus="status">
<c:if test="${ relmList.ordr eq case11.sOrdr }">
<c:if test="${ case11.iOrdr eq '1' }">
<div class="left">
<a href="${ case11.itmeCnncUrl }">
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'" >
</a>
</div>
</c:if>
</c:if>
</c:forEach>
<div class="right">
<c:forEach items="${ resultMap.case11 }" var="case11" varStatus="status">
<c:if test="${ relmList.ordr eq case11.sOrdr }">
<c:if test="${ case11.iOrdr eq '2' }">
<div class="first">
<a href="${ case11.itmeCnncUrl }">
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
</c:if>
<c:if test="${ case11.iOrdr eq '3' }">
<div class="second">
<a href="${ case11.itmeCnncUrl }">
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
</c:if>
</c:if>
</c:forEach>
</div>
</div>
</section>
</div>
</c:if>
<!-- 띠 배너 -->
<c:if test="${ relmList.relmDvCd eq '12'}">
<div class="main-section__container">
<section class="main-section main-section__small-banner01">
<div class="small-banner01">
<c:forEach items="${ resultMap.case12 }" var="case12" varStatus="status">
<c:if test="${ relmList.ordr eq case12.sOrdr }">
<div><a href="${ case12.itmeCnncUrl }"><img src="${cdnurl}${ case12.filCours }/${ case12.sysFilNm }" alt="배너 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'"></a></div>
</c:if>
</c:forEach>
</div>
<div class="small-banner01__btn-container">
<button class="small-banner01__prev"><i class="icon icon_prev04"></i><span
class="visually-hidden">이전</span></button>
<button class="small-banner01__next"><i class="icon icon_next04"></i><span
class="visually-hidden">다음</span></button>
</div>
</section>
</div>
</c:if>
<!-- 공지사항 -->
<c:if test="${ relmList.relmDvCd eq '13'}">
<div class="main-section__container">
<section class="main-section main-section__notice">
<div class="main-section-header">
<div class="main-section-title">
<h2 class="main-section-title__title">
공지사항
</h2>
</div>
<div class="notice-line">
<i class="icon icon_notice-speaker"></i>
<div class="notice-line-slick">
<c:forEach items="${ resultMap.case13 }" var="case13" varStatus="status">
<c:if test="${ relmList.ordr eq case13.sOrdr }">
<div>
<span class="text">
<a href="/sopmal/csc/selectBbscttAuth?authDv=CM&reqUrl=csc&bbsId=${ case13.bbsId }&bbscttInnb=${ case13.bbscttInnb }">
${ case13.sj }
</a>
</span>
<span class="date">
<c:set var="registDt" value="${fn:replace(case13.registDt, 'T', ' ')}" />
<fmt:parseDate var="registDt" value="${ registDt }" pattern="yyyy-MM-dd HH:mm:ss"/>
<fmt:formatDate value="${registDt}" pattern="yyyy-MM-dd"/>
</span>
</div>
</c:if>
</c:forEach>
</div>
<div class="btn-container">
<button class="notice-line__prev">
<i class="icon icon_notice-chevron"></i>
</button>
<button class="notice-line__next">
<i class="icon icon_notice-chevron2"></i>
</button>
</div>
</div>
</div>
</section>
</div>
</c:if>
<!-- FAQ -->
<c:if test="${ relmList.relmDvCd eq '14'}">
<div class="main-section__container">
<section class="main-section main-section__notice">
<div class="notice">
<c:forEach items="${ resultMap.case14 }" var="case14" varStatus="status">
<c:if test="${ relmList.ordr eq case14.sOrdr }">
<c:if test="${ case14.iOrdr eq '1' }">
<div class="notice__box">
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=csc&bbsId=faq">
<i class="icon icon_notice01"></i>
</a>
<h4 class="notice__title"><a href="">${ case14.itemMainSj }</a></h4>
<span class="notice__description">${ case14.itemSubSj }</span>
</div>
</c:if>
<c:if test="${ case14.iOrdr eq '2' }">
<div class="notice__box">
<a href="/sopmal/csc/selectBbscttAuth?authDv=REDNG&reqUrl=useGuidance&bbsId=use_guidance">
<i class="icon icon_notice02"></i>
</a>
<h4 class="notice__title"><a href="">${ case14.itemMainSj }</a></h4>
<span class="notice__description">${ case14.itemSubSj }</span>
</div>
</c:if>
<c:if test="${ case14.iOrdr eq '3' }">
<div class="notice__box">
<i class="icon icon_notice03"></i>
<h4 class="notice__title customer-service">${ case14.itemMainSj }</h4>
<span class="notice__number">${ case14.cscTelnb }</span>
<p class="notice__paragraph">
<span class="notice__text01">${ case14.cscWkdayWorkTme }</span>
<span class="notice__text02">(${ case14.cscLunchTme })</span>
<br>
<span class="notice__text03">${ case14.cscRstde }</span>
</p>
</div>
</c:if>
</c:if>
</c:forEach>
</div>
</section>
</div>
</c:if>
</c:forEach>
<!-- 우측 퀵메뉴 -->
<div class="quick-menu__wrapper">
<aside class="quick-menu">
<div class="quick-menu__group">
<button onclick="location.href='/sopmal/ordr/selectSpbk'">
<i class="icon icon_quick-menu02">
<span class="number-badge" class = "headerCartCnt">${ resultMap.cartCnt }</span>
</i>
<span>장바구니</span>
</button>
<button onclick="location.href='/sopmal/mpage/ordr/selectWslistInqireForm'">
<i class="icon icon_quick-menu03">
<c:if test="${ !empty resultMap.loginFlag }">
<span class="number-badge">
${ resultMap.wishList }
</span>
</c:if>
</i>
<span>위시리스트</span>
</button>
</div>
<div class="quick-menu__recentProduct">
<p class="quick-menu__recentProduct__title">최근 본 상품(${fn:length(resultMap.recentGoods)})</p>
<c:if test="${ !empty resultMap.recentGoods }">
<div class="recentProductSlick">
<c:set var="cnt" value="0" />
<c:set var="openFlag" value="0" />
<c:set var="closeFlag" value="0" />
<c:forEach items="${ resultMap.recentGoods }" var="recentGoods" varStatus="status">
<c:set var="cnt" value="${ cnt + 1 }" />
<c:choose>
<c:when test="${ cnt == 1 || cnt % 3 == 1 }">
<c:set var="openFlag" value="1" />
</c:when>
<c:otherwise>
<c:set var="openFlag" value="2" />
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${ cnt % 3 == 0 }">
<c:set var="closeFlag" value="1" />
</c:when>
<c:otherwise>
<c:set var="closeFlag" value="2" />
</c:otherwise>
</c:choose>
<c:if test="${ openFlag == 1}">
<div class="recentProductSlick__item">
</c:if>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${recentGoods.goodsInnb});">
<img src="${cdnurl}${ recentGoods.goodsImgCours }" alt="${recentGoods.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
<c:if test="${ closeFlag == 1}">
</div>
</c:if>
</c:forEach>
<c:if test="${ closeFlag == 2}">
</div>
</c:if>
</div>
<div class="recentProductSlick__btn-container">
<button class="recentProductSlick__prev"><i class="icon icon_prev01"></i><span
class="visually-hidden">이전</span></button>
<span class="recentProductSlick__index">
<span class="current">1</span>
/
<span class="total"></span>
</span>
<button class="recentProductSlick__next"><i class="icon icon_next01"></i><span
class="visually-hidden">다음</span></button>
</div>
</c:if>
</div>
<%-- <div class="quick-menu__customer-service">--%>
<%-- <i class="icon icon_quick-customer-service"></i>--%>
<%-- <span class="visually-hidden">고객센터</span>--%>
<%-- <span class="quick-menu__customer-service__num">--%>
<%-- ${ fn:replace(resultMap.operAt.cscTelnb, '-', '<br>') }--%>
<%-- </span>--%>
<%-- </div>--%>
<div class="quick-menu__to-top">
<button><i class="icon icon_quick-to-top"></i><span class="visually-hidden">위로
가기</span></button>
</div>
</aside>
</div>
<!-- 모달 -->
<!-- 메인 팝업-->
<c:if test="${ !empty resultMap.popup }">
<c:forEach items="${ resultMap.popup }" var="popup" varStatus="status">
<div class="main-popup" id="main-popup-${ popup.popupInnb }" style="top:${ popup.popupLcY }px; left:${ popup.popupLcX }px; z-index: ${ status.index +1};">
<div class="main-popup-content" style=" width:${ popup.popupMgWth }px; height:${ popup.popupMgVtc }px;">
<a href="${ popup.cnncUrl }">
<img src="${cdnurl}${ popup.filCours }/${ popup.sysFilNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
<c:if test="${ popup.tmeSetupAt eq 'Y' }">
<div class="main-popup-time">
<input type="hidden" name="tmeSetupValue" value="${ popup.tmeSetup }" />
<span name="tmeSetup">${ popup.tmeSetup }</span>
</div>
</c:if>
</div>
<div class="main-popup-footer">
<label class="b-checkbox checkbox is-small">
<input type="checkbox" name="checked" value="false">
<span class="check"></span>
<span class="control-label">오늘 하루 팝업 창 닫기</span>
</label>
<a href="javascript:void(0);" class="main-popup-btn" onclick="closePopup(this)">닫기</a>
</div>
</div>
</c:forEach>
</c:if>
</main>
<%-- 공통 Footer --%>
<jsp:include page="/WEB-INF/views/comm/Footer.jsp"/>
<!-- 모달 -->
<!-- 검색어를 입력하세요 모달 -->
<div id="enter-keyword" class="modal alert">
<div class="alert-content">
<p class="alert-content__text">검색어를 입력해주세요</p>
<!-- <p class="alert-content__text--sm">내용입니다.</p> -->
</div>
<div class="alert-btn-container">
<!-- <a href="#" rel="modal:close" class="alert-btn alert-btn--cancel">취소</a> -->
<a href="#" rel="modal:close" class="alert-btn alert-btn--confirm">확인</a>
</div>
</div>
<!-- 상품 옵션 모달 -->
<div id="product-option-popUp" class="modal option">
<div class="option-header">
<div class="option-header__title">옵션 선택</div>
</div>
<div class="option-content">
<div class="product-option">
<div class="product-option__item">
<label class="b-checkbox checkbox is-medium">
<input type="checkbox" value="false">
<span class="check"></span>
<span class="control-label">식물성 알티지오메가3 1박스</span>
</label>
<div class="product-option__right">
<span class="product-option__price">59,000${curUnit}</span>
</div>
</div>
<div class="product-option__item">
<label class="b-checkbox checkbox is-medium">
<input type="checkbox" value="false">
<span class="check"></span>
<span class="control-label">식물성 알티지오메가3 4+1</span>
</label>
<div class="product-option__right">
<span class="product-option__price">59,000${curUnit}</span>
<span class="product-option__monthly-payment">(개월당 47,200${curUnit})</span>
</div>
</div>
<div class="product-option__item">
<label class="b-checkbox checkbox is-medium">
<input type="checkbox" value="">
<span class="check"></span>
<span class="control-label">식물성 알티지오메가3 8+2</span>
</label>
<div class="product-option__right">
<span class="product-option__price">59,000${curUnit}</span>
<span class="product-option__gift">비타민C 증정</span>
</div>
</div>
</div>
<div class="product-count">
<div class="product-count__amount-top">
<span class="product-count__amount-title">식물성 알티지오메가3 1박스</span>
<button class="product-count__amount-delete"><span class="visually-hidden">삭제</span></button>
</div>
<div class="product-count__amount-bottom">
<div class="product-count__amount-counter">
<button class="product-count__amount-btn minus"><span class="visually-hidden">감소</span></button>
<span class="product-count__amount-number">1</span>
<button class="product-count__amount-btn plus"><span class="visually-hidden">추가</span></button>
</div>
<div class="product-count__amount-price-box">
<span class="product-count__amount-monthly-price">개월당 19,500${curUnit}</span>
<span class="product-count__amount-price">59,000${curUnit}</span>
</div>
</div>
</div>
<div class="product-count">
<div class="product-count__amount-top">
<span class="product-count__amount-title">식물성 알티지오메가3 1박스</span>
<button class="product-count__amount-delete"><span class="visually-hidden">삭제</span></button>
</div>
<div class="product-count__amount-bottom">
<div class="product-count__amount-counter">
<button class="product-count__amount-btn minus"><span class="visually-hidden">감소</span></button>
<span class="product-count__amount-number">1</span>
<button class="product-count__amount-btn plus"><span class="visually-hidden">추가</span></button>
</div>
<div class="product-count__amount-price-box">
<span class="product-count__amount-monthly-price">개월당 19,500${curUnit}</span>
<span class="product-count__amount-price">59,000${curUnit}</span>
</div>
</div>
</div>
</div>
<div class="product-total__container">
<span class="product-total__text">총 상품금액</span>
<span class="product-total__price">59,000<span class="won">${curUnit}</span></span>
</div>
<div class="product-btn-container">
<button class="gift-btn">선물</button>
<button class="btn theme large outline">장바구니</button>
<button class="btn theme large">구매하기</button>
</div>
<div style="margin-top: 24px;">
<div id="NC_ID_1699495131279295" class="npay_storebtn_bx">
<div id="NPAY_BUTTON_BOX_ID" class="npay_button_box ">
<div class="npay_button">
<div class="npay_text"><span class="npay_blind">NAVER 네이버 ID로 간편구매 네이버페이</span></div>
<table class="npay_btn_list" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="npay_btn_item"> <a id="NPAY_BUY_LINK_IDNC_ID_1699495131279295" href="#"
class="npay_btn_link npay_btn_pay btn_green"
style="box-sizing:content-box; " title="새창"><span class="npay_blind">네이버페이
구매하기</span></a> </td>
<td class="npay_btn_item btn_width"> <a id="NPAY_WISH_LINK_IDNC_ID_1699495131279295"
href="#" class="npay_btn_link npay_btn_zzim "
style="box-sizing:content-box; " title="새창"><span
class="npay_blind">찜하기</span></a> </td>
</tr>
</tbody>
</table>
</div>
<div id="NPAY_EVENT_ID" class="npay_event"> <a id="NPAY_PROMOTION_PREV_IDNC_ID_1699495131279295"
href="#" class="npay_more npay_more_prev"><span class="npay_blind">이전</span></a>
<p id="NPAY_PROMOTION_IDNC_ID_1699495131279295" class="npay_event_text"><strong
class="event_title">이벤트</strong><a href="https://new-m.pay.naver.com/pcpay/eventbenefit"
class="event_link" target="_blank">네이버페이</a></p> <a
id="NPAY_PROMOTION_NEXT_IDNC_ID_1699495131279295" href="#"
class="npay_more npay_more_next"><span class="npay_blind">다음</span></a>
</div>
</div>
</div>
</div>
</div>
</body>
</c:when>
<c:otherwise>
<!-- 영역 리스트 -->
<c:forEach items="${ resultMap.relmList }" var="relmList" varStatus="status">
<!-- 메인 롤링 배너 -->
<!-- 배너 이미지 사이즈 1280x480 -->
<c:if test="${ relmList.relmDvCd eq '01'}">
<section class="main-section main-section__main-banner">
<div class="main-banner" id="main-banner${ relmList.ordr }">
<c:forEach items="${ resultMap.case01 }" var="case01" varStatus="status">
<c:if test="${ relmList.ordr eq case01.sOrdr }">
<div><a href="${ case01.itmeCnncUrl }"><img src="${cdnurl}${ case01.filCours }/${ case01.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'"></a></div>
</c:if>
</c:forEach>
</div>
<div class="main-banner__btn-container">
<button class="main-banner__prev" id="main-banner__prev${ relmList.ordr }"><i class="icon icon_prev01"></i><span
class="visually-hidden">이전</span>
</button>
<button class="main-banner__next" id="main-banner__next${ relmList.ordr }"><i class="icon icon_next01"></i><span
class="visually-hidden">다음</span>
</button>
</div>
</section>
</c:if>
<!-- 상품 - 그룹별 타입 -->
<c:if test="${ relmList.relmDvCd eq '02'}">
<div class="main-section__container section-2">
<input type="hidden" name="section-ordr" value="${ relmList.ordr }" />
<section class="main-section">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
</div>
<div class="product-tab">
<ul>
<!-- 그룹별 리스트 출력 -->
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '02' && relmList.ordr eq baseCase.sOrdr }">
<li><button class="product-tab__btn product-tab__btn-${ relmList.ordr }" id="product-tab__btn-${ relmList.ordr }-${ baseCase.iOrdr }" onclick="fn_product_group_type('${ relmList.ordr }', '${ baseCase.iOrdr }'); return false;">${ baseCase.goodsGroupNm }</button></li>
</c:if>
</c:forEach>
</ul>
</div>
<!-- 상품 리스트 출력 -->
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '02' && relmList.ordr eq baseCase.sOrdr }">
<div class="product-list-type1 product-list-type-group product-list-type-group-${ relmList.ordr }" id="product-list-type-group-${ relmList.ordr }-${ baseCase.iOrdr }">
<div class="product-list-type1__list product-list-type1__list-group">
<c:forEach items="${ resultMap.case02 }" var="case02" varStatus="status">
<c:if test="${ relmList.ordr eq case02.sOrdr && baseCase.iOrdr eq case02.iOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case02.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>SOLD OUT</span>
</div>
</c:when>
<c:when test="${case02.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case02.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case02.goodsInnb});">
<img src="${cdnurl}${ case02.goodsImgCours }" alt="${case02.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case02.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case02.iconExpsrOrdr-1}" style="order:${case02.iconExpsrOrdr-1}">
<c:if test="${not empty case02.goodsIconCd}">
<c:forEach items="${fn:split(case02.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case02.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case02.goodsNmExpsrOrdr-1}" style="order:${case02.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case02.goodsInnb});">${ case02.goodsNm }</a>
</div>
</c:if>
<c:if test="${case02.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case02.pricExpsrOrdr-1}" style="order:${case02.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case02.cnsmrpric}" pattern="#,###"/>${curUnit} </span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case02.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent"><c:out value="${case02.slePercent}"/>%</span>
</div>
</div>
</c:if>
<c:if test="${case02.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case02.reprsntDcExpsrOrdr-1}" style="order:${case02.reprsntDcExpsrOrdr-1}">
<c:out value="${case02.reprsntDc}"/>
</div>
</c:if>
<c:if test="${case02.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case02.rvwEvlScreExpsrOrdr-1}" style="order:${case02.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case02.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case02.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case02.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case02.dlvyExpsrOrdr-1}" style="order:${case02.dlvyExpsrOrdr-1}">
<c:out value="${case02.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
</div>
</c:if>
</c:forEach>
</section>
</div>
</c:if>
<!-- 상품 - 카테고리별 타입 -->
<c:if test="${ relmList.relmDvCd eq '03'}">
<div class="main-section__container section-3">
<input type="hidden" name="section-ordr" value="${ relmList.ordr }" />
<section class="main-section">
<div class="main-section-header" style="margin-bottom: 48px;">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
<div class="category-type-tab">
<ul class="category-type-tab__list">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '03' && relmList.ordr eq baseCase.sOrdr }">
<li>
<button class="category-type-tab__btn category-type-tab__btn-${ relmList.ordr }" id="category-type-tab__btn-${ relmList.ordr }-${ baseCase.iOrdr }" onclick="fn_product_category_type('${ relmList.ordr }', '${ baseCase.iOrdr }'); return false;">
<c:if test = "${not empty baseCase.filCours}">
<i class="icon icon_category-type-tab01" >
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</i>
</c:if>
<span class="category-type-tab__name">${ baseCase.ctgryNm}</span>
</button>
</li>
</c:if>
</c:forEach>
</ul>
</div>
</div>
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '03' && relmList.ordr eq baseCase.sOrdr }">
<div class="product-list-type1 product-list-type-category product-list-type-category-${ relmList.ordr }" id="product-list-type-category-${ relmList.ordr }-${ baseCase.iOrdr }">
<div class="product-list-type1__list ">
</div>
</div>
</c:if>
</c:forEach>
</section>
</div>
</c:if>
<!-- 상품 - 이미지 배너 타입 -->
<!-- 이미지 사이즈 410x410 -->
<!-- 상품 - 이미지 배너 타입 (배경 이미지 X ".no-bg" 클래스 추가) -->
<c:if test="${ relmList.relmDvCd eq '04'}">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
<c:if test="${ baseCase.relmDvCd eq '04' && relmList.ordr eq baseCase.sOrdr }">
<c:choose>
<c:when test="${ empty baseCase.filCours}">
<div class="main-section__container product-banner no-bg">
</c:when>
<c:otherwise>
<div class="main-section__container product-banner" style="background-image: url('${ baseCase.filCours }');" >
</c:otherwise>
</c:choose>
</c:if>
</c:forEach>
<section class="main-section main-section__product-banner">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${ relmList.mainSj }
</h2>
</div>
</div>
<div class="product-banner">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
<c:if test="${ baseCase.relmDvCd eq '04' && relmList.ordr eq baseCase.sOrdr }">
<div class="product-banner__left">
<a href="${ baseCase.itmeCnncUrl }">
<div class="product-banner__image">
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" alt="기획전 이미지 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'">
</div>
</a>
</div>
</c:if>
</c:forEach>
<div class="product-banner__right">
<div class="product-list-type2">
<div class="product-banner-slick">
<c:forEach items="${ resultMap.case04 }" var="case04" varStatus="status" >
<c:if test="${ relmList.ordr eq case04.sOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case04.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>SOLD OUT</span>
</div>
</c:when>
<c:when test="${case04.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case04.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case04.goodsInnb});">
<img src="${cdnurl}${ case04.goodsImgCours }" alt="${case04.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case04.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case04.iconExpsrOrdr-1}" style="order:${case04.iconExpsrOrdr-1}">
<c:if test="${not empty case04.goodsIconCd}">
<c:forEach items="${fn:split(case04.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case04.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case04.goodsNmExpsrOrdr-1}" style="order:${case04.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case04.goodsInnb});">${ case04.goodsNm }</a>
</div>
</c:if>
<c:if test="${case04.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case04.pricExpsrOrdr-1}" style="order:${case04.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case04.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case04.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent">${ case04.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case04.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case04.reprsntDcExpsrOrdr-1}" style="order:${case04.reprsntDcExpsrOrdr-1}">
${case04.reprsntDc}
</div>
</c:if>
<c:if test="${case04.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case04.rvwEvlScreExpsrOrdr-1}" style="order:${case04.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case04.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case04.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case04.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case04.dlvyExpsrOrdr-1}" style="order:${case04.dlvyExpsrOrdr-1}">
<c:out value="${case04.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<div class="product-banner-slick__btn-container">
<button class="product-banner-slick__prev"><i class="icon icon_prev03"></i><span
class="visually-hidden">이전</span></button>
<button class="product-banner-slick__next"><i class="icon icon_next03"></i><span
class="visually-hidden">다음</span></button>
</div>
</div>
</div>
</div>
</section>
</div>
</c:if>
<!-- 기획전 -->
<!-- 기획전 소개 이미지 사이즈 510x700 -->
<c:if test="${ relmList.relmDvCd eq '05'}">
<div class="main-section__container">
<section class="main-section main-section__exhibition">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ relmList.subSj }</span>
<h2 class="main-section-title__title">
${relmList.mainSj}
</h2>
</div>
</div>
<div class="exhibition">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
<c:if test="${ baseCase.relmDvCd eq '05' && relmList.ordr eq baseCase.sOrdr }">
<div class="exhibition__left">
<a href="${ baseCase.itmeCnncUrl }">
<div class="exhibition__image">
<img src="${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }" alt="기획전 이미지 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'">
</div>
<div class="exhibition__description">
<h4 class="exhibition__description-title">${ baseCase.itemMainDc }</h4>
<c:if test = "${not empty baseCase.itemSubDc}">
<span class="exhibition__description-subtitle">${ baseCase.itemSubDc }
<i class="icon icon_exhibition-arrow"></i>
</span>
</c:if>
</div>
</a>
</div>
</c:if>
</c:forEach>
<div class="exhibition__right">
<div class="product-list-type2">
<div class="product-list-type2__list">
<c:forEach items="${ resultMap.case05 }" var="case05" varStatus="status" >
<c:if test="${ relmList.ordr eq case05.sOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case05.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>SOLD OUT</span>
</div>
</c:when>
<c:when test="${case05.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case05.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case05.goodsInnb});">
<img src="${cdnurl}${ case05.goodsImgCours }" alt="${ case05.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case05.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case05.iconExpsrOrdr-1}" style="order:${case05.iconExpsrOrdr-1}">
<c:if test="${not empty case05.goodsIconCd}">
<c:forEach items="${fn:split(case05.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case05.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case05.goodsNmExpsrOrdr-1}" style="order:${case05.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case05.goodsInnb});">${ case05.goodsNm }</a>
</div>
</c:if>
<c:if test="${case05.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case05.pricExpsrOrdr-1}" style="order:${case05.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case05.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case05.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent">${ case05.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case05.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case05.reprsntDcExpsrOrdr-1}" style="order:${case05.reprsntDcExpsrOrdr-1}">
${case05.reprsntDc}
</div>
</c:if>
<c:if test="${case05.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case05.rvwEvlScreExpsrOrdr-1}" style="order:${case05.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case05.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case05.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case05.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case05.dlvyExpsrOrdr-1}" style="order:${case05.dlvyExpsrOrdr-1}">
<c:out value="${case05.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
</div>
</div>
</div>
</section>
</div>
</c:if>
<!-- 상품 - 2x2 타입 -->
<!-- 상품 - 2x2 타입 (배경 이미지 X, ".no-bg" 클래스 추가) -->
<c:if test="${ relmList.relmDvCd eq '06'}">
<div class="main-section__container TwoXTwo-type no-bg">
<section class="main-section main-section__TwoXTwo-type">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd eq '06' && relmList.ordr eq baseCase.sOrdr && baseCase.iOrdr eq '01'}">
<div class="TwoXTwo-left">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ baseCase.itemSubSj }</span>
<h2 class="main-section-title__title">
${ baseCase.itemMainSj }
</h2>
</div>
</div>
<div class="TwoXTwo-left__container">
<div class="TwoXTwo-left-slick">
<c:forEach items="${ resultMap.case06 }" var="case06" varStatus="status">
<c:if test="${ relmList.ordr eq case06.sOrdr && baseCase.iOrdr eq case06.iOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case06.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>SOLD OUT</span>
</div>
</c:when>
<c:when test="${case06.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case06.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">
<img src="${cdnurl}${ case06.goodsImgCours }" alt="${case06.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case06.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case06.iconExpsrOrdr-1}" style="order:${case06.iconExpsrOrdr-1}">
<c:if test="${not empty case06.goodsIconCd}">
<c:forEach items="${fn:split(case04.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case06.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case06.goodsNmExpsrOrdr-1}" style="order:${case06.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">${ case06.goodsNm }</a>
</div>
</c:if>
<c:if test="${case06.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case06.pricExpsrOrdr-1}" style="order:${case06.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case06.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case06.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent">${ case06.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case06.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case06.reprsntDcExpsrOrdr-1}" style="order:${case06.reprsntDcExpsrOrdr-1}">
${case06.reprsntDc}
</div>
</c:if>
<c:if test="${case06.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case06.rvwEvlScreExpsrOrdr-1}" style="order:${case06.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case06.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case06.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case06.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case06.dlvyExpsrOrdr-1}" style="order:${case06.dlvyExpsrOrdr-1}">
<c:out value="${case06.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<div class="TwoXTwo-left-slick__btn-container">
<button class="TwoXTwo-left-slick__prev"><i class="icon icon_prev03"></i><span
class="visually-hidden">이전</span></button>
<button class="TwoXTwo-left-slick__next"><i class="icon icon_next03"></i><span
class="visually-hidden">다음</span></button>
</div>
</div>
</div>
</c:if>
</c:forEach>
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd eq '06' && relmList.ordr eq baseCase.sOrdr && baseCase.iOrdr eq '02'}">
<div class="TwoXTwo-right">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ baseCase.itemSubSj }</span>
<h2 class="main-section-title__title">
${ baseCase.itemMainSj }
</h2>
</div>
</div>
<div class="TwoXTwo-right__container">
<div class="TwoXTwo-right-slick">
<c:forEach items="${ resultMap.case06 }" var="case06" varStatus="status">
<c:if test="${ relmList.ordr eq case06.sOrdr && baseCase.iOrdr eq case06.iOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">
<img src="${cdnurl}${ case06.goodsImgCours }" alt="${ case06.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case06.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case06.iconExpsrOrdr-1}" style="order:${case06.iconExpsrOrdr-1}">
<c:if test="${not empty case06.goodsIconCd}">
<c:forEach items="${fn:split(case06.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case06.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case06.goodsNmExpsrOrdr-1}" style="order:${case06.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case06.goodsInnb});">${ case06.goodsNm }</a>
</div>
</c:if>
<c:if test="${case06.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case06.pricExpsrOrdr-1}" style="order:${case06.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case06.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case06.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent">${ case06.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case06.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case06.reprsntDcExpsrOrdr-1}" style="order:${case06.reprsntDcExpsrOrdr-1}">
${case06.reprsntDc}
</div>
</c:if>
<c:if test="${case06.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case06.rvwEvlScreExpsrOrdr-1}" style="order:${case06.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case06.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case06.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case06.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case06.dlvyExpsrOrdr-1}" style="order:${case06.dlvyExpsrOrdr-1}">
<c:out value="${case06.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<div class="TwoXTwo-right-slick__btn-container">
<button class="TwoXTwo-right-slick__prev"><i class="icon icon_prev03"></i><span
class="visually-hidden">이전</span></button>
<button class="TwoXTwo-right-slick__next"><i class="icon icon_next03"></i><span
class="visually-hidden">다음</span></button>
</div>
</div>
</div>
</c:if>
</c:forEach>
</section>
</div>
</c:if>
<!-- 상품 - 4열 슬라이드 타입 -->
<c:if test="${ relmList.relmDvCd eq '07'}">
<div class="main-section__container">
<section class="main-section main-section__four-row">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '07' && relmList.ordr eq baseCase.sOrdr }">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">${ baseCase.subSj }</span>
<h2 class="main-section-title__title">
${ baseCase.mainSj }
</h2>
</div>
</div>
</c:if>
</c:forEach>
<div class="product-list-type1">
<div class="four-row-slick">
<c:forEach items="${ resultMap.case07 }" var="case07" varStatus="status">
<c:if test="${ relmList.ordr eq case07.sOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case07.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>SOLD OUT</span>
</div>
</c:when>
<c:when test="${case07.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case07.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case07.goodsInnb});">
<img src="${cdnurl}${ case07.goodsImgCours }" alt="${ case07.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case07.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case07.iconExpsrOrdr-1}" style="order:${case07.iconExpsrOrdr-1}">
<c:if test="${not empty case07.goodsIconCd}">
<c:forEach items="${fn:split(case07.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case07.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case07.goodsNmExpsrOrdr-1}" style="order:${case07.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case07.goodsInnb});">${ case07.goodsNm }</a>
</div>
</c:if>
<c:if test="${case07.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case07.pricExpsrOrdr-1}" style="order:${case07.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case07.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case07.slepric}" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent">${ case07.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case07.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case07.reprsntDcExpsrOrdr-1}" style="order:${case07.reprsntDcExpsrOrdr-1}">
${case07.reprsntDc}
</div>
</c:if>
<c:if test="${case07.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case07.rvwEvlScreExpsrOrdr-1}" style="order:${case07.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case07.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case07.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case07.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case07.dlvyExpsrOrdr-1}" style="order:${case07.dlvyExpsrOrdr-1}">
<c:out value="${case07.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
<div class="four-row-slick__btn-container">
<button class="four-row-slick__prev"><i class="icon icon_prev02"></i><span
class="visually-hidden">이전</span></button>
<button class="four-row-slick__next"><i class="icon icon_next02"></i><span
class="visually-hidden">다음</span></button>
</div>
</div>
</section>
</div>
</c:if>
<!-- 타임세일 -->
<!-- 타임세일 (배경 이미지 X, ".no-bg" 클래스 추가) -->
<c:if test="${ relmList.relmDvCd eq '08'}">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status" >
<c:if test="${ baseCase.relmDvCd eq '08' && relmList.ordr eq baseCase.sOrdr }">
<c:choose>
<c:when test="${ empty baseCase.filCours}">
<div class="main-section__container time-sale no-bg">
</c:when>
<c:otherwise>
<div class="main-section__container time-sale" style="background-image: url('${cdnurl}${ baseCase.filCours }/${ baseCase.sysFilNm }');" >
</c:otherwise>
</c:choose>
</c:if>
</c:forEach>
<section class="main-section main-section__time-sale">
<c:forEach items="${ resultMap.baseCase }" var="baseCase" varStatus="status">
<c:if test="${ baseCase.relmDvCd == '08' && relmList.ordr eq baseCase.sOrdr }">
<div class="main-section-header">
<div class="main-section-title">
<span class="main-section-title__description">얼마 남지 않았어요!</span>
<h2 class="main-section-title__title">
타임세일⏰
</h2>
</div>
</div>
</c:if>
</c:forEach>
<div class="time-sale">
<span class="visually-hidden">타임세일</span>
<div class="wrapper">
<div class="time-sale-slick">
<c:forEach items="${ resultMap.case08 }" var="case08" varStatus="status">
<c:if test="${ relmList.ordr eq case08.sOrdr }">
<div class="product-unit">
<div class="product-unit-image">
<c:choose>
<c:when test="${case08.goodsSttusCd eq '02'}">
<div class="sold-out">
<span>SOLD OUT</span>
</div>
</c:when>
<c:when test="${case08.goodsSttusCd eq '03'}">
<div class="sold-out">
<span>${case08.goodsSttusNm}</span>
</div>
</c:when>
</c:choose>
<c:if test="${(case08.evtTmeExpsrAt eq 'Y' and case08.remainTime ne 'N') or (case08.rltmQyBannerExpsrAt eq 'Y' and case08.remainQy > 0) }">
<div class="time-sale__top">
<c:if test="${case08.evtTmeExpsrAt eq 'Y' and case08.remainTime ne 'N'}">
<span class="time" name="remainTime">${case08.remainTime}</span>
<%-- <span class="time" name="tmeSetup">${case08.tmeSetup}</span> --%>
<%-- <input type="hidden" name="tmeSetupValue" value="${ case08.tmeSetup }" /> --%>
</c:if>
<c:if test="${case08.rltmQyBannerExpsrAt eq 'Y' and case08.remainQy > 0 }">
<span class="left">남은수량 ${ case08.remainQy }개</span>
</c:if>
</div>
</c:if>
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case08.goodsInnb});">
<img src="${cdnurl}${ case08.goodsImgCours }" alt="${ case08.goodsNm }" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
<div class="product-unit-info">
<div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">
<c:if test="${case08.iconExpsrAt eq 'Y'}">
<div class="product-badge-container col order-${case08.iconExpsrOrdr-1}" style="order:${case08.iconExpsrOrdr-1}">
<c:if test="${not empty case08.goodsIconCd}">
<c:forEach items="${fn:split(case08.goodsIconCd, ',')}" var="iconCdNm" varStatus="iconStatus">
<c:choose>
<c:when test="${fn:contains(iconCdNm, '-')}">
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:replace(fn:toUpperCase(iconCdNm), '-', ' ')}</span>
</c:when>
<c:otherwise>
<span class="product-badge ${fn:toLowerCase(iconCdNm)}">${fn:toUpperCase(iconCdNm)}</span>
</c:otherwise>
</c:choose>
</c:forEach>
</c:if>
</div>
</c:if>
<c:if test="${case08.goodsNmExpsrAt eq 'Y'}">
<div class="product-unit-title col order-${case08.goodsNmExpsrOrdr-1}" style="order:${case08.goodsNmExpsrOrdr-1}">
<a href="javascript:void(0);" onclick="fn_move_goods_dtl(${case08.goodsInnb});">${ case08.goodsNm }</a>
</div>
</c:if>
<c:if test="${case08.pricExpsrAt eq 'Y'}">
<div class="product-unit-price col order-${case08.pricExpsrOrdr-1}" style="order:${case08.pricExpsrOrdr-1}">
<div class="product-unit-price__price">
<span class="product-unit-price__original"><fmt:formatNumber value="${case08.cnsmrpric}" pattern="#,###"/>${curUnit}</span>
<span class="product-unit-price__current"><fmt:formatNumber value="${case08.slepric }" pattern="#,###"/>${curUnit}</span>
</div>
<div class="product-unit-price__sale">
<span class="percent">${ case08.slePercent }%</span>
</div>
</div>
</c:if>
<c:if test="${case08.reprsntDcExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case08.reprsntDcExpsrOrdr-1}" style="order:${case08.reprsntDcExpsrOrdr-1}">
${case08.reprsntDc}
</div>
</c:if>
<c:if test="${case08.rvwEvlScreExpsrAt eq 'Y'}">
<div class="product-unit-rating col order-${case08.rvwEvlScreExpsrOrdr-1}" style="order:${case08.rvwEvlScreExpsrOrdr-1}">
<i class="icon icon_rating-star"></i>
<span class="product-unit-rating__score"><c:out value="${case08.avgEvlScore}" default="0.0"/></span>
<span class="product-unit-rating__count">(<fmt:formatNumber value="${case08.cntEvlScor}" pattern="#,###"/>)</span>
</div>
</c:if>
<c:if test="${case08.dlvyExpsrAt eq 'Y'}">
<div class="product-unit-price__monthly-payment col order-${case08.dlvyExpsrOrdr-1}" style="order:${case08.dlvyExpsrOrdr-1}">
<c:out value="${case08.dlvyGroupNm}"/>
</div>
</c:if>
</div>
</div>
</div>
</c:if>
</c:forEach>
</div>
</div>
<div class="time-sale-slick__btn-container">
<button class="time-sale-slick__prev"><i class="icon icon_prev02"></i><span
class="visually-hidden">이전</span></button>
<button class="time-sale-slick__next"><i class="icon icon_next02"></i><span
class="visually-hidden">다음</span></button>
</div>
</div>
</section>
</div>
</c:if>
<!-- 브랜드 및 제품 바로가기 -->
<!-- 좌측이미지 사이즈 영역 620x400 -->
<!-- 우측이미지 2개 사이즈 영역 각각 620x180 -->
<c:if test="${ relmList.relmDvCd eq '11'}">
<div class="main-section__container">
<section class="main-section main-section__brand-link">
<div class="brand-link">
<c:forEach items="${ resultMap.case11 }" var="case11" varStatus="status">
<c:if test="${ relmList.ordr eq case11.sOrdr }">
<c:if test="${ case11.iOrdr eq '1' }">
<div class="left">
<a href="${ case11.itmeCnncUrl }">
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'" >
</a>
</div>
</c:if>
</c:if>
</c:forEach>
<div class="right">
<c:forEach items="${ resultMap.case11 }" var="case11" varStatus="status">
<c:if test="${ relmList.ordr eq case11.sOrdr }">
<c:if test="${ case11.iOrdr eq '2' }">
<div class="first">
<a href="${ case11.itmeCnncUrl }">
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
</c:if>
<c:if test="${ case11.iOrdr eq '3' }">
<div class="second">
<a href="${ case11.itmeCnncUrl }">
<img src="${cdnurl}${ case11.filCours }/${ case11.sysFilNm }" alt="해당 이미지에 대한 설명" onerror="this.src='/pc/images/image_placeholder.png'">
</a>
</div>
</c:if>
</c:if>
</c:forEach>
</div>
</div>
</section>
</div>
</c:if>
<!-- 띠 배너 -->
<c:if test="${ relmList.relmDvCd eq '12'}">
<div class="main-section__container">
<section class="main-section main-section__small-banner01">
<div class="small-banner01">
<c:forEach items="${ resultMap.case12 }" var="case12" varStatus="status">
<c:if test="${ relmList.ordr eq case12.sOrdr }">
<div><a href="${ case12.itmeCnncUrl }"><img src="${cdnurl}${ case12.filCours }/${ case12.sysFilNm }" alt="배너 내용 입력" onerror="this.src='/pc/images/image_placeholder.png'"></a></div>
</c:if>
</c:forEach>
</div>
<div class="small-banner01__btn-container">
<button class="small-banner01__prev"><i class="icon icon_prev04"></i><span
class="visually-hidden">이전</span></button>
<button class="small-banner01__next"><i class="icon icon_next04"></i><span
class="visually-hidden">다음</span></button>
</div>
</section>
</div>
</c:if>
</c:forEach>
</c:otherwise>
</c:choose>
<style>
.main-popup {
display:none;
max-width: 520px;
position:absolute;
border-radius: 24px;
overflow: hidden;
background: #fff;
box-sizing: border-box;
}
.main-popup-content {
max-height: 640px;
overflow-y: auto;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.main-popup-footer {
display: flex;
justify-content: space-between;
padding: 4px 8px;
}
.main-popup-footer label{
margin-left: 12px;
color: #16191d
}
.main-popup-content img {
width:100%;
height:100%;
/* object-fit: cover; */
position : absolute;
top:0; left:0;
background-size:cover;
}
.main-popup-btn {
height:28px;
font-size: 14px;
background-color: transparent;
color: #16191d;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 18px;
}
.main-popup-btn:hover {
text-decoration: underline;
}
.main-popup-time {
position: absolute;
bottom:0; left:0;
width: 100%;
height:30px;
background-color: black;
opacity:0.6;
z-index: 1;
text-align: center;
display: flex;
justify-content: center;
}
.main-popup-time span {
/* width:100%; */
text-align: center;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
}
</style>
<script>
$(document).ready(function () {
// 메인 롤링 배너
// 240213 배너 바뀔때 버튼 페이드아웃/인 애니메이션 추가
let main_banner = $('.main-banner');
let main_banner__prev = $('.main-banner__prev');
let main_banner__next = $('.main-banner__next');
for (let i = 0; i < main_banner.length; i++) {
let main = main_banner[i].id;
let prev = main_banner__prev[i].id;
let next = main_banner__next[i].id;
var mainSlider = $('#' + main).slick({
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
autoplay: true,
autoplaySpeed: 4000,
speed: 900,
centerMode: true,
infinite: true,
dots: true,
prevArrow: $('#' + prev),
nextArrow: $('#' + next),
}).on('beforeChange', function (event, slick, currentSlide, nextSlide) {
// $('#'+main+', #'+next+'').fadeOut(200).delay(300).fadeIn(300);
});
}
// 상품 - 상품 묶음 리스트 타입
$('.product-bundle-list .product-list-type2').each(function (index, element) {
var $slider = $(element).find('.product-bundle-list-slick');
var $btnContainer = $slider.next('.product-bundle-list-slick__btn-container');
$slider.slick({
slidesToShow: 3,
slidesToScroll: 3,
speed: 900,
infinite: true,
prevArrow: $btnContainer.find('.product-bundle-list-slick__prev'),
nextArrow: $btnContainer.find('.product-bundle-list-slick__next'),
});
var categoryBtn = $(element).closest('.product-bundle-list').find('li button');
var categoryContent = $(element).closest('.product-bundle-list').find('.product-list-type2');
categoryBtn.on('click', function () {
$(this).parent().siblings().find('button').removeClass('active');
$(this).addClass('active');
var index = $(this).parent().index();
console.log(index);
categoryContent.removeClass('active');
categoryContent.eq(index).addClass('active');
categoryContent.eq(index).find('.product-bundle-list-slick').slick('setPosition');
});
});
// 상품 - 타임세일 슬라이드
$('.main-section__time-sale > .time-sale').each(function () {
var $slider = $(this).find('.time-sale-slick');
var $btnContainer = $(this).find('.time-sale-slick__btn-container');
$slider.slick({
slidesToShow: 3,
slidesToScroll: 3,
speed: 900,
infinite: true,
prevArrow: $btnContainer.find('.time-sale-slick__prev'),
nextArrow: $btnContainer.find('.time-sale-slick__next'),
});
});
// 중간 띠 배너 1 슬라이드
$('.main-section__small-banner01').each(function () {
var $slider = $(this).find('.small-banner01');
var $btnContainer = $(this).find('.small-banner01__btn-container');
$slider.slick({
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
speed: 900,
infinite: true,
dots: true,
centerMode: true,
prevArrow: $btnContainer.find('.small-banner01__prev'),
nextArrow: $btnContainer.find('.small-banner01__next'),
});
});
// 상품 - 2x2 타입
$('.TwoXTwo-type').each(function () {
var $leftSlider = $(this).find('.TwoXTwo-left-slick');
var $rightSlider = $(this).find('.TwoXTwo-right-slick');
var $leftBtnContainer = $(this).find('.TwoXTwo-left-slick__btn-container');
var $rightBtnContainer = $(this).find('.TwoXTwo-right-slick__btn-container');
$leftSlider.slick({
slidesToShow: 2,
slidesToScroll: 2,
speed: 900,
infinite: true,
prevArrow: $leftBtnContainer.find('.TwoXTwo-left-slick__prev'),
nextArrow: $leftBtnContainer.find('.TwoXTwo-left-slick__next'),
});
$rightSlider.slick({
slidesToShow: 2,
slidesToScroll: 2,
speed: 900,
infinite: true,
prevArrow: $rightBtnContainer.find('.TwoXTwo-right-slick__prev'),
nextArrow: $rightBtnContainer.find('.TwoXTwo-right-slick__next'),
});
})
$('.main-section__small-banner02').each(function () {
var $slider = $(this).find('.small-banner02');
var $btnContainer = $(this).find('.small-banner02__btn-container');
$slider.slick({
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
speed: 900,
infinite: true,
dots: true,
centerMode: true,
prevArrow: $btnContainer.find('.small-banner02__prev'),
nextArrow: $btnContainer.find('.small-banner02__next'),
});
});
// 상품 - 이미지배너 타입
$('.main-section__product-banner > .product-banner').each(function () {
var $slider = $(this).find('.product-banner-slick');
var $btnContainer = $(this).find('.product-banner-slick__btn-container');
$slider.slick({
slidesToShow: 3,
slidesToScroll: 3,
speed: 900,
infinite: true,
prevArrow: $btnContainer.find('.product-banner-slick__prev'),
nextArrow: $btnContainer.find('.product-banner-slick__next'),
});
});
// 상품 - 4열 슬라이드 타입
$('.product-list-type1').each(function () {
var $slider = $(this).find('.four-row-slick');
var $btnContainer = $(this).find('.four-row-slick__btn-container');
$slider.slick({
slidesToShow: 4,
slidesToScroll: 4,
speed: 900,
infinite: true,
prevArrow: $btnContainer.find('.four-row-slick__prev'),
nextArrow: $btnContainer.find('.four-row-slick__next'),
});
});
// 상단 이동 스크롤 버튼
$('.quick-menu__to-top > button').click(function () {
$('html, body').scrollTop(0);
});
// 베스트 리뷰
$('.best-review').each(function () {
var $slider = $(this).find('.best-review-slick');
var $btnContainer = $(this).find('.best-review-slick__btn-container');
$slider.slick({
slidesToShow: 3,
slidesToScroll: 3,
speed: 900,
infinite: true,
prevArrow: $btnContainer.find('.best-review-slick__prev'),
nextArrow: $btnContainer.find('.best-review-slick__next'),
});
});
// 매거진 리뷰
$('.main-section__magazine > .magazine').each(function () {
var $slider = $(this).find('.magazine-slick');
var $btnContainer = $(this).find('.magazine-slick__btn-container');
$slider.slick({
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
speed: 900,
centerMode: true,
infinite: true,
prevArrow: $btnContainer.find('.magazine-slick__prev'),
nextArrow: $btnContainer.find('.magazine-slick__next'),
});
});
// 공지사항 롤링
$('.notice-line').each(function () {
var $slider = $(this).find('.notice-line-slick');
var $btnContainer = $(this).find('.btn-container');
$slider.slick({
slidesToShow: 1,
slidesToShow: 1,
speed: 900,
infinite: true,
vertical: true,
autoplay: true,
prevArrow: $btnContainer.find('.notice-line__prev'),
nextArrow: $btnContainer.find('.notice-line__next'),
});
});
// 상품 그룹 탭
$('.section-2').each(function () {
let ordr = $(this).find('input[name="section-ordr"]').val();
fn_product_group_type(ordr, "1");
});
// 상품 카테고리 탭
$('.section-3').each(function () {
let ordr = $(this).find('input[name="section-ordr"]').val();
fn_product_category_type(ordr, "1");
});
// 타임이벤트시 시간 떨어뜨리는 함수
startCountdown();
// 베스트리뷰 네이버페이 이미지 수정
$('.best-review__review > .best-review__review_a').each(function () {
let npay = $(this).find('.npayBbscttSnb').val();
// 네이버페이인 경우
if (npay != "") {
let cn = $(this).find('.best-review__paragraph').html();
let tempDiv = $('<div>').html(cn);
let firstImg = tempDiv.find('img').first();
$(this).find('.reviwImg').attr('src', firstImg.attr('src'));
}
});
// 베스트리뷰 내용에 태그 제거
$('.best-review__paragraph').each(function () {
let prevValue = $(this).text();
$(this).text(prevValue.trim());
});
// 팝업 창 오픈
openPopup();
});
// 상품 그룹 탭 클릭 시
const fn_product_group_type = function (ordr, tabNo) {
$('.product-tab__btn-' + ordr).removeClass('active');
$('#product-tab__btn-' + ordr + '-' + tabNo).addClass('active');
$('.product-list-type-group-' + ordr).hide();
$('#product-list-type-group-' + ordr + '-' + tabNo).show();
}
// 상품 카테고리 탭 클릭 시
const fn_product_category_type = function (ordr, tabNo) {
$('.category-type-tab__btn-' + ordr).removeClass('active');
$('#category-type-tab__btn-' + ordr + '-' + tabNo).addClass('active');
fn_select_product_category(ordr, tabNo);
$('.product-list-type-category-' + ordr).hide();
$('#product-list-type-category-' + ordr + '-' + tabNo).show();
}
// 상품 카테고리 가져오기
const fn_select_product_category = function (ordr, tabNo) {
$.ajax({
type: "post",
url: "/sopmal/main/selectMainSiteDesignCtgryListInqire",
data: {
ordr: ordr,
expsrOrdr: tabNo
},
success: function (data) {
let result = JSON.parse(data.resBody.result);
fn_product_category_setting(result, ordr, tabNo);
}
});
}
// 상품 카테고리
const fn_product_category_setting = function (data, ordr, tabNo) {
let result = data.resultMap;
let str = "";
var curUnit = '${curUnit}';
$.each(result, function (index, result) {
str += '<div class="product-unit">';
str += ' <div class="product-unit-image">';
if (result.goodsSttusCd === '02') {
str += '<div class="sold-out">';
str += ' <span>SOLD OUT</span>';
str += '</div>';
} else if (result.goodsSttusCd === '03') {
str += '<div class="sold-out">';
str += ' <span>' + result.goodsSttusNm + '</span>';
str += '</div>';
}
str += ' <a href="javascript:void(0);" onclick="fn_move_goods_dtl(' + result.goodsInnb + ');">';
str += ' <img src="${cdnurl}' + result.goodsImgCours + '" alt="' + result.goodsNm + '" onerror="this.src=\'/pc/images/image_placeholder.png\'" >';
str += ' </a>';
str += ' </div>';
str += ' <div class="product-unit-info">';
str += ' <div class="product-unit-info__inner d-flex flex-column" style="flex-direction:column">';
if (result.iconExpsrAt == 'Y') {
str += '<div class="product-badge-container col order-' + (result.iconExpsrOrdr - 1) + '" style="order:' + (result.iconExpsrOrdr - 1) + '">';
if (result.goodsIconCd != null && result.goodsIconCd != "") {
let iconCdNm = result.goodsIconCd.split(',');
$.each(iconCdNm, function (index, iconCdNm) {
let lower = iconCdNm.toLowerCase();
let upper = iconCdNm.toUpperCase();
if (iconCdNm.includes('-')) {
let temp = upper.replace(/-/g, ' ');
str += '<span class="product-badge ' + lower + '">' + temp + '</span>';
} else {
str += '<span class="product-badge ' + lower + '">' + upper + '</span>';
}
});
}
str += '</div>';
}
if (result.goodsNmExpsrAt == 'Y') {
str += '<div class="product-unit-title col order-' + (result.goodsNmExpsrOrdr - 1) + '" style="order:' + (result.goodsNmExpsrOrdr - 1) + '">';
str += ' <a href="javascript:void(0);" onclick="fn_move_goods_dtl(' + result.goodsInnb + ');">' + result.goodsNm + '</a>';
str += '</div>';
}
if (result.pricExpsrAt == 'Y') {
str += '<div class="product-unit-price col order-' + (result.pricExpsrOrdr - 1) + '" style="order:' + (result.pricExpsrOrdr - 1) + '">';
str += ' <div class="product-unit-price__price">';
str += ' <span class="product-unit-price__original">' + new Intl.NumberFormat('ko-KR').format(result.cnsmrpric) + curUnit + '</span>';
str += ' <span class="product-unit-price__current">' + new Intl.NumberFormat('ko-KR').format(result.slepric) + curUnit + '</span>';
str += ' </div>';
str += ' <div class="product-unit-price__sale">';
str += ' <span class="percent">' + result.slePercent + '%</span>';
str += ' </div>';
str += '</div>';
}
if (result.reprsntDcExpsrAt == 'Y') {
str += '<div class="product-unit-price__monthly-payment col order-' + (result.reprsntDcExpsrOrdr - 1) + '" style="order:' + (result.reprsntDcExpsrOrdr - 1) + '">';
// str += ' '+result.reprsntDc+'';
str += ' ' + fn_default_message(result.reprsntDc, '') + '';
str += '</div>';
}
if (result.rvwEvlScreExpsrAt == 'Y') {
str += '<div class="product-unit-rating col order-' + (result.rvwEvlScreExpsrOrdr - 1) + '" style="order:' + (result.rvwEvlScreExpsrOrdr - 1) + '">';
str += ' <i class="icon icon_rating-star"></i>';
// str += ' <span class="product-unit-rating__score">'+result.avgEvlScore+'</span>';
str += ' <span class="product-unit-rating__score">' + fn_default_message(result.avgEvlScore, '0.0') + '</span>';
str += ' <span class="product-unit-rating__count">(' + new Intl.NumberFormat('ko-KR').format(result.cntEvlScor) + ')</span>';
str += '</div>';
}
if (result.dlvyExpsrAt == 'Y') {
str += '<div class="product-unit-price__monthly-payment col order-' + (result.dlvyExpsrOrdr - 1) + '" style="order:' + (result.dlvyExpsrOrdr - 1) + '">';
str += ' ' + result.dlvyGroupNm + '';
str += '</div>';
}
str += ' </div>';
str += ' </div>';
str += '</div>';
});
$('#product-list-type-category-' + ordr + '-' + tabNo + ' > .product-list-type1__list').html(str);
}
// 기본 값 설정
function fn_default_message(key, defaultMessage) {
return key ? key : defaultMessage;
}
// 매거진 상세
const fn_move_dtl = (bbscttInnb) => {
$("#bbscttInnb").val(bbscttInnb);
$("#dtlForm").submit();
}
//타임 이벤트 카운트 다운
function startCountdown() {
// 각 span 태그의 remainTime을 처리합니다.
$('span[name^="remainTime"]').each(function () {
let remainTime = $(this).text().trim(); // 현재 span의 텍스트 가져오기
// 시간을 시, 분, 초로 분리
if (remainTime === 'N') {
return false; // remainTime이 'N'이면 중지
}
let [hours, minutes, seconds] = remainTime.split(':').map(Number);
// 타이머 업데이트 함수
function updateTimer() {
// 현재 시간을 표시
let formattedHours = hours < 10 ? '0' + hours : hours;
let formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
let formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
let result_days = Math.floor(formattedHours / 24);
let result_hours = formattedHours % 24;
let result;
if (result_days >= 1) {
// console.log("일수 필요");
result = result_days + '일 ' + result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
} else {
result = result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
}
$(this).text(result);
// 현재 span 태그에 업데이트
// $(this).text(formattedHours + ':' + formattedMinutes + ':' + formattedSeconds);
// 1초 감소
seconds--;
// 초가 0보다 작아지면 분에서 1을 빼고 초를 59로 설정
if (seconds < 0) {
seconds = 59;
minutes--;
}
// 분이 0보다 작아지면 시간에서 1을 빼고 분을 59로 설정
if (minutes < 0) {
minutes = 59;
hours--;
}
// 시간이 0보다 작아지면 타이머 중지
if (hours < 0) {
$(this).text("00:00:00");
clearInterval(timerInterval);
}
}
// `this`를 업데이트 함수에서 사용할 수 있도록 바인딩
const timerInterval = setInterval(updateTimer.bind(this), 1000);
});
}
// 팝업 시간 카운트
function countDown() {
$('span[name^="tmeSetup"]').each(function () {
let targetDateString = $(this).siblings('input[name=tmeSetupValue').val();
let targetDate = new Date(targetDateString);
let now = new Date();
let difference = targetDate - now;
if (difference <= 0) {
console.log("시간이 지났습니다!");
clearInterval(timer); // 카운트다운 종료
$(this).text('00:00:00');
return;
}
let hours = Math.floor(difference / (1000 * 60 * 60));
let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((difference % (1000 * 60)) / 1000);
// let formattedHours = hours < 10 ? '0' + hours : hours;
let formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
let formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
let result_days = Math.floor(hours / 24);
let result_hours = hours % 24;
let result;
if (result_days >= 1) {
// console.log("일수 필요");
result = result_days + '일 ' + result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
} else {
result = result_hours + ':' + formattedMinutes + ':' + formattedSeconds;
}
// console.log("result : ", result);
// let hours = String(Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0');
// let minutes = String(Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
// let seconds = String(Math.floor((difference % (1000 * 60)) / 1000)).padStart(2, '0');
$(this).text(result);
});
}
// 1초마다 카운트다운 업데이트
const timer = setInterval(countDown, 1000);
// 팝업 창 열기
function openPopup() {
let popupId;
$('.main-popup').each(function () {
popupId = $(this).attr('id');
let popupFlag = getCookie(popupId);
if (popupFlag) {
$('#' + popupId).css('display', 'none');
} else {
$('#' + popupId).css('display', 'block');
}
});
}
// 쿠키 불러오기
function getCookie(name) {
const cookies = document.cookie.split(';')
for (let i = 0; i < cookies.length; i++) {
let cookie = cookies[i].trim();
if (cookie.startsWith(name + '=')) {
return true;
}
}
return false;
}
// 쿠키 설정 expiredays 후의 클릭한 시간까지
function setCookie24(name, value, expiredays) {
var todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays);
document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";";
}
// 팝업 닫기
function closePopup(ele) {
$(ele).closest('.main-popup').css('display', 'none');
let cookieName = $(ele).closest('.main-popup').attr('id');
let checkFlag = $(ele).closest('.main-popup').find('input[name="checked"]').is(':checked');
// console.log("cookieName = "+cookieName);
// console.log("checkFlag = "+checkFlag);
// 체크가 되어 있으면
if (checkFlag) {
setCookie24(cookieName, 'Y', 1);
}
}
// 241001 우측 상품리스트 슬라이드
$('.recentProductSlick').slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
draggable: false,
speed: 0,
prevArrow: $('.recentProductSlick__prev'),
nextArrow: $('.recentProductSlick__next'),
});
// 241001 우측 상품리스트 슬라이드 인덱스
var recentProductIndex = 0;
$('.recentProductSlick__index .total').text($('.recentProductSlick .slick-slide').length);
// on slick change, get current index and update the index
$('.recentProductSlick').on('afterChange', function (event, slick, currentSlide) {
recentProductIndex = currentSlide;
$('.recentProductSlick__index .current').text(recentProductIndex + 1);
});
</script>
</html>