@@egjs-infinitegrid

by hohoya33

HTML

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>특가전 &gt; 해피바이러스</title>
<link rel="shortcut icon" type="image/x-icon" href="//static.ssgcdn.com/ui/common/img/ssg.ico">
<link rel="stylesheet" type="text/css" href="../css/common/layout.css" />
<link rel="stylesheet" type="text/css" href="../css/common/common_layout.css" />
<link rel="stylesheet" type="text/css" href="../css/common/common_unit.css" />
<link rel="stylesheet" type="text/css" href="../css/scom.css" />
<link rel="stylesheet" type="text/css" href="../css/special_wide.css" />
</head>
<body class="body_ssg body_wide body_wide_ctn">
<div id="skip">
	<h2>스킵 네비게이션</h2>
	<ul>
	<li><a href="#gnb">주요메뉴 바로가기</a></li>
	<li><a href="#aside">카테고리 메뉴 바로가기</a></li>
	<li><a href="#content">본문바로가기</a></li>
	</ul>
</div>
<div id="wrap">
	<div id="header" class="common_header">
	</div>

	<div id="container">
		<div id="content">
			<div class="spc_wrap">
				<h2 class="spc_top_tit">오반장&amp;해피바이러스</h2>

				<div class="spc_tab_menu spc_tab_hb">
					<ul class="spc_tabs" role="tablist">
						<li class="spc_lst_tab" role="tab" aria-selected="false">
							<a href="special_obanjang_wide.html" class="spc_lnk_tab">
								<span class="blind">오반장</span>
							</a>
						</li>
						<li class="spc_lst_tab on" role="tab" aria-selected="true">
							<a href="special_happy_wide.html" class="spc_lnk_tab"><span class="blind">해피바이러스 - 쇼핑의 시작은 해피바이러스 신세계몰, 신세계백화점 상품을 행복한 가격에 만나는 기회! 매일 오전 9시, 특별한 쇼핑을 시작하세요.</span></a>
						</li>
						<li class="spc_lst_tab" role="tab" aria-selected="false">
							<a href="special_plusone_wide.html" class="spc_lnk_tab"><span class="blind">하나 더 &amp; 사은품</span></a>
						</li>
					</ul>
				</div>

				<div class="hvs_filter">
					<div class="hvs_cate_tab">
						<span class="blind">해피바이러스 상품 정렬 보기 (카테고리)</span>
						<ul class="hvs_cate_lst">
							<li...

CSS

@charset "utf-8";
/*특가 1280 대응*/
.spc_wrap{font-family:'나눔바른고딕',NanumBarunGothic,sans-serif}
.spc_top_tit{margin:50px 0 27px 0;text-align:center;line-height:40px;color:#222;font-size:30px;font-weight:normal}
.spc_tab_menu{position:relative;background:url(../img/service/sp_special_tab.png) 0 0 no-repeat}
.spc_tab_obj{background-position:0 0}
.spc_tab_hb{background-position:0 -178px}
.spc_tab_plus{background-position:0 -356px;padding-top:10px}
.spc_tabs{width:100%;height:178px}
.spc_lst_tab{float:left;width:33.3%}
.spc_lnk_tab{display:block;height:80px;text-align:center}
/*타이머(오반장)*/
.spc_timer{position:absolute;top:106px;right:30px}
.spc_time_num{overflow:hidden}
.spc_time_num span{float:left;width:45px;height:45px;margin-left:23px;line-height:45px;text-align:center;color:#fff;font-size:25px;font-family:Roboto-Regular,sans-serif}
.spc_time_num .hour{margin-left:0}
/*상품필터(해바)*/
.spc_filter{position:relative;border-top:1px solid #222}
.spc_cate_lst{display:table;table-layout:fixed;width:100%;border-collapse:collapse}
.spc_cate{display:table-cell;text-align:center}
.spc_cate:first-child a{border-left:1px solid #d8d8d8}
.spc_cate a{border-width:0 1px 1px 0;display:block;height:48px;line-height:48px;border:1px solid #d8d8d8;text-decoration:none;color:#888;font-size:16px}
.spc_cate.on a,.spc_cate a:hover{color:#fff;border-bottom-color:#333;background:#333}
.spc_cate:first-child.on a,.spc_cate:first-child a:hover{border-left-color:#333}
.spc_cate:last-child.on a,.spc_cate:last-child a:hover{border-right-color:#333}

/*상품필터(해바)*/
.hvs_cate_tab{position:relative;border:1px solid #d8d8d8;border-top-color:#222}
.hvs_cate_lst{display:table;table-layout:fixed;width:100%;border-collapse:collapse}
.hvs_cate{display:table-cell;text-align:center}
.hvs_cate:first-child a{border-left:0}
.hvs_cate a{position:relative;display:block;height:48px;line-height:48px;margin:0 0 -1px 0;border-left:1px solid #f1f2f4;text-decoration:none;color:#888;font-size:16px}
.hvs_cate.on a,.hvs_cate...

JavaScript

try {
/*!
 * Copyright (c) 2017 NAVER Corp.
 * @egjs/persist project is licensed under the MIT license
 *
 * @egjs/persist JavaScript library
 *
 *
 * @version 2.1.2
 */
!function (e, t) { "object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define("Persist", [], t) : "object" == typeof exports ? exports.Persist = t() : (e.eg = e.eg || {}, e.eg.Persist = t()) }(this, function () { return function (e) { function __webpack_require__(r) { if (t[r]) return t[r].exports; var n = t[r] = { i: r, l: !1, exports: {} }; return e[r].call(n.exports, n, n.exports, __webpack_require__), n.l = !0, n.exports } var t = {}; return __webpack_require__.m = e, __webpack_require__.c = t, __webpack_require__.d = function (e, t, r) { __webpack_require__.o(e, t) || Object.defineProperty(e, t, { configurable: !1, enumerable: !0, get: r }) }, __webpack_require__.n = function (e) { var t = e && e.__esModule ? function () { return e["default"] } : function () { return e }; return __webpack_require__.d(t, "a", t), t }, __webpack_require__.o = function (e, t) { return Object.prototype.hasOwnProperty.call(e, t) }, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 2) }([function (e, t, r) { "use strict"; t.__esModule = !0; var n = "undefined" != typeof window && window || {}; t.window = n; t.console = n.console, t.document = n.document, t.history = n.history, t.localStorage = n.localStorage, t.location = n.location, t.sessionStorage = n.sessionStorage, t.navigator = n.navigator, t.JSON = n.JSON, t.RegExp = n.RegExp, t.parseFloat = n.parseFloat, t.performance = n.performance }, function (e, t, r) { "use strict"; function isBackForwardNavigated() { return n.performance && n.performance.navigation.type === a } t.__esModule = !0; var n = r(0), o = n.navigator.userAgent, a = n.performance && n.performance.navigation.TYPE_BACK_FORWARD || 2, i = function () { var e = new n.RegExp("iPhone|iPad", "i").test(o), t...