last update : 2019.09.23.
font
color
header type
button
form
tab
title
no data
table
list
rating
slide
imageCrop
paging
icon
infoList
fileUpload
cttMore
brandCategory
Font
Noto Sans KR 폰트를 사용하며, 폰트 굵기는 font-weight로 구분한다.
기본설정은{font-family:'noto','맑은고딕',sans-serif;font-weight:400;color:#222;}
Noto Sans KR
400 - Noto Sans KR Regular
가나다라마바사아자차카타파하
0123456789
500 - Noto Sans KR Medium
가나다라마바사아자차카타파하
0123456789
600 - Noto Sans KR Bold
가나다라마바사아자차카타파하
0123456789
Color
Point Color
#FF65AF(.fcPink)
#FF5B5D(.fcRed)
Font Color
#222222(.fc22)
#888888(.fc88)
#BFBFBF(.fcbf)
#FFFFFF(.fcff)
bg/line Color
#222222
#E8E8E8
#F3F3F3
#F8F8F8
#FFFFFF
Header type
basic : 로고X, 페이지 타이틀O, 뒤로가기O, 장바구니O, 검색O, 홈X
<div id="wrap" class="h_noUtil"> : 로고X, 페이지 타이틀O, 뒤로가기X, 장바구니O, 검색O, 홈X
<div id="wrap" class="h_noShop"> : 로고X, 페이지 타이틀O, 뒤로가기O, 장바구니X, 검색O, 홈X
<div id="wrap" class="h_addHome"> : 로고O, 페이지 타이틀X, 뒤로가기X, 장바구니O, 검색O, 홈O
<div id="wrap" class="h_main"> : 로고O, 페이지 타이틀X, 뒤로가기X, 장바구니O, 검색O, 홈X
Form
Input Text - BOX
잘못 입력했습니다
소스보기
basic
<div class="inp_wrap">
<div class="inp_text">
<label class="inp_lab" for="inp_text">inp text</label>
<input type="text" name="" id="inp_text">
</div>
</div>
error
<div class="inp_wrap error">
<div class="inp_text">
<label class="inp_lab" for="inp_text_error">inp text</label>
<input type="text" name="" id="inp_text_error">
</div>
<p class="error">잘못 입력했습니다</p>
</div>
label type
<div class="inp_wrap">
<label class="inp_lab" for="labelType"><span class="fcRed">*</span>Label</label>
<div class="inp_text">
<input type="text" name="" id="labelType" placeholder="LABEL TYPE">
</div>
</div>
Input Text - SEARCH
소스보기
<div class="inp_wrap">
<div class="inp_text searchType">
<input type="text" name="" id="inp_text" title="우편번호 검색">
<button type="button" class="btn_clear"><span>clear</span></button>
<button type="button" class="btn_search"><span>search</span></button>
</div>
</div>
Checkbox
소스보기
basic
<span class="inp_check">
<input type="checkbox" name="inp_check" id="inp_check1_1">
<label for="inp_check1_1">check1</label>
</span>
checked
<span class="inp_check">
<input type="checkbox" name="cate_chk" id="inp_check1_2" checked>
<label for="inp_check1_2">check2</label>
</span>
disabled
<span class="inp_check">
<input type="checkbox" name="inp_radio1" id="inp_check1_3" disabled>
<label for="inp_check1_3">check3</label>
</span>
type02
<span class="inp_check type02">
<input type="checkbox" name="inp_customer" id="inp_customer">
<label for="inp_customer">내 문의 보기<span class="checkDsgn"><span></span></span></label>
</span>
Radiobox
소스보기
basic
<span class="inp_radio">
<input type="radio" name="inp_radio1" id="inp_radio1_1">
<label for="inp_radio1_1">radio1</label>
</span>
checked
<span class="inp_radio">
<input type="radio" name="inp_radio1" id="inp_radio1_2" checked>
<label for="inp_radio1_2">radio2</label>
</span>
disabled
<span class="inp_radio">
<input type="radio" name="inp_radio1" id="inp_radio1_3" disabled>
<label for="inp_radio1_3">radio3</label>
</span>
Selectbox
선택해주세요
- [일시품절]
- [일시품절]
소스보기
basic
<div class="inp_wrap">
<div class="inp_select">
<select name="" id="">
<option value="">並び替え</option>
<option value="">並び替え2</option>
<option value="">並び替え3</option>
</select>
</div>
</div>
error
<div class="inp_wrap error">
<div class="inp_select">
<select name="" id="">
<option value="">並び替え</option>
<option value="">並び替え2</option>
<option value="">並び替え3</option>
</select>
</div>
<div class="help">
<p class="error">電子メールまたはパスワード間違い</p>
</div>
</div>
borderType
<div class="inp_wrap">
<div class="inp_select borderType">
<select name="" id="">
<option value="">naver.com</option>
<option value="">nate.com</option>
<option value="">직접입력</option>
</select>
</div>
</div>
shopping disabled
<div class="inp_wrap">
<div class="inp_select2 pdtSelect disabled">
<div class="selectBox">
<button class="title" type="button">옵션을 선택해주세요</button>
<ul class="selList">
<li>
<input type="radio" value="" class="option" id="select1_1" name="select1">
<label for="select1_1">
<span class="selectColor colorShipM"><img src="/static/front/resources/web/images/temp/colorChip03.jpg"></span>벨벳 블러드 립-BE01 밀크티 필터
</label>
</li>
<li class="soldOut">
<input type="radio" value="" class="option" id="select1_2" name="select1">
<label for="select1_2">
<span class="selectColor colorShipM"><img src="/static/front/resources/web/images/temp/colorChip04.jpg"></span>벨벳 블러드 립-BE01 밀크티 필터
</label>
<span class="soldOutTxt">[일시품절]</span>
<button class="soldOutBtn btn_txt" type="button">입고알림신청</button>
</li>
</ul>
</div>
</div>
</div>
shopping
<div class="inp_wrap">
<div class="inp_select2 pdtSelect">
<div class="selectBox">
<button class="title" type="button">옵션을 선택해주세요</button>
<ul class="selList">
<li>
<input type="radio" value="" class="option" id="select1_1" name="select1">
<label for="select1_1">
<span class="selectColor colorShipM"><img src="/static/front/resources/web/images/temp/colorChip03.jpg"></span>벨벳 블러드 립-BE01 밀크티 필터
</label>
</li>
<li class="soldOut">
<input type="radio" value="" class="option" id="select1_2" name="select1">
<label for="select1_2">
<span class="selectColor colorShipM"><img src="/static/front/resources/web/images/temp/colorChip04.jpg"></span>벨벳 블러드 립-BE01 밀크티 필터
</label>
<span class="soldOutTxt">[일시품절]</span>
<button class="soldOutBtn btn_txt" type="button">입고알림신청</button>
</li>
</ul>
</div>
</div>
</div>
Textarea
error message
error message
(0/500)
error message
(0/500)
error message
소스보기
basic
<div class="inp_wrap">
<div class="inp_textArea noCharCnt">
<textarea>Start typing...</textarea>
</div>
<p class="error">error message</p>
</div>
error
<div class="inp_wrap error">
<div class="inp_textArea noCharCnt">
<textarea>Start typing...</textarea>
</div>
<p class="error">error message</p>
</div>
lengthCheck
<div class="inp_wrap">
<div class="inp_textArea">
<textarea>Start typing...</textarea>
<span class="charCnt">(<em>0</em>/500)</span>
</div>
<p class="error">error message</p>
</div>
lengthCheck error
<div class="inp_wrap error">
<div class="inp_textArea">
<textarea>Start typing...</textarea>
<span class="charCnt">(<em>0</em>/500)</span>
</div>
<p class="error">error message</p>
</div>
etc
소스보기
<div class="inp_wrap inp_email">
<div class="inp_text">
<label class="inp_lab" for="user_email">이메일</label>
<input type="email" name="" id="user_email">
</div>
<span class="hyphen">@</span>
<div class="inp_select">
<select name="" id="">
<option value="">naver.com</option>
<option value="">nate.com</option>
<option value="">직접입력</option>
</select>
</div>
<div class="inp_text email_input">
<input type="email" title="이메일 직접입력">
</div>
<a href="#" class="btn btnSizeM btnColorB btnTypeB"><span class="fs13">중복확인</span></a>
</div>
소스보기
<div class="inp_wrap inp_post">
<div class="inp_text"><!-- 우편번호 입력후 active 추가 -->
<label class="inp_lab" for="user_addr1">(선택) 우편번호 입력</label>
<input type="number" name="" id="user_addr1" disabled>
</div>
<a href="#" class="btn btnSizeM btnColorB btnTypeB"><span class="fs13">우편번호 찾기</span></a>
<div class="inp_text mgt21"><!-- 기본주소 입력후 active 추가 -->
<label class="inp_lab" for="user_addr2">기본주소 선택</label>
<input type="email" name="" id="user_addr2" disabled>
</div>
<div class="inp_text mgt21">
<label class="inp_lab" for="user_addr3">상세주소 입력</label>
<input type="text" name="" id="user_addr3">
</div>
</div>
Tab
tabStyle1
탭의 갯수 만큼 length갯수 클래스를 추가
소스보기
<div class="tabType tabType1 length3">
<ul>
<li><a href="#" class="current"><span>TAB1</span></a></li>
<li><a href="#"><span>TAB2</span></a></li>
<li><a href="#"><span>TAB3</span></a></li>
</ul>
</div>
tabStyle2
소스보기
<div class="tabType tabType2">
<ul>
<li><a href="#" class="current">클렌징</a></li>
<li><a href="#">스킨케어</a></li>
<li><a href="#">마스크/팩</a></li>
<li><a href="#">선케어</a></li>
<li><a href="#">베이스 메이크업</a></li>
<li><a href="#">아이 메이크업</a></li>
<li><a href="#">베이스 메이크업</a></li>
<li><a href="#">바디케어</a></li>
<li><a href="#">미용소품</a></li>
<li><a href="#">온라인 전용 세트</a></li>
</ul>
</div>
tabType :No Link
소스보기
<div class="tabType tabType1 length3 no_link">
<ul>
<li><a href="#" class="current"><span>TAB1</span></a></li>
<li><a href="#"><span>TAB2</span></a></li>
<li><a href="#"><span>TAB3</span></a></li>
</ul>
</div>
tabType :Switch
TAB1 CON
TAB2 CON
TAB3 CON
TAB4 CON
소스보기
<div class="tabType tabType1 length4 switch" id="guideTab"><!-- id = 공통 VIEW CLASS -->
<ul>
<li><a href="#guideTab1" class="current"><span>TAB1</span></a></li>
<li><a href="#guideTab2"><span>TAB2</span></a></li>
<li><a href="#guideTab3"><span>TAB3</span></a></li>
<li><a href="#guideTab4"><span>TAB4</span></a></li>
</ul>
</div>
<div class="guideTab" id="guideTab1">
TAB1 CON
</div>
<div class="guideTab" id="guideTab2">
TAB2 CON
</div>
<div class="guideTab" id="guideTab3">
TAB3 CON
</div>
<div class="guideTab" id="guideTab4">
TAB4 CON
</div>
tabType :Scroll
Description
How to use
Ingredients
소스보기
<div class="tabType tabType1 length3 scroll">
<ul>
<li><a href="#guideTab5" class="current">Description</a></li>
<li><a href="#guideTab6">How to use</a></li>
<li><a href="#guideTab7">Ingredients</a></li>
</ul>
</div>
<div id="guideTab5">
Description
</div>
<div id="guideTab6">
How to use
</div>
<div id="guideTab7">
Ingredients
</div>
Title
No Data
선택하신 속성에 대한 검색결과가 없습니다.
다른 옵션을 선택해보세요.
다른 옵션을 선택해보세요.
소스보기
<div class="noData">
<span>선택하신 속성에 대한 검색결과가 없습니다.<br> 다른 옵션을 선택해보세요.</span>
</div>
table - type1
-
- 회원정보
-
비회원으로도 구매가 가능합니다. 하지만 비회원 구매 시 쇼핑몰 각종 이벤트 혜택을 받으실 수 없습니다. 추후 적립도 불가합니다. 참고부탁드립니다.
-
- 회원정보
-
비회원으로도 구매가 가능합니다. 하지만 비회원 구매 시 쇼핑몰 각종 이벤트 혜택을 받으실 수 없습니다. 추후 적립도 불가합니다. 참고부탁드립니다.
-
검색된 결과가 없습니다.
소스보기
<ul class="tbl_tpye01 js_acoBox">
<li class="js_acoList">
<dl>
<dt>
<span class="cmt mgb5">회원정보</span>
<p class="ttl"><a href="javascript:void(0)" class="js_acoLink">개인정보 변경은 어떻게 하나요?</a></p>
</dt>
<dd>
<div class="ctt js_acoCon"><div>비회원으로도 구매가 가능합니다. 하지만 비회원 구매 시 쇼핑몰 각종 이벤트 혜택을 받으실 수 없습니다. 추후 적립도 불가합니다. 참고부탁드립니다.</div></div>
</dd>
</dl>
</li>
<li class="js_acoList">
<dl>
<dt>
<span class="cmt mgb5">회원정보</span>
<p class="ttl"><a href="javascript:void(0)" class="js_acoLink">개인정보 변경은 어떻게 하나요?</a></p>
</dt>
<dd>
<div class="ctt js_acoCon"><div>비회원으로도 구매가 가능합니다. 하지만 비회원 구매 시 쇼핑몰 각종 이벤트 혜택을 받으실 수 없습니다. 추후 적립도 불가합니다. 참고부탁드립니다.</div></div>
</dd>
</dl>
</li>
<li class="js_acoList">
<div class="noData">
<span>검색된 결과가 없습니다.</span>
</div>
</li>
</ul>
table - type2
-
-
이벤트/사은품/할인 문의
sun**** 2019.10.25 답변대기닫힘 -
질문[기타문의] 주문했습니다. 최근에 만들어진 제품으로 부탁드립니다 감사합니다답변2019.10.22
고객님 안녕하세요. 네 아침 저녁으로 사용해주셔도 됩니다. 저녁엔 두번 덧발라 수면팩으로도 사용해주시면 좋습니다. 감사합니다.
-
-
-
이벤트/사은품/할인 문의
sun**** 2019.10.25 답변처리중닫힘 -
질문[기타문의] 주문했습니다. 최근에 만들어진 제품으로 부탁드립니다 감사합니다답변2019.10.22
고객님 안녕하세요. 네 아침 저녁으로 사용해주셔도 됩니다. 저녁엔 두번 덧발라 수면팩으로도 사용해주시면 좋습니다. 감사합니다.
-
-
-
이벤트/사은품/할인 문의
sun**** 2019.10.25 답변완료닫힘 -
질문[기타문의] 주문했습니다. 최근에 만들어진 제품으로 부탁드립니다 감사합니다답변2019.10.22
고객님 안녕하세요. 네 아침 저녁으로 사용해주셔도 됩니다. 저녁엔 두번 덧발라 수면팩으로도 사용해주시면 좋습니다. 감사합니다.
-
-
검색된 결과가 없습니다.
소스보기
<ul class="tbl_tpye02 js_acoBox">
<li class="js_acoList">
<dl>
<dt>
<p class="cate">이벤트/사은품/할인 문의</p>
<p class="ttl"><a href="javascript:void(0)" class="js_acoLink userOn lock">비밀글 입니다.</a></p><!-- 내가 작성한 게시물일 경우 userOn 클래스 추가, 비밀글일 경우 클래스 lock 클래스 추가 -->
<div class="userData">
<span class="name">sun****</span>
<span class="date">2019.10.25</span>
<span class="reply">답변대기</span>
</div>
<!-- 내가 작성한 게시물일 경우 추가 s -->
<div class="editOn"><a href="javascript:boid(0)">수정</a> <a href="javascript:boid(0)">삭제</a></div>
<!-- 내가 작성한 게시물일 경우 추가 e -->
<div class="arrow"><span class="hide">닫힘</span></div>
</dt>
<dd>
<div class="ctt js_acoCon">
<div>
<div class="userCtt"><span>질문</span>[기타문의] 주문했습니다. 최근에 만들어진 제품으로 부탁드립니다 감사합니다</div>
<div class="replyCtt">
<div><span>답변</span>2019.10.22</div>
<p>고객님 안녕하세요. 네 아침 저녁으로 사용해주셔도 됩니다. 저녁엔 두번 덧발라 수면팩으로도 사용해주시면 좋습니다. 감사합니다.</p>
</div>
</div>
</div>
</dd>
</dl>
</li>
<li class="js_acoList">
<dl>
<dt>
<p class="cate">이벤트/사은품/할인 문의</p>
<p class="ttl"><a href="javascript:void(0)" class="js_acoLink">비밀글 입니다.</a></p>
<div class="userData">
<span class="name">sun****</span>
<span class="date">2019.10.25</span>
<span class="reply off">답변처리중</span>
</div>
<div class="arrow"><span class="hide">닫힘</span></div>
</dt>
<dd>
<div class="ctt js_acoCon">
<div>
<div class="userCtt"><span>질문</span>[기타문의] 주문했습니다. 최근에 만들어진 제품으로 부탁드립니다 감사합니다</div>
<div class="replyCtt">
<div><span>답변</span>2019.10.22</div>
<p>고객님 안녕하세요. 네 아침 저녁으로 사용해주셔도 됩니다. 저녁엔 두번 덧발라 수면팩으로도 사용해주시면 좋습니다. 감사합니다.</p>
</div>
</div>
</div>
</dd>
</dl>
</li>
<li class="js_acoList">
<dl>
<dt>
<p class="cate">이벤트/사은품/할인 문의</p>
<p class="ttl"><a href="javascript:void(0)" class="js_acoLink">비밀글 입니다.</a></p>
<div class="userData">
<span class="name">sun****</span>
<span class="date">2019.10.25</span>
<span class="reply on">답변완료</span>
</div>
<div class="arrow"><span class="hide">닫힘</span></div>
</dt>
<dd>
<div class="ctt js_acoCon">
<div>
<div class="userCtt"><span>질문</span>[기타문의] 주문했습니다. 최근에 만들어진 제품으로 부탁드립니다 감사합니다</div>
<div class="replyCtt">
<div><span>답변</span>2019.10.22</div>
<p>고객님 안녕하세요. 네 아침 저녁으로 사용해주셔도 됩니다. 저녁엔 두번 덧발라 수면팩으로도 사용해주시면 좋습니다. 감사합니다.</p>
</div>
</div>
</div>
</dd>
</dl>
</li>
<li class="js_acoList">
<div class="noData">
<span>검색된 결과가 없습니다.</span>
</div>
</li>
</ul>
Product List
pdt_list1
소스보기
<div class="pdt_list1">
<ul class="list_box">
<li>
<div class="pdtImg">
<ul class="pdt_type">
<li class="bg_p">NEW</li>
<li class="bg_p">BEST</li>
<li class="bg_p">한정판</li>
<li class="bg_r">SALE</li>
<li class="bg_r">FREE</li>
<li class="bg_r">GIFT</li>
</ul>
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
<!-- 품절일경우 추가 -->
<div class="pdtState">
<a href="javascript:void(0);" onclick="showLayer('stockAlt');" class="btn_stock"><span>입고알림</span></a>
</div>
<!-- //품절일경우 추가 -->
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtBrand">바닐라코</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em><span class="cost">15,000원</span></p>
<!-- <p class="pdtPrice"><span class="soldOut">일시품절</span></p> -->
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating', this)" class="btn_like on"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart"><span class="hide">장바구니</span></a>
</li>
<li class="promoType">
<div class="pdtImg">
<ul class="pdt_type">
<li class="bg_p">NEW</li>
<li class="bg_p">BEST</li>
<li class="bg_p">한정판</li>
<li class="bg_r">SALE</li>
<li class="bg_r">FREE</li>
<li class="bg_r">GIFT</li>
</ul>
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img2.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
<!-- 품절일경우 추가 -->
<div class="pdtState">
<a href="javascript:void(0);" onclick="showLayer('stockAlt');" class="btn_stock"><span>입고알림</span></a>
</div>
<!-- //품절일경우 추가 -->
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtBrand">바닐라코</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em><span class="cost">15,000원</span></p>
<!-- <p class="pdtPrice"><span class="soldOut">일시품절</span></p> -->
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating', this)" class="btn_like"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart"><span class="hide">장바구니</span></a>
</li>
</ul>
</div>
pdt_list1 - type02
소스보기
pdt_list1 - type02
<div class="pdt_list1 type02">
<ul class="list_box">
<li>
<div class="pdtImg">
<ul class="pdt_type">
<li class="bg_p">NEW</li>
<li class="bg_p">BEST</li>
<li class="bg_p">한정판</li>
<li class="bg_r">SALE</li>
<li class="bg_r">FREE</li>
<li class="bg_r">GIFT</li>
</ul>
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img3.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
<!-- 품절일경우 추가 -->
<div class="pdtState">
<a href="javascript:void(0);" onclick="showLayer('stockAlt');" class="btn_stock"><span>입고알림</span></a>
</div>
<!-- //품절일경우 추가 -->
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtBrand">바닐라코</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em><span class="cost">15,000원</span></p>
<!-- <p class="pdtPrice"><span class="soldOut">일시품절</span></p> -->
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating', this)" class="btn_like on"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart"><span class="hide">장바구니</span></a>
</li>
</ul>
</div>
pdt_list1 - bestTtl
모두의 취향 TOP 11
최근 한주간 가장 많이 판매된 제품입니다.
소스보기
<div class="pdt_bestTtl"><p>모두의 취향 TOP 11</p><span>최근 한주간 가장 많이 판매된 제품입니다.</span></div>
pdt_list1 - type03
소스보기
<div class="pdt_list1 type03">
<ul class="list_box">
<li>
<div class="bestMark"><span>BEST <span>1</span></span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<div class="pdtReview"><div class="js_rating ratingM"><span>4.5</span></div><span class="text">4.5</span> <span class="count">/ 18개의 리뷰</span></div>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</li>
<li>
<div class="bestMark"><span>BEST <span>2</span></span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart"><span class="hide">장바구니</span></a>
</li>
<li>
<div class="bestMark"><span>BEST <span>3</span></span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart"><span class="hide">장바구니</span></a>
</li>
</ul>
</div>
pdt_list1 - type04
소스보기
<div class="pdt_list1 tpye04">
<ul class="list_box">
<li>
<div class="cateMark cleansing"><span>클렌징</span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</li>
<li>
<div class="cateMark skinCare"><span>스킨케어</span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</li>
<li>
<div class="cateMark maskPack"><span>마스크/팩</span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</li>
<li>
<div class="cateMark SunCare"><span>썬케어</span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</li>
<li>
<div class="cateMark Base"><span>베이스 메이크업</span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</li>
<li>
<div class="cateMark Lip"><span>립 메이크업</span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</li>
<li>
<div class="cateMark Eye"><span>아이 메이크업</span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</li>
<li>
<div class="cateMark face"><span>페이스 메이크업</span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</li>
<li>
<div class="cateMark bodyCare"><span>바디케어</span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</li>
<li>
<div class="cateMark BeautyAcces"><span>미용소품</span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</li>
<li>
<div class="cateMark onlineOnly"><span>온라인 전용세트</span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<div class="pdtReview">4.5 <span class="count">(리뷰 18)</span></div>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</li>
<li class="notPdt"><a href="javascript:void(0)" style="background-image:url('/static/front/resources/mobile/images/temp/bestpdt_banner.jpg')"></a></li>
</ul>
</div>
pdt_list1 - type05
-
2019 화해 신제품 어워드 파운데이션 부문 1위
2019 화해 신제품 어워드 파운데이션 부문 1위
2019 화해 신제품 어워드 파운데이션 부문 1위
2019 화해 신제품 어워드 파운데이션 부문 1위
2019 화해 신제품 어워드 파운데이션 부문 1위
2019 화해 신제품 어워드 파운데이션 부문 1위
2019 화해 신제품 어워드 파운데이션 부문 1위
2019 화해 신제품 어워드 파운데이션 부문 1위
2019 화해 신제품 어워드 파운데이션 부문 1위
2019 화해 신제품 어워드 파운데이션 부문 1위
2019 화해 신제품 어워드 파운데이션 부문 1위
소스보기
<div class="pdt_list1 tpye05">
<ul class="list_box">
<li>
<div class="awardPdt">
<div class="bestMark"><span>클렌징 부분 위너 8관왕</span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<div class="pdtReview"><div class="js_rating ratingM"><span>4.5</span></div><span class="text">4.5</span> <span class="count">/ 18개의 리뷰</span></div>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</div>
<ul class="awardsCtt">
<li><img src="/static/front/resources/mobile/images/shopping/Awards_logo01.png" alt=""><p>2019 화해 신제품 어워드 파운데이션 부문 1위</p></li>
<li><img src="/static/front/resources/mobile/images/shopping/Awards_logo02.png" alt=""><p>2019 화해 신제품 어워드 파운데이션 부문 1위</p></li>
<li><img src="/static/front/resources/mobile/images/shopping/Awards_logo03.png" alt=""><p>2019 화해 신제품 어워드 파운데이션 부문 1위</p></li>
<li><img src="/static/front/resources/mobile/images/shopping/Awards_logo04.png" alt=""><p>2019 화해 신제품 어워드 파운데이션 부문 1위</p></li>
<li><img src="/static/front/resources/mobile/images/shopping/Awards_logo05.png" alt=""><p>2019 화해 신제품 어워드 파운데이션 부문 1위</p></li>
<li><img src="/static/front/resources/mobile/images/shopping/Awards_logo06.png" alt=""><p>2019 화해 신제품 어워드 파운데이션 부문 1위</p></li>
<li><img src="/static/front/resources/mobile/images/shopping/Awards_logo07.png" alt=""><p>2019 화해 신제품 어워드 파운데이션 부문 1위</p></li>
<li><img src="/static/front/resources/mobile/images/shopping/Awards_logo08.png" alt=""><p>2019 화해 신제품 어워드 파운데이션 부문 1위</p></li>
<li><img src="/static/front/resources/mobile/images/shopping/Awards_logo09.png" alt=""><p>2019 화해 신제품 어워드 파운데이션 부문 1위</p></li>
<li><img src="/static/front/resources/mobile/images/shopping/Awards_logo10.png" alt=""><p>2019 화해 신제품 어워드 파운데이션 부문 1위</p></li>
<li><img src="/static/front/resources/mobile/images/shopping/Awards_logo11.png" alt=""><p>2019 화해 신제품 어워드 파운데이션 부문 1위</p></li>
</ul>
</li>
<li>
<div class="awardPdt">
<div class="bestMark"><span>클렌징 부분 위너 8관왕</span></div>
<div class="pdtImg">
<a href="#" class="imgLink"><img src="/static/front/resources/mobile/images/temp/pdt_img1.png" alt="바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널"></a>
</div>
<div class="pdtTxt">
<p class="pdtHead" style="color:#4f8ffa;">10% OFF</p>
<p class="pdtName"><a href="#">바닐라 바닐라 바닐라클린 잇 제로 클렌징 밤 오리지널</a></p>
<div class="pdtReview"><div class="js_rating ratingM"><span>4.5</span></div><span class="text">4.5</span> <span class="count">/ 18개의 리뷰</span></div>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
</div>
<a href="javascript:void(0);" onclick="jsShopFloating('like_floating');" class="btn_like likeM"><span class="hide">찜하기</span></a><!-- 좋아요 선택시 class on 추가 -->
<a href="javascript:void(0);" onclick="jsShopFloating('cart_floating');" class="btn_cart cartM"><span class="hide">장바구니</span></a>
</div>
</li>
</ul>
</div>
pdt_list2
소스보기
<div class="pdt_list2 mgt20">
<ul class="list_box">
<li>
<a href="#" class="pdtImg">
<img src="/static/front/resources/web/images/temp/pdt_img1.png" alt="클린 잇 제로 클렌징 밤 오리지널">
<div class="soldOut">일시품절</div>
</a>
<div class="pdtTxt">
<p class="pdtName"><a href="#">클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice"><span class="sale">10%</span>25,200<em>원</em></p>
<a href="javascript:void(0)" onclick="jsShopFloating('like_floating');" class="btn_like likeS"><span class="hide">찜하기</span></a>
<a href="javascript:void(0)" onclick="jsShopFloating('cart_floating');" class="btn_cart cartS"><span class="hide">장바구니</span></a>
</div>
</li>
<li>
<a href="#" class="pdtImg">
<img src="/static/front/resources/web/images/temp/pdt_img1.png" alt="클린 잇 제로 클렌징 밤 오리지널">
</a>
<div class="pdtTxt">
<p class="pdtName"><a href="#">클린 잇 제로 클렌징 밤 오리지널</a></p>
<p class="pdtPrice">25,200<em>원</em></p>
<a href="javascript:void(0)" onclick="jsShopFloating('like_floating');" class="btn_like likeS"><span class="hide">찜하기</span></a>
<a href="javascript:void(0)" onclick="jsShopFloating('cart_floating');" class="btn_cart cartS"><span class="hide">장바구니</span></a>
</div>
</li>
</ul>
</div>
review list 1
-
ihkim****VIP
30대여성
BEST가을 피부관리에는 고민없이 늘 사용하던 클린 잇 제로!
더보기늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.순해요순해요순해요순해요2019.05.05피부 프로필 복합성 어두운 노란톤 수분충전 영양공급 트러블 케어 복합성 어두운 노란톤 수분충전 영양공급 트러블 케어 -
ihkim****VIP
30대여성
BEST가을 피부관리에는 고민없이 늘 사용하던 클린 잇 제로!
더보기늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.순해요순해요순해요순해요2019.05.05피부 프로필 복합성 어두운 노란톤 수분충전 영양공급 트러블 케어 복합성 어두운 노란톤 수분충전 영양공급 트러블 케어
소스보기
<div class="reviewListBox">
<ul>
<li>
<div class="reviewInfo">
<div class="userInfo">
<p class="userAcnt"><span class="userName">ihkim****</span><span class="userRank userLv1">VIP</span><!-- 기본등급 userLv1 ~ 최고등급 userLv4 --></p>
<p class="dftPoint"><span>30대</span><span>여성</span></p>
</div>
<div class="gradeStar js_rating ratingL"><span>4.5</span></div>
</div>
<div class="reviewBox">
<div class="reviewImg">
<ul>
<li class="imgCutting"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/480X480.png" alt=""></a></li>
<li class="imgCutting"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/280X480.png" alt=""></a></li>
<li class="imgCutting"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/480X280.png" alt=""></a></li>
<li class="imgCutting"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/480X480.png" alt=""></a></li>
<li class="imgCutting"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/280X480.png" alt=""></a></li>
<li class="imgCutting"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/480X280.png" alt=""></a></li>
</ul>
</div>
<p class="reviewTtl"><span class="BestIco typeM">BEST</span>가을 피부관리에는 고민없이 늘 사용하던 클린 잇 제로!</p>
<div class="js_acoCtt" data-line="3"><div>늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.</div></div>
<a href="javascript:void(0)" class="js_acoMore">더보기</a>
<div class="userPointBox">
<div class="userPoint">
<span>순해요</span><span>순해요</span><span>순해요</span><span>순해요</span>
</div>
<div class="reviewDate">2019.05.05</div>
</div>
<div class="skinProfile">
<em>피부 프로필</em>
<span>복합성</span>
<span>어두운 노란톤</span>
<span>수분충전</span>
<span>영양공급</span>
<span>트러블 케어</span>
<span>복합성</span>
<span>어두운 노란톤</span>
<span>수분충전</span>
<span>영양공급</span>
<span>트러블 케어</span>
</div>
</div>
</li>
<li>
<div class="reviewInfo">
<div class="userInfo">
<p class="userAcnt"><span class="userName">ihkim****</span><span class="userRank userLv1">VIP</span><!-- 기본등급 userLv1 ~ 최고등급 userLv4 --></p>
<p class="dftPoint"><span>30대</span><span>여성</span></p>
</div>
<div class="gradeStar js_rating ratingL"><span>4.5</span></div>
</div>
<div class="reviewBox">
<div class="reviewImg">
<ul>
<li class="imgCutting"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/480X480.png" alt=""></a></li>
<li class="imgCutting"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/280X480.png" alt=""></a></li>
<li class="imgCutting"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/480X280.png" alt=""></a></li>
<li class="imgCutting"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/480X480.png" alt=""></a></li>
<li class="imgCutting"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/280X480.png" alt=""></a></li>
<li class="imgCutting"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/480X280.png" alt=""></a></li>
</ul>
</div>
<p class="reviewTtl"><span class="BestIco typeM">BEST</span>가을 피부관리에는 고민없이 늘 사용하던 클린 잇 제로!</p>
<div class="js_acoCtt" data-line="3"><div>늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.</div></div>
<a href="javascript:void(0)" class="js_acoMore">더보기</a>
<div class="userPointBox">
<div class="userPoint">
<span>순해요</span><span>순해요</span><span>순해요</span><span>순해요</span>
</div>
<div class="reviewDate">2019.05.05</div>
</div>
<div class="skinProfile">
<em>피부 프로필</em>
<span>복합성</span>
<span>어두운 노란톤</span>
<span>수분충전</span>
<span>영양공급</span>
<span>트러블 케어</span>
<span>복합성</span>
<span>어두운 노란톤</span>
<span>수분충전</span>
<span>영양공급</span>
<span>트러블 케어</span>
</div>
</div>
</li>
</ul>
</div>
Rating
SIZE M
SIZE L
Write Rating
소스보기
SIZE M
<div class="js_rating ratingM"><span>3.5</span></div>
SIZE L
<div class="js_rating ratingL"><span>3.5</span></div>
Write Rating
<div class="js_rating js_userRating ratingL">
<span>2</span>
<div class="userRatingBox">
<button class="rating_1">1</button>
<button class="rating_2">2</button>
<button class="rating_3">3</button>
<button class="rating_4">4</button>
<button class="rating_5">5</button>
</div>
</div>
Slide
Slide
1 / 5
소스보기
<div class="pdtSlide js_pdtSlide">
<div class="pdtSlideImg js_pdtSlideImg">
<div class="pdtItem"><img src="/static/front/resources/web/images/temp/proImg01.png" alt=""></div>
<div class="pdtItem videoItem"><a href="javascript:void(0)"><span class="hide">비디오 재생</span></a><img src="/static/front/resources/web/images/temp/proImg02.png" alt=""></div>
<div class="pdtItem"><img src="/static/front/resources/web/images/temp/proImg01.png" alt=""></div>
<div class="pdtItem"><img src="/static/front/resources/web/images/temp/proImg02.png" alt=""></div>
<div class="pdtItem"><img src="/static/front/resources/web/images/temp/proImg01.png" alt=""></div>
</div>
<div class="pdtSlideDot js_pdtSlideDot">
</div>
</div>
Image Crop
Image Crop
소스보기
<!-- width, padding-top 지정 -->
<div class="imgCutting" style="width:110px;padding-top:110px;"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/480X480.png" alt=""></a></div>
<div class="imgCutting" style="width:110px;padding-top:110px;"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/480X280.png" alt=""></a></div>
<div class="imgCutting" style="width:110px;padding-top:110px;"><a href="javascript:void(0)" class="imgBox"><img src="/static/front/resources/web/images/temp/280X480.png" alt=""></a></div>
Paging
Paging
소스보기
<div class="pagingBox">
<div class="paging">
<a href="javascript:void(0)" class="prev"><span class="hide">이전페이지</span></a>
<a href="javascript:void(0)" class="active">1</a>
<a href="javascript:void(0)">2</a>
<a href="javascript:void(0)">3</a>
<a href="javascript:void(0)">4</a>
<a href="javascript:void(0)">5</a>
<a href="javascript:void(0)" class="next"><span class="hide">다음페이지</span></a>
</div>
</div>
Icon
Icon
VIP1 VIP2 VIP3 VIP4
소스보기
<span class="userRank userLv1">VIP1</span>
<span class="userRank userLv2">VIP2</span>
<span class="userRank userLv3">VIP3</span>
<span class="userRank userLv4">VIP4</span>
Info list
Title
유의사항
Dot
- 핫딜 상품은 한정수량인 경우 조기 품절될 수 있습니다.
- 조기 품절시 정상가로 구매가 가능합니다.
- 핫딜 상품은 장바구니 담아놨더라도 지정된 서비스 시간외에 구매
하실 경우 가격변동이 있을수 있습니다.
Star
- 핫딜 상품은 한정수량인 경우 조기 품절될 수 있습니다.
- 조기 품절시 정상가로 구매가 가능합니다.
- 핫딜 상품은 장바구니 담아놨더라도 지정된 서비스 시간외에 구매
하실 경우 가격변동이 있을수 있습니다.
Line
- 핫딜 상품은 한정수량인 경우 조기 품절될 수 있습니다.
- 조기 품절시 정상가로 구매가 가능합니다.
- 핫딜 상품은 장바구니 담아놨더라도 지정된 서비스 시간외에 구매
하실 경우 가격변동이 있을수 있습니다.
colorB
- 상품이 재입고 되어 판매가 시작될 때 입력하신 휴대폰번호로 알림 메시지를 발송해 드립니다.
- 메시지 수신 후 즉시 구매하지 않으면 다시 품절이 발생할 수 있으며, 판매가 혹은 할인금액은
재고 알림 신청 시점과 상이하게 변동될 수 있습니다.
소스보기
Title
<p class="titInfo">유의사항</p>
Dot
<ul class="dotInfo">
<li>핫딜 상품은 한정수량인 경우 조기 품절될 수 있습니다.</li>
<li>조기 품절시 정상가로 구매가 가능합니다.</li>
<li>핫딜 상품은 장바구니 담아놨더라도 지정된 서비스 시간외에 구매<br> 하실 경우 가격변동이 있을수 있습니다.</li>
</ul>
Star
<ul class="starInfo">
<li>핫딜 상품은 한정수량인 경우 조기 품절될 수 있습니다.</li>
<li>조기 품절시 정상가로 구매가 가능합니다.</li>
<li>핫딜 상품은 장바구니 담아놨더라도 지정된 서비스 시간외에 구매<br> 하실 경우 가격변동이 있을수 있습니다.</li>
</ul>
Line
<ul class="lineInfo">
<li>핫딜 상품은 한정수량인 경우 조기 품절될 수 있습니다.</li>
<li>조기 품절시 정상가로 구매가 가능합니다.</li>
<li>핫딜 상품은 장바구니 담아놨더라도 지정된 서비스 시간외에 구매<br> 하실 경우 가격변동이 있을수 있습니다.</li>
</ul>
colorB
<ul class="starInfo colorB">
<li><span class="fcRed">상품이 재입고 되어 판매가 시작될 때</span> 입력하신 휴대폰번호로 알림 메시지를 발송해 드립니다.</li>
<li>메시지 수신 후 즉시 구매하지 않으면 다시 품절이 발생할 수 있으며, 판매가 혹은 할인금액은<br> 재고 알림 신청 시점과 상이하게 변동될 수 있습니다.</li>
</ul>
fileUpload
fileUpload
상품 사용 사진을 등록해주세요
소스보기
<p class="lh1 fs14 notoB">상품 사용 사진을 등록해주세요</p>
<div class="fileUploadBtn mgt15">
<label for="imgUpload">
<p class="fs13 fc22 notoB">파일첨부(최대5개)</p>
<p class="fs12 fcbf">3MB 미만 jpg,gif,png 파일 가능</p>
</label>
<input type="file" class="hide" id="imgUpload">
</div>
<div class="fileUploadArea">
<p class="lh1 fs14 notoB mgt24">총 3장의 사진 등록</p>
<ul>
<li class="imgCutting">
<div class="imgBox">
<img src="/static/front/resources/web/images/temp/480X480.png" alt="">
</div>
<a href="javascript:void(0)" class="closeLink"><span class="hide">close</span></a>
</li>
<li class="imgCutting">
<div class="imgBox">
<img src="/static/front/resources/web/images/temp/280X480.png" alt="">
</div>
<a href="javascript:void(0)" class="closeLink"><span class="hide">close</span></a>
</li>
<li class="imgCutting">
<div class="imgBox">
<img src="/static/front/resources/web/images/temp/480X280.png" alt="">
</div>
<a href="javascript:void(0)" class="closeLink"><span class="hide">close</span></a>
</li>
<li class="imgCutting">
<div class="imgBox">
<img src="/static/front/resources/web/images/temp/photoReviewImg01.jpg" alt="">
</div>
<a href="javascript:void(0)" class="closeLink"><span class="hide">close</span></a>
</li>
</ul>
</div>
contents More
contents More
늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.
소스보기
<div class="js_acoCtt" data-line="3"><div>늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다. 최근에 50% 세일해서 잔뜩 쟁여두었어요! 클렌징을 하면 늘 잔여물이 남거나 건조하다는 느낌이 있었는데 부드러운 샤벳 제형이라 촉촉하고 세정력도 늘 사용하고 있는 클렌저입니다.</div></div>
<a href="javascript:void(0)" class="js_acoMore">더보기</a>
brandCategory
소스보기
<div class="brandCategory">
<ul>
<li>
<a href="#" class="current">
<div class="brandVisual">
<img src="/static/front/resources/mobile/images/temp/search_cateImg01.jpg" alt="">
</div>
<div class="brandName">바닐라닷컴</div>
<span class="count">112</span>
</a>
</li>
<li>
<a href="#" class="current">
<div class="brandVisual">
<img src="/static/front/resources/mobile/images/temp/search_cateImg02.jpg" alt="">
</div>
<div class="brandName">바닐라코</div>
<span class="count">3</span>
</a>
</li>
<li>
<a href="#" class="current">
<div class="brandVisual">
<img src="/static/front/resources/mobile/images/temp/search_cateImg03.jpg" alt="">
</div>
<div class="brandName">비바이바닐라</div>
<span class="count">0</span>
</a>
</li>
<li>
<a href="#" class="current">
<div class="brandVisual">
<img src="/static/front/resources/mobile/images/temp/search_cateImg04.jpg" alt="">
</div>
<div class="brandName">라라랩</div>
<span class="count">22</span>
</a>
</li>
<li>
<a href="#" class="current">
<div class="brandVisual">
<img src="/static/front/resources/mobile/images/temp/search_cateImg05.jpg" alt="">
</div>
<div class="brandName">컬리스튜디오</div>
<span class="count">1111</span>
</a>
</li>
</ul>
</div>