Главная Обзор Помощь
Вход
style24
/
style24.front
2
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

모바일 딜상품상세 작업중

eskim 5 лет назад
Родитель
5bf7f3df22
Сommit
e568f2619a
9 измененных файлов с 3639 добавлено и 609 удалено
Единый вид Показать статистику Diff
  1. 3287 0
      src/main/webapp/WEB-INF/views/mob/goods/GoodsDealDetailFormMob.html
  2. 1 5
      src/main/webapp/WEB-INF/views/mob/goods/GoodsDetailFormMob.html
  3. 108 513
      src/main/webapp/WEB-INF/views/mob/goods/GoodsIncludeFormMob.html
  4. 1 1
      src/main/webapp/WEB-INF/views/web/goods/GoodsDealDetailFormWeb.html
  5. 110 20
      src/main/webapp/ux/mo/css/common_m.css
  6. 77 34
      src/main/webapp/ux/mo/css/layout_m.css
  7. 44 28
      src/main/webapp/ux/mo/css/style24_m.css
  8. 2 2
      src/main/webapp/ux/mo/js/common_m.js
  9. 9 6
      src/main/webapp/ux/mo/js/mcxdialog_ui.js

+ 3287 - 0
src/main/webapp/WEB-INF/views/mob/goods/GoodsDealDetailFormMob.html
Просмотреть файл 

@@ -0,0 +1,3287 @@
 
+<!DOCTYPE html>

+<html lang="ko"

+	xmlns:th="http://www.thymeleaf.org"

+	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"

+	layout:decorator="mob/common/layout/GoodsLayoutMob">

+<!--

+ *******************************************************************************

+ * @source  : GoodsDealDetailFormMob.html

+ * @desc	: 딜 상품상세 Page

+ *============================================================================

+ * STYLE24

+ * Copyright(C) 2020 TSIT, All rights reserved.

+ *============================================================================

+ * VER  DATE		 AUTHOR	  DESCRIPTION

+ * ===  ===========  ==========  =============================================

+ * 1.0  2021.04.15   eskim	   최초 작성

+ *******************************************************************************

+ -->

+<body>

+<th:block layout:fragment="content">

+<main role="" id="" class="container pd deal" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">

+

+	<!-- ★ 컨텐츠 시작 -->

+	<section class="pd_detail">

+

+		<!-- 210409_ 구조변경 : .pd_info, .pd_info1 추가  -->

+		<div class="pd_info">

+			<div class="pd_info1" data-speed="10">

+

+				<div class="inner wide" th:if="${goodsImgList != null and !goodsImgList.empty}">

+					<div class="thumb_box">

+						<div class="area_slider">

+							<div class="swiper-container thumb_list">

+								<div class="swiper-wrapper">

+									<th:block th:each="goodsImg, status : ${goodsImgList}">

+									<div class="swiper-slide" th:if="${ not (#strings.contains(goodsImg.sysImgNm,'_S1.') 

+																or #strings.contains(goodsImg.sysImgNm,'_L1.')

+																or #strings.contains(goodsImg.sysImgNm,'_L2.'))}">

+										<div class="thumb" ><img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=1080'}" alt="" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'"></div></div>  <!--  mov -->

+									</th:block>	

+								</div>

+								<!-- Add Pagination -->

+								<div class="swiper-pagination"></div>

+							</div>

+						</div>

+					</div>

+				</div>

+

+			</div>

+			

+			<div class="inner">

+				<!-- 210409_ 구조변경 : .covered 추가  -->

+				<div class="covered">

+					<div class="timer_box" style="display:none;">

+						<p>

+							<span class="tt">남은시간</span>

+							<span class="timer">

+								<em id="d-days">0</em>

+								<em id="d-hours">0</em>

+								<em id="d-minutes">0</em>

+								<em id="d-seconds">0</em>

+							</span>

+						</p>

+					</div>

+					<div class="descript_box">

+						<p class="name" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업</p>

+						<p class="comment"  th:text="${goodsInfo.goodsTnm}">#가을 느낌 물씬!</p>

+						<p class="price_blk">

+							<span class="sale_price" ><em th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}">134,100</em>원 ~</span>

+						</p>

+						<div class="btn_group_flex">

+							<div><button type="button" class="btn btn_default" id="btn_saleCoupon_pop" th:onclick="cfGoodsCouponInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.goodsType}]])">쿠폰받기</button></div>

+						</div>

+					</div>

+				</div>

+			</div>

+

+			<div class="inner wide" th:if="${not #strings.isEmpty(goodsInfo.delvResDt) }">

+				<div class="desc_status">예약판매 상품 - <em th:text="${goodsInfo.delvResDt}">2020.12.30</em> 출고예정</div>

+			</div>

+			

+			<div class="inner" th:if="${(cardInfoList != null and !cardInfoList.empty) or

+									(goodsCouponList != null and !goodsCouponList.empty) or

+									(tmtbList != null and !tmtbList.empty) or

+									(freeGoodsList != null and !freeGoodsList.empty)}" >

+				<div class="benefit_box">

+					<dl class="bnf_shopping" th:if="${(goodsCouponList != null and !goodsCouponList.empty) or (tmtbList != null and !tmtbList.empty)}">

+						<dt>쇼핑혜택</dt>

+						<dd>

+							<th:block th:if="${goodsCouponList != null and !goodsCouponList.empty}">

+							<span th:each="goodsCoupon, status : ${goodsCouponList}" th:if="${status.first}">최대 <em>

+										<th:block th:if="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${#numbers.formatInteger(goodsCoupon.dcVal, 0,'COMMA')}원|"></th:block>

+										<th:block th:unless="${goodsCoupon.dcWay == 'G240_10'}" th:text="|${goodsCoupon.dcVal}%|"></th:block>

+										</em> 쿠폰 할인</span>

+							</th:block> 

+							<th:block th:if="${tmtbList != null and !tmtbList.empty}">

+							<span th:each="tmtb, status : ${tmtbList}" th:if="${status.first}">

+								<em><th:block th:text="${#numbers.formatInteger(tmtb.sectionVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.sectionGb == 'G810_10')? '개':'금액'}"></th:block></em> 이상 구매 시 

+								<em><th:block th:text="${#numbers.formatInteger(tmtb.dcVal, 0,'COMMA')}"></th:block><th:block th:text="${(tmtb.dcWay == 'G240_10')? '원':'%'}"></th:block></em></em> 할인

+							</span>

+							</th:block>

+							<span th:if="${freeGoodsList != null and !freeGoodsList.empty}">

+							<th:block th:each="freeGoods, status : ${freeGoodsList}" th:if="${status.first}">

+							<th:block th:text="${freeGoods.goodsNm}"></th:block> 증정 <th:block th:if="${freeGoods.allYn == 'N'}" th:text="외 택1"></th:block></span>

+							<button type="button" id="btn_bnfShopping_pop" class="btn_popup" th:onclick="cfGoodsShopBenefitInfo([[${goodsInfo.goodsCd}]])"><span>자세히</span></button>

+						</dd>

+					</dl>

+					<dl class="bnf_card">

+						<dt>카드혜택</dt>

+						<dd>

+							<th:block th:each="cardInfo, status : ${cardInfoList}">

