Design
Your Dream
Build your web design business with Cafe24.
Already have an account? Login

Build your web design business with Cafe24.
Already have an account? Login
Publish your own designs with Cafe24's powerful tools.
Sell to thousands of users with Cafe24’s Theme templatesCreate templates that can be applied to any online store, and sell to hundreds and thousands of customers with just one design.
Theme templates are themes created by Cafe24 partners for public use. A theme's HTML, CSS, and other files are packaged together as a single template that can be sold and applied to other online stores.
Customers can pay additional commission fee to have a theme customized by a Cafe24 partner.
Create seamless themes for both PC and Mobile devices.
Build the perfect design with minimal coding knowledge.
Exposure your themes to hundreds and thousands of potential customers on Cafe24 Store.
Hear from our partners.
We've been working with Cafe24 for over 14 years now, and with that time comes great trust. We're thankful to Cafe24 for creating a collaborative space where companies like us can continue to grow their business on a global platform.
Sujin Lee, MORENVYI found it a bit overwhelming having to respond to so many different customers at first. But after some time, I've come to realize that Cafe24 is the best place to meet different customers and sell creative products related to web design.
Hyeyoung Cho, GoodymallI had one customer switch to Cafe24 after having used a different platform previously. After a month of working on their new site, I found the editing and management tools really easy to use. I even received a thank you letter and present from the site owner because sales had gone up after the change.
Hyunguk Woo, WebteriorIt's really easy to build your own theme, even for beginners. And with all the customization and scalability options available, you can modify your theme however you want to meet your customers' needs. I hope to continue our business together with Cafe24.Jinyoung Park, The131DESIGN
As someone who does web design for a living, Cafe24 provides an excellent working environment when compared to the other available options. In particular, the 'Themes Editor' tool is so well done there is really no need to use your own editing software. It’s now been 10 years since I've started using Cafe24’s services and I still continue to use them now.
Hongsik Bae, Last-DesignThe hardest thing about running a business is gaining new customers. But with Cafe24 Partners however, not only have we been able to do business with customers from around the world, but we also hope to achieve even more growth as Cafe24 aims to expand its platform to even more countries abroad.
Kang Kim, FluidMeet our smart design tool
Smart Themes presents all your store features as configurable modules so you can design your store however you want by freely adding, modifying, or deleting modules.
Editing is simpler than ever with the modular design of storefronts on Cafe24. Make quick and easy adjustments by using the many options available on Smart Themes.
Smart Themes supports standardized web development languages so you can create the perfect theme without worrying about broken images or code.
<div module="product_listmain_[seq]">
<!--@css(/css/module/product/listmain_1.css)-->
<!--
$count = 9
$basket_result = /product/add_basket.html
$basket_option = /product/basket_option.html
-->
<h2><span>{$category_title_text}</span></h2>
<ul class="prdList column3">
<li class="item" id="anchorBoxId_{$product_no}">
<div class="box">
<a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="" class="thumb" /></a>
<div class="status">
<div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>
<div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>
</div>
<p class="name">
<strong><a href="/product/detail.html{$param}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
</p>
<ul module="product_ListItem">
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
</ul>
</div>
</li>
<li class="item" id="anchorBoxId_{$product_no}">
<div class="box">
<a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="" class="thumb" /></a>
<div class="status">
<div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>
<div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>
</div>
<p class="name">
<strong><a href="/product/detail.html{$param}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
</p>
<ul module="product_ListItem">
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
</ul>
</div>
</li>
</ul>
</div>
/* All */
.xans-product-[seq] { margin:22px 0 0; }
.xans-product-[seq] h2 { margin:0 0 16px; font-weight:normal; font-size:20px; font-family:Arial, Dotum, sans-serif; color:#2e2e2e; text-align:center; }
.xans-product-[seq] img { vertical-align:middle; }
.xans-product-[seq] ul.prdList { display:table; width:100%; min-width:756px; margin:-20px 0 0; font-size:0; line-height:0; }
.xans-product-[seq] ul.prdList li.item { display:inline-block; margin:20px 0; color:#757575; vertical-align:top; *display:inline; *zoom:1; }
.xans-product-[seq] ul.prdList li.item .box { margin:0 auto; font-size:12px; line-height:18px; text-align:center; }
.xans-product-[seq] ul.prdList li .color { overflow:hidden; display:inline-block; margin:3px 0 0 0; }
.xans-product-[seq] ul.prdList.column3 li .color { width:176px; }
.xans-product-[seq] ul.prdList.column4 li .color { width:116px; }
.xans-product-[seq] ul.prdList.column5 li .color { width:76px; }
.xans-product-[seq] ul.prdList li .chips { float:left; width:10px; height:10px; margin:0 2px 2px 0; border:1px solid #e3e3e3; font-size:0; line-height:0; }
.xans-product-[seq] ul.prdList .thumb { margin:0 0 10px; border:1px solid #ececec; }
.xans-product-[seq] ul.prdList .name { text-align:left; }
.xans-product-[seq] ul.prdList .name a { color:#2e2e2e; }
.xans-product-[seq] ul.prdList .status { margin:0 0 16px; padding:0 80px 4px 0; border-bottom:1px solid #e8e8e8; text-align:right; line-height:0; *zoom:1; }
.xans-product-[seq] ul.prdList .status:after { content:""; display:block; clear:both; }
.xans-product-[seq] ul.prdList .icon { float:left; text-align:left; }
.xans-product-[seq] ul.prdList .icon img { margin:0 -3px 6px 0; }
.xans-product-[seq] ul.prdList .button { margin:0 -80px 0 0; *zoom:1; }
.xans-product-[seq] ul.prdList .button img { margin:0 0 6px -3px; cursor:pointer; }
.xans-product-[seq] ul.prdList .button .option { display:inline; position:relative; *zoom:1; }
.xans-product-[seq] ul.prdList .mileage { display:block; }
.xans-product-[seq] ul.prdList span.grid { display:block; }
.xans-product-listitem li { text-align:left; }
/* Layout settings */
.xans-product-[seq] ul.column3 li.item { width:33.33%; }
.xans-product-[seq] ul.column3 li.item .box { width:237px; }
.xans-product-[seq] ul.column3 li.item .thumb { max-width:235px; }
.xans-product-[seq] ul.column4 li.item { width:25%; }
.xans-product-[seq] ul.column4 li.item .box { width:170px; }
.xans-product-[seq] ul.column4 li.item .thumb { max-width:168px; }
.xans-product-[seq] ul.column5 li.item { width:20%; }
.xans-product-[seq] ul.column5 li.item .box { width:131px; }
.xans-product-[seq] ul.column5 li.item .thumb { max-width:129px; }
/* module="product_ListItem" */
.xans-product-[seq] .xans-product-listitem { margin:0; }
.xans-product-[seq] .xans-product-listitem li .title { font-weight:normal; vertical-align:top; }
.xans-product-[seq] .xans-product-listitem li .title span { vertical-align:top; }
/* Promotion Period */
.xans-product-[seq] .discountPeriod { display:inline-block; z-index:10; position:relative; width:55px; height:19px; vertical-align:middle; *zoom:1; *display:inline; }
.xans-product-[seq] .discountPeriod .edge { position:absolute; left:50%; top:-6px; width:10px; height:6px; margin:0 0 0 -5px; font-size:0; line-height:0; background:url("http://img.echosting.cafe24.com/skin/base_en_US/common/ico_tip_edge.gif") no-repeat 0 0; }
.xans-product-[seq] .layerDiscountPeriod { display:none; position:absolute; left:50%; top:26px; width:247px; margin:0 0 0 -124px; border:1px solid #565960; font-size:12px; background-color:#fff; }
.xans-product-[seq] .layerDiscountPeriod strong.title { display:block; margin:0 0 12px; padding:0 35px 0 0; font-weight:bold; color:#2e2e2e; }
.xans-product-[seq] .layerDiscountPeriod .content { padding:9px 10px 12px 14px; font-family:Verdana, Dotum, sans-serif; }
.xans-product-[seq] .layerDiscountPeriod .content p { margin:2px 0 0; font-size:11px; color:#000; line-height:16px; color:#757575; letter-spacing:-1px; }
.xans-product-[seq] .layerDiscountPeriod .content p strong { font-weight:normal; font-size:12px; color:#2e2e2e; }
.xans-product-[seq] .layerDiscountPeriod .content p strong span { font-size:11px; }
.xans-product-[seq] .layerDiscountPeriod .close { position:absolute; right:14px; top:14px; }
.xans-product-[seq] .layerDiscountPeriod .close img { cursor:pointer; }
<div module="product_detail">
<!--@css(/css/module/product/detail.css)-->
<!--@js(/js/module/product/product_image.js)-->
<div class="headingArea">
<h2>[{$product_code}] {$name}</h2>
<span class="delivery {$delvtype_display|display}">(International shipping available)</span>
<span class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</span>
<div class="supply {$supply_link_display|display}">
<span>{$supply_top_logo}</span>
<a href="#none" onclick="{$supply_go_action}"><img src="{$supply_go_img}" alt="Visit Store" /></a>
</div>
</div>
<div class="detailArea">
<div class="imgArea" module="product_image">
<div class="keyImg">
<a href="/product/image_zoom2.html{$zoom_param}" alt="{$product_code}" onclick="window.open(this.href, 'image_zoom2', 'toolbar=no,scrollbars=auto,resizable=yes,width=450,height=693,left=0,top=0', this);return false;"><img src="{$big_img}" alt="" class="{$big_img_class} {$img_display|display}" /></a>
</div>
<div class="listImg" module="product_addimage">
<ul>
<li>{$add_img}</li>
<li>{$add_img}</li>
</ul>
</div>
<div class="control">
<span class="prev"><a href="#none" onclick="{$action_prev_product}" style="display:{$btn_prev_display};"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_product_prev.gif" alt="Prev" /></a></span>
<span class="next"><a href="#none" onclick="{$action_next_product}" style="display:{$btn_next_display};"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_product_next.gif" alt="Next" /></a></span>
<a href="/product/image_zoom2.html{$zoom_param}" onclick="window.open(this.href, 'image_zoom2', 'toolbar=no,scrollbars=auto,resizable=yes,width=560,height=710,left=0,top=0', this);return false;"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_product_zoom.gif" alt="Zoom" /></a>
</div>
<div class="{$colorchip_display|display}">
<div class="color" module="product_Colorchip">
<span class="chips" style="background-color:{$color}"></span>
<span class="chips" style="background-color:{$color}"></span>
</div>
</div>
<div class="button" module="product_action">
<a href="#none" onclick="{$action_recommend}"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_recommend_email.gif" alt="recommend this to a Friend" /></a>
<a href="/board/inquiry/write.html{$inquiry_param}" class="{$inquiry_display|display}"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_large_purchase.gif" alt="Wholesale inquiries" /></a>
</div>
</div>
<div class="infoArea">
<div module="product_detaildesign">
<!--
count = 10
-->
<table border="1" summary="">
<caption>{$name} Basic Information</caption>
<tbody>
<tr class="{$item_display|display}">
<th scope="row">{$item_title}</th>
<td>{$item_content}</td>
</tr>
<tr class="{$item_display|display}">
<th scope="row">{$item_title}</th>
<td>{$item_content}</td>
</tr>
</tbody>
</table>
</div>
<table border="1" summary="">
<caption>Product promotion via SNS</caption>
<tbody>
<tr class="{$sns_display|display}">
<th scope="row">Product promotion via SNS</th>
<td class="social">{$facebook_icon} {$twitter_icon} <ul module="product_customsns"><li>{$customsns_icon}</li></ul></td>
</tr>
</tbody>
</table>
<div id="zoom_wrap"></div>
<p class="{$naver_mileage_exception_display|display}"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/txt_naver.gif" alt="To use or earn Naver Mileages, please check out through personal payment window." /></p>
<table border="1" summary="">
<caption>Product Option</caption>
<tbody module="product_option">
<tr module="product_addoption">
<th scope="row">{$add_option_name}</th>
<td>
<span class="inputWrap">{$form.add_option}</span>
<span class="txtByte" title="current length/max length">(<strong class="length">0</strong>/{$option_maxlength})</span>
</td>
</tr>
<tr module="product_option">
<th scope="row">{$option_name}</th>
<td>{$form.option}</td>
</tr>
<tr class="{$option_push_button_display|display}" id="{$option_push_button_id}">
<td colspan="2" class="selectButton"><a href="#none" onclick="{$action_push_button}"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_manual_select.gif" alt="Select item with details above" /></a></td>
</tr>
<tr module="product_fileoption">
<th scope="row">{$file_option_name}</th>
<td class="fileInfo">
{$form.file_option}
<ul class="infoDesc">
<li>- You can upload up to 5 separates files totaling less than {$file_option_limit}M.</li>
<li>- If an identical item is in the cart, the item will be replaced with the option file currently being uploaded.</li>
</ul>
</td>
</tr>
</tbody>
</table>
<div class="guideArea">
<p class="info {$limit_display|display}">(Minimum Order : {$minimum_limit} or more<span class="{$maximum_limit_display|display}"> / Maximum Order {$maximum_limit} or less</span>)</p>
<span class="sizeGuide {$size_guide_display|display}"><a href="#none" class="{$size_guide_class}" product_no="{$product_no}">Size Charts</a></span>
</div>
<div class="productSet normal" module="product_setproduct">
<div class="product">
<div class="seperate">
<table border="1" summary="">
<caption>Basic Information</caption>
<tbody>
<tr>
<th scope="row">Product Name</th>
<td><strong>{$product_name}</strong> (Sold in sets of {$set_quantity})</td>
</tr>
<tr class="{$product_price_display|display}">
<th scope="row">Price</th>
<td class="price {$product_price_del}">{$product_price}</td>
</tr>
<tr class="{$product_sale_price_display|display}">
<th scope="row">Discounted Price</th>
<td class="sale">{$product_sale_price}</td>
</tr>
<tr class="{$stock_quantity_display|display}" >
<th scope="row">Inventory amount</th>
<td>{$stock_quantity}</td>
</tr>
</tbody>
</table>
</div>
<div class="option">
<table border="1" summary="">
<caption>Option Information</caption>
<tbody>
<tr module="product_addoption">
<th>{$add_option_name}</th>
<td>
<span class="inputWrap">{$form.add_option}</span>
<span class="txtByte" title="current length/max length">(<strong class="length">0</strong>/{$option_maxlength})</span>
</td>
</tr>
<tr module="product_option">
<th>{$option_name}</th>
<td>{$form.option}</td>
</tr>
<tr module="product_noneoption">
<th>Product Select</th>
<td>{$form.noneoption}</td>
</tr>
</tbody>
</table>
</div>
<div class="sizeGuide {$size_guide_display|display}">
<a href="#none" class="{$size_guide_class}" product_no="{$product_no}"><span>Size Charts</span></a>
</div>
</div>
<div class="product">
<div class="seperate">
<table border="1" summary="">
<caption>Option Information</caption>
<tbody>
<tr>
<th scope="row">Product Name</th>
<td><strong>{$product_name}</strong> ({$set_quantity})</td>
</tr>
<tr class="{$product_price_display|display}">
<th scope="row">Price</th>
<td class="price {$product_price_del}">{$product_price}</td>
</tr>
<tr class="{$product_sale_price_display|display}">
<th scope="row">Discounted Price</th>
<td class="sale">{$product_sale_price}</td>
</tr>
<tr class="{$stock_quantity_display|display}" >
<th scope="row">Inventory amount</th>
<td>{$stock_quantity}</td>
</tr>
</tbody>
</table>
</div>
<div class="option">
<table border="1" summary="">
<caption>Option Information</caption>
<tbody>
<tr module="product_addoption">
<th>{$add_option_name}</th>
<td>
<span class="inputWrap">{$form.add_option}</span>
<span class="txtByte" title="current length/max length">(<strong class="length">0</strong>/{$option_maxlength})</span>
</td>
</tr>
<tr module="product_option">
<th>{$option_name}</th>
<td>{$form.option}</td>
</tr>
<tr module="product_noneoption">
<th>Product Select</th>
<td>{$form.noneoption}</td>
</tr>
</tbody>
</table>
</div>
<div class="sizeGuide {$size_guide_display|display}">
<a href="#none" class="{$size_guide_class}" product_no="{$product_no}"><span>Size Charts</span></a>
</div>
</div>
</div>
<div class="productSet" module="product_addproduct">
<div class="recommend">
<strong>Buy together</strong> To purchase, please select the item.
<a href="#self" class="toggle"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_recommend_close.gif" alt="Hide Buy together" /></a>
</div>
<div class="product">
<div class="seperate">
<table border="1" summary="">
<caption>Basic Information</caption>
<tbody>
<tr>
<th scope="row">Product Image</th>
<td class="thumbnail"><a href="/product/detail.html?product_no={$product_no}"><img src="{$product_image}" alt="" /></a></td>
</tr>
<tr>
<th scope="row">Product Name</th>
<td><strong>{$product_name}</strong></td>
</tr>
<tr class="{$product_price_display|display}">
<th scope="row">Price</th>
<td class="price {$product_price_del}">{$product_price}</td>
</tr>
<tr class="{$product_sale_price_display|display}">
<th scope="row">Discounted Price</th>
<td class="sale">{$product_sale_price}</td>
</tr>
</tbody>
</table>
</div>
<div class="option">
<table border="1" summary="">
<caption>Option Information</caption>
<tbody>
<tr module="product_addoption">
<th>{$add_option_name}</th>
<td>
<span class="inputWrap">{$form.add_option}</span>
<span class="txtByte" title="current length/max length">(<strong class="length">0</strong>/{$option_maxlength})</span>
</td>
</tr>
<tr module="product_option">
<th>{$option_name}</th>
<td>{$form.option}</td>
</tr>
<tr module="product_noneoption">
<th>Product Select</th>
<td>{$form.noneoption}</td>
</tr>
<tr class="{$add_option_push_button_display|display}" id="{$add_option_push_button_id}">
<td colspan="2" class="selectButton"><a href="#none" onclick="{$add_action_push_button}"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_manual_select.gif" alt="Select item with details above" /></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="product">
<div class="seperate">
<table border="1" summary="">
<caption>Basic Information</caption>
<tbody>
<tr>
<th scope="row">Product Image</th>
<td class="thumbnail"><a href="/product/detail.html?product_no={$product_no}"><img src="{$product_image}" alt="" /></a></td>
</tr>
<tr>
<th scope="row">Product Name</th>
<td><strong>{$product_name}</strong></td>
</tr>
<tr class="{$product_price_display|display}">
<th scope="row">Price</th>
<td class="price {$product_price_del}">{$product_price}</td>
</tr>
<tr class="{$product_sale_price_display|display}">
<th scope="row">Discounted Price</th>
<td class="sale">{$product_sale_price}</td>
</tr>
</tbody>
</table>
</div>
<div class="option">
<table border="1" summary="">
<caption>Option Information</caption>
<tbody>
<tr module="product_addoption">
<th>{$add_option_name}</th>
<td>
<span class="inputWrap">{$form.add_option}</span>
<span class="txtByte" title="current length/max length">(<strong class="length">0</strong>/{$option_maxlength})</span>
</td>
</tr>
<tr module="product_option">
<th>{$option_name}</th>
<td>{$form.option}</td>
</tr>
<tr module="product_noneoption">
<th>Product Select</th>
<td>{$form.noneoption}</td>
</tr>
<tr class="{$add_option_push_button_display|display}" id="{$add_option_push_button_id}">
<td colspan="2" class="selectButton"><a href="#none" onclick="{$add_action_push_button}"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_manual_select.gif" alt="Select item with details above" /></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="{$total.total_id}" class="{$total.total_display|display}">
<p class="info {$single_item_display|display}"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/ico_information.gif" alt="information" /> Select quantity.</p>
<p class="info {$several_item_display|display}"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/ico_information.gif" alt="information" /> To add product, select an option in the above option box.</p>
<table border="1" summary="">
<caption>Product List</caption>
<colgroup>
<col style="width:auto;" />
<col style="width:76px;" />
<col style="width:150px;" />
</colgroup>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody class="{$quantity_display|display}">
<tr>
<td>{$name}</td>
<td>
<span class="quantity">
{$quantity}
<a href="#none"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_count_up.gif" alt="up" class="{$quantity_up_class} up" /></a>
<a href="#none"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_count_down.gif" alt="down" class="{$quantity_down_class} down" /></a>
</span>
</td>
<td class="right"><span class="{$total.quantity_price}">{$product_price}</span> <span class="mileage {$mileage_display|display}">(<img src="{$mileage_mileage_icon}" /> <span class="{$total.mileage_price}">{$mileage_value}</span>)</span></td>
</tr>
</tbody>
<!--Do not delete -->
<tbody>
<!-- tr>
<td>
<p class="product">
$Product name<br />
<span>$option</span>
</p>
</td>
<td>
<span class="quantity">
<input type="text" class="quantity_opt" />
<a href="#none"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_count_up.gif" alt="up" class="up" /></a>
<a href="#none"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_count_down.gif" alt="down" class="down" /></a>
</span>
<a href="#none"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_price_delete.gif" alt="Remove" class="option_box_del" /></a>
</td>
<td class="right">
<span>$Price</span>
<span class="mileage">(<img src="http://img.echosting.cafe24.com/design/skin/admin/ko_KR/product/ico_pay_point.gif" /> <span class="mileage_price">$Points</span>)</span>
</td>
</tr -->
</tbody>
<tfoot>
<tr>
<td colspan="3"><strong>Total</strong>(Quantity) : <span class="{$total.total_cnt}"><strong><em>0</em></strong> (0 item)</span></td>
</tr>
</tfoot>
</table>
</div>
<div module="product_action">
<div class="btnArea">
<a href="#none" class="first {$buy_display|display}" onclick="{$action_buy}"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_buy_big.gif" alt="Buy Now" /></a>
<a href="#none" class="{$basket_display|display}" onclick="{$action_basket}"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_cart_big.gif" alt="Add to Cart" /></a>
<span class="{$soldout_display|display}"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_sold_out.gif" alt="SOLD OUT" /></span>
<a href="#none" onclick="{$action_wishlist}" class="{$wishlist_display|display}"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/btn_wish2.gif" alt="Add to Wish List" /></a>
</div>
<div id="NaverChk_Button"></div>
<div module="myshop_benefit">
<p class="thanks {$display_benefit|display}"><img src="http://img.echosting.cafe24.com/skin/base_en_US/product/ico_information.gif" alt="" /> Thank you for shopping with us.</p>
<div class="myInfo {$display_benefit|display}">
<p class="myThumb"><img src="{$group_image}" alt="{$group_name}" onerror="this.src='http://img.echosting.cafe24.com/skin/base_en_US/member/img_member_default.gif';" /></p>
<p class="member"><strong>{$member_name}</strong>, your membership level is <em>[{$group_name}].</em></p>
<p class="{$display_no_benefit|display}"> Please enjoy <strong>{$dc_price}{$dc_type}</strong> {$use_dc}discounts on purchases over <strong>{$dc_pay} {$dc_min_price}</strong>. {$dc_max_percent}</p>
<p class="{$display_with_all|display}">Please enjoy <strong>{$dc_price_mileage}{$dc_type_mileage}</strong> {$use_dc_mileage} reward points on purchases over <strong>{$dc_pay} {$dc_min_price_mileage}</strong>. {$dc_max_mileage_percent}</p>
</div>
</div>
</div>
</div>
</div>
<div class="supplyInfo {$supply_info_display|display}">
{$supply_info}
</div>
</div>
.xans-product-detail { position:relative; margin:0 auto; padding:30px 0 0 0; }
.xans-product-detail .detailArea { padding:0 0 0 378px; *zoom:1; }
.xans-product-detail .detailArea:after { content:""; display:block; clear:both; }
/* headingArea */
.xans-product-detail .headingArea { position:relative; padding:0 0 10px; margin:0 0 15px; line-height:24px; border-bottom:1px solid #e8e8e8; }
.xans-product-detail .headingArea h2 { display:inline; font-size:14px; color:#2e2e2e; }
.xans-product-detail .headingArea .icon img { margin:0 -3px 0 0; vertical-align:middle; }
.xans-product-detail .headingArea .supply { overflow:hidden; float:right; *zoom:1; }
.xans-product-detail .headingArea .supply span { padding:0 3px 0 0; font-size:16px; font-weight:bold; color:#555; }
/* imgArea */
.xans-product-detail .imgArea { float:left; width:378px; margin:0 0 0 -378px; }
.xans-product-detail .imgArea .keyImg { width:346px; margin:0 auto; }
.xans-product-detail .imgArea .keyImg img { max-width:344px; border:1px solid #ececec; cursor:pointer; }
.xans-product-detail .imgArea .listImg { overflow:hidden; width:346px; margin:30px auto 0; }
.xans-product-detail .imgArea .listImg ul { height:77px; margin:0 0 0 2px; font-size:0; line-height:0; }
.xans-product-detail .imgArea .listImg li { display:inline-block; margin:0 1px; font-size:12px; line-height:14px; vertical-align:top; *display:inline; *zoom:1; }
.xans-product-detail .imgArea .listImg li img { width:65px; height:75px; border:1px solid #ececec; cursor:pointer; }
.xans-product-detail .imgArea .listImg button { position:absolute; top:0; width:21px; height:77px; font-size:0; line-height:0; color:transparent; background:url("http://img.echosting.cafe24.com/skin/base_en_US/product/btn_product_detail_ctrl.png") no-repeat; }
.xans-product-detail .imgArea .listImg .prev { left:0; background-position:0 0; }
.xans-product-detail .imgArea .listImg .next { right:0; background-position:-31px 0; }
.xans-product-detail .imgArea .control { overflow:hidden; width:346px; margin:30px auto 0; border:1px solid #d7d5d5; text-align:center; background:#fbfafa; }
.xans-product-detail .imgArea .control .prev { float:left; border-right:1px solid #d7d5d5; }
.xans-product-detail .imgArea .control .next { float:right; border-left:1px solid #d7d5d5; }
.xans-product-detail .imgArea .color { overflow:hidden; margin:20px 0 17px; }
.xans-product-detail .imgArea .chips { float:left; width:28px; height:18px; margin:0 3px 3px 0; border:1px solid #e3e3e3; font-size:0; line-height:0; }
.xans-product-detail .imgArea .button { float:none; width:346px; margin:30px auto 0; padding:0 0 23px; border-top:0; border-bottom:1px solid #e8e8e8; text-align:center; }
.xans-product-detail .imgArea .button img { margin:0 3px; }
/* infoArea */
.xans-product-detail .infoArea p.delivery { padding:10px 0 20px; }
.xans-product-detail .infoArea .guideArea { position:relative; }
.xans-product-detail .infoArea .guideArea .info { margin:7px 0 0; padding:8px 0 0 11px; border-top:1px solid #e8e8e8; color:#757575; }
.xans-product-detail .infoArea .guideArea .sizeGuide { position:absolute; bottom:0; right:0; margin:8px 0 0; background:url("http://img.echosting.cafe24.com/skin/base_en_US/product/ico_sizeGuide.gif") no-repeat 0 3px; }
.xans-product-detail .infoArea .sizeGuide a { display:inline-block; padding:2px 15px 2px 24px; color:#353535; vertical-align:top; background:url("http://img.echosting.cafe24.com/skin/base_en_US/product/ico_sizeGuide_go.gif") no-repeat 100% 6px; *zoom:1; }
.xans-product-detail .infoArea .sizeGuide a:hover { text-decoration:none; }
.xans-product-detail .infoArea table { border:0; font-size:12px; margin:10px 0 0; }
.xans-product-detail .infoArea th { font-weight:normal; color:#353535; width:125px; padding:7px 0 8px 9px; text-align:left; vertical-align:middle; }
.xans-product-detail .infoArea td { padding:7px 6px 8px 0; vertical-align:middle; }
.xans-product-detail .infoArea img { vertical-align:middle; }
.xans-product-detail .infoArea input { height:22px; color:#353535; }
.xans-product-detail .infoArea select { width:100%; height:24px; font-size:12px; color:#353535; }
.xans-product-detail .infoArea td #delivery_cost_prepaid { margin:0 0 5px; }
.xans-product-detail .infoArea td .inputWrap { display:block; padding:0 4px; border:1px solid #c5c5c5; border-right:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; background:#fff; }
.xans-product-detail .infoArea td .inputWrap input { width:100%; border:0; font-size:11px; line-height:22px; }
.xans-product-detail .infoArea td.social { padding:4px 0 0; }
.xans-product-detail .infoArea td.social img { cursor:pointer; }
.xans-product-detail .infoArea td .sale { text-decoration:line-through; }
.xans-product-detail .infoArea td .period { display:block; margin:7px 0 0; font-size:11px; color:#353535; }
.xans-product-detail .infoArea td .mileage li { line-height:1.7em; }
.xans-product-detail .infoArea td .quantity { position:relative; display:block; }
.xans-product-detail .infoArea td .quantity input { width:30px; height:18px; border:1px solid #bcbcbc; }
.xans-product-detail .infoArea td .quantity .QuantityUp { position:absolute; left:32px; top:0; }
.xans-product-detail .infoArea td .quantity .QuantityDown { position:absolute; left:32px; bottom:0; }
.xans-product-detail .infoArea td .delivery input { border:0; }
.xans-product-detail .infoArea td .delivery label { margin:0 30px 0 0; }
.xans-product-detail .infoArea td img.qrcode { border:1px solid #e1e1e1; }
.xans-product-detail .infoArea td #span_product_price_text { font-weight:normal; }
.xans-product-detail .infoArea td #span_product_coupon_dc_price { color:#070705; }
.xans-product-detail .infoArea td.fileInfo { color:#757575; }
.xans-product-detail .infoArea td.fileInfo input { width:288px; border:1px solid #c5c5c5; border-right:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; }
.xans-product-detail .infoArea td.fileInfo .infoDesc { margin:0 0 10px 0; }
.xans-product-detail .infoArea td.fileInfo li { margin:4px 0 0; color:#757575; font-size:11px; }
.xans-product-detail .infoArea td.fileInfo li img { vertical-align:bottom; }
.xans-product-detail .delv_price_B strong { font-weight:normal; }
.xans-product-detail .btnTooltip { display:inline-block; position:relative; z-index:10; vertical-align:middle; *display:inline; *zoom:1; }
.xans-product-detail .infoArea .xans-product-option tr th { padding:5px 0 5px 4px; }
.xans-product-detail .infoArea .xans-product-option tr td { padding:4px 10px 4px 0; }
.xans-product-detail .infoArea .xans-product-option tr:first-child th,
.xans-product-detail .infoArea .xans-product-option .xans-product-fileoption th { padding-top:14px; border-top:1px solid #e8e8e8; }
.xans-product-detail .infoArea .xans-product-option tr:first-child td,
.xans-product-detail .infoArea .xans-product-option .xans-product-fileoption td { padding-top:10px; border-top:1px solid #e8e8e8; }
.xans-product-detail .infoArea .xans-product-option td.selectButton { text-align:right; }
.xans-product-detail .infoArea .xans-product-addoption td .inputWrap { display:inline-block; width:188px; }
.xans-product-detail .infoArea .xans-product-addoption .txtByte { font-size:11px; vertical-align:middle; letter-spacing:-1px; }
.xans-product-detail .infoArea .xans-product-addoption .txtByte strong { color:#008bcc; }
/* xans-product-action */
.xans-product-action { width:378px; padding:30px 0 10px; border-top:1px solid #e8e8e8; }
.xans-product-action .btnArea { overflow:hidden; margin:0 0 15px; text-align:left; font-size:0; line-height:0; }
.xans-product-action .btnArea a { display:inline-block; vertical-align:top; }
.xans-product-action .btnArea a img { margin:0 0 0 2px; font-size:12px; line-height:14px; cursor:pointer; }
.xans-product-action .btnArea a:first-child img { margin-left:0; }
/* eventArea */
.xans-product-detail .eventArea { color:#353535; }
.xans-product-detail .eventArea h3 { padding:0 0 0 9px; border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; font-size:12px; color:#008bcc; line-height:39px; }
.xans-product-detail .eventArea .event { padding:27px 10px 46px 9px; color:#353535; line-height:18px; }
/* xans-myshop-benefit */
.xans-myshop-benefit { margin:30px 0; }
.xans-myshop-benefit .thanks { padding:7px 0 11px 9px; border:1px solid #d6d4d4; border-bottom:1px solid #e8e7e7; color:#353535; background:#fbfbfb; }
.xans-myshop-benefit .thanks img { margin:-1px 6px 0 0; vertical-align:middle; }
.xans-myshop-benefit .myInfo { overflow:hidden; padding:9px 10px 10px 100px; border:1px solid #d6d4d4; border-top:0; }
.xans-myshop-benefit .myInfo p { color:#757575; line-height:18px; }
.xans-myshop-benefit .myThumb { float:left; margin:0 0 0 -91px; }
.xans-myshop-benefit .member { margin:2px 0 19px; }
.xans-myshop-benefit .member strong { color:#353535; }
.xans-myshop-benefit .member em { font-style:normal; color:#353535; }
/* Product Option Preview */
#image_zoom_small { display:block; position:absolute; z-index:999; background:#fff; border:1px solid #aaa; filter:alpha(opacity=50); opacity:0.5; }
#zoom_wrap { position:absolute; top:30px; left:380px; z-index:100; }
.image_zoom_large { position:absolute; z-index:999; width:350px; height:350px; overflow:hidden; background:#fff; border:1px solid #aaa; }
.image_zoom_large .image_zoom_large_relative { position:relative; }
.image_zoom_large .image_zoom_large_relative #zoom_image { position:absolute; z-index:99; }
#NaverChk_Button { clear:both; margin:10px 0 0; float:right; }
#divNvPointInfo { display:none; position:absolute; z-index:99; width:245px; padding:10px; color:#777; font-size:11px; background:#fff; border:1px solid #5B9761; }
#divNvPointInfo a { display:block; padding:5px 0 0; color:#1ec228; }
#divNvPointInfo a img { vertical-align:middle; }
#imgNaverMileageHelp { cursor:pointer; }
/* Bundle, Complementary products */
.infoArea .productSet { margin:10px 0 0; border:1px solid #d7d5d5; }
.infoArea .productSet table { table-layout:fixed; margin:0; }
.infoArea .productSet th { width:100px; padding:5px 5px 5px 8px; color:#353535; }
.infoArea .productSet td { padding:5px 10px; color:#353535; }
.infoArea .productSet td.del { text-decoration:line-through; }
.infoArea .productSet td.price { font-weight:bold; color:#ff8a56; }
.infoArea .productSet td.sale { font-weight:bold; color:#f95959; }
.infoArea .productSet td.thumbnail img { width:78px; height:108px; margin:3px 0 7px; border:1px solid #ececec; }
.infoArea .productSet .product { padding:9px 0 4px; border-top:1px solid #e9e9e9; vertical-align:top; }
.infoArea .productSet .sizeGuide { padding:5px 10px; height:19px; border-top:1px solid #d7d5d5; text-align:right; }
.infoArea .productSet .sizeGuide a { margin:0; padding-left:0; position:static; }
.infoArea .productSet .sizeGuide a span { display:inline-block; padding:0 0 0 24px; background:url("http://img.echosting.cafe24.com/skin/base_en_US/product/ico_sizeGuide.gif") no-repeat 0 2px; *zoom:1; }
.infoArea .productSet .seperate,
.infoArea .productSet .option { vertical-align:top; *zoom:1; }
.infoArea .productSet .option td { padding:4px 10px; }
.infoArea .productSet .info { padding:0 0 0 58px; font-size:11px; color:#8f8f91; }
.infoArea .productSet .selectButton { text-align:right; }
.infoArea .productSet .recommend { position:relative; padding:0 0 0 8px; font-size:11px; color:#757575; line-height:38px; background:#fbfafa; }
.infoArea .productSet .recommend strong { padding:0 7px 0 0; font-size:12px; color:#353535; }
.infoArea .productSet .recommend .toggle { position:absolute; right:10px; top:4px; }
.infoArea .productSet.normal { border:0; }
.infoArea .productSet.normal th { border-right:1px solid #d7d5d5; }
.infoArea .productSet.normal tr:first-child th,
.infoArea .productSet.normal tr:first-child td { padding-top:11px; padding-bottom:11px; border-bottom:1px solid #d7d5d5; background:#fbfafa; }
.infoArea .productSet.normal .option th { padding-top:0; }
.infoArea .productSet.normal .option td { padding:1px 10px 7px; }
.infoArea .productSet.normal .option tr:first-child th { padding-top:5px; padding-bottom:6px; border-bottom:0; background:none; }
.infoArea .productSet.normal .option tr:first-child td { padding-top:1px; padding-bottom:6px; border-bottom:0; background:none; }
.infoArea .productSet.normal .product { margin:1px 0 0; padding:0; border:1px solid #d7d5d5; }
.infoArea .productSet .xans-product-addoption td .inputWrap { display:inline-block; padding-left:0; width:198px; }
.infoArea .productSet.hide .product { display:none; }
/* All products */
#totalProducts { margin:21px 0 0; }
#totalProducts .info { padding:0 0 9px; font-size:11px; color:#f65b54; line-height:14px; }
#totalProducts .info img { margin:0 5px 0 0; }
#totalProducts table { margin:0; }
#totalProducts table .left { text-align:left; }
#totalProducts table .center { text-align:center; }
#totalProducts table .right { padding-right:9px; font-weight:bold; color:#008bcc; text-align:right; }
#totalProducts thead th { width:auto; height:0; padding:0; font-size:0; line-height:0; *position:absolute;}
#totalProducts tbody th { vertical-align:middle; }
#totalProducts tbody td { padding:9px 0; border-top:1px solid #ebebeb; color:#353535; line-height:18px; vertical-align:middle; word-wrap:break-word; word-break:break-all; }
#totalProducts tbody tr td:first-child { padding-left:4px; }
#totalProducts tbody tr:first-child td { border-top:1px solid #9a9ba0; }
#totalProducts tbody td p { padding:0 10px 0 0; font-weight:bold; line-height:21px; }
#totalProducts tbody td p.product span { font-weight:normal; color:#757575; line-height:18px; }
#totalProducts tbody td p.product span.soldOut { color:#008bcc; }
#totalProducts tbody td img { vertical-align:middle; }
#totalProducts tbody td .quantity { display:inline-block; position:relative; width:50px; vertical-align:top; *margin:0 4px 0 0; }
#totalProducts tbody td .quantity input { width:22px; height:23px; padding:0 2px 0 3px; line-height:23px; border:1px solid #d4d8d9; border-radius:3px 0 0 3px; *margin-top:-1px; }
#totalProducts tbody td .quantity .up { position:absolute; left:28px; top:0; }
#totalProducts tbody td .quantity .down { position:absolute; left:28px; top:12px; }
#totalProducts tbody.option_products tr td .quantity input,
#totalProducts tbody.add_products tr td .quantity input { height:19px; line-height:19px; }
#totalProducts tbody.option_products tr td .quantity .down,
#totalProducts tbody.add_products tr td .quantity .down { bottom:0; top:auto; }
#totalProducts tbody td .mileage { display:block; white-space:nowrap; }
#totalProducts tbody td .mileage_price { }
#totalProducts tfoot td { padding:34px 9px 19px; border-top:1px solid #9a9ba0; color:#353535; vertical-align:middle; background:#fff; }
#totalProducts tfoot td .total { color:#008bcc; }
#totalProducts tfoot td .total em { font-style:normal; font-size:21px; }
#totalProducts + .xans-product-action { margin-top:0; }
/* Shipping Rates */
.differentialShipping { display:none; overflow:hidden; position:absolute; left:50%; top:17px; z-index:100; width:350px; margin:0 0 0 -176px; }
.differentialShipping h3.title { height:35px; padding:0 35px 0 19px; border:0; color:#fff; font-size:14px; line-height:35px; background:#495164; }
.differentialShipping .content { padding:12px 18px 14px 18px; border:1px solid #757575; border-top:0; text-align:center; background:#fff; }
.differentialShipping .close { position:absolute; right:14px; top:12px; }
.differentialShipping .close img { cursor:pointer; }
.differentialShipping .content ul { color:#757575; line-height:25px; }
.differentialShipping .content li { overflow:hidden; }
.differentialShipping .content li strong { float:left; font-weight:normal; }
.differentialShipping .content li span { float:right; color:#2e2e2e; }
.differentialShipping .content .info { margin:7px 0 0; padding:7px 0 0; border-top:1px dotted #b0b1b3; font-size:11px; color:#80aeef; text-align:right; }
/* Social media promotion */
.xans-product-customsns,
.xans-product-customsns ul,
.xans-product-customsns li { display:inline; vertical-align:middle; }
.xans-product-customsns img { margin-bottom:2px; }
/* Apply customer level-based discount to */
.xans-product-detail .infoArea td > span > ul.discountMember > li { position:relative; float:left; }
.xans-product-detail .infoArea td ul.discountMember li a { display:block; margin:0 4px 4px 0; }
.xans-product-detail .infoArea td ul li .discount_layer { z-index:10; overflow:auto; position:absolute; left:-140px; top:19px; margin-top:7px; padding:15px; min-width:300px; max-height:400px; border:1px solid #565960; background:#fff; }
.xans-product-detail .infoArea td ul li .discount_layer h3 { margin:0 0 8px; padding:0 10px; font-size:12px; border-bottom:0; background:url("http://img.echosting.cafe24.com/skin/admin_en_US/product/ico_layer_title.gif") no-repeat 0 50%; }
.xans-product-detail .infoArea td ul li .discount_layer p,
.xans-product-detail .infoArea td ul li .discount_layer ul { padding:0 10px; }
.xans-product-detail .infoArea td ul li .discount_layer p.info { padding:10px 10px 0; margin:5px 0 0; }
.xans-product-detail .infoArea td ul li .discount_layer p strong { color:#0088d4; }
.xans-product-detail .infoArea td ul li .discount_layer ul li { float:none; padding:0 0 5px 5px; line-height:1.4em; background:url("http://img.echosting.cafe24.com/skin/base_en_US/board/ico_function.gif") no-repeat 0 5px; }
.xans-product-detail .infoArea td ul li .discount_layer thead th { padding:0; height:0; font-size:0; line-height:0; }
.xans-product-detail .infoArea td ul li .discount_layer tbody { border:1px solid #d7d5d6; }
.xans-product-detail .infoArea td ul li .discount_layer th { padding:5px 0 5px 15px; background:#fbf9fa; border-right:1px solid #e8e8e8; color:#363636; }
.xans-product-detail .infoArea td ul li .discount_layer.member_rating th { width:50px; }
.xans-product-detail .infoArea td ul li .discount_layer th,
.xans-product-detail .infoArea td ul li .discount_layer td { height:15px; border-bottom:1px solid #e8e8e8; }
.xans-product-detail .infoArea td ul li .discount_layer td { padding:5px 15px 5px 5px; text-align:right; }
.xans-product-detail .infoArea td ul li .discount_layer tr:last-of-type th,
.xans-product-detail .infoArea td ul li .discount_layer tr:last-of-type td { border-bottom:0; }
.xans-product-detail .infoArea td ul li .discount_layer .close { position:absolute; right:15px; top:15px; border:0; }
.xans-product-detail .infoArea td ul li .discount_layer h4 { margin:10px 10px 3px; }
.xans-product-detail .infoArea td ul li .discount_layer p.bullet { margin:12px 10px 0; padding:0 0 0 5px; background:url("http://img.echosting.cafe24.com/skin/base_en_US/board/ico_function.gif") no-repeat 0 5px; }
.xans-product-detail .infoArea td ul li .arrow { z-index:20; position:absolute; left:46%; top:22px; }
/**
* Product details carousel slider
*/
$(document).ready(function(){
$.fn.prdImg = function(parm){
var index = 0;
var target = parm.target;
var view = parm.view;
var listWrap = target.find('.xans-product-addimage');
var limit = listWrap.find('> ul > li').length;
var ul = target.find('.xans-product-addimage > ul');
var liFirst = target.find('.xans-product-addimage > ul > li:first-child');
var liWidth = parseInt(liFirst.width());
var liHeight = parseInt(liFirst.height());
var blockWidth = liWidth + parseInt(liFirst.css('marginRight')) + parseInt(liFirst.css('marginLeft'));
var columWidth = blockWidth * view;
var colum = Math.ceil(limit / view);
var roll = {
init : function(){
function struct(){
var ulWidth = limit * parseInt(blockWidth);
listWrap.append('');
listWrap.append('');
ul.css({'position':'absolute', 'left':0, 'top':0, 'width':ulWidth});
listWrap.find('> ul > li').each(function(){
$(this).css({'float':'left'});
});
listWrap.css({'position':'relative', 'height':liHeight});
var prev = listWrap.find('.prev');
var next = listWrap.find('.next');
prev.click(function(){
if(index > 0){
index --;
}
roll.slide(index);
});
next.click(function(){
if(index < (colum-1) ){
index ++;
}
roll.slide(index);
});
if(index == 0){
prev.hide();
} else {
prev.show();
}
if(index >= (colum-1)){
next.hide();
} else {
next.show();
}
}
if(limit > view){
struct();
}
},
slide : function(index){
var left = '-' + (index * columWidth) +'px';
var prev = listWrap.find('.prev');
var next = listWrap.find('.next');
if(index == 0){
prev.hide();
} else {
prev.show();
}
if(index >= (colum-1)){
next.hide();
} else {
next.show();
}
ul.stop().animate({'left':left},500);
}
}
roll.init();
};
// Function call: Product details page
$.fn.prdImg({
target : $('.xans-product-image'),
view : 5
});
// Function call: Product zoom pop-up
$.fn.prdImg({
target : $('.xans-product-zoom'),
view : 5
});
});
<div module="product_listmain_[seq]">
<!--@css(/css/module/product/listmain_1.css)-->
<!--
$count = 9
$basket_result = /product/add_basket.html
$basket_option = /product/basket_option.html
-->
<h2><span>{$category_title_text}</span></h2>
<ul class="prdList column3">
<li class="item" id="anchorBoxId_{$product_no}">
<div class="box">
<a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="" class="thumb" /></a>
<div class="status">
<div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>
<div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>
</div>
<p class="name">
<strong><a href="/product/detail.html{$param}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
</p>
<ul module="product_ListItem">
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
</ul>
</div>
</li>
<li class="item" id="anchorBoxId_{$product_no}">
<div class="box">
<a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="" class="thumb" /></a>
<div class="status">
<div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>
<div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>
</div>
<p class="name">
<strong><a href="/product/detail.html{$param}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
</p>
<ul module="product_ListItem">
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
</ul>
</div>
</li>
</ul>
</div>
/* All */
.xans-product-[seq] { margin:22px 0 0; }
.xans-product-[seq] h2 { margin:0 0 16px; font-weight:normal; font-size:20px; font-family:Arial, Dotum, sans-serif; color:#2e2e2e; text-align:center; }
.xans-product-[seq] img { vertical-align:middle; }
.xans-product-[seq] ul.prdList { display:table; width:100%; min-width:756px; margin:-20px 0 0; font-size:0; line-height:0; }
.xans-product-[seq] ul.prdList li.item { display:inline-block; margin:20px 0; color:#757575; vertical-align:top; *display:inline; *zoom:1; }
.xans-product-[seq] ul.prdList li.item .box { margin:0 auto; font-size:12px; line-height:18px; text-align:center; }
.xans-product-[seq] ul.prdList li .color { overflow:hidden; display:inline-block; margin:3px 0 0 0; }
.xans-product-[seq] ul.prdList.column3 li .color { width:176px; }
.xans-product-[seq] ul.prdList.column4 li .color { width:116px; }
.xans-product-[seq] ul.prdList.column5 li .color { width:76px; }
.xans-product-[seq] ul.prdList li .chips { float:left; width:10px; height:10px; margin:0 2px 2px 0; border:1px solid #e3e3e3; font-size:0; line-height:0; }
.xans-product-[seq] ul.prdList .thumb { margin:0 0 10px; border:1px solid #ececec; }
.xans-product-[seq] ul.prdList .name { text-align:left; }
.xans-product-[seq] ul.prdList .name a { color:#2e2e2e; }
.xans-product-[seq] ul.prdList .status { margin:0 0 16px; padding:0 80px 4px 0; border-bottom:1px solid #e8e8e8; text-align:right; line-height:0; *zoom:1; }
.xans-product-[seq] ul.prdList .status:after { content:""; display:block; clear:both; }
.xans-product-[seq] ul.prdList .icon { float:left; text-align:left; }
.xans-product-[seq] ul.prdList .icon img { margin:0 -3px 6px 0; }
.xans-product-[seq] ul.prdList .button { margin:0 -80px 0 0; *zoom:1; }
.xans-product-[seq] ul.prdList .button img { margin:0 0 6px -3px; cursor:pointer; }
.xans-product-[seq] ul.prdList .button .option { display:inline; position:relative; *zoom:1; }
.xans-product-[seq] ul.prdList .mileage { display:block; }
.xans-product-[seq] ul.prdList span.grid { display:block; }
.xans-product-listitem li { text-align:left; }
/* Layout settings */
.xans-product-[seq] ul.column3 li.item { width:33.33%; }
.xans-product-[seq] ul.column3 li.item .box { width:237px; }
.xans-product-[seq] ul.column3 li.item .thumb { max-width:235px; }
.xans-product-[seq] ul.column4 li.item { width:25%; }
.xans-product-[seq] ul.column4 li.item .box { width:170px; }
.xans-product-[seq] ul.column4 li.item .thumb { max-width:168px; }
.xans-product-[seq] ul.column5 li.item { width:20%; }
.xans-product-[seq] ul.column5 li.item .box { width:131px; }
.xans-product-[seq] ul.column5 li.item .thumb { max-width:129px; }
/* module="product_ListItem" */
.xans-product-[seq] .xans-product-listitem { margin:0; }
.xans-product-[seq] .xans-product-listitem li .title { font-weight:normal; vertical-align:top; }
.xans-product-[seq] .xans-product-listitem li .title span { vertical-align:top; }
/* Promotion Period */
.xans-product-[seq] .discountPeriod { display:inline-block; z-index:10; position:relative; width:55px; height:19px; vertical-align:middle; *zoom:1; *display:inline; }
.xans-product-[seq] .discountPeriod .edge { position:absolute; left:50%; top:-6px; width:10px; height:6px; margin:0 0 0 -5px; font-size:0; line-height:0; background:url("http://img.echosting.cafe24.com/skin/base_en_US/common/ico_tip_edge.gif") no-repeat 0 0; }
.xans-product-[seq] .layerDiscountPeriod { display:none; position:absolute; left:50%; top:26px; width:247px; margin:0 0 0 -124px; border:1px solid #565960; font-size:12px; background-color:#fff; }
.xans-product-[seq] .layerDiscountPeriod strong.title { display:block; margin:0 0 12px; padding:0 35px 0 0; font-weight:bold; color:#2e2e2e; }
.xans-product-[seq] .layerDiscountPeriod .content { padding:9px 10px 12px 14px; font-family:Verdana, Dotum, sans-serif; }
.xans-product-[seq] .layerDiscountPeriod .content p { margin:2px 0 0; font-size:11px; color:#000; line-height:16px; color:#757575; letter-spacing:-1px; }
.xans-product-[seq] .layerDiscountPeriod .content p strong { font-weight:normal; font-size:12px; color:#2e2e2e; }
.xans-product-[seq] .layerDiscountPeriod .content p strong span { font-size:11px; }
.xans-product-[seq] .layerDiscountPeriod .close { position:absolute; right:14px; top:14px; }
.xans-product-[seq] .layerDiscountPeriod .close img { cursor:pointer; }