{*** ¸ð¹ÙÀÏ ¸ÞÀÎÆäÀÌÁö | index.php ***}
{#header}

<!-- carousel only // 20141004 taegun yoon  -->
<link rel="stylesheet" href="common/css/owl.carousel.min.css">
<link rel="stylesheet" href="common/css/owl.theme.default.css">
<script src="common/js/jquery-1.10.1.min.js"></script>
<script src="common/js/owl.carousel.js"></script>
<!-- carousel only // 20141004 taegun yoon  -->


<script type="text/javascript">
function closePop() {
	$("#popup").hide();
	$("#background").hide();
}

function closeTodayPop(popupNo) {
	setCookieMobile('popup_'+popupNo, 1, 1, '/');
	$("#popup").hide();
	$("#background").hide();

}
function createHtmlGoodsScroll(design_data, disp_data) { // À̺¥Æ®½ºÅ²Àü¿ë ¸ÞÀÎÆäÀÌÁö Á¦Ç° ³ª¿­

	// var page_goods_cnt = parseInt(design_data.line_cnt) * parseInt(design_data.disp_cnt);

	var page_goods_cnt = parseInt(design_data.line_cnt);
	// alert(design_data.line_cnt);
	// var page_cnt = Math.floor(disp_data.length / page_goods_cnt);
	var page_cnt = Math.floor(disp_data.length);

	// var remain_cnt = disp_data.length % page_goods_cnt;

	// if(remain_cnt > 0) {
	// 	page_cnt = page_cnt + 1;
	// }

	// var item_width = Math.floor(99 / parseInt(design_data.disp_cnt));
	var item_style = "";

	// var item_name_width = Math.floor(document.body.clientWidth / parseInt(design_data.disp_cnt));
	// var item_name_style = "style=\"width:"+(item_name_width-26)+"px;\"";
	var item_name_style = "";

	var r_goods_cnt = 0;

	var tmp_html = "";

	tmp_html += "<div class=\"list_goodsscroll\" id=\"goodsscroll-"+design_data.mdesign_no+"\">";

	if(design_data.title == null || design_data.title == "undefined") {
		design_data.title = ' ';
	}
	tmp_html += "<div class=\"list_title\"><div class=\"title\">"+design_data.title+"</div></div>";

	var goods_cnt = 0;
	// tmp_html += "<div class=\"sw1ipe_gs\" id=\"swipe_gs-"+design_data.mdesign_no+"\"><div>";
	tmp_html += "<div id=\"swipe_gs-"+design_data.mdesign_no+"\">";
	// tmp_html += "<div class=\"list_content\" id=\"goodsscroll-"+design_data.mdesign_no+"-"+ (i + 1).toString() +"\">";
	tmp_html += "<div class=\"list_content\">";
	for(var i=1; i<=page_cnt; i++) {
		var hidden_class = " ";
		// if(i != 0) {
		// 	hidden_class = " hidden";
		// }
		var goodsno = "";
				var goods_img = "";
				var goodsnm = "";
				var goods_price = "";
				var special_discount = "";
				var couponImage = "";
				var consumer = "";
				var js_html = "";
				var speach_description = "";
				var capacity = "";
				
				if(disp_data[goods_cnt] != undefined) {

					if(disp_data[goods_cnt].goodsno != null && disp_data[goods_cnt].goodsno != "undefined") {
						goodsno = disp_data[goods_cnt].goodsno;
					}

					if(disp_data[goods_cnt].goods_img != null && disp_data[goods_cnt].goods_img != "undefined") {
						goods_img = disp_data[goods_cnt].goods_img;
					}

					if(disp_data[goods_cnt].goodsnm != null && disp_data[goods_cnt].goodsnm != "undefined") {
						goodsnm = disp_data[goods_cnt].goodsnm;
					}

					if(disp_data[goods_cnt].goods_price != null && disp_data[goods_cnt].goods_price != "undefined") {
					goods_price = disp_data[goods_cnt].goods_price;
					}
					
					if(disp_data[goods_cnt].consumer != null && disp_data[goods_cnt].consumer != "undefined") {
					consumer = disp_data[goods_cnt].consumer;
					}
					
					if(disp_data[goods_cnt].special_discount != null && disp_data[goods_cnt].special_discount != "undefined") {
						special_discount = disp_data[goods_cnt].special_discount;
					}
					
					if(disp_data[goods_cnt].capacity != null && disp_data[goods_cnt].capacity != "undefined") {
						capacity = disp_data[goods_cnt].capacity;
					}

					if(disp_data[goods_cnt].coupon_discount != null && disp_data[goods_cnt].coupon_discount != "undefined") {
						couponImage = "<div class=\"item_coupon_img\"></div>";
					}

					if(design_data.display_type == '3') {
						js_html = "javascript:goCate('"+goodsno+"');"
					}
					else {
						js_html = "javascript:goGoods('"+goodsno+"');"
					}

					if (disp_data[goods_cnt].tts_url) {
						speach_description = '<div class="goods-speach-description" style="display: none;">'
								  + '<span class="speach-description-play" data-src="' + disp_data[goods_cnt].tts_url + '">Àç»ý</span>'
								  + '<span class="speach-description-timer"></span>'
								  + '</div>';
					}

				}
				tmp_html += "<div class=\"list_item\" "+item_style+" onClick=\""+js_html+"\">";
				if(goods_img != "") {
					tmp_html += "<div class=\"item_img\">" + couponImage + "<img src=\""+goods_img+"\" />" + speach_description + "</div>";
				}
				
				else {
					tmp_html += "<div class=\"item_img\">" + couponImage + "</div>";
				}
				var percent = 0;
				var str = String(goods_price);
    			var goods_price_str = str.replace(/[^\d]+/g, '');
				if(consumer && goods_price){
					//percent = ((parseInt(consumer)-parseInt(goods_price)) / parseInt(consumer)) * 100;	
					percent = ((parseInt(consumer)-parseInt(goods_price_str)) / parseInt(consumer)) * 100;
					percent = Math.round(percent);
				}
				tmp_html += "<div class=\"item_name\" " + item_name_style + " >"+goodsnm+"</div>";
				tmp_html += "<div class=\"p_name\">"+ capacity +"</div>";
				consumer_str = String(consumer);
			    consumer = consumer_str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
				tmp_html += "<div class=\"item_consumer\"><strike>"+consumer+" ¿ø</strike><span class='sale_tuning' style='margin-left:5px;'>"+percent+" %</span></div>";
				tmp_html += "<div class=\"item_price\">"+goods_price+"</div>";
				if( special_discount ) {
					tmp_html += "<div class=\"item_discount\" style=\"display: none;\">"+special_discount+" ÇÒÀÎ</div>";
				}
				tmp_html += "</div>		";

				goods_cnt++;

	}
	tmp_html += "</div>";
	tmp_html += "</div><button type='button' class='btn btn-w btn-white morebtn1'>MORE</button></div>";
	tmp_html += "</div>";

	return tmp_html;
}

function displayGoods(mdesign_no, page_type) {

	var design_data;
	design_data = getDesignData(mdesign_no, page_type);
	if(design_data.mdesign_no) {
		var disp_data;
		disp_data = getDisplayData(design_data.mdesign_no, design_data.display_type);

		var displayHtml = "";

		if(page_type == "cate") {
			if(design_data.text_temp1) {
				displayHtml += "<div>" + design_data.event_body + "</div>";
			}
		}

		displayHtml = createHtml(design_data, disp_data);
		$('#main').append(displayHtml);
		$('#goodsscroll-'+mdesign_no+' .list_item').slice(0,4).css('display','inline-block');
		$(".speach-description-play").unbind("click").bind("click", function(event){
			var $player = $("#speach-description-player");
			if (!$player.length) return false;
			$player.trigger("$play", [$(this).parent()]);
			event.preventDefault();
			event.stopPropagation();
		});
	}
	else {
		return false;
	}
}


</script>

<!--{ ? popup_data }-->
<!--{ ? isset(_COOKIE['popup_'+popup_data.mpopup_no]) === false }-->
<div id="popup" >

<div class="popup_wrap">
<!--{ ? popup_data.link_url }-->
<a href="http://{=popup_data.link_url}">
<!--{ / }-->
<div class="popup_content">
	<!--{ ? popup_data.popup_type == '0' }-->
	{=popup_data.popup_img}
	<!--{ : }-->
	{=popup_data.popup_body}
	<!--{ / }-->
</div>
<!--{ ? popup_data.link_url }-->
</a>
<!--{ / }-->
<div class="popup_btn">
	<div class="btn-today-close" onClick="javascript:closeTodayPop('{popup_data.mpopup_no}');">¿À´ÃÇÏ·ç ´Ý±â</div>
	<div class="btn-close" onClick="javascript:closePop();">´Ý±â</div>
</div>
</div>
</div>
<!--
¿À´Ã ÇÏ·ç º¸ÀÌÁö ¾ÊÀ½ <input type="checkbox" style="cursor:pointer; background-color:#000000;" onClick="setCookieMobile('popup', 1, 1, '/'); $('div#popup').hide();">
-->
<div id="background"></div>
<!--{ / }-->
<!--{ / }-->


<style>
/* ¸ÞÀηѸµ */
.main-slide .owl-nav {display:none;}
.main-slide .owl-theme .owl-dots .owl-dot span {background:#614a3a;}
.main-slide .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{background:#8fcb37;}

/* ´º½º¸®½ºÆ® */
.newsList {width:51%; float: left;}
	.newsList li {padding:8px 0 8px; margin-left: 6px; border-top:1px solid #f1f1f1; letter-spacing:-1px;}
.newsList li:first-child {border-top: none;}
.newsList li a {color:#3f3f3f;}
.newsList li span {color:#8fcb37; font-weight:bold;}

/* ¿ìÃø·Ñ¸µ */
.right-slide {float:right; margin: 0 4%; width:40%;}
.right-slide .title {padding: 8px 0; font-weight: bold; text-align: center;}
.right-slide .owl-theme {max-width: 140px; margin: 0 auto;}
.right-slide .owl-theme .owl-controls .owl-dots {display:none !important;}
.right-slide .owl-theme .owl-controls .owl-nav [class*=prev] {left: -10px;}
.right-slide .owl-theme .owl-controls .owl-nav [class*=next] {right: -10px;}
.right-slide .owl-nav .icon-arr-r2 {width: 9px; padding-top: 16px;}
.right-slide .owl-nav .owl-prev .arr-l {background: url(./common/dimg/btn_arr.png) no-repeat 0 0; background-size: 100%;}
.right-slide .owl-nav .owl-next .arr-r {background: url(./common/dimg/btn_arr.png) no-repeat 0 0; background-size: 100%;}
</style>



<div style="max-width:640px; margin:5px auto 0; overflow:hidden;">
	<div class="main-slide" style="float:left;width:73%;">
		<!-- carousel -->
		<div class="owl-carousel">
			<div class="item"><a href="javascript:void(0);"><img src="./common/dimg/main_image01.jpg" width="100%;" alt="" title="" /></a></div>
			<div class="item"><a href="javascript:void(0);"><img src="./common/dimg/main_image02.jpg" width="100%;" alt="" title="" /></a></div>
			<div class="item"><a href="javascript:void(0);"><img src="./common/dimg/main_image03.jpg" width="100%;" alt="" title="" /></a></div>
		</div>
		<!-- carousel //-->
	</div>
	<div style="float:right; width:25%;">
		<div><a href="/m2/goods/list.php?category=026001"><img src="./common/dimg/main_bn_01.jpg" width="100%;" alt="" title="" class="vt" /></a></div>
		<div style="margin-top: 7.5%;"><a href="/m2/goods/list.php?category=026002"><img src="./common/dimg/main_bn_02.jpg" width="100%;" alt="" title="" class="vt" /></a></div>
		<div style="margin-top: 7.5%;"><a href="/m2/goods/list.php?category=026003"><img src="./common/dimg/main_bn_03.jpg" width="100%;" alt="" title="" class="vt" /></a></div>
		<div style="margin-top: 7.5%;"><a href="/m2/goods/list.php?category=026004"><img src="./common/dimg/main_bn_04.jpg" width="100%;" alt="" title="" class="vt" /></a></div>
	</div>
</div>

<div style="max-width:640px; margin:10px auto 25px; overflow:hidden;">
	<!--ul class="newsList">
		<li><a href="/m2/board/view.php?id=notice&no=19"><span>Çʼö</span>&nbsp;&nbsp;°³ÀÎÅë°ü°íÀ¯ºÎÈ£ ¹ß±Þ¾È³»</a></li>
		<li><a href="javascript:void(0);"><span>¹è¼Û</span>&nbsp;&nbsp;´ºÁú·£µå¡æÇѱ¹ (4~10ÀÏ ¼Ò¿ä)</a></li>
		<li><a href="javascript:void(0);"><span>ȸ¿ø</span>&nbsp;&nbsp;Ãß°¡ 2% ÇÒÀÎ, 1% Àû¸³ ÇýÅÃ</a></li>
		<li><a href="javascript:void(0);"><span>¾ÈÀü</span>&nbsp;&nbsp;½Ä¾àó, °ü¼¼Ã» Á¤½Äµî·Ï¾÷ü</a></li>
	</ul>

	<!-- ¿ìÃø·Ñ¸µ -->
	<!--div class="right-slide">
		<div class="title">BEST PRODUCT</div>
		<!-- carousel -->
		<!--div class="owl-carousel">
			<div class="item"><a href="/m2/goods/goods_view.php?goodsno=855&category=025004001"><img src="./common/dimg/main_best01.jpg" width="100%;" alt="" title="" /></a></div>
			<div class="item"><a href="/m2/goods/goods_view.php?goodsno=854&category=025001002"><img src="./common/dimg/main_best02.jpg" width="100%;" alt="" title="" /></a></div>
			<div class="item"><a href="/m2/goods/goods_view.php?goodsno=130&category=025005002"><img src="./common/dimg/main_best03.jpg" width="100%;" alt="" title="" /></a></div>
		</div>
		<!-- carousel //-->
	<!--/div-->
	<div class="in_benr"><a href="/m2/goods/list.php?category=016"><img src="img/benr_8.jpg"></a></div>
    <div class="in_benr first"><a href="/m2/html.php?htmid=proc/acp.htm&tplSkin=designbookM_NshopM_G_C_C"><div class="box">´ºÁú·£µå ±¸¸Å ¾à±¹ ¼Ò°³<p>¡µ</p></div></a></div>
	<div class="in_benr"><a href="/m2/board/view.php?id=notice&no=19"><div class="box to">°³ÀÎÅë°ü°íÀ¯ºÎÈ£ ¹ß±Þ¾È³»<p>¡µ</p></div></a></div>
	<div class="in_benr"><a href="/m2/goods/list.php?category=025004001"><img src="img/benr_main_sd1.jpg"></a></div>
	{**<div class="in_benr"><a href="/m2/goods/view.php?category=025002003&goodsno=885"><img src="img/benr_main_sd4.jpg"></a></div>**}
	<div class="in_benr"><a href="/m2/goods/list.php?category=025002010"><img src="img/benr_main_sd3.jpg"></a></div>
	<div class="in_benr"><a href="/m2/goods/list.php?category=025003001"><img src="img/benr_main_sd2.jpg"></a></div>	
</div>

<style>
.in_benr{max-width:640px; margin:10px 0;}
.in_benr.first{margin-top:0;}
.in_benr img{width:100%;}
.in_benr .box{width:100%; background:#a3a3a3; color:#fff; height:45px; line-height:45px; font-size:17px; padding-left:20px; font-weight:bold;}
.in_benr .box.to{background:#ff6f30;}
.in_benr .box p{color:#fff; font-size:17px; font-weight:bold; float:right; margin-top:7px; margin-right:50px; border:3px solid #fff; border-radius:100%; padding:0 10px;}
</style>



<section id="main" class="content" >
	<audio id="speach-description-player"></audio>
</section>
<script type="text/javascript">displayGoods('1', 'main');</script>
<script type="text/javascript">displayGoods('8', 'main');</script>
<script type="text/javascript">displayGoods('2', 'main');</script>
<script type="text/javascript">displayGoods('4', 'main');</script>
<script type="text/javascript">displayGoods('7', 'main');</script>
<script type="text/javascript">displayGoods('9', 'main');</script>
<script type="text/javascript">displayGoods('12', 'main');</script>
<script type="text/javascript">displayGoods('10', 'main');</script>
<script type="text/javascript">displayGoods('11', 'main');</script>
<script type="text/javascript">displayGoods('13', 'main');</script>
<!-- Ç°Àý»óÇ° ¸¶½ºÅ© -->
<div id="el-goods-soldout-image-mask" style="display:none;position:absolute;top:0;left:3px;background:url({ ? _cfg_soldout.mobile_display_overlay == 'custom'}{_cfg.rootDir}/data/goods/icon/mobile_custom_soldout{:}{_cfg.rootDir}/data/goods/icon/mobile_icon_soldout{_cfg_soldout.mobile_display_overlay}{/}) no-repeat center center; background-size:cover;"></div>

<div style="max-width:640px; margin:10px auto 25px; overflow:hidden;">
	<div class="in_benr"><a href="/m2/goods/brand.php?brand=30"><img src="img/benr_thompsons.jpg"></a></div>
	<div class="in_benr"><a href="/m2/goods/brand.php?brand=2"><img src="img/benr_gohealthy.jpg"></a></div>
	<div class="in_benr"><a href="/m2/goods/list.php?category=012010001"><img src="img/benr_antipodes.jpg"></a></div>
	<div class="in_benr"><a href="/m2/goods/brand.php?brand=18"><img src="img/benr_lifestream.jpg"></a></div>
</div>	

<script>
addOnloadEvent(function(){ setGoodsImageSoldoutMask() });
</script>

{#footer}