+							<span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb != '3'}"><th:block th:text="${cardInfo.prmtTargetNm}"></th:block> <em><th:block th:text="${#numbers.formatInteger(cardInfo.dcVal, 0,'COMMA')+ cardInfo.dcWayNm}"></th:block></em> <th:block th:text="${cardInfo.prmtGbNm}"></span>

+							<span th:if="${cardInfo.prmtGb == 'A' and cardInfo.dcGb == '3'}" th:text="${cardInfo.prmtNm}">프로모션명</span>

+							<span th:if="${cardInfo.prmtGb == 'B'}">신용카드 무이자 혜택</span>

+							</th:block>

+							<button type="button" id="btn_bnfCard_pop" class="btn_popup" onclick="cfCardInfo();return false;"><span>자세히</span></button>

+						</dd>

+					</dl>

+				</div>

+			</div>

+		</div>

+

+		<!-- //***** 상품소개영역 ***** -->

+		<th:block th:include="~{mob/goods/GoodsIncludeFormMob:: goodsDealComposeForm}"></th:block>

+

+		<div class="inner">

+			<div class="recommendedArea">

+				<!-- 이상품과 함께 본 상품영역-->

+				<div class="pd_clickother" id="goodsTogetherbArea">

+				</div>

+				<!-- //이상품과 함께 본 상품영역-->

+			</div>

+		</div>

+ 

+		<!-- 팝업영역 -->

+		<div>

+			<!-- 구매하기팝업 -->

+			<div class="btPop btPopAuto pd_pop Purchase_pop" id="btPopAuto_back">

+				<a class="btn btPop_close">Close </a>

+				<div class="header btPop_head btPopAuto_head">

+					구매하기팝업

+				</div>

+				<div class="body btPop_body btPopAuto_body">

+					<div class="option_result op1">

+						<!-- 옵션 -->

+						<div class="option_box">

+							<div class="opt_select">

+								<form class="form_wrap">

+									<div class="form_field">

+										<div class="select_custom option_open">

+											<div class="combo">

+												<div class="select">상품옵션06</div>

+											</div>

+										</div>

+									</div>

+								</form>

+							</div>

+							<div class="opt_result">

+								<div class="result_item">

+									<div class="opt_header">

+										<div class="bundle">

+											<span class="item_name">[상품1] 남성 테이퍼드핏 기모면 올밴딩 팬트</span>

+											<span class="item_option">블루그레이/S</span>

+										</div>

+									</div>

+									<div class="number_count">

+										<span class="minus"><em class="sr-only">감소</em></span>

+										<input type="text" name="" maxlength="3" style="ime-mode:disabled" value="1" readonly>

+										<span class="plus"><em class="sr-only">추가</em></span>

+									</div>

+									<div class="item_price">

+										<p><em>99,999,999</em>원</p>

+									</div>

+									<button type="button" class="btn_delete_item"><span>삭제</span></button>

+								</div>

+								<div class="result_item">

+									<div class="opt_header">

+										<div class="bundle">

+											<span class="item_name">[상품1] 남성 테이퍼드핏 기모면 올밴딩 팬트</span>

+											<span class="item_option">블루그레이/S</span>

+										</div>

+									</div>

+									<div class="number_count">

+										<span class="minus"><em class="sr-only">감소</em></span>

+										<input type="text" name="" maxlength="3" style="ime-mode:disabled" value="1" readonly>

+										<span class="plus"><em class="sr-only">추가</em></span>

+									</div>

+									<div class="item_price">

+										<p><em>99,999,999</em>원</p>

+									</div>

+									<button type="button" class="btn_delete_item"><span>삭제</span></button>

+								</div>

+							</div>

+							

+						</div>

+						<!-- 네이버결제 -->

+						<div class="npay_box">

+							<div class="np_head">

+								<div><img src="/images/mo/img_npay_txt.png" alt="NAVER 네이버 ID로 간편구매 네이버페이"></div>

+								<div><button><img src="/images/mo/btn_npay_txt.png" alt="Npay 구매"></button></div>

+							</div>

+							<div class="np_body">

+								<a href="#none"><em>[멥버십]</em>첫달 무료가입하고 추가 4%!</a>

+							</div>

+						</div>

+					</div>

+					<!-- 옵션선택팝업 -->

+					<div class="pop_option_select">

+						<div class="close">닫기</div>

+						<div class="pp_body">

+							<div class="pp_cont">

+								<div class="opt_select">

+									<div class="opt_header">

+										<span class="title">옵션선택</span>

+										<div class="check_excluding form_field">

+											<div>

+												<input id="excluding" type="checkbox" onclick='getGuidance(event)'><label for="excluding"> <span>품절제외</span> </label>

+											</div>

+											<div class="guidance" >

+												<!--210409_ 추가 : .guidance에 .ontoast 추가 시, toast 팝업 작동 -->

+												<p><span>99</span>개 품절 옵션이 제외되었습니다</p>

+											</div>

+											<script>

+												function getGuidance(event)  {

+													if(event.target.checked){

+														$(".guidance").addClass("ontoast");

+														setTimeout(function(){$(".guidance").removeClass("ontoast");}, 5000);

+													}

+												}

+											</script>

+										</div>

+									</div>

+									<form class="form_wrap">

+										<div class="form_field mb20">

+											<div class="select_custom deal_opt_item active">

+												<div class="combo">

+													<div class="select">상품</div>

+													<ul class="list">

+														<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->

+														<li class="">

+															<div class="item_prod">

+																<div class="item_state">

+																	<a href="javascript:void(0)" class="itemLink">

+																		<div class="itemPic">

+																			<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+																		</div>

+																		<div class="itemName"><span class="tit_option">[상품1]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+																		<p class="itemPrice">

+																			134,100

+																			<span class="itemPrice_original">149,000</span>

+																			<span class="itemPercent">30%</span>

+																		</p>

+																	</a>

+																</div>

+															</div>

+														</li> 

+														<li class="">

+															<div class="item_prod">

+																<div class="item_state">

+																	<a href="javascript:void(0)" class="itemLink">

+																		<div class="itemPic">

+																			<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+																		</div>

+																		<div class="itemName"><span class="tit_option">[상품2]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+																		<p class="itemPrice">

+																			134,100

+																			<span class="itemPrice_original">149,000</span>

+																			<span class="itemPercent">30%</span>

+																		</p>

+																	</a>

+																</div>

+															</div>

+														</li>

+														<li class="selected">

+															<div class="item_prod">

+																<div class="item_state">

+																	<a href="javascript:void(0)" class="itemLink">

+																		<div class="itemPic">

+																			<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+																		</div>

+																		<div class="itemName"><span class="tit_option">[상품3]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+																		<p class="itemPrice">

+																			134,100

+																			<span class="itemPrice_original">149,000</span>

+																			<span class="itemPercent">30%</span>

+																		</p>

+																	</a>

+																</div>

+															</div>

+														</li>

+														<li aria-disabled="true">

+															<div class="item_prod">

+																<div class="item_state">

+																	<a href="javascript:void(0)" class="itemLink">

+																		<div class="itemPic">

+																			<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+																		</div>

+																		<div class="itemName"><span class="tit_option">[상품4]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+																		<p class="itemPrice">

+																			134,100

+																			<span class="itemPrice_original">149,000</span>

+																			<span class="itemPercent">30%</span>

+																		</p>

+																	</a>

+																</div>

+															</div>

+														</li>

+														<li>

+															<div class="item_prod">

+																<div class="item_state">

+																	<a href="javascript:void(0)" class="itemLink">

+																		<div class="itemPic">

+																			<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+																		</div>

+																		<div class="itemName"><span class="tit_option">[상품5]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+																		<p class="itemPrice">

+																			134,100

+																			<span class="itemPrice_original">149,000</span>

+																			<span class="itemPercent">30%</span>

+																		</p>

+																	</a>

+																</div>

+															</div>

+														</li>

+														<li aria-disabled="true" data-soldout="true">

+															<div class="item_prod">

+																<div class="item_state">

+																	<a href="javascript:void(0)" class="itemLink">

+																		<div class="itemPic">

+																			<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+																		</div>

+																		<div class="itemName"><span class="tit_option">[상품6]</span> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+																		<p class="itemPrice">

+																			134,100

+																			<span class="itemPrice_original">149,000</span>

+																			<span class="itemPercent">30%</span>

+																		</p>

+																	</a>

+																</div>

+															</div>

+														</li>

+													</ul>

+												</div>

+											</div>

+										</div>

+										<div class="form_field">

+											<div class="select_custom item_opt1" disabled>

+												<div class="combo">

+													<div class="select">옵션1</div>

+													<ul class="list" style="display: none;">

+														<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->

+														<li class="">선택</li> 

+														<li class="">옵션2</li>

+														<li class="selected">상품옵션3</li>

+														<li>상품옵션4</li>

+														<li aria-disabled="true">

+															<div>상품옵션15</div>

+															<div>120,000원</div>

+														</li>

+														<li>상품옵션5</li>

+														<li aria-disabled="true" data-soldout="true">

+															<div>상품옵션6</div>

+															<div>120,000원</div>

+														</li>

+													</ul>

+												</div>

+											</div>

+										</div>

+										<div class="form_field">

+											<div class="select_custom item_opt2" disabled>

+												<div class="combo">

+													<div class="select">옵션1</div>

+													<ul class="list" style="display: none;">

+														<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->

+														<li class="">선택</li> 

+														<li class="">옵션1</li>

+														<li class="selected">옵션1</li>

+														<li>옵션1</li>

+														<li aria-disabled="true">

+															<div>옵션1</div>

+															<div>120,000원</div>

+														</li>

+														<li>옵션1</li>

+														<li aria-disabled="true" data-soldout="true">

+															<div>옵션1</div>

+															<div>120,000원</div>

+														</li>

+													</ul>

+												</div>

+											</div>

+										</div>

+									</form>

+								</div>

+							</div>

+						</div>

+					</div>

+					<!-- //옵션선택팝업 -->

+				</div>

+				<div class="body btPop_foot btPopAuto_foot">

+					<!-- 총 결재금액, 하단버튼 -->

+					<div class="pay_box">

+						<div class="price_box">

+							<p class="number">

+								총&nbsp;<span>99</span>개

+							</p>

+							<p class="price">

+								<span>

+									99,999,999<em>원</em>

+								</span>

+							</p>

+						</div>

+						<div class="btn_box">

+							<button class="gift" id="btn_gift">

+								<span><span>선물해보세요!</span></span>

+							</button>

+							<button class="cart" id="btn_shoppingBag_pop">쇼핑백</button>

+							<button class="buyNow" id="btn_now_purchase">바로구매</button>

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- 구매하기팝업 -->

+

+			<!-- 쇼핑백팝업 -->

+			<div id="shoppingBagModal">

+				<div class="shoppingBag_box">

+					<p>쇼핑백에 상품을 담았습니다.</p> 

+					<a href="#none" class="link_shoppingBag">쇼핑백 바로가기</a>

+				</div>

+			</div>

+			<!-- //쇼핑백팝업 -->

+

+			<!-- 세일쿠폰다운팝업 -->

+			<div class="modal fade pd_pop salecoupon_pop" id="saleCouponPop" tabindex="-1" role="dialog" aria-labelledby="modalScrollLabel" aria-hidden="true">

+				<div class="modal-dialog" role="document">

+					<div class="modal-content">

+						<div class="modal-header">

+							<h5 class="modal-title" id="modalScrollLabel">할인쿠폰 받기</h5>

+						</div>

+						<div class="modal-body">

+							<div class="pop_cont">

+								<ul class="coupon_list">

+									<li>

+										<div class="coupon">

+											<div>

+												<p class="cp_name">

+													TBJ 시즌오프 20% 할인쿠폰

+												</p>

+												<p class="cp_cont">

+													<span><em>12,399,900</em>원</span>

+													<span><em>40%</em></span>

+												</p>

+												<p class="cp_condition">

+													500,000원 이상 구매 시 최대 50,000원 할인

+													<span>1인 최대 90장</span>

+												</p>

+											</div>

+											<div class="btn_group_flex">

+												<div>

+													<button type="button" class="btn btn_dark" id="btn_result_coupon">

+														<span>쿠폰받기</span>

+														<span>받기완료</span>

+													</button>

+												</div>

+											</div>

+										</div>

+									</li>

+									<li>

+										<div class="coupon">

+											<div>

+												<p class="cp_name">

+													신규가입 40% 할인쿠폰

+												</p>

+												<p class="cp_cont">

+													<span><em>12,399,900</em>원</span>

+													<span><em>40%</em></span>

+												</p>

+												<p class="cp_condition">

+													500,000원 이상 구매 시 최대 50,000원 할인

+													<span>1인 최대 90장</span>

+												</p>

+											</div>

+											<div class="btn_group_flex">

+												<div>

+													<button type="button" class="btn btn_dark" disabled=""><span>쿠폰받기</span>

+														<span>받기완료</span>

+													</button>

+												</div>

+											</div>

+										</div>

+									</li>						

+								</ul>

+							</div>

+						</div>

+						<div class="modal-footer">

+							<button type="button" id="btn_all_coupon" class="btn btn_primary"><span>쿠폰 모두 받기</span><span>쿠폰 모두 받기 완료</span></button>

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- //세일쿠폰다운팝업 -->

+			

+			<!-- EP제휴쿠폰다운팝업 -->

+			<div class="modal fade pd_pop epcoupon_pop" id="epCouponPop" tabindex="-1" role="dialog" aria-labelledby="modalScrollLabel" aria-hidden="true">

+				<div class="modal-dialog" role="document">

+					<div class="modal-content">

+						<div class="modal-header">

+							<h5 class="modal-title" id="modalScrollLabel">네이버 전용 할인쿠폰</h5>

+						</div>

+						<div class="modal-body">

+							<div class="pop_cont">

+								<div class="ep_coupon">

+									<div>

+										<p class="cp_title">

+											COUPON

+										</p>

+										<p class="cp_cont">

+											<!-- 할인금액 일때 -->

+											<span class="unit_won">

+												<em class="number">3,000</em><em class="unit">원</em>

+											</span>

+											<!-- //할인금액 일때 -->

+											<!-- 할인율 일때 -->

+											<span class="unit_percent">

+												최대<em class="number">30</em><em class="unit">%</em>

+											</span>

+											<!-- //할인율 일때 -->

+										</p>

+									</div>

+								</div>

+								<div class="info_txt">

+									<ul>

+										<li>일부 상품은 쿠폰 사용이 제한될 수 있습니다.</li>

+										<li>할인대상 및 금액은 상시 변경됩니다.</li>

+										<li>제휴 사이트와 정보연동 시간차이로 판매정보가 불일치할 수 있습니다.</li>

+										<li>본 쿠폰은 제휴 사이트를 통해 들어온 고객님만 발급 및 사용이 가능합니다.</li>

+									</ul>						

+								</div>

+							</div>

+						</div>

+						<div class="modal-footer">

+							<button type="button" id="btn_result_coupon2" class="btn btn_primary"><span>쿠폰 모두 받기</span><span>쿠폰 모두 받기 완료</span></button>

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- //EP제휴쿠폰다운팝업 -->

+			

+			<!-- 쇼핑혜택팝업 -->

+			<div class="modal pop_full fade pd_pop bnf_shopping_pop" id="bnfShoppingPop" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">

+				<div class="modal-dialog" role="document">

+					<div class="modal-content">

+						<div class="modal-header">

+							<h5 class="modal-title" id="exampleFullLabel">쇼핑혜택</h5>

+						</div>

+						<div class="modal-body">

+							<div class="pop_cont">

+								<div class="benefit_blk">

+									<h6>할인혜택</h6>

+									<div class="tbl type1">

+										<table>

+											<colgroup>

+												<col width="50%">

+												<col width="*">

+											</colgroup>

+											<tbody>

+												<tr>

+													<th>즉시 할인</th>

+													<td><p>50% 할인</p></td>

+												</tr>

+												<tr>

+													<th>쿠폰할인</th>

+													<td><p>최대 10% 할인</p></td>

+												</tr>

+											</tbody>

+										</table>

+									</div>

+								</div>

+								<div class="benefit_blk">

+									<h6>다다익선</h6>

+									<div class="tbl type1">

+										<table>

+											<colgroup>

+												<col width="50%">

+												<col width="*">

+											</colgroup>

+											<tbody>

+												<tr>

+													<th>9,999개 이상 구매 시</th>

+													<td><p>9,999,999원 할인</p></td>

+												</tr>

+												<tr>

+													<th>9,999개 이상 구매 시</th>

+													<td><p>20% 할인</p></td>

+												</tr>

+												<tr>

+													<th>99,999,999원 이상 구매 시</th>

+													<td><p>9,999,999원 할인</p></td>

+												</tr>

+												<tr>

+													<th>99,999,999원 이상 구매 시</th>

+													<td><p>20% 할인</p></td>

+												</tr>

+											</tbody>

+										</table>

+									</div>

+								</div>	   

+								<div class="benefit_blk">

+									<h6>사은품</h6>

+									<div class="tbl type1">

+										<table>

+											<colgroup>

+												<col width="50%">

+												<col width="*">

+											</colgroup>

+											<tbody>

+												<tr>

+													<th>

+														99,999,999원 이상 구매 시

+														<p>미니언즈 우산 99개 증정</p>

+													</th>

+												</tr>

+												<tr>

+													<th>

+														99,999,999원 이상 구매 시

+														<p>미니언즈 우산 99개 증정 외 택1</p>

+													</th>

+												</tr>

+											</tbody>

+										</table>

+									</div>

+								</div>					 

+							</div>

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- //쇼핑혜택팝업 -->

+

+			<!-- 카드혜택팝업 -->

+			<div class="modal pop_full fade pd_pop bnf_card_pop" id="bnfCardPop" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">

+				<div class="modal-dialog" role="document">

+					<div class="modal-content">

+						<div class="modal-header">

+							<h5 class="modal-title" id="exampleFullLabel">카드혜택</h5>

+						</div>

+						<div class="modal-body">

+							<div class="pop_cont">

+								<div class="benefit_blk">

+									<h6>할인혜택</h6>

+									<div class="tbl type1">

+										<table>

+											<colgroup>

+												<col width="85">

+												<col width="*">

+											</colgroup>

+											<tbody>

+												<tr>

+													<th>

+														KB국민카드

+													</th>

+													<td>

+														<div class="info_card">

+															<p>5% 즉시할인</p>

+															<p>7만원 이상 구매 시<br> 최대 5만원 할인</p>

+															<a href="" target="_blank" class="link">자세히보기</a>

+														</div>

+													</td>

+												</tr>

+												<tr>

+													<th>

+														삼성카드

+													</th>

+													<td>

+														<div class="info_card">

+															<p>5% 즉시할인</p>

+															<p>7만원 이상 구매 시<br> 최대 5만원 할인</p>

+														</div>

+													</td>

+												</tr>

+												<tr>

+													<th>

+														제휴카드

+													</th>

+													<td>

+														<div class="info_card">

+															<p>YES24 MANIA 롯데카드</p>

+															<p>최대 12~24% 청구할인</p>

+															<p>1회 1만5천원이상 결제 시, 바로발급 가능</p>

+															<a href="" target="_blank" class="link">자세히보기</a>

+														</div>

+													</td>

+												</tr>

+											</tbody>

+										</table>

+									</div>

+								</div>

+								<div class="benefit_blk">

+									<h6>무이자 할부</h6>

+									<div class="tbl type1">

+										<table>

+											<colgroup>

+												<col width="85">

+												<col width="*">

+											</colgroup>

+											<tbody>

+												<tr>

+													<th>

+														KB국민카드

+													</th>

+													<td>

+														<div class="info_card">

+															<p>2~6개월 무이자</p>

+															<p>5만원 이상 구매 시</p>

+														</div>

+													</td>

+												</tr>

+												<tr>

+													<th>

+														삼성카드

+													</th>

+													<td>

+														<div class="info_card">

+															<p>2~6개월 무이자</p>

+															<p>5만원 이상 구매 시</p>

+														</div>

+													</td>

+												</tr>

+											</tbody>

+										</table>

+									</div>

+									<div class="benefit_blk">

+										<h6>부분 무이자 할부</h6>

+										<div class="tbl type1">

+											<table>

+												<colgroup>

+													<col width="85">

+													<col width="*">

+												</colgroup>

+												<tbody>

+													<tr>

+														<th>

+															삼성카드

+														</th>

+														<td>

+															<div class="info_card">

+																<p>10개월(1~4회차 고객부담)</p>

+																<p>12개월(1~5회차 고객부담)</p>

+															</div>

+														</td>

+													</tr>

+													<tr>

+														<th>

+															BC카드

+														</th>

+														<td>

+															<div class="info_card">

+																<p>7개월(1~2회차 고객부담)</p>

+																<p>8개월(1~2회차 고객부담)</p>

+																<p>ARS 사전신청 고객에 한함(1899-5772)</p>

+															</div>

+														</td>

+													</tr>

+												</tbody>

+											</table>

+										</div>

+									<div class="info_txt">

+										<ul>

+											<li>무이자할부는 행사기간 동안 실 결제금액 기준으로 가능</li>

+											<li>법인, 체크, 기프트 카드는 부분 무이자 할부 제외</li>

+										</ul>				   

+									</div>

+								</div>					

+								</div>

+							</div>

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- //카드혜택팝업 -->

+

+			<!-- 재입고알림신청팝업 -->

+			<div class="modal pop_full fade pd_pop push_restock_pop" id="pushRestockPop" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">

+				<div class="modal-dialog" role="document">

+					<div class="modal-content">

+						<div class="modal-header">

+							<h5 class="modal-title" id="exampleFullLabel">재입고 알림 신청</h5>

+						</div>

+						<div class="modal-body">

+							<div class="pop_cont">

+								<div class="item_blk">

+									<div class="item_prod">

+										<div class="item_state">

+											<a href="#none" class="itemLink">

+												<div class="itemPic">

+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+												</div>

+												<p class="itemBrand">NBA</p>

+												<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>

+												<div class="itemPrice">

+													<span class="itemPrice_original">89,000</span>

+													<div class="lap">

+														<span class="itemPrice_sale">80,100</span>

+														<span class="itemPercent">10%</span>

+													</div>

+												</div>

+											</a>

+										</div>

+									</div>

+								</div>

+								<div class="select_blk">

+									<h6>사이즈 선택</h6>

+									<div class="option_box">

+										<div class="opt_size">

+											<div class="form_field2">

+												<div class="lap">

+													<div>

+														<label><input type="radio" name="rdi-optsize" value="" checked=""><span>90</span></label>

+													</div>

+													<div>

+														<label><input type="radio" name="rdi-optsize" value="" disabled=""><span>95</span></label>

+													</div>

+													<div>

+														<label><input type="radio" name="rdi-optsize" value=""><span>100</span></label>

+													</div>

+													<div>

+														<label><input type="radio" name="rdi-optsize" value=""><span>105</span></label>

+													</div>

+													<div>

+														<label><input type="radio" name="rdi-optsize" value=""><span>110</span></label>

+													</div>

+													<div>

+														<label><input type="radio" name="rdi-optsize" value=""><span>115</span></label>

+													</div>

+													<div>

+														<label><input type="radio" name="rdi-optsize" value=""><span>free</span></label>

+													</div>

+												</div>

+											</div>

+										</div>

+									</div>

+								</div>

+								<div class="select_blk">

+									<div class="opt_select">

+										<h6>옵션 선택</h6>

+										<div class="form_wrap">

+											<div class="form_field">

+												<select id="" class="form-control select">

+													<option value="hide">옵션1 선택</option>

+													<option value="" rel="icon-temperature">카키/95</option>

+													<option value="">카키/100</option>

+													<option value="">카키/105</option>

+													<option value="" disabled>카키/110</option>

+													<option value="">옐로우/95</option>

+													<option value="">옐로우/100</option>

+													<option value="">옐로우/105</option>

+													<option value="">옐로우/110</option>

+												</select> 

+											</div>

+											<div class="form_field">

+												<select id="" class="form-control select" disabled>

+													<option value="hide">옵션1 선택</option>

+													<option value="" rel="icon-temperature">카키/95</option>

+													<option value="">카키/100</option>

+													<option value="">카키/105</option>

+													<option value="" disabled>카키/110</option>

+													<option value="">옐로우/95</option>

+													<option value="">옐로우/100</option>

+													<option value="">옐로우/105</option>

+													<option value="">옐로우/110</option>

+												</select> 

+											</div>

+										</div>

+									</div>

+								</div>	  

+							</div>

+						</div>

+						<div class="modal-footer">

+							<div class="btn_group_flex">

+								<div><button type="button" id="" class="btn btn_dark"><span>신청</span></button></div>

+							</div>

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- //재입고알림신청팝업 -->

+

+			<!-- 사이즈정보팝업 -->

+			<div class="modal pop_full fade pd_pop info_size_pop" id="infoSizePop" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">

+				<div class="modal-dialog" role="document">

+					<div class="modal-content">

+						<div class="modal-header">

+							<h5 class="modal-title" id="exampleFullLabel">사이즈 정보</h5>

+						</div>

+						<div class="modal-body">

+							<div class="pop_cont">

+								<div class="tab_nav">

+									<ul>

+										<li class=""><a href="javascript:void(0)">실측 사이즈</a></li>

+										<li class=""><a href="javascript:void(0)">표준 사이즈</a></li>

+										<li class="active"><a href="javascript:void(0)">측정 사이즈</a></li>

+									</ul>

+								</div>

+								<div class="tab_cont_wrap">

+									<div class="tab_cont" style="display: none;">

+										<!-- 실측 사이즈 -->

+										<div class="size_head">

+											<span class="tit_sub">TBJ</span>

+											<span class="tit_header">남성 테이퍼드 핏 겨울 기모면 스판 올 밴딩 팬츠</span>

+										</div>

+										<div class="size_cont">

+											<div class="size_tbl_box">

+												<p class="size_unit">단위 : cm</p>

+												<div class="tbl type2">

+													<table>

+														<colgroup>

+															<col width="20%">

+															<col width="20%">

+															<col width="20%">

+															<col width="20%">

+															<col width="20%">

+														</colgroup>

+														<thead>

+															<tr>

+																<th scope="col">&nbsp;</th>

+																<th scope="col">M</th>

+																<th scope="col">L</th>

+																<th scope="col">XL</th>

+																<th scope="col">XXL</th>

+															</tr>

+														</thead>

+														<tbody>

+															<tr>

+																<th scope="col">가슴둘레</th>

+																<td>95</td>

+																<td>100</td>

+																<td>105</td>

+																<td>110</td>

+															</tr>

+															<tr>

+																<th scope="col">어깨너비</th>

+																<td>95</td>

+																<td>100</td>

+																<td>105</td>

+																<td>110</td>

+															</tr>

+															<tr>

+																<th scope="col">팔길이</th>

+																<td>95</td>

+																<td>100</td>

+																<td>105</td>

+																<td>110</td>

+															</tr>

+															<tr>

+																<th scope="col">총길이</th>

+																<td>95</td>

+																<td>100</td>

+																<td>105</td>

+																<td>110</td>

+															</tr>

+														</tbody>

+													</table>

+												</div>

+											</div>

+										</div>

+										<!-- //실측 사이즈 -->

+									</div>

+									<div class="tab_cont" style="display: none;">

+										<!-- 표준 사이즈 카테고리 구분일때 -->

+										<div class="size_head">

+											<div class="category_open">상의</div>

+											<div class="category_box">

+												<div class="lap">

+													<div class="category_close">카테고리닫기</div>

+													<div class="category_list">

+														<!-- 표준 사이즈 > 카테고리 선택 -->

+														<div class="sub_tab_nav">

+															<ul>

+																<li class="active"><a href="javascript:void(0)">여성</a></li>

+																<li class=""><a href="javascript:void(0)">남성</a></li>

+																<li class=""><a href="javascript:void(0)">캐주얼</a></li>

+																<li class=""><a href="javascript:void(0)">유아동</a></li>

+																<li class=""><a href="javascript:void(0)">신발</a></li>

+																<li class=""><a href="javascript:void(0)">언더웨어</a></li>

+															</ul>

+														</div>

+														<!-- //표준 사이즈 > 카테고리 선택 -->

+													</div>

+												</div>

+											</div>

+										</div>

+										<div class="size_cont">

+											<div class="sub_tab_cont_wrap">

+												<!-- 표준 사이즈 > 카테고리 내용(여성) -->

+												<div class="sub_tab_cont" style="display: block;">

+													<div class="size_tbl_box">

+														<h6>여성 상의</h6>

+														<p class="size_unit">단위 : cm</p>

+														<div class="tbl type2">

+															<table>

+																<colgroup>

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																</colgroup>

+																<thead>

+																	<tr>

+																		<th scope="col">&nbsp;</th>

+																		<th scope="col">XS/44/85</th>

+																		<th scope="col">S/55/90</th>

+																		<th scope="col">M/66/95</th>

+																		<th scope="col">L/77/100</th>

+																	</tr>

+																</thead>

+																<tbody>

+																	<tr>

+																		<th scope="col">가슴둘레</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr>

+																	<tr>

+																		<th scope="col">허리둘레</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr> 

+																	<tr>

+																		<th scope="col">신장</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr>											   

+																</tbody>

+															</table>

+														</div>

+													</div>

+													<div class="size_tbl_box">

+														<h6>여성 하의</h6>

+														<p class="size_unit">단위 : cm</p>

+														<div class="tbl type2">

+															<table>

+																<colgroup>

+																	<col width="20%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																</colgroup>

+																<thead>

+																	<tr>

+																		<th scope="col">&nbsp;</th>

+																		<th scope="col">27</th>

+																		<th scope="col">28</th>

+																		<th scope="col">29</th>

+																		<th scope="col">30</th>

+																		<th scope="col">32</th>

+																		<th scope="col">34</th>

+																		<th scope="col">36</th>

+																		<th scope="col">38</th>

+																	</tr>

+																</thead>

+																<tbody>

+																	<tr>

+																		<th scope="col">허리둘레</th>

+																		<td>69</td>

+																		<td>71</td>

+																		<td>74</td>

+																		<td>76</td>

+																		<td>81</td>

+																		<td>86</td>

+																		<td>91</td>

+																		<td>97</td>

+																	</tr>									

+																</tbody>

+															</table>

+														</div>

+													</div>

+												</div>	

+												<!-- //표준 사이즈 > 카테고리 내용(여성) --> 

+												<!-- 표준 사이즈 > 카테고리 내용(남성) -->

+												<div class="sub_tab_cont" style="display: none;">

+													<div class="size_tbl_box">

+														<h6>남성 상의</h6>

+														<p class="size_unit">단위 : cm</p>

+														<div class="tbl type2">

+															<table>

+																<colgroup>

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																</colgroup>

+																<thead>

+																	<tr>

+																		<th scope="col">&nbsp;</th>

+																		<th scope="col">XS/44/85</th>

+																		<th scope="col">S/55/90</th>

+																		<th scope="col">M/66/95</th>

+																		<th scope="col">L/77/100</th>

+																	</tr>

+																</thead>

+																<tbody>

+																	<tr>

+																		<th scope="col">가슴둘레</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr>

+																	<tr>

+																		<th scope="col">허리둘레</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr> 

+																	<tr>

+																		<th scope="col">신장</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr>											   

+																</tbody>

+															</table>

+														</div>

+													</div>

+													<div class="size_tbl_box">

+														<h6>남성 하의</h6>

+														<p class="size_unit">단위 : cm</p>

+														<div class="tbl type2">

+															<table>

+																<colgroup>

+																	<col width="20%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																</colgroup>

+																<thead>

+																	<tr>

+																		<th scope="col">&nbsp;</th>

+																		<th scope="col">27</th>

+																		<th scope="col">28</th>

+																		<th scope="col">29</th>

+																		<th scope="col">30</th>

+																		<th scope="col">32</th>

+																		<th scope="col">34</th>

+																		<th scope="col">36</th>

+																		<th scope="col">38</th>

+																	</tr>

+																</thead>

+																<tbody>

+																	<tr>

+																		<th scope="col">허리둘레</th>

+																		<td>69</td>

+																		<td>71</td>

+																		<td>74</td>

+																		<td>76</td>

+																		<td>81</td>

+																		<td>86</td>

+																		<td>91</td>

+																		<td>97</td>

+																	</tr>									

+																</tbody>

+															</table>

+														</div>

+													</div>

+												</div>	

+												<!-- //표준 사이즈 > 카테고리 내용(남성) -->

+												<!-- 표준 사이즈 > 카테고리 내용(캐주얼) -->

+												<div class="sub_tab_cont" style="display: none;">

+													<div class="size_tbl_box">

+														<h6>캐주얼 상의</h6>

+														<p class="size_unit">단위 : cm</p>

+														<div class="tbl type2">

+															<table>

+																<colgroup>

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																</colgroup>

+																<thead>

+																	<tr>

+																		<th scope="col">&nbsp;</th>

+																		<th scope="col">XS/44/85</th>

+																		<th scope="col">S/55/90</th>

+																		<th scope="col">M/66/95</th>

+																		<th scope="col">L/77/100</th>

+																	</tr>

+																</thead>

+																<tbody>

+																	<tr>

+																		<th scope="col">가슴둘레</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr>

+																	<tr>

+																		<th scope="col">허리둘레</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr> 

+																	<tr>

+																		<th scope="col">신장</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr>											   

+																</tbody>

+															</table>

+														</div>

+													</div>

+													<div class="size_tbl_box">

+														<h6>캐주얼 하의</h6>

+														<p class="size_unit">단위 : cm</p>

+														<div class="tbl type2">

+															<table>

+																<colgroup>

+																	<col width="20%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																</colgroup>

+																<thead>

+																	<tr>

+																		<th scope="col">&nbsp;</th>

+																		<th scope="col">27</th>

+																		<th scope="col">28</th>

+																		<th scope="col">29</th>

+																		<th scope="col">30</th>

+																		<th scope="col">32</th>

+																		<th scope="col">34</th>

+																		<th scope="col">36</th>

+																		<th scope="col">38</th>

+																	</tr>

+																</thead>

+																<tbody>

+																	<tr>

+																		<th scope="col">허리둘레</th>

+																		<td>69</td>

+																		<td>71</td>

+																		<td>74</td>

+																		<td>76</td>

+																		<td>81</td>

+																		<td>86</td>

+																		<td>91</td>

+																		<td>97</td>

+																	</tr>									

+																</tbody>

+															</table>

+														</div>

+													</div>

+												</div>	

+												<!-- //표준 사이즈 > 카테고리 내용(캐주얼) -->

+												<!-- 표준 사이즈 > 카테고리 내용(유아동) -->

+												<div class="sub_tab_cont" style="display: none;">

+													<div class="size_tbl_box">

+														<h6>유아동 상의</h6>

+														<p class="size_unit">단위 : cm</p>

+														<div class="tbl type2">

+															<table>

+																<colgroup>

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																</colgroup>

+																<thead>

+																	<tr>

+																		<th scope="col">&nbsp;</th>

+																		<th scope="col">XS/44/85</th>

+																		<th scope="col">S/55/90</th>

+																		<th scope="col">M/66/95</th>

+																		<th scope="col">L/77/100</th>

+																	</tr>

+																</thead>

+																<tbody>

+																	<tr>

+																		<th scope="col">가슴둘레</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr>

+																	<tr>

+																		<th scope="col">허리둘레</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr> 

+																	<tr>

+																		<th scope="col">신장</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr>											   

+																</tbody>

+															</table>

+														</div>

+													</div>

+													<div class="size_tbl_box">

+														<h6>유아동 하의</h6>

+														<p class="size_unit">단위 : cm</p>

+														<div class="tbl type2">

+															<table>

+																<colgroup>

+																	<col width="20%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																</colgroup>

+																<thead>

+																	<tr>

+																		<th scope="col">&nbsp;</th>

+																		<th scope="col">27</th>

+																		<th scope="col">28</th>

+																		<th scope="col">29</th>

+																		<th scope="col">30</th>

+																		<th scope="col">32</th>

+																		<th scope="col">34</th>

+																		<th scope="col">36</th>

+																		<th scope="col">38</th>

+																	</tr>

+																</thead>

+																<tbody>

+																	<tr>

+																		<th scope="col">허리둘레</th>

+																		<td>69</td>

+																		<td>71</td>

+																		<td>74</td>

+																		<td>76</td>

+																		<td>81</td>

+																		<td>86</td>

+																		<td>91</td>

+																		<td>97</td>

+																	</tr>									

+																</tbody>

+															</table>

+														</div>

+													</div>

+												</div>	

+												<!-- //표준 사이즈 > 카테고리 내용(유아동) -->	 

+												<!-- 표준 사이즈 > 카테고리 내용(신발) -->

+												<div class="sub_tab_cont" style="display: none;">

+													<div class="size_tbl_box">

+														<h6>신발 상의</h6>

+														<p class="size_unit">단위 : cm</p>

+														<div class="tbl type2">

+															<table>

+																<colgroup>

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																</colgroup>

+																<thead>

+																	<tr>

+																		<th scope="col">&nbsp;</th>

+																		<th scope="col">XS/44/85</th>

+																		<th scope="col">S/55/90</th>

+																		<th scope="col">M/66/95</th>

+																		<th scope="col">L/77/100</th>

+																	</tr>

+																</thead>

+																<tbody>

+																	<tr>

+																		<th scope="col">가슴둘레</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr>

+																	<tr>

+																		<th scope="col">허리둘레</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr> 

+																	<tr>

+																		<th scope="col">신장</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr>											   

+																</tbody>

+															</table>

+														</div>

+													</div>

+													<div class="size_tbl_box">

+														<h6>신발 하의</h6>

+														<p class="size_unit">단위 : cm</p>

+														<div class="tbl type2">

+															<table>

+																<colgroup>

+																	<col width="20%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																</colgroup>

+																<thead>

+																	<tr>

+																		<th scope="col">&nbsp;</th>

+																		<th scope="col">27</th>

+																		<th scope="col">28</th>

+																		<th scope="col">29</th>

+																		<th scope="col">30</th>

+																		<th scope="col">32</th>

+																		<th scope="col">34</th>

+																		<th scope="col">36</th>

+																		<th scope="col">38</th>

+																	</tr>

+																</thead>

+																<tbody>

+																	<tr>

+																		<th scope="col">허리둘레</th>

+																		<td>69</td>

+																		<td>71</td>

+																		<td>74</td>

+																		<td>76</td>

+																		<td>81</td>

+																		<td>86</td>

+																		<td>91</td>

+																		<td>97</td>

+																	</tr>									

+																</tbody>

+															</table>

+														</div>

+													</div>

+												</div>	

+												<!-- //표준 사이즈 > 카테고리 내용(신발) -->	  

+												<!-- 표준 사이즈 > 카테고리 내용(언더웨어) -->

+												<div class="sub_tab_cont" style="display: none;">

+													<div class="size_tbl_box">

+														<h6>언더웨어 상의</h6>

+														<p class="size_unit">단위 : cm</p>

+														<div class="tbl type2">

+															<table>

+																<colgroup>

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																	<col width="20%">

+																</colgroup>

+																<thead>

+																	<tr>

+																		<th scope="col">&nbsp;</th>

+																		<th scope="col">XS/44/85</th>

+																		<th scope="col">S/55/90</th>

+																		<th scope="col">M/66/95</th>

+																		<th scope="col">L/77/100</th>

+																	</tr>

+																</thead>

+																<tbody>

+																	<tr>

+																		<th scope="col">가슴둘레</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr>

+																	<tr>

+																		<th scope="col">허리둘레</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr> 

+																	<tr>

+																		<th scope="col">신장</th>

+																		<td>95</td>

+																		<td>100</td>

+																		<td>105</td>

+																		<td>110</td>

+																	</tr>											   

+																</tbody>

+															</table>

+														</div>

+													</div>

+													<div class="size_tbl_box">

+														<h6>언더웨어 하의</h6>

+														<p class="size_unit">단위 : cm</p>

+														<div class="tbl type2">

+															<table>

+																<colgroup>

+																	<col width="20%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																	<col width="10%">

+																</colgroup>

+																<thead>

+																	<tr>

+																		<th scope="col">&nbsp;</th>

+																		<th scope="col">27</th>

+																		<th scope="col">28</th>

+																		<th scope="col">29</th>

+																		<th scope="col">30</th>

+																		<th scope="col">32</th>

+																		<th scope="col">34</th>

+																		<th scope="col">36</th>

+																		<th scope="col">38</th>

+																	</tr>

+																</thead>

+																<tbody>

+																	<tr>

+																		<th scope="col">허리둘레</th>

+																		<td>69</td>

+																		<td>71</td>

+																		<td>74</td>

+																		<td>76</td>

+																		<td>81</td>

+																		<td>86</td>

+																		<td>91</td>

+																		<td>97</td>

+																	</tr>									

+																</tbody>

+															</table>

+														</div>

+													</div>

+												</div>	

+												<!-- //표준 사이즈 > 카테고리 내용(언더웨어) -->

+											</div>															   

+										</div>

+										<div class="size_footer">

+											<div class="info_txt">

+												<ul>

+													<li>본 사이즈 조견표는 표준 가이드로, 각 제품마다 다소간의 차이는 있을 수 있습니다.</li>

+													<li>보다 자세한 사이즈는 각 상품 별 상품설명을 참조해주시기 바랍니다.</li>

+												</ul>

+											</div>

+										</div>

+										<!-- //표준 사이즈 카테고리별 구분일때 -->

+										<!-- 표준 사이즈 브랜드별 구분일때 -->

+										<div class="size_head">

+											<span class="tit_header">

+												페르지노몬티 FERGINO MONTI

+											</span>

+										</div>

+										<div class="size_cont">

+											<div class="size_tbl_box">

+												<h6>남성 상의</h6>

+												<p class="size_unit">단위 : cm</p>

+												<div class="tbl type2">

+													<table>

+														<colgroup>

+															<col width="20%">

+															<col width="20%">

+															<col width="20%">

+															<col width="20%">

+															<col width="20%">

+														</colgroup>

+														<thead>

+															<tr>

+																<th scope="col">&nbsp;</th>

+																<th scope="col">XS/44/85</th>

+																<th scope="col">S/55/90</th>

+																<th scope="col">M/66/95</th>

+																<th scope="col">L/77/100</th>

+															</tr>

+														</thead>

+														<tbody>

+															<tr>

+																<th scope="col">가슴둘레</th>

+																<td>95</td>

+																<td>100</td>

+																<td>105</td>

+																<td>110</td>

+															</tr>

+															<tr>

+																<th scope="col">허리둘레</th>

+																<td>95</td>

+																<td>100</td>

+																<td>105</td>

+																<td>110</td>

+															</tr> 

+															<tr>

+																<th scope="col">신장</th>

+																<td>95</td>

+																<td>100</td>

+																<td>105</td>

+																<td>110</td>

+															</tr>											   

+														</tbody>

+													</table>

+												</div>

+											</div>

+											<div class="size_tbl_box">

+												<h6>남성 하의</h6>

+												<p class="size_unit">단위 : cm</p>

+												<div class="tbl type2">

+													<table>

+														<colgroup>

+															<col width="20%">

+															<col width="10%">

+															<col width="10%">

+															<col width="10%">

+															<col width="10%">

+															<col width="10%">

+															<col width="10%">

+															<col width="10%">

+															<col width="10%">

+														</colgroup>

+														<thead>

+															<tr>

+																<th scope="col">&nbsp;</th>

+																<th scope="col">27</th>

+																<th scope="col">28</th>

+																<th scope="col">29</th>

+																<th scope="col">30</th>

+																<th scope="col">32</th>

+																<th scope="col">34</th>

+																<th scope="col">36</th>

+																<th scope="col">38</th>

+															</tr>

+														</thead>

+														<tbody>

+															<tr>

+																<th scope="col">허리둘레</th>

+																<td>69</td>

+																<td>71</td>

+																<td>74</td>

+																<td>76</td>

+																<td>81</td>

+																<td>86</td>

+																<td>91</td>

+																<td>97</td>

+															</tr>									

+														</tbody>

+													</table>

+												</div>

+											</div>													  

+										</div>

+										<div class="size_footer">

+											<div class="info_txt">

+												<ul>

+													<li>본 사이즈 조견표는 표준 가이드로, 각 제품마다 다소간의 차이는 있을 수 있습니다.</li>

+													<li>보다 자세한 사이즈는 각 상품 별 상품설명을 참조해주시기 바랍니다.</li>

+												</ul>

+											</div>

+										</div>

+										<!-- //표준 사이즈 브랜드 구분일때 -->							

+									</div>   

+									<div class="tab_cont" style="display: block;">

+										<!-- 측정 사이즈 -->

+										<div class="size_head">

+											<div class="category_open">상의</div>

+											<div class="category_box">

+												<div class="lap">

+													<div class="category_close">카테고리닫기</div>

+													<div class="category_list">

+														<!-- 측정 사이즈 > 카테고리 선택 -->

+														<div class="sub_tab_nav">

+															<ul>

+																<li class="active"><a href="javascript:void(0)">상의</a></li>

+																<li><a href="javascript:void(0)">하의</a></li>

+																<li><a href="javascript:void(0)">가방</a></li>

+																<li><a href="javascript:void(0)">신발</a></li>

+																<li><a href="javascript:void(0)">언더웨어</a></li>

+															</ul>

+														</div>

+														<!-- //측정 사이즈 > 카테고리 선택 -->

+													</div>

+												</div>

+											</div>

+										</div>

+										<div class="size_cont">

+											<div class="sub_tab_cont_wrap">

+												<!-- 측정 사이즈 > 카테고리 내용(상의) -->

+												<div class="sub_tab_cont">

+													<span class="img_sizeinfo">

+														<img src="/images/pc/info_size_top.jpg" alt="상의 측정 사이즈">

+													</span>

+													<dl>

+														<div>

+															<dt>가슴둘레</dt>

+															<dd>양쪽 겨드랑이 밑선 단면을 잰 길이x2</dd>

+														</div>

+														<div>

+															<dt>어깨너비</dt>

+															<dd>좌측어깨에서 우측어깨끝 봉제선 단면을 잰 길이 (어깨봉제선이 없을경우 어깨길이와 팔길이는 측정 안함)</dd>

+														</div>

+														<div>

+															<dt>팔길이</dt>

+															<dd>어깨 봉제선부터 소매 끝까지 잰 길</dd>

+														</div>

+														<div>

+															<dt>총길이</dt>

+															<dd>카라부분(혹은 후드)를 제외 한 지점부터 밑단 끝까지 잰 길이 (라운드티셔츠의 경우 목라인을 포함 해 네크라인부터 밑단 끝까지의 길이를 측정)</dd>

+														</div>

+													</dl>

+												</div>	

+												<!-- //측정 사이즈 > 카테고리 내용(상의) -->

+												<!-- 측정 사이즈 > 카테고리 내용(하의) -->

+												<div class="sub_tab_cont">

+													<span class="img_sizeinfo">

+														<img src="/images/pc/info_size_pants.jpg" alt="하의 측정 사이즈">

+													</span>

+													<dl>

+														<div>

+															<dt>허리둘레</dt>

+															<dd>허리선을 일자로 맞추고 한쪽의 허리끝단부터 반대편 끝까지 단면을 잰 길이x2</dd>

+														</div>

+														<div>

+															<dt>밑위</dt>

+															<dd>허리부터 가랑이 끝점까지 잰 길이</dd>

+														</div>

+														<div>

+															<dt>엉덩이둘레</dt>

+															<dd>밑위 중간부분 단면을 잰 길이x2</dd>

+														</div>

+														<div>

+															<dt>허벅지둘레</dt>

+															<dd>가랑이 부분부터 바깥쪽 허벅지 끝나는 지점까지의 단면을 잰 길이x2</dd>

+														</div>

+														<div>

+															<dt>총길이</dt>

+															<dd>허리끝선부터 바지밑단 끝선 까지 잰 길이</dd>

+														</div>

+													</dl>

+												</div>	

+												<!-- //측정 사이즈 > 카테고리 내용(하의) -->	  

+												<!-- 측정 사이즈 > 카테고리 내용(가방) -->

+												<div class="sub_tab_cont">

+													<span class="img_sizeinfo">

+														<img src="/images/pc/info_size_bag.jpg" alt="가방 측정 사이즈">

+													</span>

+													<dl>

+														<div>

+															<dt>가로</dt>

+															<dd>가장 넓은 부분의 수평 길이</dd>

+														</div>

+														<div>

+															<dt>세로</dt>

+															<dd>바닥부터 가방의 가로 중앙지점까지 수직 길이</dd>

+														</div>

+														<div>

+															<dt>끈길이</dt>

+															<dd>가방 끝의 전체 길이(길이 조절이 가능한 경우 최소~최대 길이 표기)</dd>

+														</div>

+														<div>

+															<dt>손잡이높이</dt>

+															<dd>가방의 가로 가운데 지점부터 손잡이를 세웠을 때의 가장 높은 부분까지의 높이</dd>

+														</div>

+														<div>

+															<dt>끈폭</dt>

+															<dd>가방 끈의 수평폭</dd>

+														</div>

+														<div>

+															<dt>폭</dt>

+															<dd>가방 옆 부분의 두께</dd>

+														</div>

+													</dl>

+												</div> 

+												<!-- //측정 사이즈 > 카테고리 내용(가방) -->

+												<!-- 측정 사이즈 > 카테고리 내용(신발) -->

+												<div class="sub_tab_cont">

+													<span class="img_sizeinfo">

+														<img src="/images/pc/info_size_shoe.jpg" alt="신발 측정 사이즈">

+													</span>

+													<dl>

+														<div>

+															<dt>굽높이</dt>

+															<dd>설명 필요</dd>

+														</div>

+														<div>

+															<dt>볼너비</dt>

+															<dd>설명 필요</dd>

+														</div>

+														<div>

+															<dt>총길이</dt>

+															<dd>설명 필요</dd>

+														</div>

+													</dl>

+													<!--<div class="info_txt">

+														<ul>

+															<li>

+																국내 브랜드는 브랜드, 스타일마다 사이즈가 다르게 전개될 수 있으니, 개별 상품 상세페이지에 기재된 상세 사이즈안내를 참조하세요.

+															</li>

+														</ul>

+													</div>-->

+												</div> 

+												<!-- //측정 사이즈 > 카테고리 내용(신발) --> 

+												<!-- 측정 사이즈 > 카테고리 내용(언더웨어) -->

+												<div class="sub_tab_cont">

+													<span class="img_sizeinfo">

+														<img src="/images/pc/info_size_underwear.jpg" alt="속옷 측정 사이즈">

+													</span>

+													<dl>

+														<div>

+															<dt>밑가슴둘레</dt>

+															<dd>유방의 바로 밑을 수평으로 잰 길이</dd>

+														</div>

+														<div>

+															<dt>컵</dt>

+															<dd>밑가슴둘레와 가슴둘레의 차이</dd>

+														</div>

+														<div>

+															<dt>가슴둘레</dt>

+															<dd>유방을중심으로 수평으로 잰길이</dd>

+														</div>

+													</dl>

+												</div> 

+												<!-- //측정 사이즈 > 카테고리 내용(언더웨어) -->																					

+											</div>															   

+										</div>							

+										<!-- //측정 사이즈 -->

+									</div>						 

+								</div>

+							</div>

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- //사이즈정보팝업 -->

+

+			<!-- 제품문의리스트팝업 -->

+			<div class="modal pop_full fade pd_pop pd_qnalist_pop" id="pdQnaListPop" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">

+				<div class="modal-dialog" role="document">

+					<div class="modal-content">

+						<div class="modal-header">

+							<!-- 해당상품 -->

+							<div class="item_blk">

+								<div class="item_prod">

+									<div class="item_state">

+										<a href="#none" class="itemLink">

+											<div class="itemPic">

+												<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+											</div>

+											<p class="itemBrand">NBA</p>

+											<div class="itemName">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>

+										</a>

+									</div>

+								</div>

+							</div>

+							<!-- //해당상품 -->

+						</div>

+						<div class="modal-body">

+							

+						</div>

+						<div class="modal-footer">

+							

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- //제품문의리스트팝업 -->

+

+			<!-- 제품문의작성팝업 -->

+			<div class="modal pop_full fade pd_pop pd_qnawrite_pop" id="pdQnaWritePop" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">

+				<div class="modal-dialog" role="document">

+					<div class="modal-content">

+						<div class="modal-header">

+							<h5 class="modal-title" id="exampleFullLabel">상품 문의하기</h5>

+						</div>

+						<div class="modal-body">

+							<div class="pop_cont">

+								<div class="info_txt">

+									<ul>

+										<li>배송, 주문/결제, 취소/반품/교환/환불, 회원, 쿠폰/포인트, 이벤트 등의 자세한 문의사항은 고객센터 &gt; 1:1문의를 이용하여 주시기 바랍니다.</li>

+										<li>상품문의에 부합하지 않는 광고, 이유없는 비방, 욕설 및 오해의 소지가 있는 문의건에 대해서는 사전 통보 없이 삭제 될 수 있습니다.</li>

+										<li>답변은 마이페이지 &gt; 상품 문의에서 확인 하실 수 있습니다.</li>

+									</ul>

+								</div>

+								<div class="form_field">

+									<div class="input_box">

+										<div class="lap">

+											<textarea class="doc_itemqna" name="" id="" cols="30" rows="10" placeholder="문의내용 입력(500자 이내)" style="resize: none;"></textarea>

+											<p class="txt_cnt">

+												<span id="itemqna_cnt" class="itemqna_cnt"><em class="c_primary">0</em>/500자</span>

+											</p>   

+										</div>		   

+										<div class="secret_box">

+											<input id="wr_secret" type="checkbox"><label for="wr_secret"><span>비밀글설정</span></label>

+										</div>

+									</div> 

+								</div>

+								<div class="push_box">

+									<dl>

+										<dt>알림톡 수신 여부</dt>

+										<dd>

+											<div class="form_field">

+												<div>

+													<input type="radio" name="rdi-push" id="rdi-push1" value="" checked="">

+													<label for="rdi-push1"><span>수신</span></label>

+												</div>

+												<div>

+													<input type="radio" name="rdi-push" id="rdi-push2" value="">

+													<label for="rdi-push2"><span>미수신</span></label>

+												</div>

+											</div>

+										</dd>

+									</dl>

+								</div>

+							</div>	

+						</div>	

+						<div class="modal-footer">

+							<div class="btn_group_flex">

+								<div><button type="button" class="btn btn_dark"><span>등록</span></button></div>

+							</div>

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- //제품문의작성팝업 -->

+

+			<!-- 배송교환반품팝업 -->

+			<div class="modal pop_full fade pd_pop pd_delivery_pop" id="pdDeliveryPop" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">

+				<div class="modal-dialog" role="document">

+					<div class="modal-content">

+						<div class="modal-header">

+							<!-- 해당상품 -->

+							<div class="item_blk">

+								<div class="item_prod2">

+									<div class="item_state">

+										<a href="#none" class="itemLink">

+											<div class="itemPic">

+												<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+											</div>

+											<p class="itemBrand">NBA</p>

+											<div class="itemName">유니 삼단블록 플리스 집업</div>

+										</a>

+									</div>

+								</div>

+							</div>

+							<!-- //해당상품 -->

+						</div>

+						<div class="modal-body">

+							<div class="inner">

+								<div class="delivery">

+									<div class="pop_cont">

+										<h2>배송안내</h2>

+										<h3>구분</h3>

+										<p class="dot">일반배송/총알배송(오전 10시까지 주문 시)</p>

+									</div>

+									<div class="pop_cont">

+										<h3>배송비</h3>

+										<p class="dot">배송비 2,500원</p>

+										<p class="dot">배송비 2,500원(40,000원 이상 무료배송)</p>

+										<p class="dot">무료배송</p>

+									</div>

+									<div class="pop_cont">

+										<h3>배송업체</h3>

+										<p class="dot">CJ 대한통운</p>

+									</div>

+									<div class="pop_cont">

+										<h3>기간</h3>

+										<p class="dot">총알배송 : 오늘 밤 12시까지 도착 (토/일/공휴일 제외)</p>

+										<p class="dot">일반배송 : 결제 완료 후 2~3일 이내 (일/공휴일 제외)</p>

+										<p class="dot">단, 제주도나 도서 지방은 별도요금이 부과될 수 있습니다. 날씨나 택배사 사정에 따라 배송이 지연될 수 있습니다.</p>

+									</div>

+								</div>

+							</div>

+							<div class="inner wide">

+								<div class="pop_board"></div>

+							</div>

+							<div class="inner">

+								<div class="change">

+									<div class="pop_cont">

+										<h2>반품/교환안내</h2>

+										<table class="pop_table">

+											<tbody>

+											<tr>

+												<th>반품/교환<br>배송업체</th>

+												<td>CJ 대한통운</td>

+											</tr>

+											<tr>

+												<th>반품배송비</th>

+												<td>3,000원(최초 배송비가 무료인 경우<br>왕복 배송비 6,000원 부과)</td>

+											</tr>

+											<tr>

+												<th>교환배송비</th>

+												<td>6,000원</td>

+											</tr>

+											<tr>

+												<th>반품/교환 주소</th>

+												<td>10857 경기도 파주시 탄현면 방촌로<br>1172-21 아이스타일24 물류센터</td>

+											</tr>

+										</tbody></table>

+									</div>

+									<div class="pop_cont">

+										<h3>반품/교환 신청</h3>

+										<p class="dot">반품/교환 시 먼저 고객센터(1544-5336)나 일대일 문의로 반품/교환 신청 후 상품을 발송 해 주시기 바랍니다.</p>

+										<p class="dot">마이페이지 &gt; 나의쇼핑 &gt; 정상주문내역에서 하실 수 있습니다.</p>

+										<p class="dot">반품/교환 신청시 상품의 반송입고 확인 후 환불/교환 처리해 드립니다.</p>

+									</div>

+									<div class="pop_cont">

+										<h3>반품시기</h3>

+										<p class="dot">상품의 반품/교환은 상품 수령 후 7일 이내 가능합니다. 단, 상품을 수령하셨을 때의 상태를 그대로 보존해 주셔야 합니다.</p>

+									</div>

+									<div class="pop_cont">

+										<h3>반품/교환 불가사유</h3>

+										<p class="dot">반품/교환 가능기간을 초과하였을 경우.</p>

+										<p class="dot">상품 및 구성품을 분실하였거나 취급 부주의로 인한 파손/고장/오염된 경우.</p>

+										<p class="dot">고객님의 요청에 따른 주문제작 상품의 경우.</p>

+										<p class="dot">상품을 착용 또는 설치하였거나, 상품의 일부를 소비하였을 경우.</p>

+										<p class="dot">상품의 포장을 개봉하여 사용 및 설치가 완료 되거나 상품의 가치가 훼손되었을 경우.</p>

+										<p class="dot">구매한 상품의 구성품(세트, 기프트상품, 부속품, 의류부착 악세사리 등)이 누락 된 경우.</p>

+										<p class="dot">신발, 그릇류의 박스포장을 포함, 상품이 판매할 수 없게 훼손 된 경우(신발박스 등의 파손, 박스포장 위 송장 부착, 박스 훼손/파손/찢어집, 택 분실 등)</p>

+									</div>

+									<div class="pop_cont">

+										<h3>기타사항</h3>

+										<p class="dot">상품에 따라 반송주소/방법이 각각 다를 수 있습니다.</p>

+										<p class="dot">자사배송 상품의 경우, 출고 전후 옵션 변경 및 다른 상품으로 교환이 불가하여 취소 또는 재주문하셔야 합니다.</p>

+										<p class="dot">고객님께서 임의로 반송하실 경우, 빠른 처리가 어려울 수 있습니다.</p>

+										<p class="dot">제품 반송 시 꼭 반품 신청 후, 안내에 따른 반송 부탁 드립니다.</p>

+									</div>

+								</div>

+							</div>

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- //배송교환반품팝업 -->

+

+			<!-- 베스트리뷰팝업 -->

+			<div class="modal pop_full fade pd_pop pd_bestreviewdetail_pop" id="pdBestReviewPop" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">

+				<div class="modal-dialog" role="document">

+					<div class="modal-content">

+						<div class="modal-header">

+							<h5 class="modal-title" id="exampleFullLabel">베스트 리뷰</h5>

+						</div>

+						<div class="modal-body">

+							<div class="pop_cont">

+								<!-- 리뷰사진영역 -->

+									<div class="area_slider">

+										<div class="swiper-container thumb_list">

+											<div class="swiper-wrapper">

+												<div class="swiper-slide"><div class="thumb nodata"><img src="/images/mo/thumb/tmp_pdDetail1.jpg" alt=""></div></div><!-- 이미지 없으면 calss .nodata  -->

+												<div class="swiper-slide"><div class="thumb"><img src="/images/mo/thumb/tmp_pdDetail1.jpg" alt=""></div></div>

+												<div class="swiper-slide"><div class="thumb"><img src="/images/mo/thumb/tmp_pdDetail1.jpg" alt=""></div></div>

+												<div class="swiper-slide"><div class="thumb"><img src="/images/mo/thumb/tmp_pdDetail1.jpg" alt=""></div></div>

+												<div class="swiper-slide"><div class="thumb"><img src="/images/mo/thumb/tmp_pdDetail1.jpg" alt=""></div></div>

+												<div class="swiper-slide"><div class="thumb"><img src="/images/mo/thumb/tmp_pdDetail1.jpg" alt=""></div></div>

+											</div>

+											<!-- Add Pagination -->

+											<div class="swiper-pagination"></div>

+										</div>

+									</div>

+								<!-- //리뷰사진영역 -->

+								<!-- 리뷰내용 -->

+								<div class="pd_review best">

+									<div class="area_rv_all">

+										<div class="btn_review_open">리뷰오픈</div>

+										<div class="review_list">

+											<ul>

+												<li>

+													<div class="review">

+														<div class="info_box">

+															<div class="star_score">

+																<span class="star">

+																	<em class="progbar" style="width:70%;"></em> <!-- 평점 style로 표기 -->

+																</span>

+															</div>

+															<div class="writer">

+																<span class="wr_id">ab2****</span>

+																<span class="wr_date">2020.07.15</span>

+															</div>

+														</div>

+														<div class="response_box">

+															<div>

+																<dl>

+																	<div>

+																		<dt>구매옵션</dt>

+																		<dd>베이지 / 100</dd>

+																	</div>

+																	<div>

+																		<dt>키/몸무게</dt>

+																		<dd>178cm/71kg</dd>

+																	</div>

+																</dl>

+															</div>

+														</div>

+														<div class="txt_review_box">

+															<p>

+																옷이 부들부들 촉감이 너무 좋습니다~ 보는 것 보다 실제 입으니깐 더 멋스러운 것 같아요! 차분한 그레이 라서 지금 가을가을한 계절에 잘 어울리는 같아요. 옷이 부들부들 촉감이 너무 좋습니다~ 보는 것 보다 실제 입으니깐 더 멋스러운 것 같아요! 차분한 그레이 라서 지금 가을가을한 계절에 잘 어울리는 같아요.

+															</p>

+														</div>

+														<div class="response_box2">

+															<div>

+																<dl>

+																	<div>

+																		<dt>사이즈</dt>

+																		<dd>작음</dd>

+																	</div>

+																	<div>

+																		<dt>컬러</dt>

+																		<dd>밝음</dd>

+																	</div>

+																	<div>

+																		<dt>핏</dt>

+																		<dd>레귤러</dd>

+																	</div>

+																	<div>

+																		<dt>두께감</dt>

+																		<dd>적당함</dd>

+																	</div>

+																</dl>

+															</div>

+														</div>

+														<div class="reply_box">

+															<div class="reply">

+																<div class="reply_writer">

+																	<span class="wr_name">관리자</span>

+																	<span class="wr_date">2020.07.15</span>

+																</div>

+																<div class="reply_txt">

+																	<p>

+																		안녕하세요, 스타일24 관리자입니다.<br>

+																		최대한 검수작업을 하고 있으나, 상품 출고량이 많은 경우 간혹 검수가 누락되는 경우가 있습니다.<br>

+																		만약, 받아보시고 문제가 있을 경우 텍 제거하지마시고 고객센터로 접수 해주시면 처리 도와드리겠습니다.<br>

+																		구매해주셔서 감사합니다.												 

+																	</p>

+																</div>

+															</div>

+														</div>

+													</div>

+												</li>							   

+											</ul>

+										</div>

+									</div>

+								</div>

+								<!-- //리뷰내용 -->

+							</div>

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- //베스트리뷰팝업 -->

+

+			<!-- 포토/영상리뷰팝업(detail) -->

+			<div class="modal pop_full fade pd_pop pd_photoreviewdetail_pop" id="pdPhotoReviewDetailPop" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">

+				<div class="modal-dialog" role="document">

+					<div class="modal-content">

+						<div class="modal-header">

+							<h5 class="modal-title" id="exampleFullLabel">

+								<button id="btn_more_photoreview"></button>

+								포토/영상리뷰

+							</h5>

+						</div>

+						<div class="modal-body">

+							<div class="pop_cont">

+								<!-- 리뷰사진영역 -->

+									<div class="area_slider">

+										<div class="swiper-container thumb_list">

+											<div class="swiper-wrapper">

+												<div class="swiper-slide">

+													<div class="thumb mov">

+														<video poster="http://cdn.011st.com/11dims/resize/1999x1999/quality/75/11src/review/10201202/3121412332/2e66698576d64c5c9977a6fe6606008d.jpg" muted="muted" preload="metadata" controls="controls">

+															<source src="http://snsvideo.11st.co.kr/movie/item/www/675/67518524_06_1_C1.mp4" type="video/mp4">

+														</video>

+													</div>

+												</div>

+												<div class="swiper-slide"><div class="thumb"><img src="/images/mo/thumb/tmp_pdDetail1.jpg" alt=""></div></div>

+												<div class="swiper-slide"><div class="thumb"><img src="/images/mo/thumb/tmp_pdDetail1.jpg" alt=""></div></div>

+												<div class="swiper-slide"><div class="thumb"><img src="/images/mo/thumb/tmp_pdDetail1.jpg" alt=""></div></div>

+												<div class="swiper-slide"><div class="thumb"><img src="/images/mo/thumb/tmp_pdDetail1.jpg" alt=""></div></div>

+												<div class="swiper-slide"><div class="thumb"><img src="/images/mo/thumb/tmp_pdDetail1.jpg" alt=""></div></div>

+											</div>

+											<!-- Add Pagination -->

+											<div class="swiper-pagination"></div>

+										</div>

+									</div>

+								<!-- //리뷰사진영역 -->

+								<!-- 리뷰내용 -->

+								<div class="pd_review photo">

+									<div class="area_rv_all">

+										<div class="btn_review_open">리뷰오픈</div>

+										<div class="review_list">

+											<ul>

+												<li>

+													<div class="review">

+														<div class="info_box">

+															<div class="star_score">

+																<span class="star">

+																	<em class="progbar" style="width:70%;"></em> <!-- 평점 style로 표기 -->

+																</span>

+															</div>

+															<div class="writer">

+																<span class="wr_id">ab2****</span>

+																<span class="wr_date">2020.07.15</span>

+															</div>

+														</div>

+														<div class="response_box">

+															<div>

+																<dl>

+																	<div>

+																		<dt>구매옵션</dt>

+																		<dd>베이지 / 100</dd>

+																	</div>

+																	<div>

+																		<dt>키/몸무게</dt>

+																		<dd>178cm/71kg</dd>

+																	</div>

+																</dl>

+															</div>

+														</div>

+														<div class="txt_review_box">

+															<p>

+																옷이 부들부들 촉감이 너무 좋습니다~ 보는 것 보다 실제 입으니깐 더 멋스러운 것 같아요! 차분한 그레이 라서 지금 가을가을한 계절에 잘 어울리는 같아요. 옷이 부들부들 촉감이 너무 좋습니다~ 보는 것 보다 실제 입으니깐 더 멋스러운 것 같아요! 차분한 그레이 라서 지금 가을가을한 계절에 잘 어울리는 같아요.

+															</p>

+														</div>

+														<div class="response_box2">

+															<div>

+																<dl>

+																	<div>

+																		<dt>사이즈</dt>

+																		<dd>작음</dd>

+																	</div>

+																	<div>

+																		<dt>컬러</dt>

+																		<dd>밝음</dd>

+																	</div>

+																	<div>

+																		<dt>핏</dt>

+																		<dd>레귤러</dd>

+																	</div>

+																	<div>

+																		<dt>두께감</dt>

+																		<dd>적당함</dd>

+																	</div>

+																</dl>

+															</div>

+														</div>

+														<div class="reply_box">

+															<div class="reply">

+																<div class="reply_writer">

+																	<span class="wr_name">관리자</span>

+																	<span class="wr_date">2020.07.15</span>

+																</div>

+																<div class="reply_txt">

+																	<p>

+																		안녕하세요, 스타일24 관리자입니다.<br>

+																		최대한 검수작업을 하고 있으나, 상품 출고량이 많은 경우 간혹 검수가 누락되는 경우가 있습니다.<br>

+																		만약, 받아보시고 문제가 있을 경우 텍 제거하지마시고 고객센터로 접수 해주시면 처리 도와드리겠습니다.<br>

+																		구매해주셔서 감사합니다.												 

+																	</p>

+																</div>

+															</div>

+														</div>

+													</div>

+												</li>							   

+											</ul>

+										</div>

+									</div>

+								</div>

+								<!-- //리뷰내용 -->

+							</div>

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- //포토/영상리뷰팝업(detail) -->

+

+			<!-- 포토/영상리뷰팝업(list) -->

+			<div class="modal pop_full fade pd_pop pd_photoreviewlist_pop" id="pdPhotoReviewListPop" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">

+				<div class="modal-dialog" role="document">

+					<div class="modal-content">

+						<div class="modal-header">

+							<h5 class="modal-title" id="exampleFullLabel">포토/영상리뷰</h5>

+						</div>

+						<div class="modal-body">

+							<div class="pop_cont">

+								<div class="photo_list">

+									<ul>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb mov" style="background-image:url('/images/pc/thumb/tmp_pdLookbook3.jpg');"></span><!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb mov" style="background-image:url('/images/pc/thumb/tmp_pdLookbook2.jpg');"></span><!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb" style="background-image:url('/images/pc/thumb/tmp_pdDetail4.jpg');"></span>

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb" style="background-image:url('/images/pc/thumb/tmp_pdDetail4.jpg');"></span>

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb" style="background-image:url('/images/pc/thumb/tmp_pdDetail4.jpg');"></span>

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb" style="background-image:url('/images/pc/thumb/tmp_pdDetail4.jpg');"></span>

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb" style="background-image:url('/images/pc/thumb/tmp_pdDetail4.jpg');"></span>

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb" style="background-image:url('/images/pc/thumb/tmp_pdDetail4.jpg');"></span>

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb" style="background-image:url('/images/pc/thumb/tmp_pdDetail4.jpg');"></span>

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb" style="background-image:url('/images/pc/thumb/tmp_pdDetail4.jpg');"></span>

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb mov" style="background-image:url('/images/pc/thumb/tmp_pdLookbook3.jpg');"></span><!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb mov" style="background-image:url('/images/pc/thumb/tmp_pdLookbook2.jpg');"></span><!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb" style="background-image:url('/images/pc/thumb/tmp_pdDetail4.jpg');"></span>

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb" style="background-image:url('/images/pc/thumb/tmp_pdDetail4.jpg');"></span>

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb mov" style="background-image:url('/images/pc/thumb/tmp_pdLookbook3.jpg');"></span><!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb mov" style="background-image:url('/images/pc/thumb/tmp_pdLookbook2.jpg');"></span><!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb" style="background-image:url('/images/pc/thumb/tmp_pdDetail4.jpg');"></span>

+												</div>

+											</a>

+										</li>

+										<li>

+											<a href="">

+												<div class="pic">

+													<span class="thumb" style="background-image:url('/images/pc/thumb/tmp_pdDetail4.jpg');"></span>

+												</div>

+											</a>

+										</li>

+									</ul>

+								</div>

+								<div class="review_last">

+									마지막 게시글입니다.

+								</div>

+							</div>

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- //포토/영상리뷰팝업(list) -->

+

+			<!-- 딜제품상세보기팝업 -->

+			<div class="modal pop_full fade pd_pop pd_descrp_pop" id="pdDescrpPop" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">

+				<div class="modal-dialog" role="document">

+					<div class="modal-content">

+						<div class="modal-header">

+							<div class="deal_listDescrp_open">상품 1</div>

+						</div>

+						<div class="modal-body">

+							<!-- 아이템 -->

+							<div class="item_blk">

+								<div class="item_prod">

+									<div class="item_state">

+										<a href="#none" class="itemLink">

+											<div class="itemPic">

+												<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+											</div>

+											<p class="itemBrand">NBA 키즈</p>

+											<div class="itemName"><span class="tit_option">[상품1]</span>유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+											<p class="itemPrice">

+												134,100

+												<span class="itemPrice_original">149,000</span>

+												<span class="itemPercent">30%</span>

+											</p>

+										</a>

+									</div>

+								</div>

+							</div>

+							<!-- 아이템 -->

+							<div class="pop_cont"></div>

+							<!-- 상세정보리스트팝업 -->

+							<div class="pd_pop list_pop pd_pop pd_listDescrp_pop" id="listDescrpPop">

+								<div class="modal_content">

+									<!-- <div class="close">닫기</div> -->

+									<div class="listpop_body">

+										<!-- 아이템선택 -->

+										<div class="deal_list_select">

+											<ul class="list">

+												<li class="selected">

+													<div class="item_prod">

+														<div class="item_state">

+															<a href="javascript:void(0)" class="itemLink">

+																<div class="itemPic">

+																	<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+																</div>

+																<p class="itemBrand">NBA 키즈</p>

+																<div class="itemName"><span class="tit_option">[상품1]</span>유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+																<p class="itemPrice">

+																	134,100

+																	<span class="itemPrice_original">149,000</span>

+																	<span class="itemPercent">30%</span>

+																</p>

+															</a>

+														</div>

+													</div>

+												</li> 

+												<li>

+													<div class="item_prod">

+														<div class="item_state">

+															<a href="javascript:void(0)" class="itemLink">

+																<div class="itemPic">

+																	<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+																</div>

+																<p class="itemBrand">NBA 키즈</p>

+																<div class="itemName"><span class="tit_option">[상품1]</span>유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+																<p class="itemPrice">

+																	134,100

+																	<span class="itemPrice_original">149,000</span>

+																	<span class="itemPercent">30%</span>

+																</p>

+															</a>

+														</div>

+													</div>

+												</li>

+												<li>

+													<div class="item_prod">

+														<div class="item_state">

+															<a href="javascript:void(0)" class="itemLink">

+																<div class="itemPic">

+																	<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+																</div>

+																<p class="itemBrand">NBA 키즈</p>

+																<div class="itemName"><span class="tit_option">[상품1]</span>유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+																<p class="itemPrice">

+																	134,100

+																	<span class="itemPrice_original">149,000</span>

+																	<span class="itemPercent">30%</span>

+																</p>

+															</a>

+														</div>

+													</div>

+												</li>

+												<li>

+													<div class="item_prod">

+														<div class="item_state">

+															<a href="javascript:void(0)" class="itemLink">

+																<div class="itemPic">

+																	<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+																</div>

+																<p class="itemBrand">NBA 키즈</p>

+																<div class="itemName"><span class="tit_option">[상품1]</span>유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+																<p class="itemPrice">

+																	134,100

+																	<span class="itemPrice_original">149,000</span>

+																	<span class="itemPercent">30%</span>

+																</p>

+															</a>

+														</div>

+													</div>

+												</li>

+											</ul>

+										</div>

+										<!-- //아이템선택 -->

+									</div>

+								</div>

+							</div>

+							<!-- //상세정보리스트팝업 -->

+						</div>

+						<div class="modal-footer">

+							<button class="btn btn_primary" id="btn_deal_purchase">구매하기</button>

+						</div>

+					</div>

+				</div>

+			</div>

+			<!-- //딜제품상세보기팝업 -->

+

+			<!-- 딜리뷰제품리스트팝업 -->

+			<div class="pd_pop list_pop pd_pop pd_listReview_pop" id="listReviewPop">

+				<div class="modal_content">

+					<div class="close">닫기</div>

+					<div class="listpop_body">

+						<!-- 아이템선택 -->

+						<div class="deal_list_select">

+							<ul class="list">

+								<li class="selected">

+									<div class="item_prod">

+										<div class="item_state active">

+											<a href="#none" class="itemLink">

+												<div class="itemPic">

+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+												</div>

+												<p class="itemBrand">NBA 키즈</p>

+												<div class="itemName">

+													<span class="tit_option">[상품1]</span> 

+													유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업

+												</div>

+												<p class="itemText">

+													<span class="tx1">(리뷰 9,999+)</span>

+												</p>

+											</a>

+										</div>

+									</div>

+								</li> 

+								<li>

+									<div class="item_prod">

+										<div class="item_state">

+											<a href="#none" class="itemLink">

+												<div class="itemPic">

+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+												</div>

+												<p class="itemBrand">NBA 키즈</p>

+												<div class="itemName">

+													<span class="tit_option">[상품1]</span> 

+													유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업

+												</div>

+												<p class="itemText">

+													<span class="tx1">(리뷰 9,999+)</span>

+												</p>

+											</a>

+										</div>

+									</div>

+								</li>

+								<li>

+									<div class="item_prod">

+										<div class="item_state">

+											<a href="#none" class="itemLink">

+												<div class="itemPic">

+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+												</div>

+												<p class="itemBrand">NBA 키즈</p>

+												<div class="itemName">

+													<span class="tit_option">[상품1]</span> 

+													유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업

+												</div>

+												<p class="itemText">

+													<span class="tx1">(리뷰 9,999+)</span>

+												</p>

+											</a>

+										</div>

+									</div>

+								</li>

+								<li>

+									<div class="item_prod">

+										<div class="item_state">

+											<a href="#none" class="itemLink">

+												<div class="itemPic">

+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+												</div>

+												<p class="itemBrand">NBA 키즈</p>

+												<div class="itemName">

+													<span class="tit_option">[상품1]</span> 

+													유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업

+												</div>

+												<p class="itemText">

+													<span class="tx1">(리뷰 9,999+)</span>

+												</p>

+											</a>

+										</div>

+									</div>

+								</li>

+							</ul>

+						</div>

+						<!-- //아이템선택 -->

+					</div>

+				</div>

+			</div>

+			<!-- //딜리뷰제품리스트팝업 -->

+

+			<!-- 딜문의제품리스트팝업 -->

+			<div class="pd_pop list_pop pd_pop pd_listQna_pop" id="listQnaPop">

+				<div class="modal_content">

+					<div class="close">닫기</div>

+					<div class="listpop_body">

+						<!-- 아이템선택 -->

+						<div class="deal_list_select">

+							<ul class="list">

+								<li class="selected">

+									<div class="item_prod">

+										<div class="item_state active">

+											<a href="#none" class="itemLink">

+												<div class="itemPic">

+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+												</div>

+												<p class="itemBrand">NBA 키즈</p>

+												<div class="itemName"><em>[상품1]</em> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+												<p class="itemText">

+													<span class="tx1">(문의 9,999+)</span>

+												</p>

+											</a>

+										</div>

+									</div>

+								</li> 

+								<li>

+									<div class="item_prod">

+										<div class="item_state">

+											<a href="#none" class="itemLink">

+												<div class="itemPic">

+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+												</div>

+												<p class="itemBrand">NBA 키즈</p>

+												<div class="itemName"><em>[상품2]</em> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+												<p class="itemText">

+													<span class="tx1">(문의 9,999+)</span>

+												</p>

+											</a>

+										</div>

+									</div>

+								</li>

+								<li>

+									<div class="item_prod">

+										<div class="item_state">

+											<a href="#none" class="itemLink">

+												<div class="itemPic">

+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+												</div>

+												<p class="itemBrand">NBA 키즈</p>

+												<div class="itemName"><em>[상품3]</em> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+												<p class="itemText">

+													<span class="tx1">(문의 9,999+)</span>

+												</p>

+											</a>

+										</div>

+									</div>

+								</li>

+								<li>

+									<div class="item_prod">

+										<div class="item_state">

+											<a href="#none" class="itemLink">

+												<div class="itemPic">

+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+												</div>

+												<p class="itemBrand">NBA 키즈</p>

+												<div class="itemName"><em>[상품4]</em> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+												<p class="itemText">

+													<span class="tx1">(문의 9,999+)</span>

+												</p>

+											</a>

+										</div>

+									</div>

+								</li>

+							</ul>

+						</div>

+						<!-- //아이템선택 -->

+					</div>

+				</div>

+			</div>

+			<!-- //딜문의제품리스트팝업 -->

+

+			<!-- 딜배송제품리스트팝업 -->

+			<div class="pd_pop list_pop pd_pop pd_listDelivery_pop" id="listDeliveryPop">

+				<div class="modal_content">

+					<div class="close">닫기</div>

+					<div class="listpop_body">

+						<!-- 아이템선택 -->

+						<div class="deal_list_select">

+							<ul class="list">

+								<li class="selected">

+									<div class="item_prod">

+										<div class="item_state active">

+											<a href="#none" class="itemLink">

+												<div class="itemPic">

+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+												</div>

+												<p class="itemBrand">NBA 키즈</p>

+												<div class="itemName"><em>[상품1]</em> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+											</a>

+										</div>

+									</div>

+								</li> 

+								<li>

+									<div class="item_prod">

+										<div class="item_state">

+											<a href="#none" class="itemLink">

+												<div class="itemPic">

+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+												</div>

+												<p class="itemBrand">NBA 키즈</p>

+												<div class="itemName"><em>[상품2]</em> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+											</a>

+										</div>

+									</div>

+								</li>

+								<li>

+									<div class="item_prod">

+										<div class="item_state">

+											<a href="#none" class="itemLink">

+												<div class="itemPic">

+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+												</div>

+												<p class="itemBrand">NBA 키즈</p>

+												<div class="itemName"><em>[상품3]</em> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+											</a>

+										</div>

+									</div>

+								</li>

+								<li>

+									<div class="item_prod">

+										<div class="item_state">

+											<a href="#none" class="itemLink">

+												<div class="itemPic">

+													<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">

+												</div>

+												<p class="itemBrand">NBA 키즈</p>

+												<div class="itemName"><em>[상품4]</em> 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>

+											</a>

+										</div>

+									</div>

+								</li>

+							</ul>

+						</div>

+						<!-- //아이템선택 -->

+					</div>

+				</div>

+			</div>

+			<!-- //딜배송제품리스트팝업 -->											

+		</div>

+		<!-- 팝업영역 -->

+

+	</section>

+	<!-- ★ 컨텐츠 종료 -->	

+

+	<!-- 바닥메뉴 -->	

+	<div class="product_floormenu"><!--  ☞☞ 제품이 품절되면 soldout클래스 추가 -->

+		<div class="share_like">

+			<button class="share">공유하기</button>

+			<button class="like">위시리스트</button>

+		</div>

+		<div class="prd_buy">

+			<button class="buying btPop_auto" id="btn_purchase">구매하기</button>

+			<button class="cantbuying">SOLD OUT</button>

+		</div>

+	</div>

+	<!-- //바닥메뉴 -->

+</main>

+

+<script th:inline="javascript">

+/*<![CDATA[*/

+	

+	var cateNm = "";

+	

+	// 함께본 상품

+	var fnGoodsTogetherSearch = function(params) {

+		gagajf.ajaxSubmit("/goods/detail/together/frame", "html", "goodsTogetherbArea", params);

+	}

+	

+	 $(document).ready( function() {

+

+			// selecter

+			$(function(){

+				var opt_selecter_item = new sCombo('.opt_select .select_custom.deal_opt_item');

+				//var item_opt01 = new sCombo('.pd .pop_option_select .item_opt1');

+				//var item_opt02 = new sCombo('.pd .pop_option_select .item_opt2');

+				var opt_select = new sCombo('.pd .op1 .opt_select .select_custom');

+			});

+

+			//옵션변경 셀렉트

+			var opt_selecter01 = new sCombo('.pd .pop_option_select .item_opt1');

+			$('.pd .pop_option_select .select_custom .combo .list > li').click(function(e) {

+				$(this).parents('.form_field').next('.form_field').find('.select_custom').attr('disabled', false);

+				return false;

+			});

+			var opt_selecter02 = new sCombo('.pd .pop_option_select .item_opt2');

+

+		 /* 상품옵션변경 팝업 > 수량조절 */

+		 $(document).on('click','.number_count .minus',function(e){

+			 var $input = $(this).parent().find('input');

+				var count = parseInt($input.val()) - 1;

+				count = count < 1 ? 1 : count;

+				$input.val(count);

+				$input.change();

+				return false;

+		 }).on('click','.number_count .plus',function(e){

+			 var $input = $(this).parent().find('input');

+				$input.val(parseInt($input.val()) + 1);

+				$input.change();

+				return false;

+		 });

+

+		 //관심상품 등록

+		 $(document).on('click','.pd .itemLike',function(e){

+			 $(this).toggleClass('active');

+			 return false;

+		 });	

+			

+			//슬라이드 - 베스트리뷰

+			var riviewSwiper = new Swiper('.pd .riview_box .area_slider .swiper-container', {

+				slidesPerView: 1,

+				spaceBetween: 8,

+				loop: true,

+				pagination: {

+					el: '.swiper-pagination',

+					type: 'fraction',

+				},

+			});

+			

+			//슬라이드 - 제품사진

+			var thumbswiper = new Swiper('.pd .thumb_box .area_slider .swiper-container', {

+				slidesPerView:1,

+				pagination: {

+					el: '.swiper-pagination',

+					type: 'fraction',

+				},

+			});

+		 //슬라이드 - 함께하면 할인되는 다다익선 상품

+		 var togetherItemSwiper = new Swiper('.pd .pd_together .area_slider .swiper-container', {

+			 slidesPerView: 3,

+			 spaceBetween: 8,

+		 });  

+

+		 //슬라이드 - 이 상품과 함께 본 상품 

+		 var otherItemSwiper = new Swiper('.pd .pd_clickother .area_slider .swiper-container', {

+			 slidesPerView: 2,

+			 spaceBetween: 8,

+		 });			

+

+		 //슬라이드 - STYLE24의 스타일링 추천

+			var rcmdPicimgSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_img .swiper-container', {

+				slidesPerView: 1,

+				spaceBetween: 0,

+				pagination: {

+					el: '.swiper-pagination',

+					type: 'fraction',

+				},

+			});

+			var rcmdPiclistSwiper = new Swiper('.pd .pd_recommend .area_slider.pic_list .swiper-container', {

+				observer: true,

+				observeParents: true,

+				slidesPerView: 3,

+				spaceBetween: 8,

+			});

+

+			$(".pic_list > div").hide();

+			$(".pic_list > div").eq(0).fadeIn();

+			rcmdPicimgSwiper.on('slideChange', function () {

+				var pic_index=this.activeIndex;

+				$(".pic_list > div").hide();

+				$(".pic_list > div").eq(pic_index).fadeIn();

+			});

+			

+			//슬라이드 - 동일브랜드 상품 추천

+		 var rcmdItemSwiper = new Swiper('.pd .pd_samebrand .area_slider .swiper-container', {

+			 slidesPerView: 3,

+			 spaceBetween: 8,

+		 }); 

+

+		 //슬라이드 - 이 상품과 비슷한 상품 

+		 var relateItemSwiper = new Swiper('.pd .pd_relate .area_slider .swiper-container', {

+			 slidesPerView: 3,

+			 spaceBetween: 8,

+		 });	 

+			

+			//슬라이드 - 베스트리뷰팝업 

+		 var bestreviewdetailSwiper = new Swiper('.pd_bestreviewdetail_pop .area_slider .swiper-container', {

+				observer: true,

+				observeParents: true,

+			 slidesPerView: 1,

+			 pagination: {

+					el: '.swiper-pagination',

+					type: 'fraction',

+				},

+		 });

+			

+			//슬라이드 - 포토,영상리뷰팝업 

+		 var photoreviewdetailSwiper = new Swiper('.pd_photoreviewdetail_pop .area_slider .swiper-container', {

+				observer: true,

+				observeParents: true,

+			 slidesPerView: 1,

+			 pagination: {

+					el: '.swiper-pagination',

+					type: 'fraction',

+				},

+		 });

+		 

+		

+		 //탭 - 사이즈정보 > 탭

+		 $(document).on('click','#infoSizePop .tab_nav ul li',function(e){

+			 $(this).addClass('active').siblings().removeClass('active');

+			 $('#infoSizePop .tab_cont_wrap .tab_cont').hide();		

+			 $('#infoSizePop .tab_cont_wrap .tab_cont').eq($(this).index()).show();

+			 return false;

+		 });

+

+		 //탭 - 사이즈정보 > 서브탭

+			$(document).on('click','#infoSizePop .sub_tab_nav ul li',function(e){

+				var value=$(this).find("a").text();

+				var catTxt=$(".category_open").text();

+				console.log(value)

+			 $(this).addClass('active').siblings().removeClass('active');

+			 $(this).parents('.tab_cont').find('.sub_tab_cont').hide();

+			 $(this).parents('.tab_cont').find('.sub_tab_cont').eq($(this).index()).show();

+				$(this).parents().parents().parents().parents().parents(".category_box").hide();

+				$(this).parents().parents().parents().parents().parents(".category_box").prev(".category_open").text(value);

+			 return false;

+		 });

+

+			//팝업 - 사이즈정보 > 서브탭 - 카테고리팝오픈

+		 $(document).on('click','#infoSizePop .category_open',function(e){

+			 $(this).siblings().show();

+			 return false;

+		 });

+			$(document).on('click','#infoSizePop .category_close',function(e){

+			 $(this).parents().parents(".category_box").hide();

+			 return false;

+		 });

+		 

+

+		//팝업 - 상품문의 리스트	

+		$(document).on('click','#btn_pdQnaList_pop',function(e){

+			$("#pdQnaListPop").modal("show");

+			return false;

+		});

+

+		//팝업 - 상품문의 작성

+		$(document).on('click','#btn_pdQnaWrite_pop',function(e){

+			$("#pdQnaWritePop").modal("show");

+			return false;

+		});

+

+			//팝업 - 배송교환반품 안내

+		 $(document).on('click','#btn_pdDelivery_Pop',function(e){

+			 $("#pdDeliveryPop").modal("show");

+			 return false;

+		 })

+

+		//팝업 - 리뷰

+		$(document).on('click','#btn_pdReview_pop',function(e){

+			 $("#pdReviewPop").modal("show");

+			 return false;

+		 })

+

+		//팝업 - 베스트리뷰

+		$(document).on('click','#btn_pdBestReview_pop a',function(e){

+			 $("#pdBestReviewPop").modal("show");

+			 return false;

+		 })

+			

+

+			//팝업 - 포토/영상 리뷰 (detail)

+		 $(document).on('click','.area_rv_photo .photo_list a, .area_rv_all .review_list .photo_list a, .pd_photoreviewlist_pop .photo_list ul li a',function(e){

+			 $("#pdPhotoReviewDetailPop").modal("show");

+			 return false;

+		 })

+

+			//팝업 - 포토/영상 리뷰 (list)

+		 $(document).on('click','#btn_more_photoreview',function(e){

+			 $("#pdPhotoReviewListPop").modal("show");

+			 return false;

+		 })

+

+			//팝업 - 제품상세

+			$(document).on('click','.pd_dealitem .itemLink',function(e){

+			 $("#pdDescrpPop").modal("show");

+				$('#pdDescrpPop .pop_cont').load('pd_descrp_pop.html');

+			 return false;

+		 })

+

+			//팝업 - 제품리뷰 > 카테고리팝오픈

+			// 오픈

+		 $(document).on('click','.pd_review .category_open > li',function(e){

+				var dataName=$(this).attr("data_name");

+			 $(".pd_review .category_box").show();

+				$(".pd_review .category_list").find(".category").hide();

+				$(".pd_review .category_list").find("#"+dataName).show();

+				return false;

+		 });

+			// 닫기

+			$(document).on('click','.pd_review .category_box .category_close',function(e){

+				$(".pd_review .category_box").hide();

+			 return false;

+		 });

+			// 변경

+			$(document).on('click','.pd_review .category ul > li',function(e){

+				var num=$(".pd_review .category_open > li").length;

+				var value=$(this).find("a").attr("data");

+				var name=$(this).parent().parent().attr("id");

+				$(this).parent().find("li").removeClass("active");

+				$(this).addClass("active");

+				for(var i=0; i < num; i++){

+					var dataname=$(".pd_review .category_open > li").eq(i).attr("data_name");

+					if(name==dataname){

+						$(".pd_review .category_open > li").eq(i).find("span").text(value);

+					}

+				}

+			 return false;

+		 });

+

+

+			// 포토,베스트리뷰숨김

+			var review_open=$(".btn_review_open");

+			$(document).on('click','.btn_review_open',function(e){

+				$(this).toggleClass('active');

+				$(this).next(".review_list").toggleClass('active');

+				return false;

+			});

+			

+			

+			// =============구매하기팝업========================================================

+

+			// pop open

+			function popOpenScroll(){

+				$('html, body').css({'overflow': 'hidden', 'height': '100%'}); 

+				$('#element').on('scroll touchmove mousewheel', function(event) { // 터치무브, 휠 스크롤 방지

+					event.preventDefault();

+					event.stopPropagation();

+					return false;

+				});

+			}

+			// pop close

+			function popClsScroll(){

+				$('html, body').css({'overflow': 'auto', 'height': '100%'}); //n 해제

+				$('#element').off('scroll touchmove mousewheel'); // 터치무브, 휠 스크롤 가능

+				return false;

+			}

+			// pop close

+			function popClsScroll2(){

+				$('html, body').css({'overflow': 'auto', 'height': '100%'}); //n 해제

+				$('#element').off('scroll touchmove mousewheel'); // 터치무브, 휠 스크롤 가능

+				return false;

+			}

+

+			//팝업 - 구매하기 > 옵션선택 > 옵션셀렉트팝업

+			$(document).on('click','.Purchase_pop .option_result .option_open',function(e){

+			 $(".Purchase_pop .pop_option_select").show();

+			 return false;

+		 });

+			$(document).on('click','.Purchase_pop .close',function(e){

+			 $(".Purchase_pop .pop_option_select").hide();

+			 return false;

+		 })

+			//팝업 - 딜상세정보 옵션선택 > 옵션셀렉트팝업

+			$(document).on('click','.pd_dealitem .item_prod .btn_default',function(e){

+				$('.container').addClass('btPop_open');

+				$(".Purchase_pop .pop_option_select").show();

+				popOpenScroll();

+			 return false;

+		 });

+

+			//팝업 - 딜상세팝업 구매하기버튼 > 옵션셀렉트팝업

+			$(document).on('click','#pdDescrpPop .modal-footer button',function(e){

+				$("#pdDescrpPop .close-modal ").click();

+				$('.container').addClass('btPop_open');

+				$(".Purchase_pop .pop_option_select").show();

+				popOpenScroll();

+			 return false;

+		 });

+			// ============================================================================//

+			

+

+

+			// =============딜리스트팝업========================================================

+			//팝업 - 딜리뷰상품 리스트팝업

+			$(document).on('click','.deal_listReview_open',function(e){

+			 $("#listReviewPop").show();

+			 return false;

+		 }).on('click','#listReviewPop .close, #listReviewPop .deal_list_select ul > li',function(e){

+				$("#listReviewPop").hide(); 

+				return false;

+			});

+

+			//팝업 - 딜문의상품 리스트팝업

+			$(document).on('click','.deal_listQna_open',function(e){

+			 $("#listQnaPop").show();

+			 return false;

+		 }).on('click','#listQnaPop .close, #listQnaPop .deal_list_select ul > li',function(e){

+				$("#listQnaPop").hide(); 

+				return false;

+			});

+

+			//팝업 - 딜배송상품 리스트팝업

+			$(document).on('click','.deal_listDelivery_open',function(e){

+			 $("#listDeliveryPop").show();

+			 return false;

+		 }).on('click','#listDeliveryPop .close, #listDeliveryPop .deal_list_select ul > li',function(e){

+				$("#listDeliveryPop").hide(); 

+				return false;

+			});

+

+			//팝업 - 딜상세정보 리스트팝업

+			$(document).on('click','#pdDescrpPop .deal_listDescrp_open',function(e){

+				$(this).toggleClass("active");

+			 $("#listDescrpPop").toggle();

+			 return false;

+		 }).on('click','#listDescrpPop .deal_list_select ul > li',function(e){

+				$("#pdDescrpPop .deal_listDescrp_open").removeClass("active");

+				$("#listDescrpPop").hide(); 

+				return false;

+			});

+			// ============================================================================//

+

+

+		 //탭 - 딜상품 > 상품상세정보 탭

+		 $(document).on('click','.pd.deal .tab_detail_nav ul li',function(e){

+			 $(this).addClass('active').siblings().removeClass('active');

+			 $('.pd.deal .tab_detail_cont').hide();		

+			 $('.pd.deal .tab_detail_cont').eq($(this).index()).show();

+			 

+			 //상품상세정보 호출

+			 $('.pd_review .cont_body').load('pd_review_pop.html');

+			 $('.pd_qnalist .cont_body').load('pd_qnalist_pop.html');

+			 $('.pd_delivery .cont_body').load('pd_delivery_pop.html');

+			 return false;

+		 }); 

+		

+

+			//탭 - 딜상품 > 상세정보 탭 고정

+		 $(window).scroll(function(){

+			 var scrollTop= $(window).scrollTop();

+				var tabTop=$('.pd_desc_wrap').offset().top;

+

+			 if (scrollTop >= tabTop){

+				 $('.tab_detail_nav').addClass('fix');

+			 } else {

+				 $('.tab_detail_nav').removeClass('fix');

+			 }

+		 });

+

+			/* 210409_추가 : alert 모음 */

+			$(document).on("click", "#btn_deal_purchase", function(){

+				mcxDialog.alert("1일 구매한도 수량이 초과되었습니다.", {

+						//alert("해당 상품은 구매가 불가능합니다.) : 버튼 선택 시 구매가 불가능한 경우(등급, 신규회원 여부 등)

+					sureBtnText: "확인",

+				});

+			});

+			$(document).on("click", "#btn_gift", function(){

+				mcxDialog.alert("옵션을 선택해 주세요.", {

+						//alert("선물하기는 1개의 옵션만 선택하실 수 있습니다.") : 버튼 선택 시 옵션을 2개 이상 선택한 경우

+					sureBtnText: "확인",

+				});

+			});

+			$(document).on("click", "#btn_shoppingBag_pop", function(){

+				mcxDialog.alert("옵션을 선택해 주세요.", {

+						

+					sureBtnText: "확인",

+				});

+			});

+			$(document).on("click", "#btn_now_purchase", function(){

+				mcxDialog.alert("옵션을 선택해 주세요.", {

+						

+					sureBtnText: "확인",

+				});

+			});

+			$(document).on("click", "#btn_result_coupon", function(){

+				mcxDialog.alert("쿠폰이 발급되었습니다.", {

+						//alert("죄송합니다. 쿠폰이 모두 소진되었습니다.") : 각 개별 쿠폰 선택 시 해당 쿠폰이 선착순 조건에 걸리는 경우

+						//alert("죄송합니다. 해당 쿠폰은 다운로드가 불가합니다.") : 각 개별 쿠폰 선택 시 해당 쿠폰이 다운로드 불가능한 경우

+					sureBtnText: "확인",

+				});

+			});

+			$(document).on("click", "#btn_result_coupon2", function(){

+				mcxDialog.alert("쿠폰이 발급되었습니다.", {

+						//alert("죄송합니다. 쿠폰이 모두 소진되었습니다.") : 각 개별 쿠폰 선택 시 해당 쿠폰이 선착순 조건에 걸리는 경우

+						//alert("죄송합니다. 해당 쿠폰은 다운로드가 불가합니다.") : 각 개별 쿠폰 선택 시 해당 쿠폰이 다운로드 불가능한 경우

+					sureBtnText: "확인",

+				});

+			});

+			$(document).on("click", "#btn_all_coupon", function(){

+				mcxDialog.alert("00개 쿠폰이 발급되었습니다.", {

+						

+					sureBtnText: "확인",

+				});

+			});

+			$(document).on("click", "#btn_purchase", function(){

+				mcxDialog.alert("1일 구매한도 수량이 초과되었습니다.", {

+						//alert("해당 상품은 구매가 불가능합니다.) : 버튼 선택 시 구매가 불가능한 경우(등급, 신규회원 여부 등)

+					sureBtnText: "확인",

+				});

+			});

+			/* //210409_추가 : alert 모음 */

+

+			$('.Purchase_pop .btPop_close').click(function(){

+				$('html, body').css({'overflow': 'visible', 'height': '100%'});

+				$('.container').removeClass('btPop_open');

+				autome.style.top  = 100 + "%";

+				return false;

+			});

+	 });

+		

+/*]]>*/

+</script>

+<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

+<!-- 광고 스크립트 -->

+<th:block th:replace="~{mob/common/advertisements/GoodsDetailScriptsMob :: scripts}"></th:block>

+<!-- //광고 스크립트 -->

+

+</th:block>

+

+</body>

+</html>

+ 1 - 5
src/main/webapp/WEB-INF/views/mob/goods/GoodsDetailFormMob.html
Просмотреть файл 

@@ -42,9 +42,7 @@
 
 		<!-- 210409_ 구조변경 : .pd_info, .pd_info1 추가  -->

 		<!-- 210409_ 구조변경 : .pd_info, .pd_info1 추가  -->

 		<div class="pd_info">

 		<div class="pd_info">

 			<div class="pd_info1" data-speed="10">

 			<div class="pd_info1" data-speed="10">

-

 				<div class="inner wide" th:if="${goodsImgList != null and !goodsImgList.empty}">

 				<div class="inner wide" th:if="${goodsImgList != null and !goodsImgList.empty}">

-					<!-- 제품사진영역 -->

 					<div class="thumb_box">

 					<div class="thumb_box">

 						<div class="area_slider">

 						<div class="area_slider">

 							<div class="swiper-container thumb_list">

 							<div class="swiper-container thumb_list">

@@ -61,9 +59,7 @@
 
 							</div>

 							</div>

 						</div>

 						</div>

 					</div>

 					</div>

-					<!-- //제품사진영역 -->

 				</div>

 				</div>

-

 			</div>

 			</div>

 

 

 			<div class="inner">

 			<div class="inner">

@@ -90,7 +86,7 @@
 
 						</p>

 						</p>

 						<p class="save_point" th:if="${goodsInfo.pntAmt > 0}">스타일포인트 <th:block th:text="${#numbers.formatInteger(goodsInfo.pntAmt, 0,'COMMA')}"></th:block>P 적립예정</p>

 						<p class="save_point" th:if="${goodsInfo.pntAmt > 0}">스타일포인트 <th:block th:text="${#numbers.formatInteger(goodsInfo.pntAmt, 0,'COMMA')}"></th:block>P 적립예정</p>

 						<div class="btn_group_flex">

 						<div class="btn_group_flex">

-							<div><button class="btn btn_default" id="btn_saleCoupon_pop" th:onclick="cfGoodsCouponInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.goodsType}]])">쿠폰받기</button></div>

+							<div><button type="button" class="btn btn_default" id="btn_saleCoupon_pop" th:onclick="cfGoodsCouponInfo([[${goodsInfo.goodsCd}]],[[${goodsInfo.goodsType}]])">쿠폰받기</button></div>

 						</div>

 						</div>

 					</div>

 					</div>

 				</div>

 				</div>

+ 108 - 513
src/main/webapp/WEB-INF/views/mob/goods/GoodsIncludeFormMob.html
Просмотреть файл 

@@ -2,19 +2,19 @@
 
 <html lang="ko" xmlns:th="http://www.thymeleaf.org">
 
 <html lang="ko" xmlns:th="http://www.thymeleaf.org">
 
 <!--
 
 <!--
 
  *******************************************************************************
 
  *******************************************************************************
 
- * @source  : GoodsIncludeFormMob.html
 
- * @desc    : 상품상세 Include Page - 공용
 
+ * @source: GoodsIncludeFormMob.html
 
+ * @desc: 상품상세 Include Page - 공용
 
  *============================================================================
 
  *============================================================================
 
  * STYLE24
 
  * STYLE24
 
  * Copyright(C) 2020 TSIT, All rights reserved.
 
  * Copyright(C) 2020 TSIT, All rights reserved.
 
  *============================================================================
 
  *============================================================================
 
- * VER  DATE         AUTHOR      DESCRIPTION
 
- * ===  ===========  ==========  =============================================
 
- * 1.0  2021.03.02   eskim	   최초 작성
 
+ * VERDATE AUTHORDESCRIPTION
 
+ * =====================================================================
 
+ * 1.02021.03.02 eskim	 최초 작성
 
  *******************************************************************************
 
  *******************************************************************************
 
  -->
 
  -->
 
-<!-- 상품상세 SNS  -->
 
-<th:block  th:fragment="goodsSnsForm" >
 
+<!-- 상품상세 SNS-->
 
+<th:blockth:fragment="goodsSnsForm" >
 
 <!-- toggle contents -->
 
 <!-- toggle contents -->
 
 <div class="shareWrap" th:with="stylelUrl=${@environment.getProperty('domain.front')}, imgGoodsUrl=${@environment.getProperty('upload.goods.view')}">
 
 <div class="shareWrap" th:with="stylelUrl=${@environment.getProperty('domain.front')}, imgGoodsUrl=${@environment.getProperty('upload.goods.view')}">
 
 	<div id="layerShare" class="setShare open">
 
 	<div id="layerShare" class="setShare open">
 
@@ -30,543 +30,138 @@
 
 </th:block>
 
 </th:block>
 
 
 
 <!-- 딜 상품 상품소개영역 -->
 
 <!-- 딜 상품 상품소개영역 -->
 
-<th:block  th:fragment="goodsDealComposeForm">
 
+<th:block th:fragment="goodsDealComposeForm">
 
 <!-- ***** 상품소개영역 ***** -->
 
 <!-- ***** 상품소개영역 ***** -->
 
-<div class="content pd_desc_wrap" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
 
-	<div class="cont_body">
 
-		<div class="item_descrp">
 
-			<div class="area_list">
 
-				<!-- 상품소개 탭 -->
 
-				<div class="tab_detail_nav">
 
-					<ul>
 
-						<li class="active"><a href="javascript:void(0)">상세정보</a></li>
 
-						<li><a href="javascript:void(0)">리뷰<em>(<th:block  th:text="${(goodsReviewCnt <= 9999) ? #numbers.formatInteger(goodsReviewCnt, 0,'COMMA')  : '9,999+'}"></th:block>)</em></a></li>
 
-						<li><a href="javascript:void(0)">문의<em>(<th:block  th:text="${(goodsQnaCnt <= 9999) ? #numbers.formatInteger(goodsQnaCnt, 0,'COMMA')  : '9,999+'}"></th:block>)</em></a></li>
 
-						<li><a href="javascript:void(0)">배송/교환/반품</em></a></li>
 
-					</ul>
 
+<div class="inner wide" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
 
+	<div class="pd_desc_wrap">
 
+		<div class="tab_detail_nav">
 
+			<ul>
 
+				<li class="active"><a href="javascript:void(0)">상세정보</a></li>
 
+				<li><a href="javascript:void(0)">리뷰<em><th:block  th:text="${(goodsReviewCnt <= 9999) ? #numbers.formatInteger(goodsReviewCnt, 0,'COMMA')  : '9,999+'}"></th:block></em></a></li>
 
+				<li><a href="javascript:void(0)">문의<em><th:block  th:text="${(goodsQnaCnt <= 9999) ? #numbers.formatInteger(goodsQnaCnt, 0,'COMMA')  : '9,999+'}"></th:block></em></a></li>
 
+				<li class=""><a href="javascript:void(0)">배송/반품</a></li>
 
+			</ul>
 
+		</div>
 
+		<!-- 상품상세정보 -->
 
+		<div class="tab_detail_cont pd_dealitem" style=display:block;>
 
+			<div class="itemsGrp" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
 
+				<div class="item_prod" th:each="goodsInfo, status : ${goodsDealComposeList}">
 
+					<div class="item_state">
 
+						<a href="javascript:void(0);" class="itemLink" th:onclick="fnOpenGoodsDealDetail([[${goodsInfo.goodsCd}]],[[${goodsInfo.compsGoodsCd}]])">
 
+							<div class="rank detail"><span>상품<em class="number" th:text="${#numbers.formatInteger(status.count,2)}">01</em></span></div>
 
+							<div class="itemPic">
 
+								<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=156'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 
+							</div>
 
+							<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
 
+							<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
 
+							<p class="itemPrice">
 
+								<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">89,000</span>
 
+								<th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
 
+								<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">10%</span>
 
+							</p>
 
+						</a>
 
+					<button type="button" class="btn btn_default">옵션 선택</button>
 
+					</div>
 
 				</div>
 
 				</div>
 
-				<!-- //상품소개 탭 -->
 
-				<!-- 상품상세정보 -->
 
-				<div class="tab_detail_cont pd_dealitem" style="display:block;" >
 
-					<div class="itemsGrp" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
 
-						<!--  반복 -->
 
-						<div class="item_prod" th:each="goodsInfo, status : ${goodsDealComposeList}">
 
+			</div>
 
+		</div>
 
+		<!-- //상품상세정보 -->
 
+		<!-- 상품리뷰 리스트 -->
 
+		<div class="tab_detail_cont pd_review">
 
+			<div class="cont_head">
 
+				<h3 class="sr-only">상품리뷰 목록</h3>
 
+				<div class="deal_listReview_open">
 
+					<!-- 아이템 -->
 
+					<div class="item_blk">
 
+						<div class="item_prod">
 
 							<div class="item_state">
 
 							<div class="item_state">
 
-								<a href="javascript:void(0);" class="itemLink" th:onclick="fnOpenGoodsDealDetail([[${goodsInfo.goodsCd}]],[[${goodsInfo.compsGoodsCd}]])">
 
-									<div class="shape ranker">
 
-										<span>상품<em class="number" th:text="${#numbers.formatInteger(status.count,2)}">01</em></span>
 
-									</div>
 
+								<a href="#none" class="itemLink">
 
 									<div class="itemPic">
 
 									<div class="itemPic">
 
-										<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 
+										<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
 
+									</div>
 
+									<p class="itemBrand">NBA 키즈</p>
 
+									<div class="itemName">
 
+										<span class="tit_option">[상품1]</span>
 
+										유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업
 
 									</div>
 
 									</div>
 
-									<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
 
-									<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
 
-									<p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
 
-										<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
 
-										<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
 
+									<p class="itemText">
 
+										<span class="tx1">(리뷰 9,999+)</span>
 
 									</p>
 
 									</p>
 
 								</a>
 
 								</a>
 
 							</div>
 
 							</div>
 
 						</div>
 
 						</div>
 
 					</div>
 
 					</div>
 
+					<!-- //아이템 -->
 
 				</div>
 
 				</div>
 
-				<!-- //상품상세정보 -->
 
-				<!-- 상품리뷰 리스트 -->
 
-				<div class="tab_detail_cont pd_review">
 
-					<div class="cont_head">
 
-						<h3 class="sr-only">상품리뷰 목록</h3>
 
-						<!-- 아이템선택 -->
 
-						<div class="form_field">
 
-							<div class="select_custom deal_opt_item forReview">
 
-								<div class="combo">
 
-									<div class="select">
 
-										<div class="item_prod">
 
-											<div class="item_state">
 
-												<a href="javascript:void(0)" class="itemLink">
 
-													<div class="itemPic">
 
-														<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 
-													</div>
 
-													<div class="itemName">선택</div>
 
-												</a>
 
-											</div>
 
-										</div>
 
-									</div>
 
-									<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
 
-										<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
-											th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
 
-											th:onclick="fnSelGoodsDealReview([[${goodsInfo.compsGoodsCd}]])" >
 
-											<div class="item_prod">
 
-												<div class="item_state">
 
-													<a href="#none" class="itemLink">
 
-														<div class="itemPic">
 
-															<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 
-														</div>
 
-														<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
 
-														<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
 
-														<p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
 
-															<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
 
-															<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
 
-														</p>
 
-													</a>
 
-													<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}"  th:attr="currPrice=${goodsInfo.currPrice}, selfGoodsYn=${goodsInfo.selfGoodsYn}"/>
 
-												</div>
 
-											</div>
 
-										</li> 
-									</ul>
 
-								</div>
 
-							</div>
 
-						</div>
 
-						<!-- //아이템선택 -->
 
-					</div>
 
-					<div class="cont_body" id="goodsDealReview">
 
-					</div>
 
-				</div>
 
-				<!-- //상품리뷰 리스트 -->
 
-				<!-- 상품문의 리스트 -->
 
-				<div class="tab_detail_cont pd_qnalist">
 
-					<div class="cont_head">
 
-						<h3 class="sr-only">상품문의 목록</h3>
 
-						<!-- 아이템선택 -->
 
-						<div class="form_field">
 
-							<div class="select_custom deal_opt_item forQna">
 
-								<div class="combo">
 
-									<div class="select">
 
-										<div class="item_prod">
 
-											<div class="item_state">
 
-												<a href="javascript:void(0)" class="itemLink">
 
-													<div class="itemPic">
 
-														<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 
-													</div>
 
-													<div class="itemName">선택</div>
 
-												</a>
 
-											</div>
 
-										</div>
 
-									</div>
 
-									<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
 
-										<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
-											th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
 
-											th:onclick="fnSelGoodsDealQna([[${goodsInfo.compsGoodsCd}]])" >
 
-											<div class="item_prod">
 
-												<div class="item_state">
 
-													<a href="#none" class="itemLink">
 
-														<div class="itemPic">
 
-															<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 
-														</div>
 
-														<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
 
-														<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
 
-														<p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
 
-															<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
 
-															<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
 
-														</p>
 
-													</a>
 
-													<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" />
 
-												</div>
 
-											</div>
 
-										</li> 
-									</ul>
 
-								</div>
 
-							</div>
 
-						</div>
 
-						<!-- //아이템선택 -->
 
-					</div>
 
-					<div class="cont_body" id="goodsDealQna">
 
-					</div>
 
-				</div>
 
-				<!-- //상품문의 리스트 -->
 
-				<!-- 배송/교환/반품 정보 -->
 
-				<div class="tab_detail_cont pd_delivery">
 
-					<div class="cont_head">
 
-						<h3 class="sr-only">배송/교환/반품 정보</h3>
 
-						<!-- 아이템선택 -->
 
-						<div class="form_field">
 
-							<div class="select_custom deal_opt_item forExinfo">
 
-								<div class="combo">
 
-									<div class="select">
 
-										<div class="item_prod">
 
-											<div class="item_state">
 
-												<a href="javascript:void(0)" class="itemLink">
 
-													<div class="itemPic">
 
-														<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 
-													</div>
 
-													<div class="itemName">선택</div>
 
-												</a>
 
-											</div>
 
-										</div>
 
-									</div>
 
-									<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
 
-										<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
-											th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}"
 
-											th:onclick="fnSelGoodsDealDelivery([[${goodsInfo.compsGoodsCd}]])" >
 
-											<div class="item_prod">
 
-												<div class="item_state">
 
-													<a href="#none" class="itemLink">
 
-														<div class="itemPic">
 
-															<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 
-														</div>
 
-														<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
 
-														<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
 
-														<p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
 
-															<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
 
-															<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
 
-														</p>
 
-													</a>
 
-													<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" />
 
-												</div>
 
-											</div>
 
-										</li> 
-									</ul>
 
-								</div>
 
-							</div>
 
-						</div>
 
-						<!-- //아이템선택 -->
 
-					</div>
 
-					<div class="cont_body" id="goodsDealDelivery">
 
-					</div>
 
-				</div>
 
-				<!-- //배송/교환/반품 정보 -->
 
 			</div>
 
 			</div>
 
-			<div class="area_option">
 
-				<div class="opt_wrap">
 
-					<div class="option_box">
 
-						<div class="opt_select">
 
-								<div class="form_field">
 
-									<div class="select_custom deal_opt_item">
 
-										<div class="combo">
 
-											<div class="select">
 
-												<div class="item_prod">
 
-													<div class="item_state">
 
-														<a href="javascript:void(0)" class="itemLink">
 
-															<div class="itemPic">
 
-																<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 
-															</div>
 
-															<div class="itemName">선택</div>
 
-														</a>
 
-													</div>
 
-												</div>
 
-											</div>
 
-											<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
 
-												<th:block th:each="goodsInfo, status : ${goodsDealComposeList}" th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}">
 
-												<li  th:onclick="fnOption1('Down', [[${goodsInfo.compsGoodsCd}]], [[${goodsInfo.currPrice}]] , [[${goodsInfo.selfGoodsYn}]]);"
 
-														th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90')? 'true':''}, data-soldout=${(goodsInfo.goodsStat != 'G008_90')? 'true':''}">
 
-													<div class="item_prod">
 
-														<div class="item_state">
 
-															<a href="javascript:void(0);" class="itemLink">
 
-																<div class="itemPic">
 
-																	<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 
-																</div>
 
-																<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">NBA 키즈</p>
 
-																<div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+']'}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block></div>
 
-																<p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
 
-																	<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
 
-																	<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
 
-																</p>
 
-															</a>
 
-															<input type="hidden" name="selectGoods" th:attr="goodsNm=${'[상품'+status.count+']' +goodsInfo.goodsFullNm}, currPrice=${goodsInfo.currPrice}, goodsCd=${goodsInfo.compsGoodsCd}" />
 
-														</div>
 
-													</div>
 
-												</li>
 
-												</th:block> 
-											</ul>
 
-										</div>
 
-									</div>
 
+			<div class="cont_body"></div>
 
+		</div>
 
+		<!-- //상품리뷰 리스트 -->
 
+		<!-- 상품문의 리스트 -->
 
+		<div class="tab_detail_cont pd_qnalist">
 
+			<div class="cont_head">
 
+				<h3 class="sr-only">상품문의 목록</h3>
 
+			<div class="deal_listQna_open">
 
+				 <!-- 아이템 -->
 
+				<div class="item_blk">
 
+					<div class="item_prod">
 
+						<div class="item_state">
 
+							<a href="#none" class="itemLink">
 
+								<div class="itemPic">
 
+									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
 
 								</div>
 
 								</div>
 
-								<div class="form_field">
 
-									<div class="select_custom deal_opt1" disabled>
 
-										<div class="combo">
 
-											<div class="select">선택</div>
 
-											<ul class="list" id="goodsDealOptDown1">
 
-												<!--  옵션 1 -->
 
-											</ul>
 
-										</div>
 
-									</div>
 
+								<p class="itemBrand">NBA 키즈</p>
 
+								<div class="itemName">
 
+									<span class="tit_option">[상품1]</span>
 
+									유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업
 
 								</div>
 
 								</div>
 
-								<div class="form_field">
 
-									<div class="select_custom deal_opt2" disabled>
 
-										<div class="combo">
 
-											<div class="select">선택</div>
 
-											<ul class="list" id="goodsDealOptDown2">
 
-												<!--  옵션 2 -->
 
-											</ul>
 
-										</div>
 
-									</div>
 
-								</div>
 
-						</div>
 
-						<div class="opt_result">
 
-						</div>
 
-					</div>
 
-					<div class="price_box">
 
-						<p class="number">
 
-							총&nbsp;<span>0</span>개
 
-						</p>
 
-						<p class="price">
 
-							<span>
 
-								0<em>원</em>
 
-							</span>
 
-						</p>
 
-					</div>
 
-					<div class="btn_box">
 
-						<div class="btn_group_block ui_row">
 
-						<th:block  th:if="${goodsInfo.stockQty > 0}">
 
-							<div class="ui_col_6">
 
-								<button type="button" class="btn btn_dark btn_block" id="btnGoodsWish" onclick="fnAddCart('C');"><span>쇼핑백</span></button>
 
-							</div>
 
-							<div class="ui_col_6">
 
-								<button type="button" class="btn btn_primary btn_block" id="btnGoodsCart" onclick="fnAddCart('O');"><span>바로구매</span></button>
 
-							</div>
 
-						</th:block>
 
-						<th:block  th:unless="${goodsInfo.stockQty > 0}">
 
-							<div class="ui_col_12">
 
-								<button type="button" class="btn btn_dark btn_block" disabled=""><span>SOLD OUT</span></button>
 
-							</div>
 
-						</th:block>
 
+								<p class="itemText">
 
+									<span class="tx1">(문의 9,999+)</span>
 
+								</p>
 
+							</a>
 
 						</div>
 
 						</div>
 
 					</div>
 
 					</div>
 
 				</div>
 
 				</div>
 
+				<!-- //아이템 -->
 
 			</div>
 
 			</div>
 
-		</div>
 
-	</div>
 
-</div>
 
-
 
-<!-- **************** 개별상품 상세정보 팝업 **************** -->
 
-	<div class="pd_pop full_pop pd_descrp_pop" id="layer_goods_deal_detail">
 
-		<div class="full_popup_wrap" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
 
-			<h5 class="sr-only">개별상품 상세정보 안내</h5>
 
-			<div class="btn_close">
 
-				<a href="javascript:void(0)" onclick="fnCloseGoodsDealDetail();">닫기버튼</a>
 
 			</div>
 
 			</div>
 
-			<div class="full_pop_header">
 
-				<!-- 아이템선택 -->
 
-				<div class="form_field">
 
-					<div class="select_custom deal_opt_item">
 
-						<div class="combo">
 
-							<div class="select">
 
-								<div class="item_prod">
 
-										<div class="item_state">
 
-											<a href="javascript:void(0)" class="itemLink">
 
-												<div class="itemPic">
 
-													<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 
-												</div>
 
-												<div class="itemName">선택</div>
 
-											</a>
 
-										</div>
 
-									</div>
 
-							</div>
 
-							<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
 
-								<li class="selected" th:each="goodsInfo, status : ${goodsDealComposeList}" th:attr="aria-disabled=${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'true':''}, data-soldout=${(goodsInfo.stockQty <= 0)? 'true':''}">
 
-									<div class="item_prod"  th:classappend="${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'soldout':'' }">
 
-										<div class="item_state">
 
-											<a href="javascript:void(0);" class="itemLink" th:onclick="fnGoodsDealDesc([[${goodsInfo.compsGoodsCd}]], [[${goodsInfo.currPrice}]], [[${goodsInfo.selfGoodsYn}]], [[${(goodsInfo.goodsStat != 'G008_90' or goodsInfo.stockQty <= 0)? 'Y':'N' }]])">
 
-												<div class="itemPic">
 
-													<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
 
-												</div>
 
-												<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">NBA 키즈</p>
 
-												<div class="itemName" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
 
-												<p class="itemPrice"><th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
 
-													<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">149,000</span>
 
-													<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
 
-												</p>
 
-											</a>
 
-											<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" th:attr="goodsNm=${'[상품'+status.count+']' +goodsInfo.goodsFullNm}, currPrice=${goodsInfo.currPrice}, goodsCd=${goodsInfo.compsGoodsCd}, selfGoodsYn=${goodsInfo.selfGoodsYn}"  />
 
-										</div>
 
-									</div>
 
-								</li> 
-							</ul>
 
-						</div>
 
-					</div>
 
-				</div>
 
-				<!-- //아이템선택 -->
 
-			</div>
 
-			<div class="full_pop_container" id="goodsDealDetail">
 
-				<!-- 개별상품 상세정보 팝업 내용 -->
 
-			</div>
 
-			<div class="full_pop_fix_r">
 
-				<div class="option_box">
 
-					<div class="opt_select">
 
-						<div class="form_field">
 
-							<div class="select_custom deal_opt1" disabled>
 
-								<div class="combo">
 
-									<div class="select">선택</div>
 
-									<ul class="list"  id="goodsDealOptLayer1">
 
-										<!--  옵션 1 -->
 
-									</ul>
 
+		<div class="cont_body"></div>
 
+		</div>
 
+		<!-- //상품문의 리스트 -->
 
+		<!-- 배송/교환/반품 정보 -->
 
+		<div class="tab_detail_cont pd_delivery">
 
+			<div class="cont_head">
 
+				<h3 class="sr-only">배송/교환/반품 정보</h3>
 
+			<div class="deal_listDelivery_open">
 
+				<!-- 아이템 -->
 
+				<div class="item_blk">
 
+					<div class="item_prod">
 
+						<div class="item_state">
 
+							<a href="#none" class="itemLink">
 
+								<div class="itemPic">
 
+									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
 
 								</div>
 
 								</div>
 
-							</div>
 
-						</div>
 
-						<div class="form_field">
 
-							<div class="select_custom deal_opt2" disabled>
 
-								<div class="combo">
 
-									<div class="select">선택</div>
 
-									<ul class="list"  id="goodsDealOptLayer2">
 
-										<!--  옵션 2 -->
 
-									</ul>
 
+								<p class="itemBrand">NBA 키즈</p>
 
+								<div class="itemName">
 
+									<span class="tit_option">[상품1]</span>
 
+									유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업
 
 								</div>
 
 								</div>
 
-							</div>
 
-						</div>
 
-					</div>
 
-					<div class="opt_result">
 
-					</div>
 
-				</div>
 
-				<div class="price_box">
 
-					<p class="number">
 
-						총&nbsp;<span>0</span>개
 
-					</p>
 
-					<p class="price">
 
-						<span>
 
-							0<em>원</em>
 
-						</span>
 
-					</p>
 
-				</div>
 
-				<div class="btn_box">
 
-					<div class="btn_group_block ui_row">
 
-					<th:block  th:if="${goodsInfo.stockQty > 0}">
 
-						<div class="ui_col_6">
 
-							<button type="button" class="btn btn_dark btn_block" id="btnGoodsWish" onclick="fnAddCart('C');"><span>쇼핑백</span></button>
 
-						</div>
 
-						<div class="ui_col_6">
 
-							<button type="button" class="btn btn_primary btn_block" id="btnGoodsCart" onclick="fnAddCart('O');"><span>바로구매</span></button>
 
+							</a>
 
 						</div>
 
 						</div>
 
-					</th:block>
 
-					<th:block  th:unless="${goodsInfo.stockQty > 0}">
 
-						<div class="ui_col_12">
 
-							<button type="button" class="btn btn_dark btn_block" disabled=""><span>SOLD OUT</span></button>
 
-						</div>
 
-					</th:block>
 
 					</div>
 
 					</div>
 
 				</div>
 
 				</div>
 
+				<!-- //아이템 -->
 
+			</div>
 
 			</div>
 
 			</div>
 
+		<div class="cont_body"></div>
 
 		</div>
 
 		</div>
 
-				
+		<!-- //배송/교환/반품 정보 -->
 
 	</div>
 
 	</div>
 
-	<!-- **************** 개별상품 상세정보 팝업 **************** -->
 
+</div>
 
 <script th:inline="javascript">
 
 <script th:inline="javascript">
 
 /*<![CDATA[*/
 
 /*<![CDATA[*/
 
 	
 	
-	// 구성 상품 상세 상품평
 
-	var fnGoodsDetailReview = function(params) {
 
-		gagajf.ajaxSubmit("/goods/detail/review/frame", "html", "goodsDealReview", params);
 
-	}
 
-	
-	// 상품평 상품선택시
 
-	var fnSelGoodsDealReview = function(goodsCd){
 
-		var params = new Object();
 
-		params.goodsCd = goodsCd;
 
-		fnGoodsDetailReview(params);  // ajax html
 
-	}
 
-	
-	// 구성 상품 상세 문의
 
-	var fnGoodsDetailQna = function(params) {
 
-		gagajf.ajaxSubmit("/goods/detail/qna/frame", "html", "goodsDealQna", params);
 
-	}
 
-	
-	// 문의 상품선택시
 
-	var fnSelGoodsDealQna = function(goodsCd){
 
-		var params = new Object();
 
-		params.goodsCd = goodsCd;
 
-		fnGoodsDetailQna(params);  // ajax html
 
-	}
 
-	
-	// 구성 상품 상세 배송정보
 
-	var fnGoodsDetailDelivery = function(params) {
 
-		gagajf.ajaxSubmit("/goods/detail/delivery/frame", "html", "goodsDealDelivery", params);
 
-	}
 
-	
-	// 배송정보 상품선택시
 
-	var fnSelGoodsDealDelivery = function(goodsCd){
 
-		var params = new Object();
 
-		params.goodsCd = goodsCd;
 
-		fnGoodsDetailDelivery(params);  // ajax html
 
-	}
 
-	
-	// 상품선택시 상품상세내용 변경
 
-	var fnOpenGoodsDealDetail = function(goodsCd, compsGoodsCd){
 
-		
-		// 콤보박스 선택 처리
 
-		let $selObj = $('#layer_goods_deal_detail').find('.select_custom.deal_opt_item');
 
-		
-		// 탭별 선택시 기본 상품 설정
 
-		let selIdx = 0;
 
-		let selfGoodsYn = '';
 
-		let currPrice = 0;
 
-		let soldoutYn = "N";
 
-		$selObj.find('.combo .list li').each(function() { 
-			if ($(this).find('input[name=selectGoods]').val() == compsGoodsCd){
 
-				selfGoodsYn = $(this).find('input[name=selectGoods]').attr('selfGoodsYn');
 
-				currPrice = $(this).find('input[name=selectGoods]').attr('currPrice');
 
-				if ($(this).find('.item_prod').hasClass('soldout')) soldoutYn = "Y";
 
-				return false;
 
-			}
 
-			selIdx ++;
 
-		});
 
-		
-		$selObj.find('.combo .list li').eq(selIdx).trigger("click");
 
-		
-		// 상세노출
 
-		fnGoodsDealDesc(compsGoodsCd, currPrice, selfGoodsYn, soldoutYn);
 
-/* 		
-		if (!soldout){
 
-			// 옵션1 처리
 
-			fnOption1("layer", compsGoodsCd, currPrice, selfGoodsYn);	
-		}
 
- */		
-		
-		let $obj = $('.pd_detail .opt_result'); 
-		let $taget = $('.full_pop_fix_r .opt_result');
 
-		$taget.html($obj.html());
 
-		
-		fnSetTotalPrice();
 
-		
-		$('body').addClass('lock');
 
-		$("#layer_goods_deal_detail").show(); 
-		
-	}
 
-	
-	// 상세 레이어 창닫기
 
-	var fnCloseGoodsDealDetail = function(){
 
-		// 선택값 본창에 넘기기
 
-		let $obj = $('.full_pop_fix_r .opt_result');
 
-		let $taget = $('.pd_detail .opt_result');
 
-		$taget.html($obj.html());
 
-		
-		fnSetTotalPrice();
 
-		
-		$('body').removeClass('lock');
 
-		$('#goodsDealDetail').html('');
 
-		$("#layer_goods_deal_detail").hide();
 
-	}
 
-	
-	// 구성 상품 상세 
-	var fnGoodsDealDetail2 = function(params) {
 
-		gagajf.ajaxSubmit("/goods/deal/detail/info/frame", "html", "goodsDealDetail", params);
 
-	}
 
-	
-	// 레이어에서 상품선택시
 
-	var fnGoodsDealDesc = function(goodsCd, currPrice, selfGoodsYn , soldout){
 
-		var params = new Object();
 
-		params.goodsCd = goodsCd;
 
-		params.adminYn = "Y";
 
-		fnGoodsDealDetail2(params);  // ajax html
 
-		if (soldout == "N"){
 
-			// 옵션1 처리
 
-			fnOption1("layer", goodsCd, currPrice, selfGoodsYn);
 
-		}
 
-		
-	}
 
-	
-	$(document).ready( function() {
 
 
 
-		/* var params = new Object();
 
-		params.goodsCd = [[${params.compsGoodsCd}]];
 
-		params.adminYn = [[${params.adminYn}]];
 
-		fnGoodsDealDetail(params);  // ajax html
 
-		
-		let $obj = $('.pd_detail .opt_result'); 
-		let $taget = $('.full_pop_fix_r .opt_result');
 
-		$taget.html($obj.html());
 
-		
-		fnSetTotalPrice(); */
 
-		
-	});
 
-	
 	
 	
 /*]]>*/
 
 /*]]>*/
 
 </script>
 
 </script>

+ 1 - 1
src/main/webapp/WEB-INF/views/web/goods/GoodsDealDetailFormWeb.html
Просмотреть файл 

@@ -279,7 +279,7 @@
 
 	<!-- 바로구매 장바구니 등록 정보 저장을 위한 form -->

 	<!-- 바로구매 장바구니 등록 정보 저장을 위한 form -->

 	<form id="directOrderForm" method="POST" action="/order/noMember"></form>

 	<form id="directOrderForm" method="POST" action="/order/noMember"></form>

 </div>

 </div>

- 

+

 <script th:inline="javascript">

 <script th:inline="javascript">

 /*<![CDATA[*/

 /*<![CDATA[*/

+ 110 - 20
src/main/webapp/ux/mo/css/common_m.css
Просмотреть файл 

@@ -187,7 +187,7 @@ i.big {font-size:18px; position:relative; top:2px;}
 
 .t_help {color: #888888 !important;}
 
 .t_help {color: #888888 !important;}
 
 .t_info {color: #888888 !important;}
 
 .t_info {color: #888888 !important;}
 
 .t_err {color: #fd4802 !important;}
 
 .t_err {color: #fd4802 !important;}
 
-.t_err::before {content: '';display: inline-block; width:17px; height:17px; background:url('/images/mo/ico_err.png') no-repeat right top;margin: 0px 2px 0 0px;position: relative;top: 4px;left: 0;right: auto;bottom: auto;}
 
+.t_err::before {content: '';display: inline-block; width:1.5rem; height:1.5rem; background:url('/images/mo/ico_err.png') no-repeat right top;margin: 0px 0.6rem 0 0px;position: relative;top: 0.3rem;left: 0;right: auto;bottom: auto; background-size: 100%;}
 
 .t_success {color: #333333 !important;}
 
 .t_success {color: #333333 !important;}
 
 
 
 /* textarea */
 
 /* textarea */
 
@@ -301,7 +301,7 @@ input[type="file"] {
 
   overflow: hidden; clip:rect(0,0,0,0); border: 0;
 
   overflow: hidden; clip:rect(0,0,0,0); border: 0;
 
 }
 
 }
 
 .fileAdd{
 
 .fileAdd{
 
-  width: 72px;height:72px;border: 1px solid #dddddd;float: right;font-size: 0;
 
+  width: 72px;height:72px;border: 0.1rem solid #dddddd;float: left;font-size: 0;
 
   background: url('/images/mo/ico_btn_file.png') no-repeat;background-position: 50% 50%;
 
   background: url('/images/mo/ico_btn_file.png') no-repeat;background-position: 50% 50%;
 
   -webkit-appearance: none; -moz-appearance: none; appearance: none;cursor: pointer; background-size:30px;
 
   -webkit-appearance: none; -moz-appearance: none; appearance: none;cursor: pointer; background-size:30px;
 
 }
 
 }
 
@@ -319,12 +319,13 @@ input[type="file"] {
 
   transform: translate(-50%, -50%);cursor: pointer;
 
   transform: translate(-50%, -50%);cursor: pointer;
 
 }
 
 }
 
 .removes {
 
 .removes {
 
-  display: block;width:20px;height:20px;font-size: 0;text-align: center;cursor: pointer;background-color: #666666;
 
+  display: block;width:2rem;height:2rem;font-size: 0;text-align: center;cursor: pointer;background-color: #666666;
 
   position: absolute;top: 0;bottom: auto;left: auto;right: 0;
 
   position: absolute;top: 0;bottom: auto;left: auto;right: 0;
 
 }
 
 }
 
 .removes::after {
 
 .removes::after {
 
-  content: '';display: inline-block;width: 20px;height: 20px;
 
+  content: '';display: inline-block;width: 2rem;height: 2rem;
 
   background: url('/images/mo/ico_btn_cls1.png') no-repeat;background-position: 50% 50%;
 
   background: url('/images/mo/ico_btn_cls1.png') no-repeat;background-position: 50% 50%;
 
+  background-size:2rem;
 
 }
 
 }
 
 
 
 
 
@@ -583,7 +584,7 @@ top: 9px;border-color: transparent transparent #888888 transparent;}
 
 .ico_ipin::before {content: ""; width:20px; height:20px; background:url(/images/mo/ico_join_bg.png) no-repeat -20px 0; background-size:cover;}
 
 .ico_ipin::before {content: ""; width:20px; height:20px; background:url(/images/mo/ico_join_bg.png) no-repeat -20px 0; background-size:cover;}
 
 
 
 /* btn : btn_default, btn_more, btn_go, btn_waiting */
 
 /* btn : btn_default, btn_more, btn_go, btn_waiting */
 
-.btn{display: inline-block; height: 5.0rem; margin-bottom: 0; padding: 0.4rem 1.3rem; font-size: 1.4rem; font-weight: 400; line-height: 1; color: #333333; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; background-image: none; background-color: #ffffff; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: #dddddd; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px; -ms-touch-action: manipulation;touch-action: manipulation; -webkit-transition: all 200ms ease;-moz-transition: all 200ms ease;-ms-transition: all 200ms ease;-o-transition: all 200ms ease;transition: all 200ms ease; cursor: pointer; }
 
+.btn{display: inline-block; height: 5.0rem; margin-bottom: 0; padding: 0.4rem 1.3rem; font-size: 1.4rem; font-weight: 400; line-height: 1 !important; color: #333333; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; background-image: none; background-color: #ffffff; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: #dddddd; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px; -ms-touch-action: manipulation;touch-action: manipulation; -webkit-transition: all 200ms ease;-moz-transition: all 200ms ease;-ms-transition: all 200ms ease;-o-transition: all 200ms ease;transition: all 200ms ease; cursor: pointer; }
 
 .btn.mini{width: auto !important; display: inline-block !important; height: 3.0rem; font-size: 1.2rem; font-weight: 300; }
 
 .btn.mini{width: auto !important; display: inline-block !important; height: 3.0rem; font-size: 1.2rem; font-weight: 300; }
 
 .btn_gost{position: relative; display: block; width: 100%; height: 50px; color: #333333; border-color: #dddddd; background-color: transparent; }
 
 .btn_gost{position: relative; display: block; width: 100%; height: 50px; color: #333333; border-color: #dddddd; background-color: transparent; }
 
 .btn_more{position: relative; display: block; width: 100%; height: 50px; color: #888; border: #999 solid 1px;}
 
 .btn_more{position: relative; display: block; width: 100%; height: 50px; color: #888; border: #999 solid 1px;}
 
@@ -1035,7 +1036,7 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 
 .list_col2 > li{float: left; width: 50%;}
 
 .list_col2 > li{float: left; width: 50%;}
 
 .list_col3::after{content: ''; display: block; clear: both;}
 
 .list_col3::after{content: ''; display: block; clear: both;}
 
 .list_col3 > li{float: left; width: 33.33%;}
 
 .list_col3 > li{float: left; width: 33.33%;}
 
-.txt_ref{margin-top: 10px; color: #666; padding-left: 1.5rem; position: relative;}
 
+.txt_ref{margin-top: 1.5rem;padding-left: 1.5rem;font-size: 1.1rem;color: #666;font-weight: 200;position: relative;}
 
 .txt_ref::before{content: '※'; display: block; position: absolute; left: 0; top: 0;}
 
 .txt_ref::before{content: '※'; display: block; position: absolute; left: 0; top: 0;}
 
 .txt_blt{padding-left: 8px; position: relative;}
 
 .txt_blt{padding-left: 8px; position: relative;}
 
 .txt_blt::before{content: ''; display: block; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 3px; height: 3px; background-color: #666;}
 
 .txt_blt::before{content: ''; display: block; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 3px; height: 3px; background-color: #666;}
 
@@ -1186,7 +1187,7 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 
 .fold_head .fold_tit::after {content: ''; display: block; clear: both;}
 
 .fold_head .fold_tit::after {content: ''; display: block; clear: both;}
 
 
 
 .foldGroup {width: 100%; margin-bottom: 20px;}
 
 .foldGroup {width: 100%; margin-bottom: 20px;}
 
-.foldGroup > ul > li {position: relative; width: 100%; margin: 0px; border: 0px; border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; box-sizing: border-box;}
 
+.foldGroup > ul > li {position: relative; width: 100%; margin: 0px; border: 0px; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; box-sizing: border-box;}
 
 .foldGroup > ul > li:first-child {border-top: 1px solid #fff;}
 
 .foldGroup > ul > li:first-child {border-top: 1px solid #fff;}
 
 .foldGroup > ul > li+li {margin:0; border-top:0px solid; box-sizing:border-box;}
 
 .foldGroup > ul > li+li {margin:0; border-top:0px solid; box-sizing:border-box;}
 
 .foldGroup .fold_head,
 
 .foldGroup .fold_head,
 
@@ -1302,14 +1303,14 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 
 
 
 /*alert confirm*/
 
 /*alert confirm*/
 
 .dialog-mobile {
 
 .dialog-mobile {
 
-	padding: 0 1.2rem 4rem 1.2rem;
 
+	padding: 0;
 
+	margin-left: -45%;
 
 	text-align:center;
 
 	text-align:center;
 
 	position: fixed;
 
 	position: fixed;
 
 	top: 50%;
 
 	top: 50%;
 
 	left: 0;
 
 	left: 0;
 
 	z-index: 1001;
 
 	z-index: 1001;
 
-	min-width:13.3rem;
 
-	max-width: 95%;
 
+	width: 90%;
 
 	background-color: rgba(255, 255, 255,1);
 
 	background-color: rgba(255, 255, 255,1);
 
 	border-radius: 0px;
 
 	border-radius: 0px;
 
 	-ms-transform: translate3d(0, 0, 0);
 
 	-ms-transform: translate3d(0, 0, 0);
 
@@ -1339,7 +1340,7 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 
 }
 
 }
 
 .dialog-mobile .dialog-content {
 
 .dialog-mobile .dialog-content {
 
 	position: relative;
 
 	position: relative;
 
-	padding:5.0rem 0 4.0rem 0;
 
+	padding:5.0rem 2.0rem 4.0rem 2.0rem;
 
 	line-height: 2em;
 
 	line-height: 2em;
 
 	text-align: left;
 
 	text-align: left;
 
 	color: #333333;
 
 	color: #333333;
 
@@ -1354,10 +1355,10 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 
 .dialog-mobile .dialog-cancel-button {
 
 .dialog-mobile .dialog-cancel-button {
 
 	display:inline-block;
 
 	display:inline-block;
 
 	position: relative;
 
 	position: relative;
 
-	margin:0 0.5rem;
 
-	padding:0 3.0rem;
 
-	min-width: 7.0rem;
 
-	height: 3.8rem;
 
+	margin:0;
 
+	padding:0;
 
+    width: 100%;
 
+    height: 3.8rem;
 
 	line-height: 3.8rem;
 
 	line-height: 3.8rem;
 
 	text-align: center;
 
 	text-align: center;
 
 	font-size:1.4rem;
 
 	font-size:1.4rem;
 
@@ -1375,19 +1376,106 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 
 	color: #000;
 
 	color: #000;
 
 	background: #fff;
 
 	background: #fff;
 
 	border:1px solid #999;
 
 	border:1px solid #999;
 
-	min-width:10.0rem;
 
+	/* min-width:10.0rem; */
 
 }
 
 }
 
 .dialog-mobile .dialog-sure-button{
 
 .dialog-mobile .dialog-sure-button{
 
 	color: #fff;
 
 	color: #fff;
 
 	background:#000;
 
 	background:#000;
 
 	border:1px solid #000;
 
 	border:1px solid #000;
 
-	min-width:10.0rem;
 
+	/* min-width:10.0rem; */
 
 }
 
 }
 
 .dialog-mobile button[i='1']{
 
 .dialog-mobile button[i='1']{
 
+	color: #000 !important;
 
+	background:#fff !important;
 
+	border:1px solid #777;
 
+	/* min-width:10.0rem; */
 
+}
 
+.dialog-mobile button[class$='-button']:nth-last-child(2){width: 50%;}
 
+.dialog-mobile button[class$='-button'] +  button[class$='-button']{width: 50%;}
 
+
 
+
 
+/* alert 투명도 */
 
+.dialog-mobile.trans {
 
+	padding: 0 1.2rem 2.5rem 1.2rem;
 
+	margin-left: -45%;
 
+	text-align:center;
 
+	position: fixed;
 
+	top: 50%;
 
+	left: auto;
 
+	right: auto;
 
+	z-index: 1001;
 
+	min-width:13.3rem;
 
+	max-width: 90%;
 
+	background-color: rgb(14 14 14 / 0.8);
 
+	border-radius: 0px;
 
+	-ms-transform: translate3d(0, 0, 0);
 
+	-webkit-transform: translate3d(0, 0, 0);
 
+	transform: translate3d(0, 0, 0);
 
+}
 
+.dialog-mobile.trans .dialog-title {
 
+    padding: 0em 1em 0.5em;
 
+    text-align: center;
 
+    color: #ffffff;
 
+	font-size: 1.6rem;
 
+	font-weight: 200;
 
+    border-radius: 0.5rem 0.5rem 0 0;
 
+}
 
+
 
+.dialog-mobile.trans .dialog-content {
 
+	position: relative;
 
+	padding:2.5rem 0 0rem 0;
 
+	line-height: 2em;
 
+	text-align: left;
 
+	color: #ffffff;
 
+	font-size:1.4rem;
 
+	text-align:center;
 
+}
 
+.dialog-mobile.trans .dialog-content em {
 
+	color:#df6400
 
+}
 
+.dialog-mobile.trans .dialog-button,
 
+.dialog-mobile.trans .dialog-sure-button,
 
+.dialog-mobile.trans .dialog-cancel-button {
 
+	display:inline-block;
 
+	position: relative;
 
+	margin:0 0.5rem;
 
+	padding:0 3.0rem;
 
+	min-width: 7.0rem;
 
+	height: 3.8rem;
 
+	line-height: 3.8rem;
 
+	text-align: center;
 
+	font-size:1.4rem;
 
+	font-weight: 200;
 
+	cursor:pointer;
 
+	border-radius:0rem;
 
+}
 
+.dialog-mobile.trans .dialog-button{
 
+    color: #fff;
 
+    background: transparent;
 
+    border: 1px solid #dddddd;
 
+	min-width:10.0rem;
 
+	width: auto;
 
+}
 
+.dialog-mobile.trans .dialog-cancel-button {
 
+	color: #fff;
 
+    background: transparent;
 
+    border: 1px solid #dddddd;
 
+	min-width:10.0rem;
 
+	width: auto;
 
+}
 
+.dialog-mobile.trans .dialog-sure-button{
 
+	color: #fff;
 
+    background: transparent;
 
+    border: 1px solid #dddddd;
 
+	min-width:10.0rem;
 
+	width: auto;
 
+}
 
+.dialog-mobile.trans button[i='1']{
 
 	color: #000 !important;
 
 	color: #000 !important;
 
 	background:#fff !important;
 
 	background:#fff !important;
 
 	border:1px solid #777;
 
 	border:1px solid #777;
 
 	min-width:10.0rem;
 
 	min-width:10.0rem;
 
+	width: auto;
 
 }
 
 }
 
 
 
 /* 닫기 아이콘 */
 
 /* 닫기 아이콘 */
 
@@ -1905,11 +1993,12 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 
 
 
 /* etc_closingApp */
 
 /* etc_closingApp */
 
 .app-only .guidance{width: auto;}
 
 .app-only .guidance{width: auto;}
 
-.app-only .guidance{overflow: hidden;position: fixed;bottom: 0;left: 50%;z-index: 9;width: 88.888%;height: auto;margin-left: -44.444%;padding: 1.2rem 0 1.0rem;background-color: rgba(0,0,0,0.8);text-align: center;opacity: 0;}
 
+.app-only .guidance{overflow: hidden;position: fixed;bottom: -4rem;left: 50%;z-index: 9;width: 88.888%;height: auto;margin-left: -44.444%;padding: 1.2rem 0 1.0rem;background-color: rgba(0,0,0,0.8);text-align: center;opacity: 0;}
 
 .app-only .guidance:after{content: '';position: absolute;top: 0;bottom: 15px;left: 10px;width: 100%;height: 100%;z-index: -1;}
 
 .app-only .guidance:after{content: '';position: absolute;top: 0;bottom: 15px;left: 10px;width: 100%;height: 100%;z-index: -1;}
 
 .app-only .guidance{
 
 .app-only .guidance{
 
     box-shadow: 0 0px 30px rgb(0 0 0 / 20%), 0 0px 30px rgb(0 0 0 / 20%);
 
     box-shadow: 0 0px 30px rgb(0 0 0 / 20%), 0 0px 30px rgb(0 0 0 / 20%);
 
-    mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
 
+	/* 마스크 미사용 
+	mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
 
     -webkit-mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
 
     -webkit-mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
 
 	mask-size: 100% 0%, 2vh 2vh, calc(100% - 1.9vh) 100%, 100% calc(100% - 1.9vh);
 
 	mask-size: 100% 0%, 2vh 2vh, calc(100% - 1.9vh) 100%, 100% calc(100% - 1.9vh);
 
     -webkit-mask-size: 100% 0%, 2vh 2vh, calc(100% - 1.9vh) 100%, 100% calc(100% - 1.9vh);
 
     -webkit-mask-size: 100% 0%, 2vh 2vh, calc(100% - 1.9vh) 100%, 100% calc(100% - 1.9vh);
 
@@ -1917,6 +2006,7 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 
     -webkit-mask-position: bottom left, bottom right, top left, top right;
 
     -webkit-mask-position: bottom left, bottom right, top left, top right;
 
     mask-repeat: no-repeat;
 
     mask-repeat: no-repeat;
 
     -webkit-mask-repeat: no-repeat;
 
     -webkit-mask-repeat: no-repeat;
 
+	*/
 
 }
 
 }
 
 .app-only .guidance p{font-size:1.3rem;font-weight: 300;color: #fff;}
 
 .app-only .guidance p{font-size:1.3rem;font-weight: 300;color: #fff;}
 
 .app-only .guidance p.tit{font-size: 1.4rem;margin-bottom: 1.53rem;}
 
 .app-only .guidance p.tit{font-size: 1.4rem;margin-bottom: 1.53rem;}
 
@@ -1936,7 +2026,7 @@ button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background:
 
 /* mobile type */
 
 /* mobile type */
 
 /* etc_toastPopup */
 
 /* etc_toastPopup */
 
 .guidance{width: auto;}
 
 .guidance{width: auto;}
 
-.guidance{overflow: hidden;position: fixed;bottom: 0;left: 50%;z-index: 9;width: 88.888%;height: auto;margin-left: -44.444%;padding: 1.2rem 0 1.0rem;background-color: rgba(0,0,0,0.8);text-align: center;opacity: 0;}
 
+.guidance{overflow: hidden;position: fixed;bottom: -4rem;left: 50%;z-index: 9;width: 88.888%;height: auto;margin-left: -44.444%;padding: 1.2rem 0 1.0rem;background-color: rgba(0,0,0,0.8);text-align: center;opacity: 0;}
 
 .guidance:after{content: '';position: absolute;top: 0;bottom: 15px;left: 10px;width: 100%;height: 100%;z-index: -1;}
 
 .guidance:after{content: '';position: absolute;top: 0;bottom: 15px;left: 10px;width: 100%;height: 100%;z-index: -1;}
 
 .guidance{box-shadow: 0 0px 30px rgb(0 0 0 / 20%), 0 0px 30px rgb(0 0 0 / 20%);}
 
 .guidance{box-shadow: 0 0px 30px rgb(0 0 0 / 20%), 0 0px 30px rgb(0 0 0 / 20%);}
 
 .guidance p{font-size:1.3rem;font-weight: 300;color: #fff;}
 
 .guidance p{font-size:1.3rem;font-weight: 300;color: #fff;}

+ 77 - 34
src/main/webapp/ux/mo/css/layout_m.css
Просмотреть файл 

@@ -126,7 +126,7 @@
 
 .cs_contactUs_my .header .close a{position:absolute; top:50%; right:0; margin-top:-0.8rem; width:1.8rem; height:1.8rem; font-size:0; background-color:#fff;}
 
 .cs_contactUs_my .header .close a{position:absolute; top:50%; right:0; margin-top:-0.8rem; width:1.8rem; height:1.8rem; font-size:0; background-color:#fff;}
 
 .cs_contactUs_my .inner { padding-bottom: 0;}
 
 .cs_contactUs_my .inner { padding-bottom: 0;}
 
 .cs_contactUs_my .select_dress span { width: 0.7rem; height: 0.7rem; background: url(/images/mo/ico_star02.png) no-repeat center; background-size: 0.7rem auto; display: inline-block; margin: 0 0 0 0.5rem; }
 
 .cs_contactUs_my .select_dress span { width: 0.7rem; height: 0.7rem; background: url(/images/mo/ico_star02.png) no-repeat center; background-size: 0.7rem auto; display: inline-block; margin: 0 0 0 0.5rem; }
 
-.cs_contactUs_my input { width: 100%; height: 4.5rem; box-sizing: border-box; font-size: 1.4rem;}
 
+.cs_contactUs_my input[type="text"] { width: 100%; height: 4.5rem; box-sizing: border-box; font-size: 1.4rem;}
 
 .cs_contactUs_my textarea { width: 100%; height: 15rem; box-sizing: border-box; padding: 1.5rem; font-size: 1.4rem;}
 
 .cs_contactUs_my textarea { width: 100%; height: 15rem; box-sizing: border-box; padding: 1.5rem; font-size: 1.4rem;}
 
 .cs_contactUs_my .form_field { margin: 0 0 1.2rem; }
 
 .cs_contactUs_my .form_field { margin: 0 0 1.2rem; }
 
 .cs_contactUs_my .info_addfile ul li {font-size: 1.2rem; color: #c6c6c6;}
 
 .cs_contactUs_my .info_addfile ul li {font-size: 1.2rem; color: #c6c6c6;}
 
@@ -193,6 +193,8 @@
 
 
 
 /* ============================================ 회원가입 ============================================ */
 
 /* ============================================ 회원가입 ============================================ */
 
 /* mb공통*/
 
 /* mb공통*/
 
+.mb .form_control {height: 4.5rem;}
 
+.mb h2.title {text-align: center; padding-bottom: 1.7rem; font-size: 2rem; font-weight: 500;}
 
 .mb .close{position: relative; height:5.2rem; margin-bottom: -1.2rem;}
 
 .mb .close{position: relative; height:5.2rem; margin-bottom: -1.2rem;}
 
 .mb .close span{position:absolute; left:50%; margin-left:-0.05rem; display:inline-block; width:0.1rem; height:1.8rem; background-color:#000; transform:rotate(45deg);}
 
 .mb .close span{position:absolute; left:50%; margin-left:-0.05rem; display:inline-block; width:0.1rem; height:1.8rem; background-color:#000; transform:rotate(45deg);}
 
 .mb .close span:first-child{transform:rotate(-45deg);}
 
 .mb .close span:first-child{transform:rotate(-45deg);}
 
@@ -201,8 +203,9 @@
 
 .mb .form_wrap .form_field{margin-top:1rem;}
 
 .mb .form_wrap .form_field{margin-top:1rem;}
 
 .mb .ui_row{margin-bottom:0;}
 
 .mb .ui_row{margin-bottom:0;}
 
 .mb input[type="text"], .mb input[type="password"] {float: none;}
 
 .mb input[type="text"], .mb input[type="password"] {float: none;}
 
-.mb .sns_wrap{margin-top:4rem;}
 
-.mb .sns_wrap .login_utill{display:inline-block; font-size:0;}
 
+.mb .sns_wrap{margin-top:3rem;}
 
+.mb .sns_wrap > h5 {font-size: 1.4rem;}
 
+.mb .sns_wrap .login_utill{display:inline-block; font-size:0; margin-top: 2rem;}
 
 .mb .sns_wrap .login_utill > li{display:inline-block; margin-left:3.5rem;}
 
 .mb .sns_wrap .login_utill > li{display:inline-block; margin-left:3.5rem;}
 
 .mb .sns_wrap .login_utill > li:first-child{margin-left:0;}
 
 .mb .sns_wrap .login_utill > li:first-child{margin-left:0;}
 
 .mb .sns_wrap .login_utill > li a{font-size:1.2rem;}
 
 .mb .sns_wrap .login_utill > li a{font-size:1.2rem;}
 
@@ -215,6 +218,7 @@
 
 .mb .sns_wrap .login_utill > li.lu_yes24 a .ico{background:#f5f5f5;}
 
 .mb .sns_wrap .login_utill > li.lu_yes24 a .ico{background:#f5f5f5;}
 
 .mb .sns_wrap .login_utill > li.lu_yes24 a .ico:before{width:3.4rem; height:2.2rem; background-position: -3.6rem 0;}
 
 .mb .sns_wrap .login_utill > li.lu_yes24 a .ico:before{width:3.4rem; height:2.2rem; background-position: -3.6rem 0;}
 
 .mb .help_block{margin-top:1rem; font-size:1.2rem;}
 
 .mb .help_block{margin-top:1rem; font-size:1.2rem;}
 
+.mb .help_block .t_err {}
 
 .mb .btn_nonMb {display: inline-block; color: #888; font-size:1.2rem; font-weight: 200; border-bottom: 0.1rem solid #888;}
 
 .mb .btn_nonMb {display: inline-block; color: #888; font-size:1.2rem; font-weight: 200; border-bottom: 0.1rem solid #888;}
 
 .mb .tab_btn{margin-bottom:4rem; overflow:hidden;}
 
 .mb .tab_btn{margin-bottom:4rem; overflow:hidden;}
 
 .mb .tab_btn > li{position:relative; float:left; width:50%; height:4.5rem; line-height:4.5rem; background-color:#f5f5f5; color:#888; text-align:center;}
 
 .mb .tab_btn > li{position:relative; float:left; width:50%; height:4.5rem; line-height:4.5rem; background-color:#f5f5f5; color:#888; text-align:center;}
 
@@ -224,7 +228,8 @@
 
 .mb .radio_tab{margin-bottom:2rem;}
 
 .mb .radio_tab{margin-bottom:2rem;}
 
 .mb .radio_nav{margin-bottom:2.4rem;}
 
 .mb .radio_nav{margin-bottom:2.4rem;}
 
 .mb .form_sign_up{margin-top:4rem;}
 
 .mb .form_sign_up{margin-top:4rem;}
 
-.mb .form_sign_up .c_primary{font-size:1.6rem; font-weight:600;}
 
+.mb .form_sign_up p:last-child {color:#888; margin-top: 1rem;}
 
+.mb .form_sign_up .c_primary{font-size:1.6rem; font-weight:500;}
 
 .mb .form_wrap .form_info {text-align:center;}
 
 .mb .form_wrap .form_info {text-align:center;}
 
 .mb .form_wrap .form_info p {font-size:1.4rem; font-weight:300; letter-spacing:-0.025em; line-height:1.6;}
 
 .mb .form_wrap .form_info p {font-size:1.4rem; font-weight:300; letter-spacing:-0.025em; line-height:1.6;}
 
 .mb .form_wrap .form_info p.t_info {font-size:1.2rem; color:#888; font-weight:300; line-height:1.625;}
 
 .mb .form_wrap .form_info p.t_info {font-size:1.2rem; color:#888; font-weight:300; line-height:1.625;}
 
@@ -238,7 +243,9 @@
 
 .mb .find_result .form_print_bar ul li span.t_span {width:7.5rem; color:#888;}	
 .mb .find_result .form_print_bar ul li span.t_span {width:7.5rem; color:#888;}	
 .mb .btn_group_block {float:none; margin-top:3rem; display:flex;}
 
 .mb .btn_group_block {float:none; margin-top:3rem; display:flex;}
 
 .mb [class^="ico_content_"]::before {margin: 0px auto 1.5rem;}
 
 .mb [class^="ico_content_"]::before {margin: 0px auto 1.5rem;}
 
-.ico_content_find::before {width:3.6rem; height:4.6rem; background:url(../images/ico_content_find.png) no-repeat 50% 50%;}
 
+.ico_content_find::before {width:3.6rem; height:4.6rem; background:url(/images/mo/ico_content_find.png) no-repeat 50% 50%;}
 
+
 
+.mb .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 
 
 /* mb_login */
 
 /* mb_login */
 
 .mb .mb_login .login_check{font-size:1.2rem; line-height:1.8rem;}
 
 .mb .mb_login .login_check{font-size:1.2rem; line-height:1.8rem;}
 
@@ -270,19 +277,19 @@
 
 .mb_idInquiry_1 .form_field{flex-flow:row wrap; justify-content: space-between;}
 
 .mb_idInquiry_1 .form_field{flex-flow:row wrap; justify-content: space-between;}
 
 .mb_idInquiry_1 .form_field .ui_col_4{padding:0.5rem; width:auto; box-sizing:border-box;}
 
 .mb_idInquiry_1 .form_field .ui_col_4{padding:0.5rem; width:auto; box-sizing:border-box;}
 
 .mb_idInquiry_1 .txt{margin:4rem 0; text-align:center; color:#888888;}
 
 .mb_idInquiry_1 .txt{margin:4rem 0; text-align:center; color:#888888;}
 
-.mb_idInquiry_1 .btn{width:100%; height:4.5rem;}
 
+.mb_idInquiry_1 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 
 
 /* mb_idInquiry_2 */
 
 /* mb_idInquiry_2 */
 
-.mb_idInquiry_2 .btn{width:100%; height:4.5rem;}
 
+.mb_idInquiry_2 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 
 
 /* mb_idInquiry_3 */
 
 /* mb_idInquiry_3 */
 
-.mb_idInquiry_3 .btn{width:100%; height:4.5rem;}
 
+.mb_idInquiry_3 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 
 
 /* mb_idInquiry_4 */
 
 /* mb_idInquiry_4 */
 
-.mb_idInquiry_4 .btn{width:100%; height:4.5rem;}
 
+.mb_idInquiry_4 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 
 
 /* mb_idInquiry_5 */
 
 /* mb_idInquiry_5 */
 
-.mb_idInquiry_5 .btn{width:100%; height:4.5rem;}
 
+.mb_idInquiry_5 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 
 
 /* mb_idInquiry_6 */
 
 /* mb_idInquiry_6 */
 
 .dormant .form_wrap .form_btn::after {clear:both; display:block; content:'';}
 
 .dormant .form_wrap .form_btn::after {clear:both; display:block; content:'';}
 
@@ -293,22 +300,23 @@
 
 .dormant .form_wrap .form_summary {margin-top:3rem;}
 
 .dormant .form_wrap .form_summary {margin-top:3rem;}
 
 .dormant .form_wrap .form_summary strong {font-size:1.4rem; font-weight:300;}
 
 .dormant .form_wrap .form_summary strong {font-size:1.4rem; font-weight:300;}
 
 .dormant .form_wrap .form_summary p {margin-top:0.5rem; font-size:1.2rem; color:#888; font-weight:200; line-height:1.6; word-break:keep-all;}
 
 .dormant .form_wrap .form_summary p {margin-top:0.5rem; font-size:1.2rem; color:#888; font-weight:200; line-height:1.6; word-break:keep-all;}
 
-.mb_idInquiry_6 .btn{width:100%; height:4.5rem;}
 
+.mb_idInquiry_6 .btn{width:100%; height:5.2rem;}
 
 
 
 /* mb_idInquiry_7 */
 
 /* mb_idInquiry_7 */
 
-.mb_idInquiry_7 .btn{width:100%; height:4.5rem;}
 
+.mb_idInquiry_7 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 
 
 /* mb_idInquiry_8 */
 
 /* mb_idInquiry_8 */
 
 .mb_idInquiry_8 .form_summary {padding-top:3rem; border-top: 0.1rem solid #ddd;}
 
 .mb_idInquiry_8 .form_summary {padding-top:3rem; border-top: 0.1rem solid #ddd;}
 
-.mb_idInquiry_8 .form_summary .txt {position:relative; margin-bottom:0.6rem; font-size:1.2rem;  line-height:1;}
 
+.mb_idInquiry_8 .form_summary .txt {position:relative; margin-bottom:0.8rem; font-size:1.3rem;  line-height:1;}
 
 .mb_idInquiry_8 .form_summary .txt span.c_primary {font-size:1.2rem; font-weight:700;}
 
 .mb_idInquiry_8 .form_summary .txt span.c_primary {font-size:1.2rem; font-weight:700;}
 
 .mb_idInquiry_8 .form_summary .btn {position:absolute; top:0.1rem; right:0; font-size:1.2rem; font-weight:300; border-color:#a7a7a7;}
 
 .mb_idInquiry_8 .form_summary .btn {position:absolute; top:0.1rem; right:0; font-size:1.2rem; font-weight:300; border-color:#a7a7a7;}
 
-.mb_idInquiry_8 .form_summary .t_info {display:block; color:#888; font-size:1.2rem}
 
+.mb_idInquiry_8 .form_summary .t_info {display:block; color:#888; font-size:1.1rem}
 
 .mb_idInquiry_8 .form_summary .t_info:nth-of-type(4){padding-right:8rem;}
 
 .mb_idInquiry_8 .form_summary .t_info:nth-of-type(4){padding-right:8rem;}
 
-.mb_idInquiry_8 .btn{width:100%; height:4.5rem;}
 
+.mb_idInquiry_8 .btn_group_flex {margin-bottom: 3rem;}
 
+.mb_idInquiry_8 .btn_group_flex > div > .btn{width:100%; height:4.5rem;}
 
 
 
 /* mb_join_1 */
 
 /* mb_join_1 */
 
-.mb_join_1 .btn{width:100%; height:4.5rem;}
 
+.mb_join_1 .btn_group_flex > div > .btn {width:100%; height:4.5rem;}
 
 
 
 /* mb_join_2 */
 
 /* mb_join_2 */
 
 .mb .mb_join_2 .form_field{display:block;}
 
 .mb .mb_join_2 .form_field{display:block;}
 
@@ -322,8 +330,21 @@
 
 .mb .mb_join_3 .form_wrap .print_bar{padding:3.4rem 0; background: #f5f5f5; text-align:center;}
 
 .mb .mb_join_3 .form_wrap .print_bar{padding:3.4rem 0; background: #f5f5f5; text-align:center;}
 
 .mb .mb_join_3 .btn{width:100%; height:4.5rem;}
 
 .mb .mb_join_3 .btn{width:100%; height:4.5rem;}
 
 
 
-
 
-
 
+/* mb_campaign */
 
+.mb .campaign .form_wrap .form_info p {line-height: 1.4;}
 
+.mb .campaign .form_wrap .form_info p.t_info {color:#666 !important; margin-top: 1rem;}
 
+.campaign .info_txt {padding:1.8rem; margin-top:3rem; background:#f5f5f5;}
 
+.campaign .info_txt ul li {position:relative; padding-left:0.8rem; margin-bottom:0.8rem; color:#888; font-size:1.1rem; font-weight:200; line-height:1.4;}
 
+.campaign .info_txt ul li:last-child {margin-bottom:0;}
 
+.campaign .info_txt ul li:after {content:''; position:absolute; top:7px; left:0; background:#858585; width:0.2rem; height:0.2rem;}
 
+.campaign .info_txt ul li .mb_name {font-weight:300;}
 
+.campaign .info_txt ul li em {font-weight:300;}
 
+.campaign .btn_group_flex > div > .btn.btn_primary {border:1px solid #fd4802}
 
+.btn_group_flex > div > .btn.btn_primary {border:1px solid #fd4802}
 
+
 
+.mb_join_2 .input_wrap .btn_hp_certi {position: absolute; top: 0; right: 0; height: 4.5rem; margin-left: 0; font-size: 1.4rem; font-weight: 300;}
 
+.mb .t_err {position: relative; padding-left: 2.1rem;}
 
+.mb .t_err::before {position: absolute; top: 0.1rem; left: 0; margin: 0;}
 
 
 
 /* ================================================================== 제품상세 =========================================================================== */
 
 /* ================================================================== 제품상세 =========================================================================== */
 
 /* common으로 이사갈것들 */
 
 /* common으로 이사갈것들 */
 
@@ -754,10 +775,10 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 .pd .item_prod{display:block;}
 
 .pd .item_prod{display:block;}
 
 .pd .itemBrand{width:calc(100% - 10%);}
 
 .pd .itemBrand{width:calc(100% - 10%);}
 
 .pd .select_custom .combo .list{max-height:100%;}
 
 .pd .select_custom .combo .list{max-height:100%;}
 
-.opt_name {margin-bottom:-2rem;}
 
+.opt_name {margin-bottom:0.4rem;}
 
 .form_field.mb20{margin-bottom:2rem !important}
 
 .form_field.mb20{margin-bottom:2rem !important}
 
 /* 210412 */
 
 /* 210412 */
 
-.pd_pop.Purchase_pop div[class$="Option"] .form_wrap .form_field .select{color:#777777}
 
+.pd_pop.Purchase_pop div[class$="Option"] .form_wrap .form_field .select{color:#777777; text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden; padding-right:4rem;}
 
 .pd_pop.Purchase_pop div[class$="Option"] .form_wrap .form_field .select:before{color:#333333}
 
 .pd_pop.Purchase_pop div[class$="Option"] .form_wrap .form_field .select:before{color:#333333}
 
 .pd_dealitem .item_prod .itemName{max-height: 3.3rem;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;white-space: normal;overflow-wrap: break-word;width: calc(100% - 10%);}
 
 .pd_dealitem .item_prod .itemName{max-height: 3.3rem;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;white-space: normal;overflow-wrap: break-word;width: calc(100% - 10%);}
 
 .pd_together .item_prod .itemName{max-height: 3.3rem;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;white-space: normal;overflow-wrap: break-word;width: calc(100% - 10%);}
 
 .pd_together .item_prod .itemName{max-height: 3.3rem;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;white-space: normal;overflow-wrap: break-word;width: calc(100% - 10%);}
 
@@ -765,16 +786,35 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 .push_restock_pop .select::-ms-expand{display:none;}
 
 .push_restock_pop .select::-ms-expand{display:none;}
 
 .pd_detail .option_box .opt_size .form_field input[type="radio"] + label.on{border:1px solid #fd4802}
 
 .pd_detail .option_box .opt_size .form_field input[type="radio"] + label.on{border:1px solid #fd4802}
 
 .pd_line_box{padding:0.7rem; background:#f5f5f5; width:100%; margin:0 -2rem; display:block; position: absolute; bottom:0;}
 
 .pd_line_box{padding:0.7rem; background:#f5f5f5; width:100%; margin:0 -2rem; display:block; position: absolute; bottom:0;}
 
-/*.pd_detail .inner{margin:0 !important;}*/
 
 /* 210413 */
 
 /* 210413 */
 
-/*.cs_contactUs_my .form_field .select_dress::before{content:"*"; position:absolute; left:14.6rem; font-size:1.8rem; top:0.5rem; color:red}*/
 
-/*.cs_contactUs_my .form_field input{content:"*"; position:absolute; left:14.6rem; font-size:1.7rem; top:0.4rem; color:red}*/
 
 .cs .cs_contactUs_1 .foldGroup .fold_head a{padding:1.8rem 2rem 1.4rem;}
 
 .cs .cs_contactUs_1 .foldGroup .fold_head a{padding:1.8rem 2rem 1.4rem;}
 
 .cs .cs_notice_1 .foldGroup .fold_head a{padding:1.8rem 2rem 1.4rem;}
 
 .cs .cs_notice_1 .foldGroup .fold_head a{padding:1.8rem 2rem 1.4rem;}
 
 .cs .cs_product_1 .foldGroup .fold_head a{padding:1.8rem 2rem 1.4rem;}
 
 .cs .cs_product_1 .foldGroup .fold_head a{padding:1.8rem 2rem 1.4rem;}
 
 .pd .Purchase_pop .btPop_foot{position: absolute;width: 100%;bottom: 0; background: #fff;}
 
 .pd .Purchase_pop .btPop_foot{position: absolute;width: 100%;bottom: 0; background: #fff;}
 
 .cs .pnb ul{padding-left:1rem}
 
 .cs .pnb ul{padding-left:1rem}
 
 .push_restock_pop .item_prod .itemPercent{left:4.5rem;}
 
 .push_restock_pop .item_prod .itemPercent{left:4.5rem;}
 
+/* 210414 */
 
+.pd .Purchase_pop{transition:none;}
 
+.cs_contactUs_my .imgUpload{margin-left:0.6rem;}
 
+.cs_contactUs_my .imgUpload:first-child{margin: 0;}
 
+.cs .fold_head {font-family:'Noto Sans kr', sans-serif;}
 
+.cs .fold_head .fold_tit .lap1 span{font-weight:200; font-size:1rem;}
 
+.cs .fold_head .fold_tit .lap2 span{font-weight:500;}
 
+.cs .fold_head .fold_state{padding:0.2rem 0.3rem;}
 
+.cs .fold_head .data{font-family: 'LATO', 'Noto Sans kr', sans-serif;}
 
+.Purchase_pop .select_custom .combo .list>li{padding:1.2rem; line-height:2rem; word-wrap: break-word;}
 
+/* 210415 */
 
+.dp .popup_box .button_list.clear button{width:100% !important;}
 
+.dp .open_categori a{display: inline-block;font-size: 1.2rem;font-weight: 300;padding-right: 1.4rem;background: url(/images/mo/ico_sort_arrow.png) no-repeat right center;background-size: 0.7rem 0.43rem;}
 
+.dp .Bulletship_foot .clear{background:#f5f5f5; margin:4rem -2rem; padding:4rem 0 2.5rem 2rem;}
 
+.dp .dp_Bulletship .inner:first-child{margin-bottom:0; padding-bottom:0;}
 
+.dp .dp_Bulletship .items_option{padding-top:0; margin:0 2rem;}
 
+.dp .items_option #filter{height:4.5rem; border:0.1rem solid #dddddd;}
 
+.dp .dp_exhibition .items_option #filter{font-size:1.2rem; color:#666666; width:100%;line-height:4.5rem; padding:0 1.5rem; background-color:#fff;}
 
+.dp .dp_Bulletship .items_option #filter{font-size:1.2rem; color:#666666; width:100%;line-height:4.5rem; padding:0 1.5rem; background-color:#fff;}
 
+.Purchase_pop .select_custom .combo .list>li[data-soldout="true"]::after{top:1rem}
 
+
 
+
 
 
 
 
 
 /* 플롯팅 메뉴 > 구매하기 */
 
 /* 플롯팅 메뉴 > 구매하기 */
 
@@ -800,7 +840,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 .pd_pop.Purchase_pop .btPop_body{max-height:calc(100% - 14%);}
 
 .pd_pop.Purchase_pop .btPop_body{max-height:calc(100% - 14%);}
 
 .btPop_open .btPop.Purchase_pop{bottom:0; top:auto!important; height:84%;}
 
 .btPop_open .btPop.Purchase_pop{bottom:0; top:auto!important; height:84%;}
 
 .btPop_open .btPop.Purchase_pop .btPop_close{width:1.6rem; height:1.6rem; background-image: url(/images/mo/ico_pop_cls_w.png);}
 
 .btPop_open .btPop.Purchase_pop .btPop_close{width:1.6rem; height:1.6rem; background-image: url(/images/mo/ico_pop_cls_w.png);}
 
-.pd_pop.Purchase_pop .select_custom .combo .list{position:relative; top:0;}
 
+.pd_pop.Purchase_pop .select_custom .combo .list{position:relative; top:0; margin-top:-0.6rem}
 
 .pd_pop.Purchase_pop{}
 
 .pd_pop.Purchase_pop{}
 
 .pd_pop.Purchase_pop .header{padding:0; font-size:0;}
 
 .pd_pop.Purchase_pop .header{padding:0; font-size:0;}
 
 .pd_pop.Purchase_pop .option_box .opt_color{padding-top:0}
 
 .pd_pop.Purchase_pop .option_box .opt_color{padding-top:0}
 
@@ -884,6 +924,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 .modal.pd_pop.salecoupon_pop .coupon_list {line-height:1;}
 
 .modal.pd_pop.salecoupon_pop .coupon_list {line-height:1;}
 
 .modal.pd_pop.salecoupon_pop .coupon_list li {margin-top:1rem}
 
 .modal.pd_pop.salecoupon_pop .coupon_list li {margin-top:1rem}
 
 .modal.pd_pop.salecoupon_pop .coupon_list li:first-child {margin-top:0}
 
 .modal.pd_pop.salecoupon_pop .coupon_list li:first-child {margin-top:0}
 
+.modal.pd_pop.salecoupon_pop .coupon_list li:last-child{margin-bottom:3rem;}
 
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon {position:relative; border:1px solid #ddd; box-sizing:border-box; background:#fff;}
 
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon {position:relative; border:1px solid #ddd; box-sizing:border-box; background:#fff;}
 
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon > div {position:relative; padding:3rem 0;}
 
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon > div {position:relative; padding:3rem 0;}
 
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon > div::after {content:''; position:absolute; top:50%; right:-1px; transform:translateY(-50%); width:1.5rem; height:3.0rem; background:#fff; z-index:2; border:1px solid #ddd; border-right:none; border-top-left-radius:1.5rem; border-bottom-left-radius:1.5rem; overflow:hidden;}
 
 .modal.pd_pop.salecoupon_pop .coupon_list li .coupon > div::after {content:''; position:absolute; top:50%; right:-1px; transform:translateY(-50%); width:1.5rem; height:3.0rem; background:#fff; z-index:2; border:1px solid #ddd; border-right:none; border-top-left-radius:1.5rem; border-bottom-left-radius:1.5rem; overflow:hidden;}
 
@@ -903,7 +944,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 .modal.pd_pop.salecoupon_pop button:disabled span:nth-child(1){display:none;}
 
 .modal.pd_pop.salecoupon_pop button:disabled span:nth-child(1){display:none;}
 
 .modal.pd_pop.salecoupon_pop button:disabled span:nth-child(2){display:block;}
 
 .modal.pd_pop.salecoupon_pop button:disabled span:nth-child(2){display:block;}
 
 .modal.pd_pop.salecoupon_pop button:disabled{background:#aaa!important; border-color:#aaa!important; opacity:1;}
 
 .modal.pd_pop.salecoupon_pop button:disabled{background:#aaa!important; border-color:#aaa!important; opacity:1;}
 
-.modal.pd_pop.salecoupon_pop .modal-footer button{color: #ffffff; background-color: #fd4802; border-color: #fd4802;}
 
+.modal.pd_pop.salecoupon_pop .modal-footer button{color: #ffffff; background-color: #fd4802; border-color: #fd4802; position:absolute; bottom:0; z-index:999;}
 
 .modal.pd_pop.salecoupon_pop .modal-footer button > span{padding:0;}
 
 .modal.pd_pop.salecoupon_pop .modal-footer button > span{padding:0;}
 
 .modal.pd_pop.salecoupon_pop .modal-footer button > span::after{background:none;}
 
 .modal.pd_pop.salecoupon_pop .modal-footer button > span::after{background:none;}
 
 
 
@@ -1130,7 +1171,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 .pd_review_pop .pd_review .area_rv_empty .btn_group_flex{position:fixed; width: 100%; bottom: 0; left:0; margin-top: 0; z-index:10;}
 
 .pd_review_pop .pd_review .area_rv_empty .btn_group_flex{position:fixed; width: 100%; bottom: 0; left:0; margin-top: 0; z-index:10;}
 
 .pd_review{background:#f5f5f5;}
 
 .pd_review{background:#f5f5f5;}
 
 .pd_review.best,
 
 .pd_review.best,
 
-.pd_review.photo{background:#fff; position:absolute; bottom:0; z-index:999;}
 
+.pd_review.photo{background:#fff; position:relative; bottom:0; z-index:999; max-height:35rem;}
 
 .pd_review [class^="area_rv"]{padding:4rem 1.33rem; margin-bottom:1.2rem; background:#fff; line-height: 1.4;}
 
 .pd_review [class^="area_rv"]{padding:4rem 1.33rem; margin-bottom:1.2rem; background:#fff; line-height: 1.4;}
 
 .pd_review .thumb {display:block; position:relative; width:100%; height:0px; line-height:0; font-size:0; padding-top:150%; background:#f5f5f5; overflow:hidden;}
 
 .pd_review .thumb {display:block; position:relative; width:100%; height:0px; line-height:0; font-size:0; padding-top:150%; background:#f5f5f5; overflow:hidden;}
 
 .pd_review .pic .thumb {padding-top:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
 
 .pd_review .pic .thumb {padding-top:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
 
@@ -1312,7 +1353,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 .modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list .response_box2{display:none;}
 
 .modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list .response_box2{display:none;}
 
 .modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list .reply_box{display:none;}
 
 .modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list .reply_box{display:none;}
 
 /*.modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list.active{position:absolute; bottom:0; z-index:999;}*/
 
 /*.modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list.active{position:absolute; bottom:0; z-index:999;}*/
 
-.modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list.active {bottom:0; z-index:999;}
 
+.modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list.active {bottom:0; z-index:999; transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);}
 
 .modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list.active .txt_review_box{height:auto; overflow:hidden;}
 
 .modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list.active .txt_review_box{height:auto; overflow:hidden;}
 
 .modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list.active .response_box2{display:block;}
 
 .modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list.active .response_box2{display:block;}
 
 .modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list.active .reply_box{display:block;}
 
 .modal.pd_pop[class*="reviewdetail_pop"] .pd_review .area_rv_all .review_list.active .reply_box{display:block;}
 
@@ -1481,7 +1522,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 .dp .dp_subtitle > a{position:relative; padding-right:2rem;}
 
 .dp .dp_subtitle > a{position:relative; padding-right:2rem;}
 
 .dp .dp_subtitle > a:before{content:''; position:absolute; right:0; top:50%; margin-top:-1px; width:0.7rem; height:1.3rem; background:url(/images/mo/ico_dp_arrow.png) center center no-repeat; background-size:contain; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
 
 .dp .dp_subtitle > a:before{content:''; position:absolute; right:0; top:50%; margin-top:-1px; width:0.7rem; height:1.3rem; background:url(/images/mo/ico_dp_arrow.png) center center no-repeat; background-size:contain; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
 
 .dp .category_nav {margin-bottom:0 2rem -1.3rem; display: flex; justify-content: center; border-bottom:1px solid #eeeeee;}
 
 .dp .category_nav {margin-bottom:0 2rem -1.3rem; display: flex; justify-content: center; border-bottom:1px solid #eeeeee;}
 
-.dp .category_nav ul{padding:0 2rem; display:flex;}
 
+.dp .category_nav ul{padding:0 2rem; display:flex; margin-left:-5.3rem;}
 
 .dp .category_nav ul::after {content:''; display: block; clear: both;}
 
 .dp .category_nav ul::after {content:''; display: block; clear: both;}
 
 .dp .category_nav ul li {margin-right:2rem; }
 
 .dp .category_nav ul li {margin-right:2rem; }
 
 .dp .category_nav ul li button {position: relative; padding:1.5rem 0; font-size:1.4rem; font-weight:300; color:#222;}
 
 .dp .category_nav ul li button {position: relative; padding:1.5rem 0; font-size:1.4rem; font-weight:300; color:#222;}
 
@@ -1512,7 +1553,8 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 
 
 /* 전시상품리스트 공통(default) */
 
 /* 전시상품리스트 공통(default) */
 
 .dp .dp_list .sub_category{padding:0.8rem 0;}
 
 .dp .dp_list .sub_category{padding:0.8rem 0;}
 
-.dp .dp_list .sub_category .cate_wrap{white-space:nowrap; overflow-x:auto;}
 
+.dp .dp_list .sub_category .cate_wrap{white-space:nowrap; overflow-x:auto; -ms-overflow-style: none;}
 
+.dp .dp_list .sub_category .cate_wrap::-webkit-scrollbar{display:none;}
 
 .dp .dp_list .sub_category .cate_wrap a{float:none; display:inline-block; margin-bottom:0;}
 
 .dp .dp_list .sub_category .cate_wrap a{float:none; display:inline-block; margin-bottom:0;}
 
 .dp .dp_list .sub_category .cate_wrap a:first-child{margin-left:2rem;}
 
 .dp .dp_list .sub_category .cate_wrap a:first-child{margin-left:2rem;}
 
 .dp .dp_list .sub_category .cate_wrap a:last-child{margin-right:2rem;}
 
 .dp .dp_list .sub_category .cate_wrap a:last-child{margin-right:2rem;}
 
@@ -1556,7 +1598,8 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 /* 룩북 - dp_lookbook */
 
 /* 룩북 - dp_lookbook */
 
 .dp .dp_lookbook .count_wrap {padding: 1.5rem 0 2rem;}
 
 .dp .dp_lookbook .count_wrap {padding: 1.5rem 0 2rem;}
 
 .dp .dp_lookbook .swiper_filter.brand{position:relative; margin-bottom:2rem;}
 
 .dp .dp_lookbook .swiper_filter.brand{position:relative; margin-bottom:2rem;}
 
-.dp .dp_lookbook .swiper_filter.brand .cate_wrap{white-space:nowrap; overflow-x:auto; background-color:#fff; font-size:0;}
 
+.dp .dp_lookbook .swiper_filter.brand .cate_wrap{white-space:nowrap; overflow-x:auto; background-color:#fff; font-size:0; -ms-overflow-style: none;}
 
+.dp .dp_lookbook .swiper_filter.brand .cate_wrap::-webkit-scrollbar{display:none;}
 
 .dp .dp_lookbook .swiper_filter.brand .cate_wrap a {position:relative; display:inline-block; background: #fff; margin-left:0.5rem; padding:0.8em 3.4rem 0.8rem 1.2rem; font-size: 1.2rem; color: #222; border-radius:2rem; line-height: 1; border:1px solid #dddddd;}
 
 .dp .dp_lookbook .swiper_filter.brand .cate_wrap a {position:relative; display:inline-block; background: #fff; margin-left:0.5rem; padding:0.8em 3.4rem 0.8rem 1.2rem; font-size: 1.2rem; color: #222; border-radius:2rem; line-height: 1; border:1px solid #dddddd;}
 
 .dp .dp_lookbook .swiper_filter.brand .cate_wrap a:after{content:''; position:absolute; right:1.2rem; top:50%; width:0.8rem; height:0.8rem; background:url(/images/mo/ico_filter_remove.png) center center no-repeat; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
 
 .dp .dp_lookbook .swiper_filter.brand .cate_wrap a:after{content:''; position:absolute; right:1.2rem; top:50%; width:0.8rem; height:0.8rem; background:url(/images/mo/ico_filter_remove.png) center center no-repeat; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
 
 .dp .dp_lookbook .swiper_filter.brand .cate_wrap a:first-child{margin-left:0;}
 
 .dp .dp_lookbook .swiper_filter.brand .cate_wrap a:first-child{margin-left:0;}
 
@@ -1893,7 +1936,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 .filter_body > ul > li .sizebox strong{display:block;}
 
 .filter_body > ul > li .sizebox strong{display:block;}
 
 /* 필터세부사항(컬러) */
 
 /* 필터세부사항(컬러) */
 
 .filter_body > ul > li .colorbox{padding:2rem 1rem; display:flex; flex-wrap: wrap;}
 
 .filter_body > ul > li .colorbox{padding:2rem 1rem; display:flex; flex-wrap: wrap;}
 
-.filter_body > ul > li .colorbox li {margin:0.5rem 0.5rem;}
 
+.filter_body > ul > li .colorbox li {margin:0.5rem 0.5rem; position:relative;}
 
 .filter_body > ul > li .colorbox li .color-check input {position: absolute; display: block;overflow: hidden; height: 1px; width: 1px; clip: rect(1px, 1px, 1px, 1px);}
 
 .filter_body > ul > li .colorbox li .color-check input {position: absolute; display: block;overflow: hidden; height: 1px; width: 1px; clip: rect(1px, 1px, 1px, 1px);}
 
 .filter_body > ul > li .colorbox li .color-check [class*="pdColor"], 
 .filter_body > ul > li .colorbox li .color-check [class*="pdColor"], 
 .filter_body > ul > li .filter_content [class*="pdColor"] {position: relative; display: inline-block; width:2.4rem; height: 2.4rem; cursor: pointer;}
 
 .filter_body > ul > li .filter_content [class*="pdColor"] {position: relative; display: inline-block; width:2.4rem; height: 2.4rem; cursor: pointer;}
 
@@ -2066,7 +2109,7 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 .br .pnb_mo > ul{display:flex; padding:0 0.8rem; height:5rem; line-height:5rem; background-color:#222222;}
 
 .br .pnb_mo > ul{display:flex; padding:0 0.8rem; height:5rem; line-height:5rem; background-color:#222222;}
 
 .br .pnb_mo > ul > li > a{font-size:1.6rem; color:#686868; font-weight:500; padding:0 1.2rem;}
 
 .br .pnb_mo > ul > li > a{font-size:1.6rem; color:#686868; font-weight:500; padding:0 1.2rem;}
 
 .br .pnb_mo > ul > li > a.on{color:#fff}
 
 .br .pnb_mo > ul > li > a.on{color:#fff}
 
-.br .pnb_mo > button{background:url(/images/mo/br_plus.png) no-repeat; width:3.8rem; height:1.9rem; background-color:red; text-indent:-9999px; position:absolute; z-index:9; top:1.6rem; right:0; background-color:#222222;}
 
+.br .pnb_mo > button{background:url(/images/mo/ico_btn_expand.png) center top/1.8rem 2.0rem no-repeat; width:3.8rem; height:1.9rem; background-color:red; text-indent:-9999px; position:absolute; z-index:9; top:1.6rem; right:0; background-color:#222222;}
 
 .br_main{background-color:#fff;}
 
 .br_main{background-color:#fff;}
 
 /* br_main *
 
 /* br_main *
 
 /* br_main - 메인배너&info */
 
 /* br_main - 메인배너&info */
 
@@ -2187,9 +2230,9 @@ header .htop.trans{position:absolute; background:transparent !important;}
 
 .br_search_wrap .hmenu .brand_si .swiper-pagination-bullet{margin-right:0.8rem;}
 
 .br_search_wrap .hmenu .brand_si .swiper-pagination-bullet{margin-right:0.8rem;}
 
 .br_search_wrap .hmenu .brand_si .swiper-pagination-bullet:last-child{margin-right:0;}
 
 .br_search_wrap .hmenu .brand_si .swiper-pagination-bullet:last-child{margin-right:0;}
 
 .br_search_wrap .brand_title { width: 100%; height: 4.3rem; margin: 2.4rem 0 0; border-bottom: 0.2rem solid black; }
 
 .br_search_wrap .brand_title { width: 100%; height: 4.3rem; margin: 2.4rem 0 0; border-bottom: 0.2rem solid black; }
 
-.br_search_wrap .brand_title input { width: 100%; height: 4.3rem; float: left; border: none;  padding: 0; font-size: 1.6rem; font-weight: 100; color: #888; border-bottom:2px solid #000; margin-bottom:1.6rem;}
 
+.br_search_wrap .brand_title input { width: 100%; height: 4.3rem; float: left; border: none;  padding: 0; font-size: 1.6rem; font-weight: 100; color: #000; border-bottom:2px solid #000; margin-bottom:1.6rem;}
 
 .br_search_wrap .brand_title .btn_x { width: 2rem; height: 2rem; background: #aaa; border-radius: 1rem; color: #fff; font-size: 1rem; position: absolute; top: 1.2rem; right: 5rem; }
 
 .br_search_wrap .brand_title .btn_x { width: 2rem; height: 2rem; background: #aaa; border-radius: 1rem; color: #fff; font-size: 1rem; position: absolute; top: 1.2rem; right: 5rem; }
 
-.br_search_wrap .brand_title button img { width: 2rem; height: 2rem; position: absolute; top: 1.2rem; right: 2rem;}
 
+.br_search_wrap .brand_title button img { width: 2rem; height: 2rem; position: absolute; top: 1.2rem; right: 2.2rem;}
 
 .br_search_wrap .inner .result {padding-bottom:3rem; margin: 1.5rem 0 1rem; border-bottom:0.1rem solid #dddddd;}
 
 .br_search_wrap .inner .result {padding-bottom:3rem; margin: 1.5rem 0 1rem; border-bottom:0.1rem solid #dddddd;}
 
 .br_search_wrap .inner:last-child .result {border:0px none;}
 
 .br_search_wrap .inner:last-child .result {border:0px none;}
 
 .br_search_wrap .inner .result .title_abbr { font-size: 1.6rem; font-weight: 700; margin-bottom:0.6rem;}
 
 .br_search_wrap .inner .result .title_abbr { font-size: 1.6rem; font-weight: 700; margin-bottom:0.6rem;}

+ 44 - 28
src/main/webapp/ux/mo/css/style24_m.css
Просмотреть файл 

@@ -532,6 +532,7 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 .ev .renew_check_tit h3 {font-size: 1.4rem; margin-bottom: 1.5rem; font-weight: 500;}
 
 .ev .renew_check_tit h3 {font-size: 1.4rem; margin-bottom: 1.5rem; font-weight: 500;}
 
 .ev .renew_check_tit .period {font-size: 1.1rem; color: #888;}
 
 .ev .renew_check_tit .period {font-size: 1.1rem; color: #888;}
 
 .ev .renew_check_tit .share_btn {position: absolute; top: 14px; right: 20px; width: 1.4rem;}
 
 .ev .renew_check_tit .share_btn {position: absolute; top: 14px; right: 20px; width: 1.4rem;}
 
+.ev textarea, .ev input {color: #222;}
 
 
 
 /* ev_안내사항_공통 */
 
 /* ev_안내사항_공통 */
 
 .announce_txt {position: relative; padding-top: 2.5rem;}
 
 .announce_txt {position: relative; padding-top: 2.5rem;}
 
@@ -571,8 +572,8 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 .ev .event_list .list li {margin-bottom: 0;}
 
 .ev .event_list .list li {margin-bottom: 0;}
 
 .ev .event_list .list .nodata {display: block; padding:7.6rem 0 14rem; width: 100%; text-align: center; margin-right: 0;}
 
 .ev .event_list .list .nodata {display: block; padding:7.6rem 0 14rem; width: 100%; text-align: center; margin-right: 0;}
 
 .ev .event_list .list .nodata img {width: 4rem;}
 
 .ev .event_list .list .nodata img {width: 4rem;}
 
-.ev .event_list .list .nodata .txt_box::before {content:''; display:block; width:4rem; height:5.5rem; margin:0 auto 24px; background:url('/images/mo/ico_content_find02.png') no-repeat; background-size:100%;}
 
-.ev .event_list .list .nodata .txt_box p {display: block; margin: 1.5rem 0 2.3rem; font-size: 1.3rem; color: #666; font-weight: 300;}
 
+.ev .event_list .list .nodata .txt_box::before {content:''; display:none; width:4rem; height:5.5rem; margin:0 auto 24px; background:url('/images/mo/ico_content_find02.png') no-repeat; background-size:100%;}
 
+.ev .event_list .list .nodata .txt_box p {display: block; margin: 1.5rem 0 2.3rem; font-size: 1.3rem; color: #888; font-weight: 300;}
 
 .ev .event_list .list .nodata .txt_box a {display: inline-block; padding: 1rem 1.2rem; border:1px solid #a7a7a7; font-size: 1.1rem; color: #222; font-weight: 300;}
 
 .ev .event_list .list .nodata .txt_box a {display: inline-block; padding: 1rem 1.2rem; border:1px solid #a7a7a7; font-size: 1.1rem; color: #222; font-weight: 300;}
 
 
 
 /* ev_renew_1 */
 
 /* ev_renew_1 */
 
@@ -591,6 +592,7 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 .ev .other_ev_slide .tit {position: relative; margin-bottom: 2rem; text-align: center;}
 
 .ev .other_ev_slide .tit {position: relative; margin-bottom: 2rem; text-align: center;}
 
 .ev .other_ev_slide .tit h4 {font-size: 1.6rem; font-weight: 500;}
 
 .ev .other_ev_slide .tit h4 {font-size: 1.6rem; font-weight: 500;}
 
 .ev .other_ev_slide .tit a {position: absolute; top: 50%; right: 0; transform:translateY(-50%); padding-right: 20px; background: url(/images/pc/ico_more_lg.png) no-repeat right top 1px; font-size: 18px; color:#888;}
 
 .ev .other_ev_slide .tit a {position: absolute; top: 50%; right: 0; transform:translateY(-50%); padding-right: 20px; background: url(/images/pc/ico_more_lg.png) no-repeat right top 1px; font-size: 18px; color:#888;}
 
+/* .ev .other_ev_slide .swiper-container {overflow:visible;} */
 
 .ev .other_ev_slide .swiper-slide {width: 42%;}
 
 .ev .other_ev_slide .swiper-slide {width: 42%;}
 
 .ev .other_ev_slide .swiper-slide img {width: 100%; height:auto;}
 
 .ev .other_ev_slide .swiper-slide img {width: 100%; height:auto;}
 
 .ev .other_ev_slide .swiper-slide .txt {}
 
 .ev .other_ev_slide .swiper-slide .txt {}
 
@@ -623,12 +625,12 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 
 
 .ev .survey_wrap .survey_con .survey_row .form_field input[type="checkbox"] + label:before {width: 2rem; height: 2rem;}
 
 .ev .survey_wrap .survey_con .survey_row .form_field input[type="checkbox"] + label:before {width: 2rem; height: 2rem;}
 
 
 
-.ev .survey_wrap .survey_con .survey_row.q3 .doc_ans {width: 100%; height: 15rem; padding: 1.5rem; font-size: 1.3rem; line-height: 1.6; color: #888; font-weight: 300; resize:none;}
 
+.ev .survey_wrap .survey_con .survey_row.q3 .doc_ans {width: 100%; height: 15rem; padding: 1.5rem; font-size: 1.3rem; line-height: 1.6; color: #222; font-weight: 300; resize:none;}
 
 .ev .survey_wrap .survey_con .survey_row.q3 .answer {position: relative;}
 
 .ev .survey_wrap .survey_con .survey_row.q3 .answer {position: relative;}
 
 .ev .survey_wrap .survey_con .survey_row.q3 .answer .txt_cnt {position: absolute; right: 1.6rem; bottom: 1.6rem; margin-top: 0; color: #888;}
 
 .ev .survey_wrap .survey_con .survey_row.q3 .answer .txt_cnt {position: absolute; right: 1.6rem; bottom: 1.6rem; margin-top: 0; color: #888;}
 
 
 
 .ev .survey_wrap .survey_con .survey_row.q4 {padding-bottom: 0;}
 
 .ev .survey_wrap .survey_con .survey_row.q4 {padding-bottom: 0;}
 
-.ev .survey_wrap .survey_con .survey_row.q4 .q4_ans {width: 100%; height: 4.5rem; padding: 1rem; font-size: 1.3rem; line-height: 1.6; color: #888; font-weight: 300; resize:none;}
 
+.ev .survey_wrap .survey_con .survey_row.q4 .q4_ans {width: 100%; height: 4.5rem; padding: 1rem; font-size: 1.3rem; line-height: 1.6; color: #222; font-weight: 300; resize:none;}
 
 .ev .survey_wrap .survey_con .btn_wrap {padding: 3rem 2rem 6rem; text-align: center; background: #fff;}
 
 .ev .survey_wrap .survey_con .btn_wrap {padding: 3rem 2rem 6rem; text-align: center; background: #fff;}
 
 .ev .survey_wrap .survey_con .btn_wrap button.btn {width: 100%; padding:1.6rem 0; font-size: 1.4rem; font-weight: 500; height:auto;} 
 .ev .survey_wrap .survey_con .btn_wrap button.btn {width: 100%; padding:1.6rem 0; font-size: 1.4rem; font-weight: 500; height:auto;} 
 
 
@@ -638,18 +640,20 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 .ev .comment .inner:last-child {padding-bottom: 0;}
 
 .ev .comment .inner:last-child {padding-bottom: 0;}
 
 .ev .comment .input_wrap {width: 100%;}
 
 .ev .comment .input_wrap {width: 100%;}
 
 .ev .comment .comment_textarea {padding:0 2rem;}
 
 .ev .comment .comment_textarea {padding:0 2rem;}
 
-.ev .comment .comment_img {padding:0 2rem;}
 
+.ev .comment .cmt_thumb {padding:0 2rem;}
 
+.ev .comment .cmt_thumb .imgUpload {margin:0 -1%;}
 
 .ev .comment .doc_contactus {width: 100%; height: 15rem; padding: 1.5rem; margin:3rem 0 1rem;}
 
 .ev .comment .doc_contactus {width: 100%; height: 15rem; padding: 1.5rem; margin:3rem 0 1rem;}
 
 .ev .comment .doc_ans {width: 100%; height: 15rem; padding: 20px; font-size: 1.3rem; line-height: 1.6; color: #888; font-weight: 300; resize:none;}
 
 .ev .comment .doc_ans {width: 100%; height: 15rem; padding: 20px; font-size: 1.3rem; line-height: 1.6; color: #888; font-weight: 300; resize:none;}
 
 .ev .comment .txt_cnt {position: absolute; right: 1.6rem; bottom: 1.6rem; margin-top: 0;}
 
 .ev .comment .txt_cnt {position: absolute; right: 1.6rem; bottom: 1.6rem; margin-top: 0;}
 
 .ev .comment .txt_cnt {position: absolute; right: 1.6rem; bottom: 1.6rem; margin-top: 0; color: #888;}
 
 .ev .comment .txt_cnt {position: absolute; right: 1.6rem; bottom: 1.6rem; margin-top: 0; color: #888;}
 
-.ev .comment .form_field {display: block;}
 
+.ev .comment .form_field {display: block; margin:0 -1% 0;}
 
 .ev .comment .form_field .img_file {margin:0 -0.4rem 0;}
 
 .ev .comment .form_field .img_file {margin:0 -0.4rem 0;}
 
-.ev .comment .pics {display: inline-block !important; width: calc((100% - 3.2rem) /4); height:0; margin:0 0.4rem 0.8rem; padding-top: 23.5%; border:1px solid transparent}
 
-.ev .comment .picsThumbs {max-width:100%; max-height:100%;}
 
-.ev .comment .imgUpload {width: calc((100% - 3.2rem) /4); height:100%; margin:0 0.4rem 1rem; float:left;}
 
-.ev .comment .fileAdd {display: inline-block; float:none; vertical-align: middle; width: 100%; height:auto; padding-top: 100%;}
 
-.ev .comment .btn_wrap {padding:0 2rem 3rem;}
 
+.ev .comment .form_field .img_file .imgUpload:after {content:''; clear:both; display: block;}
 
+.ev .comment .pics {overflow:hidden; /*width: calc((100% - 3.2rem) /4);*/ width: 23%; margin:1%; height:auto; padding-top: 23%; border:none; background: #f5f5f5;}
 
+.ev .comment .picsThumbs {max-width:100%; max-height:none; width: 100%; height:auto;}
 
+/* .ev .comment .imgUpload {width: 100%; height:100%;} */
 
+.ev .comment .fileAdd {float:left; width: 23%; height:auto; padding-top: 23%; margin:1%;}
 
+.ev .comment .btn_wrap {padding:2rem 2rem 3rem;}
 
 .ev .comment .btn_wrap button.btn {width: 100%; padding:1.1rem 0; font-size: 1.4rem; font-weight: 500; height:auto;}
 
 .ev .comment .btn_wrap button.btn {width: 100%; padding:1.1rem 0; font-size: 1.4rem; font-weight: 500; height:auto;}
 
 .ev .comment .nodata {padding:14rem 0; font-size: 1.3rem; color: #888; text-align: center;}
 
 .ev .comment .nodata {padding:14rem 0; font-size: 1.3rem; color: #888; text-align: center;}
 
 
 
@@ -661,8 +665,9 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 .ev .cmt_group .cmt_list li .cmt_top {margin-bottom: 1.8rem; position: relative; font-size: 0;}
 
 .ev .cmt_group .cmt_list li .cmt_top {margin-bottom: 1.8rem; position: relative; font-size: 0;}
 
 .ev .cmt_group .cmt_list li .cmt_top .writer {margin-right: 1.2rem; padding-right: 1.2rem; border-right:1px solid #ddd; font-size: 1.1rem; color: #666;}
 
 .ev .cmt_group .cmt_list li .cmt_top .writer {margin-right: 1.2rem; padding-right: 1.2rem; border-right:1px solid #ddd; font-size: 1.1rem; color: #666;}
 
 .ev .cmt_group .cmt_list li .cmt_top .date {color: #888; font-size: 1.1rem;}
 
 .ev .cmt_group .cmt_list li .cmt_top .date {color: #888; font-size: 1.1rem;}
 
-.ev .cmt_group .cmt_list li .cmt_cont .img_wrap {margin:0 -0.4rem 0; white-space: nowrap; font-size: 0; overflow-x: auto;}
 
-.ev .cmt_group .cmt_list li .cmt_cont .img_wrap .pics {float:none;}
 
+.ev .cmt_group .cmt_list li .cmt_cont .img_wrap {margin:0 -0.4rem 0.8rem; white-space: nowrap; font-size: 0; overflow-x: auto; -ms-overflow-style:none;}
 
+.ev .cmt_group .cmt_list li .cmt_cont .img_wrap::-webkit-scrollbar { display:none; }
 
+.ev .cmt_group .cmt_list li .cmt_cont .img_wrap .pics {float:none; display: inline-block !important; margin:0 0.1.11%; width: 20.55%; padding-top: 20%;}
 
 .ev .cmt_group .cmt_list li .cmt_cont .img_wrap .pics .picsThumbs {}
 
 .ev .cmt_group .cmt_list li .cmt_cont .img_wrap .pics .picsThumbs {}
 
 .ev .cmt_group .cmt_list li .cmt_cont .img_wrap img {max-width:100%; max-height:100%;}
 
 .ev .cmt_group .cmt_list li .cmt_cont .img_wrap img {max-width:100%; max-height:100%;}
 
 .ev .cmt_group .cmt_list li .cmt_cont p {color: #666; line-height: 1.7; font-size: 1.3rem; font-weight: 300;}
 
 .ev .cmt_group .cmt_list li .cmt_cont p {color: #666; line-height: 1.7; font-size: 1.3rem; font-weight: 300;}
 
@@ -672,29 +677,28 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 .modal.pop_full .modal-header {padding:1.6rem 2rem;}
 
 .modal.pop_full .modal-header {padding:1.6rem 2rem;}
 
 .modal.pop_full .modal-body {padding:0 2rem;}
 
 .modal.pop_full .modal-body {padding:0 2rem;}
 
 .modal.pop_full a.close-modal {background: url('/images/mo/ico_pop_cls.png') no-repeat center/100%; width: 1.6rem; height: 1.6rem;}
 
 .modal.pop_full a.close-modal {background: url('/images/mo/ico_pop_cls.png') no-repeat center/100%; width: 1.6rem; height: 1.6rem;}
 
-.modal.photo_comment_popup {background: #f5f5f5; overflow:hidden;}
 
+.modal.photo_comment_popup {background: #f5f5f5; overflow:hidden; position: fixed; left: 0; top: 0;}
 
 .modal.photo_comment_popup .modal-dialog, .modal.photo_comment_popup .modal-content {height: 100%;}
 
 .modal.photo_comment_popup .modal-dialog, .modal.photo_comment_popup .modal-content {height: 100%;}
 
 .modal.photo_comment_popup .modal-body {padding: 5.2rem 0 0; margin:0; height: 100%;}
 
 .modal.photo_comment_popup .modal-body {padding: 5.2rem 0 0; margin:0; height: 100%;}
 
-.modal.photo_comment_popup .modal-body .pop_cont {height: 100%; overflow:hidden; position: relative;}
 
-.modal.photo_comment_popup .modal-body .pop_cont .pop_slide {position: relative; height: 46.6rem;}
 
+.modal.photo_comment_popup .modal-body .pop_cont {height: 100%; overflow:hidden; position: relative; padding-bottom: 13rem;}
 
+.modal.photo_comment_popup .modal-body .pop_cont .pop_slide {position: relative; height: 100%; overflow:hidden;}
 
 .modal.photo_comment_popup .modal-body .pop_cont .pop_slide .swiper-container {height: 100%;}
 
 .modal.photo_comment_popup .modal-body .pop_cont .pop_slide .swiper-container {height: 100%;}
 
-.modal.photo_comment_popup .modal-body .pop_cont .pop_slide .swiper-pagination-fraction {bottom: 3.3rem; width:auto; left: 50%; transform:translateX(-50%); background: rgba(34,34,34,.5); color: #fff; font-weight: 300;padding:0.5rem 0.7rem; line-height: 1; font-size: 1.2rem; border-radius:2rem;}
 
+.modal.photo_comment_popup .modal-body .pop_cont .pop_slide .swiper-pagination-fraction {bottom:2.5rem; width:auto; left: 50%; transform:translateX(-50%); background: rgba(34,34,34,.5); color: #fff; font-weight: 300;padding:0.5rem 0.7rem; line-height: 1; font-size: 1.2rem; border-radius:2rem;}
 
 .swiper-pagination-current {font-weight: 600;}
 
 .swiper-pagination-current {font-weight: 600;}
 
 /* .swiper-pagination-current:before {content:'0';} */
 
 /* .swiper-pagination-current:before {content:'0';} */
 
-.modal.photo_comment_popup .pop_detail {position: absolute; left: 0; bottom:-24rem; z-index: 99; background: #fff; padding:0 2rem 2rem; box-shadow: 0px -14px 17.8px 2.2px rgba(0, 0, 0, 0.04); font-size: 1.3rem; max-height: 37rem; overflow-y:auto; transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);}
 
+.modal.photo_comment_popup .pop_detail {position: fixed; left: 0; bottom: 0; width: 100%; z-index: 99; background: #fff;  box-shadow: 0px -14px 17.8px 2.2px rgba(0, 0, 0, 0.04); font-size: 1.3rem;  transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1); }
 
 .pop_slide .swiper-slide .img {}
 
 .pop_slide .swiper-slide .img {}
 
 .pop_slide .swiper-slide img {width: auto; height: auto; max-height: 100%; max-width: 100%; margin: auto 0; position: absolute; top: 50%; bottom: auto; left: 50%; right: 0; transform: translate(-50%, -50%); cursor: pointer;}
 
 .pop_slide .swiper-slide img {width: auto; height: auto; max-height: 100%; max-width: 100%; margin: auto 0; position: absolute; top: 50%; bottom: auto; left: 50%; right: 0; transform: translate(-50%, -50%); cursor: pointer;}
 
-.modal.photo_comment_popup .pop_detail .pop_open_btn {background: url('/images/mo/ico_pop_arrow.png') no-repeat center; display: block; width: 100%; height: 3rem; background-position:center; background-size:3rem;}
 
-.modal.photo_comment_popup .pop_detail.active .pop_open_btn {background: url('/images/mo/ico_pop_arrow_on.png') no-repeat center; display: block; width: 100%; height: 3rem; background-position:center; background-size:3rem;}
 
-.modal.photo_comment_popup .pop_detail.active {bottom: 0;}
 
+.modal.photo_comment_popup .pop_detail .pop_open_btn {position: absolute; left: 0; top: 0; width: 100%; background: url('/images/mo/ico_pop_arrow.png') no-repeat center; display: block; width: 100%; height: 3rem; background-position:center; background-size:3rem;}
 
+.modal.photo_comment_popup .pop_detail .comment_wrap {max-height: 10rem; padding:0 2rem 2rem; margin-top: 3rem; transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1); overflow-y:auto;}
 
 .modal.photo_comment_popup .pop_detail .comment_writer {margin-top: 1.4rem;}
 
 .modal.photo_comment_popup .pop_detail .comment_writer {margin-top: 1.4rem;}
 
 .modal.photo_comment_popup .pop_detail .comment_writer .writer {margin-right: 1.2rem; padding-right: 1.2rem; border-right:1px solid #ddd; font-size: 1.1rem; color: #666;}
 
 .modal.photo_comment_popup .pop_detail .comment_writer .writer {margin-right: 1.2rem; padding-right: 1.2rem; border-right:1px solid #ddd; font-size: 1.1rem; color: #666;}
 
 .modal.photo_comment_popup .pop_detail .comment_writer .date {color: #888; font-size: 1.1rem;}
 
 .modal.photo_comment_popup .pop_detail .comment_writer .date {color: #888; font-size: 1.1rem;}
 
-.modal.photo_comment_popup .modal-footer {margin-top: 0;}
 
 
 
-@media screen and (max-width:320px){
 
-  .modal.photo_comment_popup .modal-body .pop_cont .pop_slide {height: 38.5rem;}
 
-}
 
+.modal.photo_comment_popup .pop_detail.active {}
 
+.modal.photo_comment_popup .pop_detail.active .pop_open_btn {background: url('/images/mo/ico_pop_arrow_on.png') no-repeat center; display: block; width: 100%; height: 3rem; background-position:center; background-size:3rem;}
 
+.modal.photo_comment_popup .pop_detail.active .comment_wrap { max-height: 34rem;}
 
+.modal.photo_comment_popup .modal-footer {margin-top: 0;}
 
 
 
 .paging_wrap {text-align: center; margin-top: 3.6rem;}
 
 .paging_wrap {text-align: center; margin-top: 3.6rem;}
 
 .paging_wrap .pageNav {display: inline-block;}
 
 .paging_wrap .pageNav {display: inline-block;}
 
@@ -739,6 +743,7 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 .ev .event_calander table th.sat {color: #3158ea;} */
 
 .ev .event_calander table th.sat {color: #3158ea;} */
 
 .ev .event_calander table td {height: 4rem; box-sizing: border-box; text-align: center;}
 
 .ev .event_calander table td {height: 4rem; box-sizing: border-box; text-align: center;}
 
 .ev .event_calander table td .date {font-size: 1rem; font-weight: 300; width: 2.7rem; height: 2.7rem; line-height: 2.7rem; border-radius:50%; margin:0 auto;}
 
 .ev .event_calander table td .date {font-size: 1rem; font-weight: 300; width: 2.7rem; height: 2.7rem; line-height: 2.7rem; border-radius:50%; margin:0 auto;}
 
+.ev .event_calander table td .date.unused {color: #ddd;}
 
 .ev .event_calander table td.today .date {border:1px solid #fd4802;}
 
 .ev .event_calander table td.today .date {border:1px solid #fd4802;}
 
 .ev .event_calander table td.complete .date {border:1px solid #fa8d64; background: #fa8d64;}
 
 .ev .event_calander table td.complete .date {border:1px solid #fa8d64; background: #fa8d64;}
 
 .ev .event_calander table tbody {background: #fff; }
 
 .ev .event_calander table tbody {background: #fff; }
 
@@ -747,6 +752,14 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 .ev .benefit_list {padding-top: 3rem;}
 
 .ev .benefit_list {padding-top: 3rem;}
 
 .ev .benefit_list h4 {font-size: 1.6rem; padding-bottom: 2rem;}
 
 .ev .benefit_list h4 {font-size: 1.6rem; padding-bottom: 2rem;}
 
 .ev .benefit_list .benefit_con img {width: 100%;}
 
 .ev .benefit_list .benefit_con img {width: 100%;}
 
+.ev .benefit_list .benefit_con ul li:first-child {margin-top: 0;}
 
+.ev .benefit_list .benefit_con ul li {background: #f5f5f5; margin-top: 0.1rem; font-size: 1.4rem;}
 
+.ev .benefit_list .benefit_con ul li > div {padding:2.6rem 0 2.6rem 6.5rem;}
 
+.ev .benefit_list .benefit_con ul li .benfit_point {background: url(/images/mo/ico_check_point.png) no-repeat left 2rem center; background-size:3.5rem;}
 
+.ev .benefit_list .benefit_con ul li .benfit_coupon {background: url(/images/mo/ico_check_coupon.png) no-repeat left 2rem center; background-size:3.5rem;}
 
+.ev .benefit_list .benefit_con ul li > div strong {font-weight: 500;}
 
+.ev .benefit_list .benefit_con ul li > div span.c_primary {font-weight: 600;}
 
+
 
 
 
 /* ev_rank */
 
 /* ev_rank */
 
 .ev_rank {background: #f5f5f5;}
 
 .ev_rank {background: #f5f5f5;}
 
@@ -827,14 +840,15 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 .ev_rank .member_level_area .level_head .desc p {color: #444; font-size: 1.2rem; font-weight: 500;}
 
 .ev_rank .member_level_area .level_head .desc p {color: #444; font-size: 1.2rem; font-weight: 500;}
 
 .ev_rank .member_level_area .level_content {padding:2rem;}
 
 .ev_rank .member_level_area .level_content {padding:2rem;}
 
 .ev_rank .member_level_area .level_content:after {content:''; clear:both; display: block;}
 
 .ev_rank .member_level_area .level_content:after {content:''; clear:both; display: block;}
 
-.ev_rank .member_level_area .level_content > div.coupon {margin-bottom: 2.4rem;}
 
+.ev_rank .member_level_area .level_content > div.coupon {margin-bottom: 2.4rem; border:none;}
 
+.ev_rank .member_level_area .level_content > div.coupon > div:after {position: static; border:none; transform:none; width:auto; height:auto; border-radius: none;}
 
 .ev_rank .member_level_area .level_content > div.birth {}
 
 .ev_rank .member_level_area .level_content > div.birth {}
 
 .ev_rank .member_level_area .level_content > div > p {position: relative; margin-bottom: 1.3rem; font-size: 1.1rem; font-weight: 500; padding-left: 0.7rem;}
 
 .ev_rank .member_level_area .level_content > div > p {position: relative; margin-bottom: 1.3rem; font-size: 1.1rem; font-weight: 500; padding-left: 0.7rem;}
 
 .ev_rank .member_level_area .level_content > div > p:before {content:''; position: absolute; top: 0.6rem; left: 0; width: 0.2rem; height: 0.2rem; background: #222;}
 
 .ev_rank .member_level_area .level_content > div > p:before {content:''; position: absolute; top: 0.6rem; left: 0; width: 0.2rem; height: 0.2rem; background: #222;}
 
 .ev_rank .member_level_area .level_content .coupon_box, .ev_rank .member_level_area .level_content .birth_box {padding:0 0.7rem;}
 
 .ev_rank .member_level_area .level_content .coupon_box, .ev_rank .member_level_area .level_content .birth_box {padding:0 0.7rem;}
 
 .ev_rank .member_level_area .level_content .coupon_info {float:left; width: 46%;}
 
 .ev_rank .member_level_area .level_content .coupon_info {float:left; width: 46%;}
 
 .ev_rank .member_level_area .level_content .coupon_info:last-child {float:right;}
 
 .ev_rank .member_level_area .level_content .coupon_info:last-child {float:right;}
 
-.ev_rank .member_level_area .level_content .coupon_info p, .ev_rank .member_level_area .level_content .birth_info p {font-size: 1.1rem; text-align: center; margin-top: 1rem;}
 
+.ev_rank .member_level_area .level_content .coupon_info p, .ev_rank .member_level_area .level_content .birth_info p {font-size: 1.1rem; text-align: center; margin-top: 1rem; padding: 0;}
 
 .ev_rank .member_level_area .level_content .coupon_info img, .ev_rank .member_level_area .level_content .birth_info img {width: 100%;}
 
 .ev_rank .member_level_area .level_content .coupon_info img, .ev_rank .member_level_area .level_content .birth_info img {width: 100%;}
 
 .ev_rank .member_level_area .level_content .birth_info {width: 46%;}
 
 .ev_rank .member_level_area .level_content .birth_info {width: 46%;}
 
 
 
@@ -1363,6 +1377,7 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 .optionChangePop .product_list {border-top: 1px solid #ddd;}
 
 .optionChangePop .product_list {border-top: 1px solid #ddd;}
 
 .optionChangePop .product_list li {border-bottom: 1px solid #ddd; padding: 1.5rem;}
 
 .optionChangePop .product_list li {border-bottom: 1px solid #ddd; padding: 1.5rem;}
 
 
 
+.modal.optionChangePop .modal-body {padding-bottom: 4.5rem;}
 
 .modal.optionChangePop .modal-body .pop_cont {color: #222;}
 
 .modal.optionChangePop .modal-body .pop_cont {color: #222;}
 
 .optionChangePop .option_list li {border-bottom: 1px dashed #ddd; padding:2rem 0 0;}
 
 .optionChangePop .option_list li {border-bottom: 1px dashed #ddd; padding:2rem 0 0;}
 
 .optionChangePop .option_list li:first-child {padding-top: 0;}
 
 .optionChangePop .option_list li:first-child {padding-top: 0;}
 
@@ -1377,6 +1392,7 @@ main.container .inner h2[data-style~="unusual"] {font-size:2.0rem;top: 0;positio
 
 .optionChangePop .option_list li .option_box button:disabled span {text-decoration: line-through; color: #bbb;}
 
 .optionChangePop .option_list li .option_box button:disabled span {text-decoration: line-through; color: #bbb;}
 
 .optionChangePop .option_list li .option_name {font-size: 1.4rem; font-weight: 500;}
 
 .optionChangePop .option_list li .option_name {font-size: 1.4rem; font-weight: 500;}
 
 .optionChangePop .option_list li .option_field {margin-top: 1.5rem;}
 
 .optionChangePop .option_list li .option_field {margin-top: 1.5rem;}
 
+.optionChangePop .modal-footer {position: fixed; left: 0; bottom: 0; width: 100%; margin-top: 0;}
 
 .optionChangePop .modal-footer .btn_group_flex {margin-top: 0;}
 
 .optionChangePop .modal-footer .btn_group_flex {margin-top: 0;}
 
 
 
 /* my_return_3_accountPop_환불계좌등록 팝업 */
 
 /* my_return_3_accountPop_환불계좌등록 팝업 */
 
@@ -2517,4 +2533,4 @@ main.container .od_extra .inner:last-child {padding-bottom: 0;}
 
 .popup_main_notice.half .popup_content .popup_header {position: relative; background:transparent; height: 6rem; padding: 2.2rem;}
 
 .popup_main_notice.half .popup_content .popup_header {position: relative; background:transparent; height: 6rem; padding: 2.2rem;}
 
 .popup_main_notice.half .popup_content .popup_header::after {content:''; clear:both; display:block;}
 
 .popup_main_notice.half .popup_content .popup_header::after {content:''; clear:both; display:block;}
 
 .popup_main_notice.half .popup_content .popup_header a.btn_underline {display:inline-block; float:left; color:#fff; font-size:1.3rem; font-weight:200; border-color:#fff; opacity: 0.4; padding-top: 0.2rem;}
 
 .popup_main_notice.half .popup_content .popup_header a.btn_underline {display:inline-block; float:left; color:#fff; font-size:1.3rem; font-weight:200; border-color:#fff; opacity: 0.4; padding-top: 0.2rem;}
 
-.popup_main_notice.half .popup_content .popup_header a.btn_popup_close {position: absolute; top: 0; right: 0; width: 6rem; height: 6rem; background: url(/images/mo/btn_main_pop_arrow.png) no-repeat center; background-size:1.6rem;}
 
+.popup_main_notice.half .popup_content .popup_header a.btn_popup_close {position: absolute; top: 0; right: 0; width: 6rem; height: 6rem; background: url(/images/mo/btn_main_pop_arrow.png) no-repeat center; background-size:1.6rem; text-indent:-999em;}

+ 2 - 2
src/main/webapp/ux/mo/js/common_m.js
Просмотреть файл 

@@ -119,8 +119,8 @@ $(document).ready(function() {
 
                         var file = e.target;
 
                         var file = e.target;
 
                         $("<span class=\"pics\">" +
 
                         $("<span class=\"pics\">" +
 
                             "<img class=\"picsThumbs\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
 
                             "<img class=\"picsThumbs\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
 
-                            "<br/><span class=\"removes\">Removes image</span>" +
 
-                            "</span>").insertAfter("#fileAdd");
 
+                            "<span class=\"removes\">Removes image</span>" +
 
+                            "</span>").insertBefore(".fileAdd");
 
                         $(".removes").click(function(){
 
                         $(".removes").click(function(){
 
                             $(this).parent(".pics").remove();
 
                             $(this).parent(".pics").remove();
 
                         });
 
                         });

+ 9 - 6
src/main/webapp/ux/mo/js/mcxdialog_ui.js
Просмотреть файл 

@@ -41,7 +41,7 @@
 
 
 
 			function getFontSize() {
 
 			function getFontSize() {
 
 				var clientWidth = document.documentElement.clientWidth;
 
 				var clientWidth = document.documentElement.clientWidth;
 
-				if (clientWidth < 640) return 16 * (clientWidth / 375) + "px";
 
+				if (clientWidth < 640) return 16 * (clientWidth / 375) * 0.1 +  "rem";
 
 				else return 16;
 
 				else return 16;
 
 			};
 
 			};
 
 
 
@@ -116,8 +116,9 @@
 
 
 
 					if (!options.bottom) {
 
 					if (!options.bottom) {
 
 						//set position
 
 						//set position
 
-						dom.style.top = (document.documentElement.clientHeight - dom.offsetHeight) / 2 + "px";
 
-						dom.style.left = (document.documentElement.clientWidth - dom.offsetWidth) / 2 + "px";
 
+						dom.style.top = (document.documentElement.clientHeight - dom.offsetHeight) / 2 * 0.1 + "rem";
 
+						// dom.style.left = (document.documentElement.clientWidth - dom.offsetWidth) / 2 * 0.1 + "rem";
 
+						dom.style.left = 50 + "%";
 
 					}
 
 					}
 
 
 
 
 
@@ -188,6 +189,8 @@
 
 
 
 					opts.btns = [cancelBtn, sureBtn];
 
 					opts.btns = [cancelBtn, sureBtn];
 
 					this.open(content, opts);
 
 					this.open(content, opts);
 
+
 
+					
 				},
 
 				},
 
 
 
 				//confirmC ------------------------
 
 				//confirmC ------------------------
 
@@ -316,7 +319,7 @@
 
 					body.appendChild(toast);
 
 					body.appendChild(toast);
 
 
 
 					toast.style.fontSize = getFontSize();
 
 					toast.style.fontSize = getFontSize();
 
-					toast.style.left = (document.documentElement.clientWidth - toast.offsetWidth) / 2 + "px";
 
+					toast.style.left = (document.documentElement.clientWidth - toast.offsetWidth) / 2 * 0.1 + "rem";
 
 
 
 					setTimeout(function () {
 
 					setTimeout(function () {
 
 						body.removeChild(toast);
 
 						body.removeChild(toast);
 
@@ -353,8 +356,8 @@
 
 					body.appendChild(loading);
 
 					body.appendChild(loading);
 
 
 
 					loading.style.fontSize = getFontSize();
 
 					loading.style.fontSize = getFontSize();
 
-					loading.style.left = (document.documentElement.clientWidth - loading.offsetWidth) / 2 + "px";
 
-					loading.style.top = (document.documentElement.clientHeight - loading.offsetHeight) / 2 + "px";
 
+					loading.style.left = (document.documentElement.clientWidth - loading.offsetWidth) / 2 * 0.1 + "rem";
 
+					loading.style.top = (document.documentElement.clientHeight - loading.offsetHeight) / 2 * 0.1 + "rem";
 
 
 
 					this.loadElement.push(loadingBg);
 
 					this.loadElement.push(loadingBg);
 
 					this.loadElement.push(loading);
 
 					this.loadElement.push(loading);