index.html

<!DOCTYPE html>
<!-- saved from url=(0060)https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&v4=1 -->
<html itemscope="" itemtype="http://schema.org/WebPage" lang="zh-CN" xmlns:fb="https://www.facebook.com/2008/fbml"
  xmlns:og="http://ogp.me/ns#" xmlns="http://www.w3.org/1999/xhtml" data-lt-installed="true">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>RubyConf China 2016</title>

  <script src="./assets/56557d16455c179b7c00004f.js" async=""></script>
  <script type="text/javascript" async="" src="./assets/js"></script>
  <script type="text/javascript" async="" src="./assets/keen.min.js"></script>
  <script async="" src="./assets/analytics.js"></script>
  <script>window.NREUM || (NREUM = {}); NREUM.info = { "beacon": "bam.nr-data.net", "errorBeacon": "bam.nr-data.net", "licenseKey": "74f55de04c", "applicationID": "13304874", "transactionName": "IlcLQxBeWFoHShYQUBVdFhgSQ1FAC11O", "queueTime": 2, "applicationTime": 1010, "agent": "" }</script>
  <script>(window.NREUM || (NREUM = {})).init = { ajax: { deny_list: ["bam.nr-data.net"] } }; (window.NREUM || (NREUM = {})).loader_config = { licenseKey: "74f55de04c", applicationID: "13304874" };; (() => { "use strict"; var e, t, n = { 7442: (e, t, n) => { n.d(t, { T: () => r, p: () => i }); const r = /(iPad|iPhone|iPod)/g.test(navigator.userAgent), i = r && Boolean("undefined" == typeof SharedWorker) }, 5763: (e, t, n) => { n.d(t, { P_: () => f, Mt: () => p, C5: () => s, DL: () => m, OP: () => j, lF: () => _, Yu: () => y, Dg: () => g, CX: () => c, GE: () => b, sU: () => E }); var r = n(8632), i = n(9567); const o = { beacon: r.ce.beacon, errorBeacon: r.ce.errorBeacon, licenseKey: void 0, applicationID: void 0, sa: void 0, queueTime: void 0, applicationTime: void 0, ttGuid: void 0, user: void 0, account: void 0, product: void 0, extra: void 0, jsAttributes: {}, userAttributes: void 0, atts: void 0, transactionName: void 0, tNamePlain: void 0 }, a = {}; function s(e) { if (!e) throw new Error("All info objects require an agent identifier!"); if (!a[e]) throw new Error("Info for ".concat(e, " was never set")); return a[e] } function c(e, t) { if (!e) throw new Error("All info objects require an agent identifier!"); a[e] = (0, i.D)(t, o), (0, r.Qy)(e, a[e], "info") } var d = n(7056); const u = () => { const e = { blockSelector: "[data-nr-block]", maskInputOptions: { password: !0 } }; return { allow_bfcache: !0, privacy: { cookies_enabled: !0 }, ajax: { deny_list: void 0, enabled: !0, harvestTimeSeconds: 10 }, distributed_tracing: { enabled: void 0, exclude_newrelic_header: void 0, cors_use_newrelic_header: void 0, cors_use_tracecontext_headers: void 0, allowed_origins: void 0 }, session: { domain: void 0, expiresMs: d.oD, inactiveMs: d.Hb }, ssl: void 0, obfuscate: void 0, jserrors: { enabled: !0, harvestTimeSeconds: 10 }, metrics: { enabled: !0 }, page_action: { enabled: !0, harvestTimeSeconds: 30 }, page_view_event: { enabled: !0 }, page_view_timing: { enabled: !0, harvestTimeSeconds: 30, long_task: !1 }, session_trace: { enabled: !0, harvestTimeSeconds: 10 }, session_replay: { enabled: !1, harvestTimeSeconds: 60, sampleRate: .1, errorSampleRate: .1, maskTextSelector: "*", maskAllInputs: !0, get blockClass() { return "nr-block" }, get ignoreClass() { return "nr-ignore" }, get maskTextClass() { return "nr-mask" }, get blockSelector() { return e.blockSelector }, set blockSelector(t) { e.blockSelector += ",".concat(t) }, get maskInputOptions() { return e.maskInputOptions }, set maskInputOptions(t) { e.maskInputOptions = { ...t, password: !0 } } }, spa: { enabled: !0, harvestTimeSeconds: 10 } } }, l = {}; function f(e) { if (!e) throw new Error("All configuration objects require an agent identifier!"); if (!l[e]) throw new Error("Configuration for ".concat(e, " was never set")); return l[e] } function g(e, t) { if (!e) throw new Error("All configuration objects require an agent identifier!"); l[e] = (0, i.D)(t, u()), (0, r.Qy)(e, l[e], "config") } function p(e, t) { if (!e) throw new Error("All configuration objects require an agent identifier!"); var n = f(e); if (n) { for (var r = t.split("."), i = 0; i < r.length - 1; i++)if ("object" != typeof (n = n[r[i]])) return; n = n[r[r.length - 1]] } return n } const h = { accountID: void 0, trustKey: void 0, agentID: void 0, licenseKey: void 0, applicationID: void 0, xpid: void 0 }, v = {}; function m(e) { if (!e) throw new Error("All loader-config objects require an agent identifier!"); if (!v[e]) throw new Error("LoaderConfig for ".concat(e, " was never set")); return v[e] } function b(e, t) { if (!e) throw new Error("All loader-config objects require an agent identifier!"); v[e] = (0, i.D)(t, h), (0, r.Qy)(e, v[e], "loader_config") } const y = (0, r.mF)().o; var w = n(1720), A = n(6818); const x = { buildEnv: A.Re, bytesSent: {}, queryBytesSent: {}, customTransaction: void 0, disabled: !1, distMethod: A.gF, isolatedBacklog: !1, loaderType: void 0, maxBytes: 3e4, offset: Math.floor(w._A?.performance?.timeOrigin || w._A?.performance?.timing?.navigationStart || Date.now()), onerror: void 0, origin: "" + w._A.location, ptid: void 0, releaseIds: {}, session: void 0, xhrWrappable: "function" == typeof w._A.XMLHttpRequest?.prototype?.addEventListener, version: A.q4 }, D = {}; function j(e) { if (!e) throw new Error("All runtime objects require an agent identifier!"); if (!D[e]) throw new Error("Runtime for ".concat(e, " was never set")); return D[e] } function E(e, t) { if (!e) throw new Error("All runtime objects require an agent identifier!"); D[e] = (0, i.D)(t, x), (0, r.Qy)(e, D[e], "runtime") } function _(e) { return function (e) { try { const t = s(e); return !!t.licenseKey && !!t.errorBeacon && !!t.applicationID } catch (e) { return !1 } }(e) } }, 9567: (e, t, n) => { n.d(t, { D: () => i }); var r = n(50); function i(e, t) { try { if (!e || "object" != typeof e) return (0, r.Z)("Setting a Configurable requires an object as input"); if (!t || "object" != typeof t) return (0, r.Z)("Setting a Configurable requires a model to set its initial properties"); const n = Object.create(Object.getPrototypeOf(t), Object.getOwnPropertyDescriptors(t)), o = 0 === Object.keys(n).length ? e : n; for (let a in o) if (void 0 !== e[a]) try { "object" == typeof e[a] && "object" == typeof t[a] ? n[a] = i(e[a], t[a]) : n[a] = e[a] } catch (e) { (0, r.Z)("An error occurred while setting a property of a Configurable", e) } return n } catch (e) { (0, r.Z)("An error occured while setting a Configurable", e) } } }, 6818: (e, t, n) => { n.d(t, { Re: () => i, gF: () => o, q4: () => r }); const r = "1.235.0", i = "PROD", o = "CDN" }, 1117: (e, t, n) => { n.d(t, { w: () => o }); var r = n(50); const i = { agentIdentifier: "", ee: void 0 }; class o { constructor(e) { try { if ("object" != typeof e) return (0, r.Z)("shared context requires an object as input"); this.sharedContext = {}, Object.assign(this.sharedContext, i), Object.entries(e).forEach((e => { let [t, n] = e; Object.keys(i).includes(t) && (this.sharedContext[t] = n) })) } catch (e) { (0, r.Z)("An error occured while setting SharedContext", e) } } } }, 8e3: (e, t, n) => { n.d(t, { L: () => u, R: () => c }); var r = n(2177), i = n(1284), o = n(4322), a = n(3325); const s = {}; function c(e, t) { const n = { staged: !1, priority: a.p[t] || 0 }; d(e), s[e].get(t) || s[e].set(t, n) } function d(e) { e && (s[e] || (s[e] = new Map)) } function u() { let e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "", t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : "feature"; if (d(e), !e || !s[e].get(t)) return a(t); s[e].get(t).staged = !0; const n = [...s[e]]; function a(t) { const n = e ? r.ee.get(e) : r.ee, a = o.X.handlers; if (n.backlog && a) { var s = n.backlog[t], c = a[t]; if (c) { for (var d = 0; s && d < s.length; ++d)l(s[d], c); (0, i.D)(c, (function (e, t) { (0, i.D)(t, (function (t, n) { n[0].on(e, n[1]) })) })) } delete a[t], n.backlog[t] = null, n.emit("drain-" + t, []) } } n.every((e => { let [t, n] = e; return n.staged })) && (n.sort(((e, t) => e[1].priority - t[1].priority)), n.forEach((e => { let [t] = e; a(t) }))) } function l(e, t) { var n = e[1]; (0, i.D)(t[n], (function (t, n) { var r = e[0]; if (n[0] === r) { var i = n[1], o = e[3], a = e[2]; i.apply(o, a) } })) } }, 2177: (e, t, n) => { n.d(t, { ee: () => d }); var r = n(8632), i = n(2210), o = n(1284), a = n(5763), s = "nr@context"; let c = (0, r.fP)(); var d; function u() { } function l() { return new u } function f() { d.aborted = !0, d.backlog = {} } c.ee ? d = c.ee : (d = function e(t, n) { var r = {}, c = {}, g = {}, p = !1; try { p = 16 === n.length && (0, a.OP)(n).isolatedBacklog } catch (e) { } var h = { on: b, addEventListener: b, removeEventListener: y, emit: m, get: A, listeners: w, context: v, buffer: x, abort: f, aborted: !1, isBuffering: D, debugId: n, backlog: p ? {} : t && "object" == typeof t.backlog ? t.backlog : {} }; return h; function v(e) { return e && e instanceof u ? e : e ? (0, i.X)(e, s, l) : l() } function m(e, n, r, i, o) { if (!1 !== o && (o = !0), !d.aborted || i) { t && o && t.emit(e, n, r); for (var a = v(r), s = w(e), u = s.length, l = 0; l < u; l++)s[l].apply(a, n); var f = j()[c[e]]; return f && f.push([h, e, n, a]), a } } function b(e, t) { r[e] = w(e).concat(t) } function y(e, t) { var n = r[e]; if (n) for (var i = 0; i < n.length; i++)n[i] === t && n.splice(i, 1) } function w(e) { return r[e] || [] } function A(t) { return g[t] = g[t] || e(h, t) } function x(e, t) { var n = j(); h.aborted || (0, o.D)(e, (function (e, r) { t = t || "feature", c[r] = t, t in n || (n[t] = []) })) } function D(e) { return !!j()[c[e]] } function j() { return h.backlog } }(void 0, "globalEE"), c.ee = d) }, 5546: (e, t, n) => { n.d(t, { E: () => r, p: () => i }); var r = n(2177).ee.get("handle"); function i(e, t, n, i, o) { o ? (o.buffer([e], i), o.emit(e, t, n)) : (r.buffer([e], i), r.emit(e, t, n)) } }, 4322: (e, t, n) => { n.d(t, { X: () => o }); var r = n(5546); o.on = a; var i = o.handlers = {}; function o(e, t, n, o) { a(o || r.E, i, e, t, n) } function a(e, t, n, i, o) { o || (o = "feature"), e || (e = r.E); var a = t[o] = t[o] || {}; (a[n] = a[n] || []).push([e, i]) } }, 3239: (e, t, n) => { n.d(t, { bP: () => s, iz: () => c, m$: () => a }); var r = n(1720); let i = !1, o = !1; try { const e = { get passive() { return i = !0, !1 }, get signal() { return o = !0, !1 } }; r._A.addEventListener("test", null, e), r._A.removeEventListener("test", null, e) } catch (e) { } function a(e, t) { return i || o ? { capture: !!e, passive: i, signal: t } : !!e } function s(e, t) { let n = arguments.length > 2 && void 0 !== arguments[2] && arguments[2], r = arguments.length > 3 ? arguments[3] : void 0; window.addEventListener(e, t, a(n, r)) } function c(e, t) { let n = arguments.length > 2 && void 0 !== arguments[2] && arguments[2], r = arguments.length > 3 ? arguments[3] : void 0; document.addEventListener(e, t, a(n, r)) } }, 4402: (e, t, n) => { n.d(t, { Rl: () => a, ky: () => s }); var r = n(1720); const i = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx"; function o(e, t) { return e ? 15 & e[t] : 16 * Math.random() | 0 } function a() { const e = r._A?.crypto || r._A?.msCrypto; let t, n = 0; return e && e.getRandomValues && (t = e.getRandomValues(new Uint8Array(31))), i.split("").map((e => "x" === e ? o(t, ++n).toString(16) : "y" === e ? (3 & o() | 8).toString(16) : e)).join("") } function s(e) { const t = r._A?.crypto || r._A?.msCrypto; let n, i = 0; t && t.getRandomValues && (n = t.getRandomValues(new Uint8Array(31))); const a = []; for (var s = 0; s < e; s++)a.push(o(n, ++i).toString(16)); return a.join("") } }, 7056: (e, t, n) => { n.d(t, { Bq: () => r, Hb: () => o, oD: () => i }); const r = "NRBA", i = 144e5, o = 18e5 }, 7894: (e, t, n) => { function r() { return Math.round(performance.now()) } n.d(t, { z: () => r }) }, 50: (e, t, n) => { function r(e, t) { "function" == typeof console.warn && (console.warn("New Relic: ".concat(e)), t && console.warn(t)) } n.d(t, { Z: () => r }) }, 2587: (e, t, n) => { n.d(t, { N: () => c, T: () => d }); var r = n(2177), i = n(5546), o = n(8e3), a = n(3325); const s = { stn: [a.D.sessionTrace], err: [a.D.jserrors, a.D.metrics], ins: [a.D.pageAction], spa: [a.D.spa], sr: [a.D.sessionReplay, a.D.sessionTrace] }; function c(e, t) { const n = r.ee.get(t); e && "object" == typeof e && (Object.entries(e).forEach((e => { let [t, r] = e; void 0 === d[t] && (s[t] ? s[t].forEach((e => { r ? (0, i.p)("feat-" + t, [], void 0, e, n) : (0, i.p)("block-" + t, [], void 0, e, n), (0, i.p)("rumresp-" + t, [Boolean(r)], void 0, e, n) })) : r && (0, i.p)("feat-" + t, [], void 0, void 0, n), d[t] = Boolean(r)) })), Object.keys(s).forEach((e => { void 0 === d[e] && (s[e]?.forEach((t => (0, i.p)("rumresp-" + e, [!1], void 0, t, n))), d[e] = !1) })), (0, o.L)(t, a.D.pageViewEvent)) } const d = {} }, 2210: (e, t, n) => { n.d(t, { X: () => i }); var r = Object.prototype.hasOwnProperty; function i(e, t, n) { if (r.call(e, t)) return e[t]; var i = n(); if (Object.defineProperty && Object.keys) try { return Object.defineProperty(e, t, { value: i, writable: !0, enumerable: !1 }), i } catch (e) { } return e[t] = i, i } }, 1720: (e, t, n) => { n.d(t, { FN: () => a, _A: () => o, il: () => r, v6: () => i }); const r = Boolean("undefined" != typeof window && window.document), i = Boolean("undefined" != typeof WorkerGlobalScope && self.navigator instanceof WorkerNavigator); let o = (() => { if (r) return window; if (i) { if ("undefined" != typeof globalThis && globalThis instanceof WorkerGlobalScope) return globalThis; if (self instanceof WorkerGlobalScope) return self } throw new Error('New Relic browser agent shutting down due to error: Unable to locate global scope. This is possibly due to code redefining browser global variables like "self" and "window".') })(); const a = "" + o.location }, 1284: (e, t, n) => { n.d(t, { D: () => r }); const r = (e, t) => Object.entries(e || {}).map((e => { let [n, r] = e; return t(n, r) })) }, 4351: (e, t, n) => { n.d(t, { P: () => o }); var r = n(2177); const i = () => { const e = new WeakSet; return (t, n) => { if ("object" == typeof n && null !== n) { if (e.has(n)) return; e.add(n) } return n } }; function o(e) { try { return JSON.stringify(e, i()) } catch (e) { try { r.ee.emit("internal-error", [e]) } catch (e) { } } } }, 3960: (e, t, n) => { n.d(t, { K: () => a, b: () => o }); var r = n(3239); function i() { return "undefined" == typeof document || "complete" === document.readyState } function o(e, t) { if (i()) return e(); (0, r.bP)("load", e, t) } function a(e) { if (i()) return e(); (0, r.iz)("DOMContentLoaded", e) } }, 8632: (e, t, n) => { n.d(t, { EZ: () => d, Qy: () => c, ce: () => o, fP: () => a, gG: () => u, mF: () => s }); var r = n(7894), i = n(1720); const o = { beacon: "bam.nr-data.net", errorBeacon: "bam.nr-data.net" }; function a() { return i._A.NREUM || (i._A.NREUM = {}), void 0 === i._A.newrelic && (i._A.newrelic = i._A.NREUM), i._A.NREUM } function s() { let e = a(); return e.o || (e.o = { ST: i._A.setTimeout, SI: i._A.setImmediate, CT: i._A.clearTimeout, XHR: i._A.XMLHttpRequest, REQ: i._A.Request, EV: i._A.Event, PR: i._A.Promise, MO: i._A.MutationObserver, FETCH: i._A.fetch }), e } function c(e, t, n) { let i = a(); const o = i.initializedAgents || {}, s = o[e] || {}; return Object.keys(s).length || (s.initializedAt = { ms: (0, r.z)(), date: new Date }), i.initializedAgents = { ...o, [e]: { ...s, [n]: t } }, i } function d(e, t) { a()[e] = t } function u() { return function () { let e = a(); const t = e.info || {}; e.info = { beacon: o.beacon, errorBeacon: o.errorBeacon, ...t } }(), function () { let e = a(); const t = e.init || {}; e.init = { ...t } }(), s(), function () { let e = a(); const t = e.loader_config || {}; e.loader_config = { ...t } }(), a() } }, 7956: (e, t, n) => { n.d(t, { N: () => i }); var r = n(3239); function i(e) { let t = arguments.length > 1 && void 0 !== arguments[1] && arguments[1], n = arguments.length > 2 ? arguments[2] : void 0, i = arguments.length > 3 ? arguments[3] : void 0; return void (0, r.iz)("visibilitychange", (function () { if (t) return void ("hidden" == document.visibilityState && e()); e(document.visibilityState) }), n, i) } }, 3081: (e, t, n) => { n.d(t, { gF: () => o, mY: () => i, t9: () => r, vz: () => s, xS: () => a }); const r = n(3325).D.metrics, i = "sm", o = "cm", a = "storeSupportabilityMetrics", s = "storeEventMetrics" }, 7633: (e, t, n) => { n.d(t, { Dz: () => i, OJ: () => a, qw: () => o, t9: () => r }); const r = n(3325).D.pageViewEvent, i = "firstbyte", o = "domcontent", a = "windowload" }, 9251: (e, t, n) => { n.d(t, { t: () => r }); const r = n(3325).D.pageViewTiming }, 5938: (e, t, n) => { n.d(t, { W: () => o }); var r = n(5763), i = n(2177); class o { constructor(e, t, n) { this.agentIdentifier = e, this.aggregator = t, this.ee = i.ee.get(e, (0, r.OP)(this.agentIdentifier).isolatedBacklog), this.featureName = n, this.blocked = !1 } } }, 9144: (e, t, n) => { n.d(t, { j: () => v }); var r = n(3325), i = n(5763), o = n(5546), a = n(2177), s = n(7894), c = n(8e3), d = n(3960), u = n(1720), l = n(50), f = n(3081), g = n(8632); function p() { const e = (0, g.gG)();["setErrorHandler", "finished", "addToTrace", "inlineHit", "addRelease", "addPageAction", "setCurrentRouteName", "setPageViewName", "setCustomAttribute", "interaction", "noticeError", "setUserId"].forEach((t => { e[t] = function () { for (var n = arguments.length, r = new Array(n), i = 0; i < n; i++)r[i] = arguments[i]; return function (t) { for (var n = arguments.length, r = new Array(n > 1 ? n - 1 : 0), i = 1; i < n; i++)r[i - 1] = arguments[i]; let o = []; return Object.values(e.initializedAgents).forEach((e => { e.exposed && e.api[t] && o.push(e.api[t](...r)) })), o.length > 1 ? o : o[0] }(t, ...r) } })) } var h = n(2587); function v(e) { let t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}, v = arguments.length > 2 ? arguments[2] : void 0, m = arguments.length > 3 ? arguments[3] : void 0, { init: b, info: y, loader_config: w, runtime: A = { loaderType: v }, exposed: x = !0 } = t; const D = (0, g.gG)(); y || (b = D.init, y = D.info, w = D.loader_config), (0, i.Dg)(e, b || {}), (0, i.GE)(e, w || {}), (0, i.sU)(e, A), y.jsAttributes ??= {}, u.v6 && (y.jsAttributes.isWorker = !0), (0, i.CX)(e, y), p(); const j = function (e, t) { t || (0, c.R)(e, "api"); const g = {}; var p = a.ee.get(e), h = p.get("tracer"), v = "api-", m = v + "ixn-"; function b(t, n, r, o) { const a = (0, i.C5)(e); return null === n ? delete a.jsAttributes[t] : (0, i.CX)(e, { ...a, jsAttributes: { ...a.jsAttributes, [t]: n } }), A(v, r, !0, o || null === n ? "session" : void 0)(t, n) } function y() { } ["setErrorHandler", "finished", "addToTrace", "inlineHit", "addRelease"].forEach((e => g[e] = A(v, e, !0, "api"))), g.addPageAction = A(v, "addPageAction", !0, r.D.pageAction), g.setCurrentRouteName = A(v, "routeName", !0, r.D.spa), g.setPageViewName = function (t, n) { if ("string" == typeof t) return "/" !== t.charAt(0) && (t = "/" + t), (0, i.OP)(e).customTransaction = (n || "http://custom.transaction") + t, A(v, "setPageViewName", !0)() }, g.setCustomAttribute = function (e, t) { let n = arguments.length > 2 && void 0 !== arguments[2] && arguments[2]; if ("string" == typeof e) { if (["string", "number"].includes(typeof t) || null === t) return b(e, t, "setCustomAttribute", n); (0, l.Z)("Failed to execute setCustomAttribute.\nNon-null value must be a string or number type, but a type of <".concat(typeof t, "> was provided.")) } else (0, l.Z)("Failed to execute setCustomAttribute.\nName must be a string type, but a type of <".concat(typeof e, "> was provided.")) }, g.setUserId = function (e) { if ("string" == typeof e || null === e) return b("enduser.id", e, "setUserId", !0); (0, l.Z)("Failed to execute setUserId.\nNon-null value must be a string type, but a type of <".concat(typeof e, "> was provided.")) }, g.interaction = function () { return (new y).get() }; var w = y.prototype = { createTracer: function (e, t) { var n = {}, i = this, a = "function" == typeof t; return (0, o.p)(m + "tracer", [(0, s.z)(), e, n], i, r.D.spa, p), function () { if (h.emit((a ? "" : "no-") + "fn-start", [(0, s.z)(), i, a], n), a) try { return t.apply(this, arguments) } catch (e) { throw h.emit("fn-err", [arguments, this, "string" == typeof e ? new Error(e) : e], n), e } finally { h.emit("fn-end", [(0, s.z)()], n) } } } }; function A(e, t, n, i) { return function () { return (0, o.p)(f.xS, ["API/" + t + "/called"], void 0, r.D.metrics, p), i && (0, o.p)(e + t, [(0, s.z)(), ...arguments], n ? null : this, i, p), n ? void 0 : this } } function x() { n.e(439).then(n.bind(n, 7438)).then((t => { let { setAPI: n } = t; n(e), (0, c.L)(e, "api") })).catch((() => (0, l.Z)("Downloading runtime APIs failed..."))) } return ["actionText", "setName", "setAttribute", "save", "ignore", "onEnd", "getContext", "end", "get"].forEach((e => { w[e] = A(m, e, void 0, r.D.spa) })), g.noticeError = function (e, t) { "string" == typeof e && (e = new Error(e)), (0, o.p)(f.xS, ["API/noticeError/called"], void 0, r.D.metrics, p), (0, o.p)("err", [e, (0, s.z)(), !1, t], void 0, r.D.jserrors, p) }, u.il ? (0, d.b)((() => x()), !0) : x(), g }(e, m); return (0, g.Qy)(e, j, "api"), (0, g.Qy)(e, x, "exposed"), (0, g.EZ)("activatedFeatures", h.T), j } }, 3325: (e, t, n) => { n.d(t, { D: () => r, p: () => i }); const r = { ajax: "ajax", jserrors: "jserrors", metrics: "metrics", pageAction: "page_action", pageViewEvent: "page_view_event", pageViewTiming: "page_view_timing", sessionReplay: "session_replay", sessionTrace: "session_trace", spa: "spa" }, i = { [r.pageViewEvent]: 1, [r.pageViewTiming]: 2, [r.metrics]: 3, [r.jserrors]: 4, [r.ajax]: 5, [r.sessionTrace]: 6, [r.pageAction]: 7, [r.spa]: 8, [r.sessionReplay]: 9 } } }, r = {}; function i(e) { var t = r[e]; if (void 0 !== t) return t.exports; var o = r[e] = { exports: {} }; return n[e](o, o.exports, i), o.exports } i.m = n, i.d = (e, t) => { for (var n in t) i.o(t, n) && !i.o(e, n) && Object.defineProperty(e, n, { enumerable: !0, get: t[n] }) }, i.f = {}, i.e = e => Promise.all(Object.keys(i.f).reduce(((t, n) => (i.f[n](e, t), t)), [])), i.u = e => (({ 78: "page_action-aggregate", 147: "metrics-aggregate", 193: "session_trace-aggregate", 242: "session-manager", 317: "jserrors-aggregate", 348: "page_view_timing-aggregate", 412: "lazy-feature-loader", 439: "async-api", 538: "recorder", 590: "session_replay-aggregate", 675: "compressor", 786: "page_view_event-aggregate", 873: "spa-aggregate", 898: "ajax-aggregate" }[e] || e) + "." + { 78: "af5d1c80", 147: "7ece083a", 148: "03807465", 193: "27e34592", 242: "2a64278a", 317: "dcb6ac07", 348: "1c78d061", 412: "0ba331d7", 439: "d1647fbb", 538: "1b18459f", 590: "a5e677ba", 675: "ae9f91a8", 786: "a7935af6", 860: "e997904f", 873: "5c4318f2", 898: "09a31ca7" }[e] + "-1.235.0.min.js"), i.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t), e = {}, t = "NRBA:", i.l = (n, r, o, a) => { if (e[n]) e[n].push(r); else { var s, c; if (void 0 !== o) for (var d = document.getElementsByTagName("script"), u = 0; u < d.length; u++) { var l = d[u]; if (l.getAttribute("src") == n || l.getAttribute("data-webpack") == t + o) { s = l; break } } s || (c = !0, (s = document.createElement("script")).charset = "utf-8", s.timeout = 120, i.nc && s.setAttribute("nonce", i.nc), s.setAttribute("data-webpack", t + o), s.src = n), e[n] = [r]; var f = (t, r) => { s.onerror = s.onload = null, clearTimeout(g); var i = e[n]; if (delete e[n], s.parentNode && s.parentNode.removeChild(s), i && i.forEach((e => e(r))), t) return t(r) }, g = setTimeout(f.bind(null, void 0, { type: "timeout", target: s }), 12e4); s.onerror = f.bind(null, s.onerror), s.onload = f.bind(null, s.onload), c && document.head.appendChild(s) } }, i.r = e => { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, i.j = 680, i.p = "https://js-agent.newrelic.com/", (() => { var e = { 680: 0, 617: 0 }; i.f.j = (t, n) => { var r = i.o(e, t) ? e[t] : void 0; if (0 !== r) if (r) n.push(r[2]); else { var o = new Promise(((n, i) => r = e[t] = [n, i])); n.push(r[2] = o); var a = i.p + i.u(t), s = new Error; i.l(a, (n => { if (i.o(e, t) && (0 !== (r = e[t]) && (e[t] = void 0), r)) { var o = n && ("load" === n.type ? "missing" : n.type), a = n && n.target && n.target.src; s.message = "Loading chunk " + t + " failed.\n(" + o + ": " + a + ")", s.name = "ChunkLoadError", s.type = o, s.request = a, r[1](s) } }), "chunk-" + t, t) } }; var t = (t, n) => { var r, o, [a, s, c] = n, d = 0; if (a.some((t => 0 !== e[t]))) { for (r in s) i.o(s, r) && (i.m[r] = s[r]); if (c) c(i) } for (t && t(n); d < a.length; d++)o = a[d], i.o(e, o) && e[o] && e[o][0](), e[o] = 0 }, n = window.webpackChunkNRBA = window.webpackChunkNRBA || []; n.forEach(t.bind(null, 0)), n.push = t.bind(null, n.push.bind(n)) })(); var o = {}; (() => { i.r(o); var e = i(3325), t = i(5763); const n = Object.values(e.D); function r(e) { const r = {}; return n.forEach((n => { r[n] = function (e, n) { return !1 !== (0, t.Mt)(n, "".concat(e, ".enabled")) }(n, e) })), r } var a = i(9144); var s = i(5546), c = i(7442), d = i(8e3), u = i(5938), l = i(3960), f = i(1720), g = i(50); class p extends u.W { constructor(e, t, n) { let r = !(arguments.length > 3 && void 0 !== arguments[3]) || arguments[3]; super(e, t, n), this.auto = r, this.abortHandler, this.featAggregate, this.onAggregateImported, r && (0, d.R)(e, n) } importAggregator() { let e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; if (this.featAggregate || !this.auto) return; const n = f.il && !0 === (0, t.Mt)(this.agentIdentifier, "privacy.cookies_enabled"); let r, o; this.onAggregateImported = new Promise(((e, t) => { r = e, o = t })); const a = async () => { let t; try { if (n) { const { setupAgentSession: e } = await Promise.all([i.e(860), i.e(242)]).then(i.bind(i, 3228)); t = e(this.agentIdentifier) } } catch (e) { (0, g.Z)("A problem occurred when starting up session manager. This page will not start or extend any session.", e) } try { if (!this.shouldImportAgg(this.featureName, t)) return void (0, d.L)(this.agentIdentifier, this.featureName); const { lazyFeatureLoader: n } = await i.e(412).then(i.bind(i, 8582)), { Aggregate: o } = await n(this.featureName, "aggregate"); this.featAggregate = new o(this.agentIdentifier, this.aggregator, e), r() } catch (e) { (0, g.Z)("Downloading and initializing ".concat(this.featureName, " failed..."), e), this.abortHandler?.(), o() } }; f.il ? (0, l.b)((() => a()), !0) : a() } shouldImportAgg(n, r) { return n !== e.D.sessionReplay || !1 !== (0, t.Mt)(this.agentIdentifier, "session_trace.enabled") && (!!r?.isNew || !!r?.state.sessionReplay) } } var h = i(7633), v = i(7894); class m extends p { static featureName = h.t9; constructor(n, r) { let i = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2]; if (super(n, r, h.t9, i), ("undefined" == typeof PerformanceNavigationTiming || c.T) && "undefined" != typeof PerformanceTiming) { const r = (0, t.OP)(n); r[h.Dz] = Math.max(Date.now() - r.offset, 0), (0, l.K)((() => r[h.qw] = Math.max((0, v.z)() - r[h.Dz], 0))), (0, l.b)((() => { const t = (0, v.z)(); r[h.OJ] = Math.max(t - r[h.Dz], 0), (0, s.p)("timing", ["load", t], void 0, e.D.pageViewTiming, this.ee) })) } this.importAggregator() } } var b = i(1117), y = i(1284); class w extends b.w { constructor(e) { super(e), this.aggregatedData = {} } store(e, t, n, r, i) { var o = this.getBucket(e, t, n, i); return o.metrics = function (e, t) { t || (t = { count: 0 }); return t.count += 1, (0, y.D)(e, (function (e, n) { t[e] = A(n, t[e]) })), t }(r, o.metrics), o } merge(e, t, n, r, i) { var o = this.getBucket(e, t, r, i); if (o.metrics) { var a = o.metrics; a.count += n.count, (0, y.D)(n, (function (e, t) { if ("count" !== e) { var r = a[e], i = n[e]; i && !i.c ? a[e] = A(i.t, r) : a[e] = function (e, t) { if (!t) return e; t.c || (t = x(t.t)); return t.min = Math.min(e.min, t.min), t.max = Math.max(e.max, t.max), t.t += e.t, t.sos += e.sos, t.c += e.c, t }(i, a[e]) } })) } else o.metrics = n } storeMetric(e, t, n, r) { var i = this.getBucket(e, t, n); return i.stats = A(r, i.stats), i } getBucket(e, t, n, r) { this.aggregatedData[e] || (this.aggregatedData[e] = {}); var i = this.aggregatedData[e][t]; return i || (i = this.aggregatedData[e][t] = { params: n || {} }, r && (i.custom = r)), i } get(e, t) { return t ? this.aggregatedData[e] && this.aggregatedData[e][t] : this.aggregatedData[e] } take(e) { for (var t = {}, n = "", r = !1, i = 0; i < e.length; i++)t[n = e[i]] = D(this.aggregatedData[n]), t[n].length && (r = !0), delete this.aggregatedData[n]; return r ? t : null } } function A(e, t) { return null == e ? function (e) { e ? e.c++ : e = { c: 1 }; return e }(t) : t ? (t.c || (t = x(t.t)), t.c += 1, t.t += e, t.sos += e * e, e > t.max && (t.max = e), e < t.min && (t.min = e), t) : { t: e } } function x(e) { return { t: e, min: e, max: e, sos: e * e, c: 1 } } function D(e) { return "object" != typeof e ? [] : (0, y.D)(e, j) } function j(e, t) { return t } var E = i(8632), _ = i(4402), k = i(4351); var T = i(7956), I = i(3239), N = i(9251); class P extends p { static featureName = N.t; constructor(e, n) { let r = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2]; super(e, n, N.t, r), f.il && ((0, t.OP)(e).initHidden = Boolean("hidden" === document.visibilityState), (0, T.N)((() => (0, s.p)("docHidden", [(0, v.z)()], void 0, N.t, this.ee)), !0), (0, I.bP)("pagehide", (() => (0, s.p)("winPagehide", [(0, v.z)()], void 0, N.t, this.ee))), this.importAggregator()) } } var O = i(3081); class S extends p { static featureName = O.t9; constructor(e, t) { let n = !(arguments.length > 2 && void 0 !== arguments[2]) || arguments[2]; super(e, t, O.t9, n), this.importAggregator() } } new class { constructor(e) { let t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : (0, _.ky)(16); this.agentIdentifier = t, this.sharedAggregator = new w({ agentIdentifier: this.agentIdentifier }), this.features = {}, this.desiredFeatures = new Set(e.features || []), this.desiredFeatures.add(m), Object.assign(this, (0, a.j)(this.agentIdentifier, e, e.loaderType || "agent")), this.start() } get config() { return { info: (0, t.C5)(this.agentIdentifier), init: (0, t.P_)(this.agentIdentifier), loader_config: (0, t.DL)(this.agentIdentifier), runtime: (0, t.OP)(this.agentIdentifier) } } start() { const t = "features"; try { const n = r(this.agentIdentifier), i = [...this.desiredFeatures]; i.sort(((t, n) => e.p[t.featureName] - e.p[n.featureName])), i.forEach((t => { if (n[t.featureName] || t.featureName === e.D.pageViewEvent) { const r = function (t) { switch (t) { case e.D.ajax: return [e.D.jserrors]; case e.D.sessionTrace: return [e.D.ajax, e.D.pageViewEvent]; case e.D.sessionReplay: return [e.D.sessionTrace]; case e.D.pageViewTiming: return [e.D.pageViewEvent]; default: return [] } }(t.featureName); r.every((e => n[e])) || (0, g.Z)("".concat(t.featureName, " is enabled but one or more dependent features has been disabled (").concat((0, k.P)(r), "). This may cause unintended consequences or missing data...")), this.features[t.featureName] = new t(this.agentIdentifier, this.sharedAggregator) } })), (0, E.Qy)(this.agentIdentifier, this.features, t) } catch (e) { (0, g.Z)("Failed to initialize all enabled instrument classes (agent aborted) -", e); for (const e in this.features) this.features[e].abortHandler?.(); const n = (0, E.fP)(); return delete n.initializedAgents[this.agentIdentifier]?.api, delete n.initializedAgents[this.agentIdentifier]?.[t], delete this.sharedAggregator, n.ee?.abort(), delete n.ee?.get(this.agentIdentifier), !1 } } }({ features: [m, P, S], loaderType: "lite" }) })(), window.NRBA = o })();</script>
  <meta content="width=device-width,initial-scale=1.0,user-scalable=yes,minimum-scale=1.0,maximum-scale=3.0"
    id="viewport" name="viewport">
  <script defer="" src="./assets/preview.js" type="text/javascript"></script>
  <script>
    var _strk = _strk || []
    _strk.push = function (arg1, arg2) {
      var _arrayPush = Array.prototype.push.bind(this)
      if (typeof arg1 === 'string' && typeof arg2 === 'function') {
        // Support _strk.push(event, fn) for better UX
        _arrayPush([arg1, arg2])
      } else {
        _arrayPush.apply(this, arguments)
      }
    }
    window.runAfterDomBinding = {
      add: function (name, fn) {
        _strk.push(['Page.didMount', fn])
      }
    }
  </script>

  <link rel="stylesheet" media="screen"
    href="./assets/_reset-4fd65582921ba7920c5a289c7198c96eb5e660d2450fc330a24277fb993b89de.css">
  <link rel="stylesheet" media="screen" href="./assets/css">
  <link rel="stylesheet" media="screen"
    href="./assets/ui-953c2eb3f2d3464f0110fb20f754663d7dc891f25fa5a79a04b1bba50aaed853.css">
  <link rel="stylesheet" media="screen" href="./assets/main_v4.f99ecb8844cf6698069c.bundle.css">
  <link
    href="https://user-assets.sxlcdn.com/images/27813/FpuUjRpspFdBU_NRqqroISjPsJ1x.png?imageMogr2/strip/thumbnail/64x64%3E"
    rel="shortcut icon" type="image/x-icon">
  <link href="./assets/Fn4H125NIha2wkvsS6jMImTbf8JZ.png" rel="apple-touch-icon" sizes="60x60">
  <link href="./assets/Fn4H125NIha2wkvsS6jMImTbf8JZ.png" rel="apple-touch-icon" sizes="76x76">
  <link href="./assets/Fn4H125NIha2wkvsS6jMImTbf8JZ.png" rel="apple-touch-icon" sizes="120x120">
  <link href="./assets/Fn4H125NIha2wkvsS6jMImTbf8JZ.png" rel="apple-touch-icon" sizes="152x152">
  <meta content="RubyConf China 2016" property="og:title">
  <meta content="http://2016.rubyconfchina.org/" property="og:url">
  <meta
    content="//user-assets.sxlcdn.com/images/27813/Fn4H125NIha2wkvsS6jMImTbf8JZ.png?imageMogr2/strip/thumbnail/1200x630&gt;"
    property="og:image">
  <meta content="RubyConf China 2016" property="og:site_name">
  <meta content="RubyConf China 2016 官方网站" property="og:description">
  <meta content="RubyConf China 2016" itemprop="name">
  <meta content="RubyConf China 2016 官方网站" itemprop="description">
  <meta
    content="//user-assets.sxlcdn.com/images/27813/Fn4H125NIha2wkvsS6jMImTbf8JZ.png?imageMogr2/strip/thumbnail/1200x630&gt;"
    itemprop="image">
  <meta content="summary_large_image" name="twitter:card">
  <meta content="RubyConf China 2016" name="twitter:title">
  <meta content="RubyConf China 2016 官方网站" name="twitter:description">
  <meta
    content="//user-assets.sxlcdn.com/images/27813/Fn4H125NIha2wkvsS6jMImTbf8JZ.png?imageMogr2/strip/thumbnail/1200x630&gt;"
    name="twitter:image">
  <meta content="RubyConf China 2016 官方网站" name="description">
  <meta content="Ruby, RubyConf, RubyConf China, RubyChina" name="keywords">

  <meta name="support-helper" content="{&quot;permalink&quot;:&quot;rubyconfchina2016&quot;,&quot;id&quot;:10852868}">
  <link rel="canonical" href="http://2016.rubyconfchina.org/s/sites/10852868/preview">

  <!-- CUSTOM_CODE_START -->
  <!-- CUSTOM_CODE_END -->


  <link
    href="https://user-assets.sxlcdn.com/images/27813/FpuUjRpspFdBU_NRqqroISjPsJ1x.png?imageMogr2/strip/thumbnail/64x64%3E"
    rel="shortcut icon" type="image/x-icon">
  <meta name="asset-url" content="https://static-assets.sxlcdn.com">
  <script>
    var _gaq = _gaq || [];
    /* load errorception */
    var _errs = ["56557d16455c179b7c00004f"]; (function (a, b) {
      a.onerror = function () { _errs.push(arguments) };
      var d = function () {
        var a = b.createElement("script"), c = b.getElementsByTagName("script")[0];
        a.src = "//beacon.errorception.com/" + "56557d16455c179b7c00004f" + ".js"; a.async = !0;
        c.parentNode.insertBefore(a, c)
      }; a.addEventListener ? a.addEventListener("load", d, !1) :
        a.attachEvent("onload", d)
    })(window, document);

    // Google Analytics (Universal) Setup
    (function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date(); a = s.createElement(o),
        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', '__ga');


  </script>
  <script>
    (function () {
      window.$B || (window.$B = {});

    }).call(this);
  </script>
  <script src="./assets/detectIE-c385c24313ef0e9e4e7a1e131bf5e59f0fbd468f9f9ef44fd6739ae84ef0c0a4.js"
    async="async"></script>

  <style type="text/css" data-emotion=""></style>
  <style>
    .product-filter-container,
    .product-filter-popup {
      width: 225px;
      padding: 0 10px 15px 14px;
    }

    .product-filter-container .editor-item,
    .product-filter-popup .editor-item {
      margin-bottom: 10px;
    }

    .product-filter-container .editor-item .label-panel,
    .product-filter-popup .editor-item .label-panel {
      display: inline-block;
      text-transform: capitalize;
    }

    .product-filter-container .editor-item .label-panel .label,
    .product-filter-popup .editor-item .label-panel .label {
      margin-right: 5px;
    }

    .product-filter-container .editor-item .label-panel .sub-label,
    .product-filter-popup .editor-item .label-panel .sub-label {
      color: #c6c9cd;
      text-transform: capitalize;
    }

    .product-filter-container .top-bar .title,
    .product-filter-popup .top-bar .title,
    .product-filter-container .list .title,
    .product-filter-popup .list .title {
      color: #4b5056;
      font-weight: bold;
    }

    .product-filter-container .top-bar .s-kit-checkbox,
    .product-filter-popup .top-bar .s-kit-checkbox,
    .product-filter-container .list .s-kit-checkbox,
    .product-filter-popup .list .s-kit-checkbox {
      vertical-align: middle;
    }

    .product-filter-container .top-bar .s-kit-checkbox .s-kit-checkbox-input,
    .product-filter-popup .top-bar .s-kit-checkbox .s-kit-checkbox-input,
    .product-filter-container .list .s-kit-checkbox .s-kit-checkbox-input,
    .product-filter-popup .list .s-kit-checkbox .s-kit-checkbox-input {
      vertical-align: text-top;
    }

    .product-filter-container .top-bar,
    .product-filter-popup .top-bar {
      display: flex;
      border-bottom: 1px solid #E2E4E7;
      margin-bottom: 15px;
      padding-bottom: 15px;
    }

    .product-filter-container .top-bar .title,
    .product-filter-popup .top-bar .title {
      flex: 1;
      font-size: 14px;
    }

    .product-filter-container .top-bar .reset,
    .product-filter-popup .top-bar .reset {
      margin: auto;
      font-size: 14px;
      color: #636972;
      cursor: pointer;
      text-decoration: underline;
    }

    .product-filter-container .list,
    .product-filter-popup .list {
      overflow-y: auto;
      overflow-x: hidden;
    }

    .product-filter-container .list .option,
    .product-filter-popup .list .option {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #E2E4E7;
    }

    .product-filter-container .list .option.option-prices .title,
    .product-filter-popup .list .option.option-prices .title {
      margin-bottom: 0px;
    }

    .product-filter-container .list .option .title,
    .product-filter-popup .list .option .title {
      margin-bottom: 10px;
      font-size: 14px;
      text-transform: capitalize;
    }

    .product-filter-container .list .option .item:not(:last-child),
    .product-filter-popup .list .option .item:not(:last-child) {
      margin-bottom: 10px;
    }

    .product-filter-container .list .option .item .label-panel,
    .product-filter-popup .list .option .item .label-panel {
      text-transform: capitalize;
      display: inline-block;
    }

    .product-filter-container .list .option .item.price-slider .s-kit-slider,
    .product-filter-popup .list .option .item.price-slider .s-kit-slider {
      width: 206px;
      margin: 10px 0 10px 8px;
      padding: 4px 0;
      display: inline-block;
      text-align: center;
    }

    .product-filter-container .list .option .item.price-slider .s-kit-slider .s-kit-slider-rail,
    .product-filter-popup .list .option .item.price-slider .s-kit-slider .s-kit-slider-rail,
    .product-filter-container .list .option .item.price-slider .s-kit-slider .s-kit-slider-track,
    .product-filter-popup .list .option .item.price-slider .s-kit-slider .s-kit-slider-track {
      height: 4px;
      width: 100%;
      border-radius: 4px;
      top: 6px;
      color: #E2E4E7;
      background: #E2E4E7;
    }

    .product-filter-container .list .option .item.price-slider .s-kit-slider .price-slider-marks,
    .product-filter-popup .list .option .item.price-slider .s-kit-slider .price-slider-marks {
      color: #4b5056;
      margin-top: 15px;
      position: relative;
      margin-left: -6px;
      font-size: 12px;
    }

    .product-filter-container .list .option .item.price-slider .s-kit-slider .price-slider-marks span,
    .product-filter-popup .list .option .item.price-slider .s-kit-slider .price-slider-marks span {
      position: absolute;
    }

    .product-filter-container .list .option .item.price-slider .s-kit-slider .price-slider-marks .min-marks-text,
    .product-filter-popup .list .option .item.price-slider .s-kit-slider .price-slider-marks .min-marks-text {
      left: 0;
    }

    .product-filter-container .list .option .item.price-slider .s-kit-slider .price-slider-marks .max-marks-text,
    .product-filter-popup .list .option .item.price-slider .s-kit-slider .price-slider-marks .max-marks-text {
      right: 0;
    }

    .product-filter-container .list .option .item.price-slider .s-kit-slider .s-kit-slider-handle,
    .product-filter-popup .list .option .item.price-slider .s-kit-slider .s-kit-slider-handle {
      width: 16px;
      height: 16px;
      border: 1px solid #636972;
    }

    .product-filter-container .list .option .item.price-slider .s-kit-slider .s-kit-slider-handle:hover,
    .product-filter-popup .list .option .item.price-slider .s-kit-slider .s-kit-slider-handle:hover,
    .product-filter-container .list .option .item.price-slider .s-kit-slider .s-kit-slider-handle:active,
    .product-filter-popup .list .option .item.price-slider .s-kit-slider .s-kit-slider-handle:active {
      transform: scale(1);
      box-shadow: none;
    }

    .product-filter-container .list .option .item.price-slider .s-kit-slider-mark,
    .product-filter-popup .list .option .item.price-slider .s-kit-slider-mark {
      margin-top: 10px;
    }

    .product-filter-container .list .option .item.price-slider.disabled .s-kit-slider-handle:hover,
    .product-filter-popup .list .option .item.price-slider.disabled .s-kit-slider-handle:hover,
    .product-filter-container .list .option .item.price-slider.disabled .s-kit-slider-handle:active,
    .product-filter-popup .list .option .item.price-slider.disabled .s-kit-slider-handle:active {
      transform: scale(1);
      box-shadow: none;
      border: 1px solid #636972;
    }

    .product-filter-container .list .option .view-all,
    .product-filter-popup .list .option .view-all {
      margin-top: 10px;
      margin-bottom: 10px;
      color: #636972;
      opacity: 0.6;
      padding-left: 19px;
      cursor: pointer;
      text-transform: lowercase;
    }

    .product-filter-container .list .option .view-all p,
    .product-filter-popup .list .option .view-all p {
      display: inline-block;
    }

    .product-filter-container .list .option .view-all p::first-letter,
    .product-filter-popup .list .option .view-all p::first-letter {
      text-transform: uppercase;
    }

    .product-filter-container .list .option .view-all p:hover,
    .product-filter-popup .list .option .view-all p:hover {
      text-decoration: underline;
    }

    .product-filter-container .list {
      max-height: 1200px;
    }

    .product-filter-popup {
      height: 80%;
      overflow-y: hidden;
      overflow-x: hidden;
    }

    .product-filter-popup .s-kit-modal-content {
      height: 100%;
      margin: 15px;
    }

    .product-filter-popup .s-kit-modal-content .s-kit-modal-body {
      height: 100%;
      position: relative;
      box-sizing: border-box;
    }

    .product-filter-popup .s-kit-modal-content .container {
      height: 100%;
      padding-bottom: 60px;
      overflow-y: auto;
      box-sizing: border-box;
    }

    .product-filter-popup .s-kit-modal-content .list {
      height: auto;
      overflow: hidden;
    }

    .product-filter-popup .s-kit-modal-content .list .option .price-slider .s-kit-slider {
      width: 94%;
    }

    .product-filter-popup .s-kit-modal-content .btn {
      width: 100%;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 0 22px;
      background-color: #ffffff;
    }

    .product-filter-popup .s-kit-modal-content .btn .s-kit-btn {
      width: 220px;
      height: 36px;
      background-color: #ffffff;
    }
  </style>
  <style>
    .stripe-card-widget-form .card-item-pack {
      margin-bottom: 15px;
    }

    .stripe-card-widget-form .card-item-pack:last-child {
      margin-bottom: 0;
    }

    .stripe-card-widget-form .card-item-pack .card-item-title {
      font-size: 14px;
      color: #4b5056;
      font-weight: bold;
      font-family: open_sans, Open Sans, sans-serif;
      margin-bottom: 10px;
      line-height: 1.5;
    }

    .stripe-card-widget-form .s-form-field {
      margin-bottom: 0;
    }

    .stripe-card-widget-form .s-form-field .entypo-mail {
      position: absolute;
      left: 10px;
      top: 3px;
      font-size: 24px;
      color: #c6c9cd;
    }

    .stripe-card-widget-form .s-form-field input {
      font-size: 14px;
      color: #4b5056;
      box-sizing: border-box;
      width: 100%;
      padding: 12px 10px 12px 44px;
    }

    .stripe-card-widget-form .error-message {
      color: #E64751;
      margin-top: 10px;
      line-height: 1.2;
    }

    .stripe-card-widget-form .card-element {
      border: 1px solid #c6c9cd;
      padding: 7px 10px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
      border-radius: 3px;
      height: 28px;
      display: flex;
      align-items: center;
    }

    .stripe-card-widget-form .card-element.error {
      border: 1px solid #E64751;
    }

    .stripe-card-widget-form .card-element .__PrivateStripeElement {
      width: 100%;
    }

    .stripe-form .header {
      padding: 20px 30px;
      color: #a9aeb2;
      background: #EBEDEF;
      font-weight: bold;
      font-size: 14px;
      border-bottom: 1px solid #ddd;
    }

    .stripe-form .header .close {
      float: right;
      font-size: 30px;
      font-weight: normal;
      position: relative;
      top: -9px;
      cursor: pointer;
    }

    .stripe-form .form-body {
      padding: 30px;
    }

    .stripe-form .form-body .title {
      margin-bottom: 20px;
    }

    .stripe-form .form-body .s-form-field input,
    .stripe-form .form-body .s-form-field .s-btn {
      width: 100%;
      box-sizing: border-box;
    }

    .stripe-form .form-body .s-form-field .entypo-mail {
      position: absolute;
      left: 8px;
      top: 9px;
      font-size: 24px;
      color: #c6c9cd;
    }

    .stripe-form .form-body .s-form-field input {
      font-size: 16px;
      padding: 6px 8px;
      padding-left: 40px;
    }

    .stripe-form .form-body .s-form-field .s-btn {
      margin-top: 25px;
      font-size: 18px;
      text-transform: none;
      padding: 11px 15px;
    }

    .stripe-form .error-message {
      color: #E64751;
      margin-top: 10px;
      line-height: 1.2;
    }

    .stripe-form .card-element {
      border: 1px solid #c6c9cd;
      padding: 6px 8px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
      border-radius: 3px;
      height: 28px;
      display: flex;
      align-items: center;
    }

    .stripe-form .card-element.error {
      border: 1px solid #E64751;
    }

    .stripe-form .card-element .__PrivateStripeElement {
      width: 100%;
    }
  </style>
  <style>
    .membership-nav-container {
      display: inline-block;
    }

    .membership-nav-container .s-nav-li>.s-nav-link-container>a {
      white-space: normal;
    }

    .membership-nav-container .s-nav-li .nav-item .s-nav-dropdown ul li a {
      white-space: normal !important;
      line-height: 20px;
    }
  </style>
  <style data-emotion="css" data-s=""></style>
  <style type="text/css"></style>
  <style>
    .s-component-editor-inner.common-editor .s-component-content img {
      margin: 0px auto;
      border-radius: 3px;
      max-width: 98%;
      display: block;
      padding-top: 10px 0;
    }

    .s-component-editor-inner.common-editor .s-component-content p {
      margin: 0.5em 0;
      line-height: 1.4;
    }

    .s-component-editor-inner.common-editor .s-component-content em {
      font-style: italic;
      font-weight: inherit;
    }

    .s-component-editor-inner.common-editor .s-component-content strong {
      font-style: inherit;
    }

    .s-component-editor-inner.common-editor .s-component-content ol {
      margin: 0.5em 0;
      padding: 0 20px;
      list-style-type: decimal;
    }

    .s-component-editor-inner.common-editor .s-component-content ul {
      margin: 0.5em 0;
      padding: 0 20px;
      list-style-type: disc;
    }

    .s-component-editor-inner.common-editor .s-component-content li {
      line-height: 1.4;
    }

    @media only screen and (max-width: 500px) {
      .popups-dialog .s-kit-modal-body {
        max-height: 74vh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      .popups-dialog.s-email-form.modify-the-position .s-kit-modal-content .s-kit-modal-close {
        top: -40px;
        right: 0;
      }

      .s-kit-modal.popups-dialog {
        position: fixed;
        top: 40px;
        left: 0;
        min-width: 100%;
        margin: 0;
      }
    }

    .popups-dialog.s-email-form.modify-the-position .s-kit-modal-content {
      overflow: visible;
    }

    .popups-dialog.s-email-form.modify-the-position .s-kit-modal-close {
      top: 0;
      right: -40px;
      color: rgba(255, 255, 255, 0.75);
    }

    .popups-dialog.s-email-form .s-kit-modal-body {
      padding: 0;
    }

    .popups-dialog.s-email-form .s-kit-modal-content {
      width: 100%;
    }

    .popups-dialog.s-email-form .s-kit-modal-close {
      top: 7px;
      right: 6px;
    }

    .popups-dialog.s-email-form .submit-result-container {
      padding: 40px;
    }

    .popups-dialog.s-email-form .submit-result-container .title {
      margin-bottom: 40px;
      box-sizing: border-box;
      text-align: center;
    }

    .popups-dialog.s-email-form .submit-result-container .s-email-form-button {
      box-sizing: border-box;
      width: 100%;
      padding: 9px 9px;
      font-size: 14px;
      min-height: 36px;
      line-height: 18px;
      letter-spacing: 1.5px;
      text-align: center;
      border-radius: 4px;
      cursor: pointer;
      font-weight: bold;
      text-transform: uppercase;
    }
  </style>
  <style type="text/css" id="s352174-0">
    /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
    /* stylelint-disable declaration-bang-space-before */
    /* stylelint-disable declaration-bang-space-before */
    .s-kit-modal {
      position: relative;
      width: auto;
      margin: 0 auto;
      top: 100px;
      padding-bottom: 24px;
    }

    .s-kit-modal-wrap {
      position: fixed;
      overflow: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1000;
      -webkit-overflow-scrolling: touch;
      outline: 0;
    }

    .s-kit-modal-title {
      margin: 0;
      font-size: 14px;
      line-height: 21px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }

    .s-kit-modal-content {
      position: relative;
      background-color: #fff;
      border: 0;
      border-radius: 4px;
      background-clip: padding-box;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .s-kit-modal-close {
      cursor: pointer;
      border: 0;
      background: transparent;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 10;
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      transition: color .3s ease;
      color: rgba(0, 0, 0, 0.43);
      outline: 0;
    }

    .s-kit-modal-close-x {
      display: block;
      font-style: normal;
      vertical-align: baseline;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
      width: 48px;
      height: 48px;
      line-height: 48px;
      font-size: 14px;
    }

    .s-kit-modal-close-x:before {
      content: "\e633";
      display: block;
      font-family: "anticon" !important;
    }

    .s-kit-modal-close:focus,
    .s-kit-modal-close:hover {
      color: #444;
      text-decoration: none;
    }

    .s-kit-modal-header {
      padding: 13px 16px;
      border-radius: 4px 4px 0 0;
      background: #fff;
      color: rgba(0, 0, 0, 0.65);
      border-bottom: 1px solid #e9e9e9;
    }

    .s-kit-modal-body {
      padding: 16px;
      font-size: 12px;
      line-height: 1.5;
    }

    .s-kit-modal-footer {
      border-top: 1px solid #e9e9e9;
      padding: 10px 16px 10px 10px;
      text-align: right;
      border-radius: 0 0 4px 4px;
    }

    .s-kit-modal-footer button+button {
      margin-left: 8px;
      margin-bottom: 0;
    }

    .s-kit-modal.zoom-enter,
    .s-kit-modal.zoom-appear {
      -webkit-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      opacity: 0;
    }

    .s-kit-modal-mask {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: #373737;
      background-color: rgba(55, 55, 55, 0.6);
      height: 100%;
      z-index: 1000;
      filter: alpha(opacity=50);
    }

    .s-kit-modal-mask-hidden {
      display: none;
    }

    .s-kit-modal-open {
      overflow: hidden;
    }

    @media (max-width: 768px) {
      .s-kit-modal {
        width: auto !important;
        margin: 10px;
      }

      .vertical-center-modal .s-kit-modal {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }
    }

    .s-kit-confirm .s-kit-modal-header {
      display: none;
    }

    .s-kit-confirm .s-kit-modal-close {
      display: none;
    }

    .s-kit-confirm .s-kit-modal-body {
      padding: 30px 40px;
    }

    .s-kit-confirm-body-wrapper {
      zoom: 1;
    }

    .s-kit-confirm-body-wrapper:before,
    .s-kit-confirm-body-wrapper:after {
      content: " ";
      display: table;
    }

    .s-kit-confirm-body-wrapper:after {
      clear: both;
      visibility: hidden;
      font-size: 0;
      height: 0;
    }

    .s-kit-confirm-body .s-kit-confirm-title {
      color: rgba(0, 0, 0, 0.65);
      font-weight: bold;
      font-size: 14px;
    }

    .s-kit-confirm-body .s-kit-confirm-content {
      margin-left: 42px;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.65);
      margin-top: 8px;
    }

    .s-kit-confirm-body>.anticon {
      font-size: 24px;
      margin-right: 16px;
      padding: 0 1px;
      float: left;
    }

    .s-kit-confirm .s-kit-confirm-btns {
      margin-top: 30px;
      float: right;
    }

    .s-kit-confirm .s-kit-confirm-btns button+button {
      margin-left: 10px;
      margin-bottom: 0;
    }

    .s-kit-confirm-error .s-kit-confirm-body>.anticon {
      color: #f04134;
    }

    .s-kit-confirm-warning .s-kit-confirm-body>.anticon,
    .s-kit-confirm-confirm .s-kit-confirm-body>.anticon {
      color: #ffbf00;
    }

    .s-kit-confirm-info .s-kit-confirm-body>.anticon {
      color: #108ee9;
    }

    .s-kit-confirm-success .s-kit-confirm-body>.anticon {
      color: #00a854;
    }
  </style>
  <style type="text/css" id="s927011-1">
    @keyframes antSlideUpIn {
      0% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(0.8);
      }

      100% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
      }
    }

    @keyframes antSlideUpOut {
      0% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
      }

      100% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(0.8);
      }
    }

    @keyframes antPickerSlideDownIn {
      0% {
        opacity: 0;
        transform-origin: 100% 100%;
        transform: scaleY(0.8);
      }

      100% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scaleY(1);
      }
    }

    @keyframes antPickerSlideDownOut {
      0% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: scaleY(1);
      }

      100% {
        opacity: 0;
        transform-origin: 100% 100%;
        transform: scaleY(0.8);
      }
    }

    .fade-enter,
    .fade-appear {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .fade-leave {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .fade-enter.fade-enter-active,
    .fade-appear.fade-appear-active {
      animation-name: antFadeIn;
      animation-play-state: running;
    }

    .fade-leave.fade-leave-active {
      animation-name: antFadeOut;
      animation-play-state: running;
    }

    .fade-enter,
    .fade-appear {
      opacity: 0;
      animation-timing-function: linear;
    }

    .fade-leave {
      animation-timing-function: linear;
    }

    @keyframes antFadeIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes antFadeOut {
      0% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    .move-up-enter,
    .move-up-appear {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .move-up-leave {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .move-up-enter.move-up-enter-active,
    .move-up-appear.move-up-appear-active {
      animation-name: antMoveUpIn;
      animation-play-state: running;
    }

    .move-up-leave.move-up-leave-active {
      animation-name: antMoveUpOut;
      animation-play-state: running;
    }

    .move-up-enter,
    .move-up-appear {
      opacity: 0;
      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    }

    .move-up-leave {
      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
    }

    .move-down-enter,
    .move-down-appear {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .move-down-leave {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .move-down-enter.move-down-enter-active,
    .move-down-appear.move-down-appear-active {
      animation-name: antMoveDownIn;
      animation-play-state: running;
    }

    .move-down-leave.move-down-leave-active {
      animation-name: antMoveDownOut;
      animation-play-state: running;
    }

    .move-down-enter,
    .move-down-appear {
      opacity: 0;
      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    }

    .move-down-leave {
      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
    }

    .move-left-enter,
    .move-left-appear {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .move-left-leave {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .move-left-enter.move-left-enter-active,
    .move-left-appear.move-left-appear-active {
      animation-name: antMoveLeftIn;
      animation-play-state: running;
    }

    .move-left-leave.move-left-leave-active {
      animation-name: antMoveLeftOut;
      animation-play-state: running;
    }

    .move-left-enter,
    .move-left-appear {
      opacity: 0;
      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    }

    .move-left-leave {
      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
    }

    .move-right-enter,
    .move-right-appear {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .move-right-leave {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .move-right-enter.move-right-enter-active,
    .move-right-appear.move-right-appear-active {
      animation-name: antMoveRightIn;
      animation-play-state: running;
    }

    .move-right-leave.move-right-leave-active {
      animation-name: antMoveRightOut;
      animation-play-state: running;
    }

    .move-right-enter,
    .move-right-appear {
      opacity: 0;
      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
    }

    .move-right-leave {
      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
    }

    @keyframes antMoveDownIn {
      0% {
        transform-origin: 0 0;
        transform: translateY(100%);
        opacity: 0;
      }

      100% {
        transform-origin: 0 0;
        transform: translateY(0%);
        opacity: 1;
      }
    }

    @keyframes antMoveDownOut {
      0% {
        transform-origin: 0 0;
        transform: translateY(0%);
        opacity: 1;
      }

      100% {
        transform-origin: 0 0;
        transform: translateY(100%);
        opacity: 0;
      }
    }

    @keyframes antMoveLeftIn {
      0% {
        transform-origin: 0 0;
        transform: translateX(-100%);
        opacity: 0;
      }

      100% {
        transform-origin: 0 0;
        transform: translateX(0%);
        opacity: 1;
      }
    }

    @keyframes antMoveLeftOut {
      0% {
        transform-origin: 0 0;
        transform: translateX(0%);
        opacity: 1;
      }

      100% {
        transform-origin: 0 0;
        transform: translateX(-100%);
        opacity: 0;
      }
    }

    @keyframes antMoveRightIn {
      0% {
        opacity: 0;
        transform-origin: 0 0;
        transform: translateX(100%);
      }

      100% {
        opacity: 1;
        transform-origin: 0 0;
        transform: translateX(0%);
      }
    }

    @keyframes antMoveRightOut {
      0% {
        transform-origin: 0 0;
        transform: translateX(0%);
        opacity: 1;
      }

      100% {
        transform-origin: 0 0;
        transform: translateX(100%);
        opacity: 0;
      }
    }

    @keyframes antMoveUpIn {
      0% {
        transform-origin: 0 0;
        transform: translateY(-100%);
        opacity: 0;
      }

      100% {
        transform-origin: 0 0;
        transform: translateY(0%);
        opacity: 1;
      }
    }

    @keyframes antMoveUpOut {
      0% {
        transform-origin: 0 0;
        transform: translateY(0%);
        opacity: 1;
      }

      100% {
        transform-origin: 0 0;
        transform: translateY(-100%);
        opacity: 0;
      }
    }

    @keyframes loadingCircle {
      0% {
        transform-origin: 50% 50%;
        transform: rotate(0deg);
      }

      100% {
        transform-origin: 50% 50%;
        transform: rotate(360deg);
      }
    }

    .slide-up-enter,
    .slide-up-appear {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .slide-up-leave {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .slide-up-enter.slide-up-enter-active,
    .slide-up-appear.slide-up-appear-active {
      animation-name: antSlideUpIn;
      animation-play-state: running;
    }

    .slide-up-leave.slide-up-leave-active {
      animation-name: antSlideUpOut;
      animation-play-state: running;
    }

    .slide-up-enter,
    .slide-up-appear {
      opacity: 0;
      animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    }

    .slide-up-leave {
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    }

    .slide-down-enter,
    .slide-down-appear {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .slide-down-leave {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .slide-down-enter.slide-down-enter-active,
    .slide-down-appear.slide-down-appear-active {
      animation-name: antSlideDownIn;
      animation-play-state: running;
    }

    .slide-down-leave.slide-down-leave-active {
      animation-name: antSlideDownOut;
      animation-play-state: running;
    }

    .slide-down-enter,
    .slide-down-appear {
      opacity: 0;
      animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    }

    .slide-down-leave {
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    }

    .slide-left-enter,
    .slide-left-appear {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .slide-left-leave {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .slide-left-enter.slide-left-enter-active,
    .slide-left-appear.slide-left-appear-active {
      animation-name: antSlideLeftIn;
      animation-play-state: running;
    }

    .slide-left-leave.slide-left-leave-active {
      animation-name: antSlideLeftOut;
      animation-play-state: running;
    }

    .slide-left-enter,
    .slide-left-appear {
      opacity: 0;
      animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    }

    .slide-left-leave {
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    }

    .slide-right-enter,
    .slide-right-appear {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .slide-right-leave {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .slide-right-enter.slide-right-enter-active,
    .slide-right-appear.slide-right-appear-active {
      animation-name: antSlideRightIn;
      animation-play-state: running;
    }

    .slide-right-leave.slide-right-leave-active {
      animation-name: antSlideRightOut;
      animation-play-state: running;
    }

    .slide-right-enter,
    .slide-right-appear {
      opacity: 0;
      animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    }

    .slide-right-leave {
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    }

    @keyframes antSlideUpIn {
      0% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(0.8);
      }

      100% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
      }
    }

    @keyframes antSlideUpOut {
      0% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
      }

      100% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(0.8);
      }
    }

    @keyframes antSlideDownIn {
      0% {
        opacity: 0;
        transform-origin: 100% 100%;
        transform: translate3d(0, 15px, 0);
      }

      100% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes antSlideDownOut {
      0% {
        opacity: 1;
        transform-origin: 100% 100%;
        transform: translate3d(0, 0, 0);
      }

      100% {
        opacity: 0;
        transform-origin: 100% 100%;
        transform: translate3d(0, 15px, 0);
      }
    }

    @keyframes antSlideLeftIn {
      0% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleX(0.8);
      }

      100% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleX(1);
      }
    }

    @keyframes antSlideLeftOut {
      0% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleX(1);
      }

      100% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleX(0.8);
      }
    }

    @keyframes antSlideRightIn {
      0% {
        opacity: 0;
        transform-origin: 100% 0%;
        transform: scaleX(0.8);
      }

      100% {
        opacity: 1;
        transform-origin: 100% 0%;
        transform: scaleX(1);
      }
    }

    @keyframes antSlideRightOut {
      0% {
        opacity: 1;
        transform-origin: 100% 0%;
        transform: scaleX(1);
      }

      100% {
        opacity: 0;
        transform-origin: 100% 0%;
        transform: scaleX(0.8);
      }
    }

    .swing-enter,
    .swing-appear {
      animation-duration: 0.2s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .swing-enter.swing-enter-active,
    .swing-appear.swing-appear-active {
      animation-name: antSwingIn;
      animation-play-state: running;
    }

    @keyframes antSwingIn {

      0%,
      100% {
        transform: translateX(0);
      }

      20% {
        transform: translateX(-10px);
      }

      40% {
        transform: translateX(10px);
      }

      60% {
        transform: translateX(-5px);
      }

      80% {
        transform: translateX(5px);
      }
    }

    .zoom-enter,
    .zoom-appear {
      animation-duration: 0.1s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .zoom-leave {
      animation-duration: 0.1s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .zoom-enter.zoom-enter-active,
    .zoom-appear.zoom-appear-active {
      animation-name: sZoomIn;
      animation-play-state: running;
    }

    .zoom-leave.zoom-leave-active {
      animation-name: sZoomOut;
      animation-play-state: running;
    }

    .zoom-enter,
    .zoom-appear {
      transform: scale(0);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .zoom-leave {
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .zoom-big-enter,
    .zoom-big-appear {
      animation-duration: 0.1s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .zoom-big-leave {
      animation-duration: 0.1s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .zoom-big-enter.zoom-big-enter-active,
    .zoom-big-appear.zoom-big-appear-active {
      animation-name: sZoomBigIn;
      animation-play-state: running;
    }

    .zoom-big-leave.zoom-big-leave-active {
      animation-name: sZoomBigOut;
      animation-play-state: running;
    }

    .zoom-big-enter,
    .zoom-big-appear {
      transform: scale(0);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .zoom-big-leave {
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .zoom-up-enter,
    .zoom-up-appear {
      animation-duration: 0.1s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .zoom-up-leave {
      animation-duration: 0.1s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .zoom-up-enter.zoom-up-enter-active,
    .zoom-up-appear.zoom-up-appear-active {
      animation-name: sZoomUpIn;
      animation-play-state: running;
    }

    .zoom-up-leave.zoom-up-leave-active {
      animation-name: sZoomUpOut;
      animation-play-state: running;
    }

    .zoom-up-enter,
    .zoom-up-appear {
      transform: scale(0);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .zoom-up-leave {
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .zoom-down-enter,
    .zoom-down-appear {
      animation-duration: 0.1s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .zoom-down-leave {
      animation-duration: 0.1s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .zoom-down-enter.zoom-down-enter-active,
    .zoom-down-appear.zoom-down-appear-active {
      animation-name: sZoomDownIn;
      animation-play-state: running;
    }

    .zoom-down-leave.zoom-down-leave-active {
      animation-name: sZoomDownOut;
      animation-play-state: running;
    }

    .zoom-down-enter,
    .zoom-down-appear {
      transform: scale(0);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .zoom-down-leave {
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .zoom-left-enter,
    .zoom-left-appear {
      animation-duration: 0.1s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .zoom-left-leave {
      animation-duration: 0.1s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .zoom-left-enter.zoom-left-enter-active,
    .zoom-left-appear.zoom-left-appear-active {
      animation-name: sZoomLeftIn;
      animation-play-state: running;
    }

    .zoom-left-leave.zoom-left-leave-active {
      animation-name: sZoomLeftOut;
      animation-play-state: running;
    }

    .zoom-left-enter,
    .zoom-left-appear {
      transform: scale(0);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .zoom-left-leave {
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .zoom-right-enter,
    .zoom-right-appear {
      animation-duration: 0.1s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .zoom-right-leave {
      animation-duration: 0.1s;
      animation-fill-mode: both;
      animation-play-state: paused;
    }

    .zoom-right-enter.zoom-right-enter-active,
    .zoom-right-appear.zoom-right-appear-active {
      animation-name: sZoomRightIn;
      animation-play-state: running;
    }

    .zoom-right-leave.zoom-right-leave-active {
      animation-name: sZoomRightOut;
      animation-play-state: running;
    }

    .zoom-right-enter,
    .zoom-right-appear {
      transform: scale(0);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .zoom-right-leave {
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    @keyframes sZoomIn {
      0% {
        opacity: 0;
        transform: scale(0.2);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes sZoomOut {
      0% {
        transform: scale(1);
      }

      100% {
        opacity: 0;
        transform: scale(0.2);
      }
    }

    @keyframes sZoomBigIn {
      0% {
        opacity: 0;
        transform: scale(0.9);
      }

      100% {
        transform: scale(1);
      }
    }

    @keyframes sZoomBigOut {
      0% {
        transform: scale(1);
      }

      100% {
        opacity: 0;
        transform: scale(0.9);
      }
    }

    @keyframes sZoomUpIn {
      0% {
        opacity: 0;
        transform-origin: 50% 0%;
        transform: scale(0.8);
      }

      100% {
        transform-origin: 50% 0%;
        transform: scale(1);
      }
    }

    @keyframes sZoomUpOut {
      0% {
        transform-origin: 50% 0%;
        transform: scale(1);
      }

      100% {
        opacity: 0;
        transform-origin: 50% 0%;
        transform: scale(0.8);
      }
    }

    @keyframes sZoomLeftIn {
      0% {
        opacity: 0;
        transform-origin: 0% 50%;
        transform: scale(0.8);
      }

      100% {
        transform-origin: 0% 50%;
        transform: scale(1);
      }
    }

    @keyframes sZoomLeftOut {
      0% {
        transform-origin: 0% 50%;
        transform: scale(1);
      }

      100% {
        opacity: 0;
        transform-origin: 0% 50%;
        transform: scale(0.8);
      }
    }

    @keyframes sZoomRightIn {
      0% {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: scale(0.8);
      }

      100% {
        transform-origin: 100% 50%;
        transform: scale(1);
      }
    }

    @keyframes sZoomRightOut {
      0% {
        transform-origin: 100% 50%;
        transform: scale(1);
      }

      100% {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: scale(0.8);
      }
    }

    @keyframes sZoomDownIn {
      0% {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: scale(0.8);
      }

      100% {
        transform-origin: 50% 100%;
        transform: scale(1);
      }
    }

    @keyframes sZoomDownOut {
      0% {
        transform-origin: 50% 100%;
        transform: scale(1);
      }

      100% {
        opacity: 0;
        transform-origin: 50% 100%;
        transform: scale(0.8);
      }
    }

    .s-kit-motion-collapse {
      overflow: hidden;
    }

    .s-kit-motion-collapse-active {
      transition: height .12s, opacity .12s;
    }

    .s-kit-modal {
      top: auto;
      padding-bottom: 0;
      width: auto !important;
      min-width: 400px;
    }

    .s-kit-modal-fat-layout .s-kit-modal-content {
      padding: 10px 50px;
    }

    .s-kit-modal-standard-layout .s-kit-modal-header {
      margin: auto;
      padding-top: 30px;
      padding-bottom: 20px;
    }

    .s-kit-modal-standard-layout .s-kit-modal-title {
      text-align: left;
      padding: 0 30px;
    }

    .s-kit-modal-standard-layout .s-kit-modal-body {
      text-align: left;
      padding-top: 0;
    }

    .s-kit-modal-standard-layout.title-center .s-kit-modal-title {
      text-align: center;
    }

    .s-kit-modal-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .s-kit-modal-content {
      overflow: hidden;
    }

    .s-kit-modal-content::-webkit-scrollbar {
      width: 10px;
    }

    .s-kit-modal-content::-webkit-scrollbar-thumb {
      background-color: #c6c9cd;
      border: 2px solid white;
      border-radius: 5px;
    }

    .s-kit-modal-content::-webkit-scrollbar-track {
      background-color: white;
    }

    .s-kit-modal-mask {
      background-color: rgba(0, 0, 0, 0.6);
    }

    .s-kit-modal-close {
      top: 22px;
      right: 24px;
      padding: 0;
    }

    .s-kit-modal-close-x {
      font-size: 30px;
      font-weight: 300;
      width: 30px;
      height: 30px;
      line-height: 26px;
    }

    .s-kit-modal-close-x:before {
      content: "×";
      display: block;
      font-family: "entypo";
    }

    .s-kit-modal-header {
      border-bottom: none;
      padding: 0;
      margin-top: 30px;
      margin-bottom: -10px;
    }

    .s-kit-modal-title {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
      font-size: 20px;
      font-weight: bold;
      line-height: 1.2;
      text-align: center;
      color: #4b5056;
      text-transform: uppercase;
    }

    .s-kit-modal-title:lang(ja) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
    }

    .s-kit-modal-title:lang(zh-cn),
    .s-kit-modal-title:lang(zh),
    .s-kit-modal-title:lang(sxl) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑";
    }

    .s-kit-modal-title:lang(zh-tw) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei;
    }

    .s-kit-modal-body {
      padding: 30px;
      font-family: 'open_sans', 'Open Sans', sans-serif;
      color: #636972;
    }

    .s-kit-modal-body:lang(ja) {
      font-family: 'open_sans', 'Open Sans', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }

    .s-kit-modal-body:lang(zh-cn),
    .s-kit-modal-body:lang(zh),
    .s-kit-modal-body:lang(sxl) {
      font-family: 'open_sans', 'Open Sans', 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", sans-serif;
    }

    .s-kit-modal-body:lang(zh-tw) {
      font-family: 'open_sans', 'Open Sans', 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei, sans-serif;
    }

    .s-kit-modal-body h2 {
      font-size: 26px;
      color: #4b5056;
    }

    .s-kit-modal-body h4 {
      font-size: 20px;
      color: #4b5056;
      margin: 0 0;
    }

    .s-kit-modal-body p {
      font-size: 14px;
    }

    .s-kit-modal-body-content {
      text-align: left;
      max-width: 340px;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .s-kit-modal-body .s-kit-modal-btn {
      margin: 0;
    }

    .s-kit-modal-body .s-kit-modal-btn:not(:last-child) {
      margin-right: 10px;
    }

    .s-kit-modal-body .s-kit-stacked-btn {
      margin: 0 auto;
      min-width: 200px;
      display: block;
    }

    .s-kit-modal-body .s-kit-stacked-btn:not(:last-child) {
      margin-bottom: 10px;
    }
  </style>
  <style>
    .s-dialog-form .s-kit-modal-close {
      right: 22px;
    }

    .s-dialog-form .form-title {
      color: #4b5056;
      text-transform: uppercase;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .s-dialog-form .form-title:lang(ja) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
    }

    .s-dialog-form .form-title:lang(zh-cn),
    .s-dialog-form .form-title:lang(zh),
    .s-dialog-form .form-title:lang(sxl) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑";
    }

    .s-dialog-form .form-title:lang(zh-tw) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei;
    }

    .s-dialog-form .form-description {
      color: #636972;
      margin-bottom: 20px;
    }

    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-regular-webfont.4d6517993b36d06d996466e0b5c52c4c.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-regular-webfont.b4c9edbc6cf9391f12b35ecf8cca9641.woff) format('woff');
      font-weight: 400;
      font-display: swap;
    }

    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-semibold-webfont.de55ee1f3df2a2ac8f413c03b9571609.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-semibold-webfont.cbafba8611124877604db21adad2c5d5.woff) format('woff');
      font-weight: 600;
      font-display: swap;
    }

    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-bold-webfont.274d43a28e6fc5c72940558e6ca280d0.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-bold-webfont.3131eb46ccad412a794726f332d53a8b.woff) format('woff');
      font-weight: 700;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.1d9c7945c7bc7dd0909105119bfbc191.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.1d9c7945c7bc7dd0909105119bfbc191.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.2e90d5152ce92858b62ba053c7b9d2cb.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.76cc6be5d8a231dc012fef4bdb86f79c.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.93349923b5274a36ac93cb3168d09123.svg#open_sansbold) format('svg');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.6218c213bb8cf22b25710da6f3a90e48.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.6218c213bb8cf22b25710da6f3a90e48.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.7657144ec477cd61ac4a5d1af3fa2d28.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.b6690626036a7d6824632769305b1978.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.2b4eeeaef53b3496a5cdf82803666ed7.svg#open_sansbold_italic) format('svg');
      font-weight: 700;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.43d5342998f3607bd61a8239e98b1160.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.43d5342998f3607bd61a8239e98b1160.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.f42641eed834f7b97a9499362c6c8855.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.de7ef31e6295902347c5c3643b2d82da.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.5b774c25787e0a52c013463c9e3c4219.svg#open_sansitalic) format('svg');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.09e00aa7622ece30a0f1e06b55f66c2a.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.09e00aa7622ece30a0f1e06b55f66c2a.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.45b47f3e9c7d74b80f5c6e0a3c513b23.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.2e98fc3ce85f31f63010b706259cb604.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.8f04ed9aeb2185499068d84842b95aa1.svg#open_sanslight) format('svg');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.550b5fda4a27cfedb7131b1a6e85e748.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.550b5fda4a27cfedb7131b1a6e85e748.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.b553da506077488bc65289e10841d527.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.1d22953c479914c2f801e08de666b0e8.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.fd6dd5fa10c5a74f0a767eeb695342f1.svg#open_sanslight_italic) format('svg');
      font-weight: 300;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.c4d82460ef260eb1589e73528cbfb257.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.c4d82460ef260eb1589e73528cbfb257.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.79515ad0788973c533405f7012dfeccd.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.488d5cc145299ba07b75495100419ee6.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.8185eb3059c46e4169ce107dfcf85950.svg#open_sansregular) format('svg');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.f28eb362fb6afe946d822ee5451c2146.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.f28eb362fb6afe946d822ee5451c2146.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.697574b47bcfdd2c45e3e63c7380dd67.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.b32acea6fd3c228b5059042c7ad21c55.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.3f6b1eed8a0832d6f316fc26526348a8.svg#open_sanssemibold) format('svg');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70bafcaaadad9e17b9c7784abbc6b1c2.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70bafcaaadad9e17b9c7784abbc6b1c2.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.719f7321a8366f4ee609737026432113.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.64f886b232962979e2eaf29d93108286.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70eb93d7ba2ad241180085a9a74b0b95.svg#open_sanssemibold_italic) format('svg');
      font-weight: 600;
      font-style: italic;
      font-display: swap;
    }

    .wall-form-wrapper .s-email-form-button {
      width: 100%;
    }

    .wall-form-wrapper .s-email-form-button .fa-spinner {
      margin: 0 10px;
    }

    .wall-form-wrapper .form-field-error {
      color: #E64751;
    }

    .wall-form-wrapper .s-email-form .s-email-form-fields-group .s-email-form-field label {
      font-size: 14px;
      line-height: 1.2;
      position: static;
      width: 50%;
      color: #636972;
      overflow: initial;
    }

    .wall-form-wrapper .form-product-preview {
      display: flex;
      margin-bottom: 20px;
      align-items: flex-start;
      background-color: #F4F6F8;
      padding: 20px;
      border-radius: 4px;
    }

    .wall-form-wrapper .form-product-preview .product-preview-image {
      width: 100px;
      height: fit-content;
    }

    .wall-form-wrapper .form-product-preview .product-preview-name {
      margin: 0 20px;
    }
  </style>
  <style>
    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-regular-webfont.4d6517993b36d06d996466e0b5c52c4c.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-regular-webfont.b4c9edbc6cf9391f12b35ecf8cca9641.woff) format('woff');
      font-weight: 400;
      font-display: swap;
    }

    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-semibold-webfont.de55ee1f3df2a2ac8f413c03b9571609.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-semibold-webfont.cbafba8611124877604db21adad2c5d5.woff) format('woff');
      font-weight: 600;
      font-display: swap;
    }

    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-bold-webfont.274d43a28e6fc5c72940558e6ca280d0.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-bold-webfont.3131eb46ccad412a794726f332d53a8b.woff) format('woff');
      font-weight: 700;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.1d9c7945c7bc7dd0909105119bfbc191.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.1d9c7945c7bc7dd0909105119bfbc191.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.2e90d5152ce92858b62ba053c7b9d2cb.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.76cc6be5d8a231dc012fef4bdb86f79c.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.93349923b5274a36ac93cb3168d09123.svg#open_sansbold) format('svg');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.6218c213bb8cf22b25710da6f3a90e48.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.6218c213bb8cf22b25710da6f3a90e48.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.7657144ec477cd61ac4a5d1af3fa2d28.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.b6690626036a7d6824632769305b1978.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.2b4eeeaef53b3496a5cdf82803666ed7.svg#open_sansbold_italic) format('svg');
      font-weight: 700;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.43d5342998f3607bd61a8239e98b1160.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.43d5342998f3607bd61a8239e98b1160.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.f42641eed834f7b97a9499362c6c8855.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.de7ef31e6295902347c5c3643b2d82da.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.5b774c25787e0a52c013463c9e3c4219.svg#open_sansitalic) format('svg');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.09e00aa7622ece30a0f1e06b55f66c2a.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.09e00aa7622ece30a0f1e06b55f66c2a.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.45b47f3e9c7d74b80f5c6e0a3c513b23.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.2e98fc3ce85f31f63010b706259cb604.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.8f04ed9aeb2185499068d84842b95aa1.svg#open_sanslight) format('svg');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.550b5fda4a27cfedb7131b1a6e85e748.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.550b5fda4a27cfedb7131b1a6e85e748.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.b553da506077488bc65289e10841d527.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.1d22953c479914c2f801e08de666b0e8.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.fd6dd5fa10c5a74f0a767eeb695342f1.svg#open_sanslight_italic) format('svg');
      font-weight: 300;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.c4d82460ef260eb1589e73528cbfb257.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.c4d82460ef260eb1589e73528cbfb257.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.79515ad0788973c533405f7012dfeccd.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.488d5cc145299ba07b75495100419ee6.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.8185eb3059c46e4169ce107dfcf85950.svg#open_sansregular) format('svg');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.f28eb362fb6afe946d822ee5451c2146.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.f28eb362fb6afe946d822ee5451c2146.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.697574b47bcfdd2c45e3e63c7380dd67.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.b32acea6fd3c228b5059042c7ad21c55.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.3f6b1eed8a0832d6f316fc26526348a8.svg#open_sanssemibold) format('svg');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70bafcaaadad9e17b9c7784abbc6b1c2.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70bafcaaadad9e17b9c7784abbc6b1c2.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.719f7321a8366f4ee609737026432113.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.64f886b232962979e2eaf29d93108286.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70eb93d7ba2ad241180085a9a74b0b95.svg#open_sanssemibold_italic) format('svg');
      font-weight: 600;
      font-style: italic;
      font-display: swap;
    }

    .portfolio-wall-form-dialog {
      z-index: 2100;
      overflow: hidden;
    }

    .portfolio-wall-form-dialog .s-font-body {
      font-family: 'open_sans', 'Open Sans', sans-serif;
    }

    .portfolio-wall-form-dialog .s-font-body:lang(ja) {
      font-family: 'open_sans', 'Open Sans', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }

    .portfolio-wall-form-dialog .s-font-body:lang(zh-cn),
    .portfolio-wall-form-dialog .s-font-body:lang(zh),
    .portfolio-wall-form-dialog .s-font-body:lang(sxl) {
      font-family: 'open_sans', 'Open Sans', 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", sans-serif;
    }

    .portfolio-wall-form-dialog .s-font-body:lang(zh-tw) {
      font-family: 'open_sans', 'Open Sans', 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei, sans-serif;
    }

    .portfolio-wall-form-dialog .wall-form-wrapper {
      max-width: 360px;
    }

    .portfolio-wall-form-dialog .wall-form-wrapper .dialog-content {
      max-height: calc(100vh - 180px);
      overflow: scroll;
    }

    .portfolio-wall-form-dialog .wall-form-wrapper .dialog-content .s-email-form .s-email-form-fields-group .s-email-form-field .schema-form-address-field input[type="text"] {
      width: 100%;
    }

    .portfolio-wall-form-dialog .wall-form-wrapper .form-description,
    .portfolio-wall-form-dialog .wall-form-wrapper .form-title {
      width: unset;
    }

    .portfolio-wall-form-dialog .s-email-form-button.s-common-button {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .portfolio-wall-form-dialog .s-email-form-button.s-common-button:lang(ja) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
    }

    .portfolio-wall-form-dialog .s-email-form-button.s-common-button:lang(zh-cn),
    .portfolio-wall-form-dialog .s-email-form-button.s-common-button:lang(zh),
    .portfolio-wall-form-dialog .s-email-form-button.s-common-button:lang(sxl) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑";
    }

    .portfolio-wall-form-dialog .s-email-form-button.s-common-button:lang(zh-tw) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei;
    }

    .portfolio-wall-form-dialog .s-email-form-button.s-common-button.disabled {
      opacity: .5;
      cursor: not-allowed;
      pointer-events: none;
    }

    .portfolio-wall-form-dialog .s-email-form .s-email-form-fields-group .s-email-form-field {
      width: 360px;
      padding: 0;
      margin-bottom: 20px;
    }

    .portfolio-wall-form-dialog .s-email-form .s-email-form-fields-group .s-email-form-field.s-submit-field {
      margin: 24px 0 0 0;
    }

    .portfolio-wall-form-dialog .s-email-form .s-email-form-fields-group .s-email-form-field .name-field-inputs .s-kit-input {
      width: 100%;
    }

    .portfolio-wall-form-dialog .form-description,
    .portfolio-wall-form-dialog .form-title {
      width: 360px;
    }

    .ask-quote-success-dialog .s-kit-modal-header .s-kit-modal-title .description {
      font-family: 'open_sans', 'Open Sans', sans-serif;
      text-transform: capitalize;
      font-weight: initial;
    }

    .ask-quote-success-dialog .s-kit-modal-header .s-kit-modal-title .description:lang(ja) {
      font-family: 'open_sans', 'Open Sans', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }

    .ask-quote-success-dialog .s-kit-modal-header .s-kit-modal-title .description:lang(zh-cn),
    .ask-quote-success-dialog .s-kit-modal-header .s-kit-modal-title .description:lang(zh),
    .ask-quote-success-dialog .s-kit-modal-header .s-kit-modal-title .description:lang(sxl) {
      font-family: 'open_sans', 'Open Sans', 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", sans-serif;
    }

    .ask-quote-success-dialog .s-kit-modal-header .s-kit-modal-title .description:lang(zh-tw) {
      font-family: 'open_sans', 'Open Sans', 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei, sans-serif;
    }
  </style>
  <style>
    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-regular-webfont.4d6517993b36d06d996466e0b5c52c4c.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-regular-webfont.b4c9edbc6cf9391f12b35ecf8cca9641.woff) format('woff');
      font-weight: 400;
      font-display: swap;
    }

    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-semibold-webfont.de55ee1f3df2a2ac8f413c03b9571609.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-semibold-webfont.cbafba8611124877604db21adad2c5d5.woff) format('woff');
      font-weight: 600;
      font-display: swap;
    }

    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-bold-webfont.274d43a28e6fc5c72940558e6ca280d0.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-bold-webfont.3131eb46ccad412a794726f332d53a8b.woff) format('woff');
      font-weight: 700;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.1d9c7945c7bc7dd0909105119bfbc191.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.1d9c7945c7bc7dd0909105119bfbc191.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.2e90d5152ce92858b62ba053c7b9d2cb.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.76cc6be5d8a231dc012fef4bdb86f79c.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.93349923b5274a36ac93cb3168d09123.svg#open_sansbold) format('svg');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.6218c213bb8cf22b25710da6f3a90e48.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.6218c213bb8cf22b25710da6f3a90e48.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.7657144ec477cd61ac4a5d1af3fa2d28.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.b6690626036a7d6824632769305b1978.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.2b4eeeaef53b3496a5cdf82803666ed7.svg#open_sansbold_italic) format('svg');
      font-weight: 700;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.43d5342998f3607bd61a8239e98b1160.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.43d5342998f3607bd61a8239e98b1160.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.f42641eed834f7b97a9499362c6c8855.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.de7ef31e6295902347c5c3643b2d82da.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.5b774c25787e0a52c013463c9e3c4219.svg#open_sansitalic) format('svg');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.09e00aa7622ece30a0f1e06b55f66c2a.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.09e00aa7622ece30a0f1e06b55f66c2a.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.45b47f3e9c7d74b80f5c6e0a3c513b23.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.2e98fc3ce85f31f63010b706259cb604.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.8f04ed9aeb2185499068d84842b95aa1.svg#open_sanslight) format('svg');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.550b5fda4a27cfedb7131b1a6e85e748.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.550b5fda4a27cfedb7131b1a6e85e748.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.b553da506077488bc65289e10841d527.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.1d22953c479914c2f801e08de666b0e8.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.fd6dd5fa10c5a74f0a767eeb695342f1.svg#open_sanslight_italic) format('svg');
      font-weight: 300;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.c4d82460ef260eb1589e73528cbfb257.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.c4d82460ef260eb1589e73528cbfb257.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.79515ad0788973c533405f7012dfeccd.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.488d5cc145299ba07b75495100419ee6.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.8185eb3059c46e4169ce107dfcf85950.svg#open_sansregular) format('svg');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.f28eb362fb6afe946d822ee5451c2146.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.f28eb362fb6afe946d822ee5451c2146.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.697574b47bcfdd2c45e3e63c7380dd67.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.b32acea6fd3c228b5059042c7ad21c55.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.3f6b1eed8a0832d6f316fc26526348a8.svg#open_sanssemibold) format('svg');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70bafcaaadad9e17b9c7784abbc6b1c2.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70bafcaaadad9e17b9c7784abbc6b1c2.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.719f7321a8366f4ee609737026432113.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.64f886b232962979e2eaf29d93108286.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70eb93d7ba2ad241180085a9a74b0b95.svg#open_sanssemibold_italic) format('svg');
      font-weight: 600;
      font-style: italic;
      font-display: swap;
    }

    .s-dialog-form .s-kit-modal-close {
      right: 22px;
    }

    .s-dialog-form .form-title {
      color: #4b5056;
      text-transform: uppercase;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .s-dialog-form .form-title:lang(ja) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
    }

    .s-dialog-form .form-title:lang(zh-cn),
    .s-dialog-form .form-title:lang(zh),
    .s-dialog-form .form-title:lang(sxl) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑";
    }

    .s-dialog-form .form-title:lang(zh-tw) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei;
    }

    .s-dialog-form .form-description {
      color: #636972;
      margin-bottom: 20px;
    }

    .membership-dialog {
      text-align: left;
      border-radius: 4px;
    }

    .membership-dialog .s-kit-form-item .s-kit-form-item-control-wrapper .s-kit-form-item-control .error {
      margin-top: 0;
    }

    .membership-dialog .name-fields {
      display: flex;
      justify-content: space-between;
      margin: 0 -5px;
    }

    .membership-dialog .name-fields .s-kit-row {
      flex: 1;
      margin-left: 5px;
      margin-right: 5px;
    }

    .membership-dialog .s-kit-modal-body {
      padding: 40px;
    }

    .membership-dialog .s-kit-modal-close {
      right: 22px;
    }

    .membership-dialog .mobile-dialog-style {
      flex-direction: column;
    }

    .membership-dialog .mobile-dialog-style,
    .membership-dialog .mobile-dialog-style>div {
      width: 100%;
    }

    .membership-dialog .mobile-dialog-style .left {
      max-height: 240px;
      margin-bottom: 20px;
    }

    .membership-dialog .s-dialog-form .content {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      width: 710px;
    }

    .membership-dialog .s-dialog-form .content.free_register:not(.slimed),
    .membership-dialog .s-dialog-form .content.free_register:not(.slimed)>div {
      width: 100%;
    }

    .membership-dialog .s-dialog-form .content.free_register:not(.slimed) .left {
      display: none;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-card {
      min-height: 50px;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-card .tier-plan-radio-group .s-kit-radio-card {
      min-height: 20px;
      border: 0px;
      padding: 10px 0 0 0;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-card .tier-plan-radio-group .s-kit-radio-card .s-kit-radio-wrapper .s-kit-radio-input {
      width: 14px;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-card .tier-plan-radio-group .s-kit-radio-card .plan-price {
      font-weight: normal;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-group .s-kit-basic-card.gray {
      border-radius: 0;
      border-bottom-width: 0;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-group .s-kit-basic-card.gray .radio-text {
      line-height: 1.5;
      margin-top: 0;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-group .s-kit-basic-card.gray .radio-text .tier-plan-radio-group {
      margin-top: 8px;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-group .s-kit-basic-card.gray .radio-text .tier-plan-radio-group .s-kit-basic-card.gray {
      border: none;
      padding: 10px;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-group .s-kit-basic-card.gray .radio-text .tier-plan-radio-group .s-kit-basic-card.gray .s-kit-radio .s-kit-radio-input {
      width: 15px;
      height: 15px;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-group .s-kit-basic-card.gray .radio-text .tier-plan-radio-group .s-kit-basic-card.gray .label-item .label {
      font-size: 16px;
      font-weight: normal;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-group .s-kit-basic-card.gray:first-child {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-group .s-kit-basic-card.gray:last-child {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-bottom-width: 1px;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-group>div:first-child {
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .membership-dialog .s-dialog-form .content .s-kit-radio-group>div:last-child {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      border-bottom-width: 1px;
    }

    .membership-dialog .s-dialog-form .content>div {
      width: 340px;
    }

    .membership-dialog .s-dialog-form .content .left {
      margin-top: 4px;
      max-height: 600px;
      overflow-y: auto;
    }

    .membership-dialog .s-dialog-form .content .left .tier-info .plan-price {
      color: #4b5056;
      font-weight: normal;
    }

    .membership-dialog .s-dialog-form .content .left .s-kit-radio-group .left-card-content {
      width: 100%;
      overflow-wrap: break-word;
    }

    .membership-dialog .s-dialog-form .content .left .s-kit-radio-group .left-card-content .left-card-text {
      flex: 1;
      width: 0;
    }

    .membership-dialog .s-dialog-form .content .left .s-kit-radio-group .left-card-content .left-card-text .title {
      width: 100%;
      display: inline-block;
    }

    .membership-dialog .s-dialog-form .content .left .s-kit-radio-wrapper .s-kit-radio {
      margin-top: 0.3em;
    }

    .membership-dialog .s-dialog-form .content .left .tier-plan-radio-group .s-kit-radio-wrapper .s-kit-radio {
      margin-top: 0;
    }

    .membership-dialog .s-dialog-form .content .left .tier-info {
      line-height: 1.5;
    }

    .membership-dialog .s-dialog-form .content .right .s-kit-form-item .s-kit-form-item-control-wrapper .s-kit-form-item-control .error {
      margin-top: 0;
    }

    .membership-dialog .s-dialog-form .content .right .name-fields {
      display: flex;
      justify-content: space-between;
      margin: 0 -5px;
    }

    .membership-dialog .s-dialog-form .content .right .name-fields .s-kit-row {
      flex: 1;
      margin-left: 5px;
      margin-right: 5px;
    }

    .membership-dialog .s-dialog-form .content .right .gdpr-wrapper {
      color: #a9aeb2;
    }

    .membership-dialog .s-dialog-form .content .right .gdpr-wrapper .s-common-link {
      display: inline-block;
      text-decoration: underline;
    }

    .membership-dialog .s-dialog-form .content .right .gdpr-wrapper a {
      margin-top: 20px;
    }

    .membership-dialog .s-dialog-form .content .right .gdpr-wrapper span {
      line-height: 1.5;
    }

    .membership-dialog .s-dialog-form .content .right .bottom-actions>button:not(:first-of-type) {
      margin-top: 10px;
    }

    .membership-dialog .s-dialog-form .content.slimed {
      flex-direction: column;
    }

    .membership-dialog .s-dialog-form .content.slimed,
    .membership-dialog .s-dialog-form .content.slimed>div {
      width: 100%;
    }

    .membership-dialog .s-dialog-form .content.slimed .left {
      max-height: 240px;
      margin-bottom: 20px;
    }

    @media screen and (max-width: 770px) {
      .membership-dialog .s-dialog-form .content {
        flex-direction: column;
      }

      .membership-dialog .s-dialog-form .content,
      .membership-dialog .s-dialog-form .content>div {
        width: 100%;
      }

      .membership-dialog .s-dialog-form .content .left {
        max-height: 240px;
        margin-bottom: 20px;
      }

      .membership-dialog .s-dialog-form .content .plan-price {
        margin-top: 5px;
        display: block;
      }
    }

    .membership-dialog.s-kit-modal {
      min-height: 266px;
      max-width: 800px;
    }

    .membership-dialog .error-message {
      margin-bottom: 15px;
      color: #E64751;
    }

    .membership-dialog .s-kit-input {
      width: 100%;
      height: 37px;
      box-sizing: border-box;
    }

    .membership-dialog .s-form-field.paid-membership-radio {
      color: #4b5056;
      display: flex;
      align-items: center;
    }

    .membership-dialog .s-form-field.paid-membership-radio input {
      width: auto;
      margin-right: 10px;
    }

    .membership-dialog .subscriptions-view .form-title,
    .membership-dialog .update-account-view .form-title {
      cursor: pointer;
      display: flex;
      align-items: center;
    }

    .membership-dialog .subscriptions-view .form-title .fa-angle-left,
    .membership-dialog .update-account-view .form-title .fa-angle-left {
      font-size: 25px;
      align-self: flex-start;
      margin-right: 10px;
    }

    .membership-dialog .subscriptions-list {
      border: 1px solid #ddd;
    }

    .membership-dialog .subscriptions-list .subscription-item {
      border-bottom: 1px solid #ddd;
      display: flex;
      align-items: flex-start;
      padding: 20px 20px 0;
      flex-wrap: wrap;
    }

    .membership-dialog .subscriptions-list .subscription-item .info {
      flex: 1 1 0%;
      min-width: 200px;
      margin-bottom: 20px;
    }

    @media screen and (max-width: 770px) {
      .membership-dialog .subscriptions-list .subscription-item .info {
        min-width: unset;
        width: 0;
      }
    }

    .membership-dialog .subscriptions-list .subscription-item .name {
      overflow-wrap: break-word;
      font-weight: 600;
    }

    .membership-dialog .subscriptions-list .subscription-item .s-kit-btn {
      flex: 0 0 auto;
      min-width: 140px;
      margin: 0 0 20px;
    }

    .membership-dialog .subscriptions-list .subscription-item:last-child {
      border-bottom: none;
    }

    .membership-dialog .subscriptions-list .subscription-item .s-kit-radio-wrapper {
      display: flex;
      margin-bottom: 10px;
    }

    .membership-dialog .subscriptions-list .subscription-item .s-kit-radio-wrapper .discount-tag {
      margin-left: 5px;
    }

    .membership-dialog .subscriptions-list .subscription-item .subscribe-plans {
      margin-top: 5px;
      line-height: 1;
    }

    .membership-dialog .subscriptions-list .subscription-item .subscribe-plans .sub-text {
      margin-top: 5px;
      color: #c6c9cd;
    }

    @media screen and (min-width: 770px) {
      .membership-dialog .subscriptions-list .mid-gray .s-kit-btn {
        margin-bottom: 0px;
      }
    }

    .membership-dialog.payment .error-message {
      margin-bottom: 0;
    }

    .membership-dialog.payment .s-kit-modal-body {
      padding: 0;
    }

    .membership-dialog.payment .s-kit-modal-close-x {
      display: none;
    }

    .membership-dialog.payment .stripe-form .form-body .s-form-field .entypo-mail {
      top: 0;
    }

    .membership-dialog.payment .stripe-form .form-body .s-form-field .s-btn {
      text-align: center;
    }

    .membership-dialog.payment .stripe-form .header {
      margin-bottom: 0;
    }

    .membership-dialog.payment .stripe-form .form-body .title {
      font-weight: 600;
      text-transform: uppercase;
    }

    .membership-dialog.payment .square-form .s-form-field input {
      padding: 12px 20px;
      padding-left: 50px;
    }

    .membership-dialog.payment .square-form .form-body .square-card-container .error-message.more-space {
      bottom: -10px;
    }

    .membership-dialog.subscriptions .s-kit-modal-body {
      max-width: 560px;
    }

    .membership-dialog.subscriptions .loading:not(.s-kit-btn) {
      line-height: 200px;
      font-size: 20px;
      text-align: center;
    }

    .membership-dialog.payment_success .s-kit-modal-body {
      max-width: 500px;
      text-align: center;
    }

    .membership-dialog.payment_success .form-title {
      font-weight: 600;
    }

    .membership-dialog.payment_success p {
      margin-bottom: 20px;
      line-height: 1.4;
    }

    .membership-dialog.payment_success .s-kit-btn {
      min-width: 120px;
    }

    .membership-dialog.payment_failure .s-kit-modal-body {
      max-width: 400px;
      text-align: center;
    }

    .membership-dialog.account_info .s-kit-modal-body,
    .membership-dialog.subscriptions .s-kit-modal-body {
      min-height: 350px;
      box-sizing: border-box;
    }

    .membership-dialog .payment-failed .content {
      line-height: 1.4;
      margin: 10px 0 30px;
    }

    .membership-dialog .payment-failed .bottom-buttons .s-kit-btn {
      display: block;
      margin: 10px 0 0 0;
      width: 100%;
    }

    .membership-section-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .membership-section-wrapper .membership-dialog {
      min-width: 350px;
    }

    .membership-section-wrapper .recaptcha-widget-container {
      margin-bottom: 20px;
    }

    .membership-section-wrapper .bottom-actions>button:not(:first-of-type) {
      margin-top: 10px;
    }

    .s4-dropdown-list {
      position: absolute !important;
      top: 100% !important;
    }

    .bottom-actions {
      color: #a9aeb2;
      margin-top: 10px;
    }

    .bottom-actions a {
      text-decoration: underline;
      cursor: pointer;
      margin-top: 10px;
      display: block;
    }

    .bottom-actions .s-terms-link {
      display: inline-block;
      text-decoration: underline;
      cursor: pointer;
    }

    .bottom-actions .register-link {
      color: #1bb0e6;
    }

    .bottom-actions .s-kit-btn-block {
      margin-bottom: 0;
    }

    .bottom-actions .registration-disabled {
      height: 38px;
      line-height: 38px;
      text-align: center;
      font-weight: bold;
      border-radius: 4px;
      margin-bottom: 10px;
      text-transform: uppercase;
      background: #E4E8EF;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .bottom-actions .registration-disabled:lang(ja) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
    }

    .bottom-actions .registration-disabled:lang(zh-cn),
    .bottom-actions .registration-disabled:lang(zh),
    .bottom-actions .registration-disabled:lang(sxl) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑";
    }

    .bottom-actions .registration-disabled:lang(zh-tw) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei;
    }

    .bottom-actions .s-kit-btn.s-kit-btn-background-ghost.basic-blue {
      color: #1bb0e6;
      background: inherit;
      border-color: #1bb0e6;
    }

    .bottom-actions .s-kit-btn.s-kit-btn-background-ghost.basic-blue:hover {
      background: #1bb0e6;
      color: #ffffff;
    }

    .s-kit-modal-body {
      font-size: 14px !important;
    }

    .s-nav-top-center-item-container .s-membership-nav.s-nav-dropdown.s-navbar-dropdown .s-nav-link-container {
      display: inline-block;
    }

    @media (max-width: 400px) {
      .s-kit-modal {
        min-width: 100% !important;
      }
    }
  </style>
  <style>
    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-regular-webfont.4d6517993b36d06d996466e0b5c52c4c.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-regular-webfont.b4c9edbc6cf9391f12b35ecf8cca9641.woff) format('woff');
      font-weight: 400;
      font-display: swap;
    }

    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-semibold-webfont.de55ee1f3df2a2ac8f413c03b9571609.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-semibold-webfont.cbafba8611124877604db21adad2c5d5.woff) format('woff');
      font-weight: 600;
      font-display: swap;
    }

    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-bold-webfont.274d43a28e6fc5c72940558e6ca280d0.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-bold-webfont.3131eb46ccad412a794726f332d53a8b.woff) format('woff');
      font-weight: 700;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.1d9c7945c7bc7dd0909105119bfbc191.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.1d9c7945c7bc7dd0909105119bfbc191.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.2e90d5152ce92858b62ba053c7b9d2cb.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.76cc6be5d8a231dc012fef4bdb86f79c.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.93349923b5274a36ac93cb3168d09123.svg#open_sansbold) format('svg');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.6218c213bb8cf22b25710da6f3a90e48.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.6218c213bb8cf22b25710da6f3a90e48.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.7657144ec477cd61ac4a5d1af3fa2d28.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.b6690626036a7d6824632769305b1978.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.2b4eeeaef53b3496a5cdf82803666ed7.svg#open_sansbold_italic) format('svg');
      font-weight: 700;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.43d5342998f3607bd61a8239e98b1160.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.43d5342998f3607bd61a8239e98b1160.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.f42641eed834f7b97a9499362c6c8855.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.de7ef31e6295902347c5c3643b2d82da.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.5b774c25787e0a52c013463c9e3c4219.svg#open_sansitalic) format('svg');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.09e00aa7622ece30a0f1e06b55f66c2a.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.09e00aa7622ece30a0f1e06b55f66c2a.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.45b47f3e9c7d74b80f5c6e0a3c513b23.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.2e98fc3ce85f31f63010b706259cb604.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.8f04ed9aeb2185499068d84842b95aa1.svg#open_sanslight) format('svg');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.550b5fda4a27cfedb7131b1a6e85e748.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.550b5fda4a27cfedb7131b1a6e85e748.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.b553da506077488bc65289e10841d527.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.1d22953c479914c2f801e08de666b0e8.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.fd6dd5fa10c5a74f0a767eeb695342f1.svg#open_sanslight_italic) format('svg');
      font-weight: 300;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.c4d82460ef260eb1589e73528cbfb257.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.c4d82460ef260eb1589e73528cbfb257.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.79515ad0788973c533405f7012dfeccd.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.488d5cc145299ba07b75495100419ee6.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.8185eb3059c46e4169ce107dfcf85950.svg#open_sansregular) format('svg');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.f28eb362fb6afe946d822ee5451c2146.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.f28eb362fb6afe946d822ee5451c2146.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.697574b47bcfdd2c45e3e63c7380dd67.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.b32acea6fd3c228b5059042c7ad21c55.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.3f6b1eed8a0832d6f316fc26526348a8.svg#open_sanssemibold) format('svg');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70bafcaaadad9e17b9c7784abbc6b1c2.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70bafcaaadad9e17b9c7784abbc6b1c2.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.719f7321a8366f4ee609737026432113.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.64f886b232962979e2eaf29d93108286.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70eb93d7ba2ad241180085a9a74b0b95.svg#open_sanssemibold_italic) format('svg');
      font-weight: 600;
      font-style: italic;
      font-display: swap;
    }

    .s-kit-modal-wrap.gdpr-dialog {
      z-index: 2601;
    }

    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal {
      margin: 0;
    }

    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-content {
      border-radius: unset;
      height: 100vh;
    }

    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body {
      padding: 0 0 30px;
    }

    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body .title-wrapper {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
      font-size: 20px;
      font-weight: bold;
      color: #4b5056;
      padding: 30px 30px 0;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body .title-wrapper:lang(ja) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
    }

    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body .title-wrapper:lang(zh-cn),
    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body .title-wrapper:lang(zh),
    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body .title-wrapper:lang(sxl) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑";
    }

    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body .title-wrapper:lang(zh-tw) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei;
    }

    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body pre {
      margin-top: 0;
      padding: 0 30px;
      font-size: 15px;
      line-height: 1.4;
      overflow-y: auto;
      width: 800px;
      overflow-x: hidden;
      word-wrap: break-word;
      white-space: pre-wrap;
      height: calc(100vh - 102px);
      font-family: 'open_sans', 'Open Sans', sans-serif;
    }

    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body pre:lang(ja) {
      font-family: 'open_sans', 'Open Sans', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }

    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body pre:lang(zh-cn),
    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body pre:lang(zh),
    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body pre:lang(sxl) {
      font-family: 'open_sans', 'Open Sans', 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", sans-serif;
    }

    .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body pre:lang(zh-tw) {
      font-family: 'open_sans', 'Open Sans', 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei, sans-serif;
    }

    .s-kit-modal-wrap.gdpr-dialog.right {
      text-align: right;
    }

    .s-kit-modal-wrap.gdpr-dialog.right .s-kit-modal-close {
      left: 30px;
      width: 30px;
      right: auto;
    }

    @media (max-width: 501px) {
      .s-kit-modal-wrap.gdpr-dialog .s-kit-modal .s-kit-modal-body pre {
        width: calc(100% - 60px);
      }
    }
  </style>
  <style>
    .square-card-widget-form .card-item-pack {
      margin-bottom: 15px;
    }

    .square-card-widget-form .card-item-pack:last-child {
      margin-bottom: 0;
    }

    .square-card-widget-form .card-item-pack .card-item-title {
      font-size: 14px;
      color: #4b5056;
      font-weight: bold;
      font-family: open_sans, Open Sans, sans-serif;
      margin-bottom: 10px;
      line-height: 1.5;
    }

    .square-card-widget-form .s-form-field {
      margin-bottom: 0;
    }

    .square-card-widget-form .s-form-field .entypo-mail {
      position: absolute;
      left: 10px;
      top: 3px;
      font-size: 24px;
      color: #c6c9cd;
    }

    .square-card-widget-form .s-form-field .email-input {
      font-size: 14px;
      color: #4b5056;
      box-sizing: border-box;
      width: 100%;
      padding: 12px 10px 12px 44px;
    }

    .square-card-widget-form .square-card-container .sq-card-message {
      margin-top: 10px;
      margin-bottom: 0;
      display: none;
    }

    .square-card-widget-form .square-card-container .sq-card-message.sq-visible {
      display: block;
    }

    .square-card-widget-form .square-card-container .spinner-container {
      text-align: center;
    }

    .square-card-widget-form .error-message {
      margin-top: 10px;
      line-height: 1.2;
      color: #E64751;
    }

    .square-form .header {
      padding: 20px 30px;
      color: #a9aeb2;
      font-size: 14px;
      font-weight: bold;
      background: #EBEDEF;
      border-bottom: 1px solid #ddd;
    }

    .square-form .header .close {
      float: right;
      font-size: 30px;
      cursor: pointer;
      position: relative;
      top: -12px;
    }

    .square-form .form-body {
      padding: 30px;
    }

    .square-form .form-body .title {
      margin-bottom: 20px;
    }

    .square-form .form-body .s-form-field input,
    .square-form .form-body .s-btn {
      width: 100%;
      box-sizing: border-box;
    }

    .square-form .form-body .s-btn {
      text-align: center;
    }

    .square-form .form-body .s-form-field {
      margin-bottom: 25px;
    }

    .square-form .form-body .s-form-field input {
      font-size: 16px;
      padding: 6px 8px;
      padding-left: 40px;
    }

    .square-form .form-body .s-form-field .entypo-mail {
      position: absolute;
      left: 16px;
      top: 3px;
      font-size: 28px;
      color: #c6c9cd;
    }

    .square-form .form-body .loading-icon {
      margin-right: 6px;
    }

    .square-form .form-body .square-card-container {
      position: relative;
    }

    .square-form .form-body .square-card-container.more-space {
      margin-bottom: 20px;
    }

    .square-form .form-body .square-card-container .error-message {
      position: absolute;
      bottom: 14px;
    }

    .square-form .form-body .square-card-container .error-message.more-space {
      bottom: 0;
    }

    .square-form .form-body .square-card-container .sq-card-message {
      position: relative;
      z-index: 100;
      background-color: white;
    }

    .square-form .form-body .square-card-container .spinner-container {
      text-align: center;
      margin-bottom: 20px;
    }

    .square-form .error-message {
      margin-top: 8px;
      line-height: 1.2;
      color: #cc0023;
    }

    #google-pay-button {
      overflow: hidden;
    }

    #google-pay-button .gpay-card-info-container {
      height: 48px;
      top: 2px;
    }

    #google-pay-button .gpay-card-info-animated-progress-bar-container {
      top: -4px;
    }

    #apple-pay-button {
      height: 48px;
      width: 100%;
      position: relative;
      top: 3px;
      display: inline-block;
      -webkit-appearance: -apple-pay-button;
      -apple-pay-button-type: plain;
      -apple-pay-button-style: black;
    }

    @media screen and (max-width: 1000px) {

      #google-pay-button,
      #apple-pay-button {
        margin-bottom: 10px;
      }

      #google-pay-button .gpay-card-info-container,
      #apple-pay-button .gpay-card-info-container {
        width: 100%;
      }
    }
  </style>
  <style>
    .empty-cart-dialog-wrapper {
      background: transparent;
    }

    .empty-cart-dialog-wrapper .s-kit-modal-body {
      padding: 0;
    }

    .empty-cart-dialog-wrapper .s-kit-modal-content {
      height: 100%;
      width: 400px;
    }

    .empty-cart-dialog-wrapper .s-kit-modal-close {
      top: 20px;
      right: 20px;
    }

    .empty-cart-dialog-wrapper .s-kit-modal-close .s-kit-modal-close-x {
      font-size: 32px;
      font-weight: 300;
    }

    .empty-cart-dialog-wrapper .empty-cart-container {
      text-align: center;
      margin: 0 auto;
    }

    .empty-cart-dialog-wrapper .empty-cart-container .label {
      margin-top: 50px;
      color: #2E2E2F;
      font-size: 20px;
      font-weight: bold;
      font-family: open_sans, Open Sans, sans-serif;
    }

    .empty-cart-dialog-wrapper .empty-cart-container .continue-btn {
      width: 240px;
      font-size: 16px;
      padding: 10px 20px;
      border-radius: 4px;
      margin: 20px 0 50px 0;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    @media screen and (max-width: 560px) {
      .empty-cart-dialog-wrapper .s-kit-modal-content {
        width: 90%;
        margin: 0 auto;
      }

      .empty-cart-dialog-wrapper .empty-cart-container .label {
        font-size: 18px;
      }

      .empty-cart-dialog-wrapper .empty-cart-container .continue-btn {
        width: 200px;
        font-size: 14px;
      }
    }
  </style>
  <style>
    .WeChat-qr-code-dialog-wrapper {
      background: transparent;
    }

    .WeChat-qr-code-container {
      width: 560px;
      margin: 0 auto;
    }

    .WeChat-qr-code-container .title {
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 700;
      color: #525A61;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .WeChat-qr-code-container .qr-code-panel {
      text-align: center;
      padding: 50px 0;
    }

    .WeChat-qr-code-container .qr-code-panel canvas {
      width: 180px;
      height: 180px;
      padding: 20px;
      border: 1px solid #EBEDEF;
    }

    .WeChat-qr-code-container .qr-code-panel .price {
      width: 200px;
      margin: -6px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      font-size: 18px;
      font-weight: 700;
      border-top: none;
      border-radius: 0 0 4px 4px;
      border: 1px solid #EBEDEF;
    }

    .WeChat-qr-code-container .qr-code-panel .WeChat-icon {
      height: 20px;
      margin-right: 5px;
    }

    .WeChat-qr-code-container .payment-hint {
      color: #636972;
      line-height: 1.5;
      text-align: center;
      margin-bottom: 20px;
    }

    .WeChat-qr-code-container .payment-hint.mobile {
      display: none;
    }

    .WeChat-qr-code-container .save-btn {
      display: none;
    }

    @media screen and (max-width: 727px) {
      .WeChat-qr-code-dialog-wrapper {
        overflow: unset;
      }

      .WeChat-qr-code-dialog-wrapper .s-kit-modal-body {
        max-height: 100%;
        padding: 30px 20px;
      }

      .WeChat-qr-code-dialog-wrapper .s-kit-modal-close {
        top: 20px;
        right: 20px;
      }

      .WeChat-qr-code-dialog-wrapper .WeChat-qr-code-container {
        width: 100%;
      }

      .WeChat-qr-code-dialog-wrapper .WeChat-qr-code-container .payment-hint.mobile {
        display: block;
      }

      .WeChat-qr-code-dialog-wrapper .WeChat-qr-code-container .payment-hint.desktop {
        display: none;
      }

      .WeChat-qr-code-dialog-wrapper .WeChat-qr-code-container .save-btn {
        display: block;
        height: 36px;
        padding: 0;
        font-size: 16px;
        margin-top: 30px;
        line-height: 36px;
        border-radius: 4px;
        text-align: center;
      }

      .WeChat-qr-code-dialog-wrapper .s-kit-modal-content {
        height: 100vh;
      }
    }
  </style>
  <style>
    .cart-item-wrapper {
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .cart-item-wrapper .product-info {
      display: flex;
      align-content: center;
    }

    .cart-item-wrapper .product-info .image {
      width: 130px;
      height: 130px;
      border-radius: 4px;
      margin-right: 20px;
      background-size: cover;
      background-position: center;
    }

    .cart-item-wrapper .info-content {
      flex: 1;
      font-family: open_sans, Open Sans, sans-serif;
    }

    .cart-item-wrapper .info-content .name {
      font-weight: 700;
      font-size: 14px;
      line-height: 1.5;
      color: #4b5056;
    }

    .cart-item-wrapper .info-content .specification-item {
      display: flex;
      align-items: center;
      margin-top: 5px;
      font-size: 14px;
      color: #a9aeb2;
    }

    .cart-item-wrapper .info-content .split-line {
      margin: 0 6px;
    }

    .cart-item-wrapper .info-content .quantity-panel {
      display: flex;
      margin-top: 15px;
      align-items: center;
    }

    .cart-item-wrapper .info-content .operation-item {
      border-radius: 2px;
      color: #4b5056;
      display: inline-flex;
      font-size: 18px;
      background-color: #F4F6F8;
    }

    .cart-item-wrapper .info-content .operation-item .minus-icon,
    .cart-item-wrapper .info-content .operation-item .plus-icon,
    .cart-item-wrapper .info-content .operation-item .delete-icon {
      height: 30px;
      width: 30px;
      cursor: pointer;
      font-weight: 400;
      line-height: 30px;
      text-align: center;
    }

    .cart-item-wrapper .info-content .operation-item .quantity-input {
      width: 40px;
      height: 30px;
      padding: 0;
      margin: 0;
      font-size: 15px;
      border-radius: 0;
      text-align: center;
      background-color: #F4F6F8;
    }

    .cart-item-wrapper .info-content .operation-item .quantity-input:focus {
      outline: none;
    }

    .cart-item-wrapper .info-content .error-message {
      color: #FB7D2B;
      line-height: 1.2;
      margin-left: 10px;
    }

    .cart-item-wrapper .product-price {
      font-weight: bold;
      font-size: 16px;
      color: #4b5056;
    }
  </style>
  <style>
    .coupon-panel {
      font-size: 14px;
      color: #4b5056;
    }

    .coupon-panel .guide-item {
      display: flex;
      align-items: center;
    }

    .coupon-panel .guide-item .icon {
      width: 20px;
      margin-right: 4px;
    }

    .coupon-panel .guide-item .label {
      cursor: pointer;
      text-decoration: underline;
    }

    .coupon-panel .redemption-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .coupon-panel .redemption-item .coupon-input {
      width: 100%;
      height: 42px;
      margin-right: 10px;
    }

    .coupon-panel .redemption-item .apply-btn {
      margin: 0;
      padding: 0;
      height: 42px;
      width: 100px;
      font-size: 16px;
      line-height: 42px;
      border-radius: 4px;
      text-align: center;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .coupon-panel .redemption-item .apply-btn .fa-spinner {
      color: #fff;
    }

    .coupon-panel .coupon-info {
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #4b5056;
    }

    .coupon-panel .coupon-info .icon {
      width: 22px;
    }

    .coupon-panel .coupon-info .discount {
      margin: 0 4px 0 8px;
    }

    .coupon-panel .coupon-info .delete-coupon {
      cursor: pointer;
      font-size: 23px;
      color: #a9aeb2;
    }
  </style>
  <style>
    .fee-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      line-height: 1.2;
      margin-top: 6px;
      color: #4b5056;
      font-family: open_sans, Open Sans, sans-serif;
    }

    .fee-item .name,
    .fee-item .amount {
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .fee-item .value {
      margin-left: 6px;
      font-weight: 700;
    }

    .fee-item .label {
      margin-left: 6px;
    }
  </style>
  <style>
    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-regular-webfont.4d6517993b36d06d996466e0b5c52c4c.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-regular-webfont.b4c9edbc6cf9391f12b35ecf8cca9641.woff) format('woff');
      font-weight: 400;
      font-display: swap;
    }

    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-semibold-webfont.de55ee1f3df2a2ac8f413c03b9571609.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-semibold-webfont.cbafba8611124877604db21adad2c5d5.woff) format('woff');
      font-weight: 600;
      font-display: swap;
    }

    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-bold-webfont.274d43a28e6fc5c72940558e6ca280d0.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-bold-webfont.3131eb46ccad412a794726f332d53a8b.woff) format('woff');
      font-weight: 700;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.1d9c7945c7bc7dd0909105119bfbc191.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.1d9c7945c7bc7dd0909105119bfbc191.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.2e90d5152ce92858b62ba053c7b9d2cb.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.76cc6be5d8a231dc012fef4bdb86f79c.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Bold-webfont.93349923b5274a36ac93cb3168d09123.svg#open_sansbold) format('svg');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.6218c213bb8cf22b25710da6f3a90e48.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.6218c213bb8cf22b25710da6f3a90e48.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.7657144ec477cd61ac4a5d1af3fa2d28.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.b6690626036a7d6824632769305b1978.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-BoldItalic-webfont.2b4eeeaef53b3496a5cdf82803666ed7.svg#open_sansbold_italic) format('svg');
      font-weight: 700;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.43d5342998f3607bd61a8239e98b1160.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.43d5342998f3607bd61a8239e98b1160.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.f42641eed834f7b97a9499362c6c8855.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.de7ef31e6295902347c5c3643b2d82da.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Italic-webfont.5b774c25787e0a52c013463c9e3c4219.svg#open_sansitalic) format('svg');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.09e00aa7622ece30a0f1e06b55f66c2a.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.09e00aa7622ece30a0f1e06b55f66c2a.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.45b47f3e9c7d74b80f5c6e0a3c513b23.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.2e98fc3ce85f31f63010b706259cb604.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Light-webfont.8f04ed9aeb2185499068d84842b95aa1.svg#open_sanslight) format('svg');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.550b5fda4a27cfedb7131b1a6e85e748.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.550b5fda4a27cfedb7131b1a6e85e748.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.b553da506077488bc65289e10841d527.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.1d22953c479914c2f801e08de666b0e8.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-LightItalic-webfont.fd6dd5fa10c5a74f0a767eeb695342f1.svg#open_sanslight_italic) format('svg');
      font-weight: 300;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.c4d82460ef260eb1589e73528cbfb257.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.c4d82460ef260eb1589e73528cbfb257.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.79515ad0788973c533405f7012dfeccd.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.488d5cc145299ba07b75495100419ee6.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Regular-webfont.8185eb3059c46e4169ce107dfcf85950.svg#open_sansregular) format('svg');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.f28eb362fb6afe946d822ee5451c2146.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.f28eb362fb6afe946d822ee5451c2146.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.697574b47bcfdd2c45e3e63c7380dd67.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.b32acea6fd3c228b5059042c7ad21c55.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-Semibold-webfont.3f6b1eed8a0832d6f316fc26526348a8.svg#open_sanssemibold) format('svg');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'open_sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70bafcaaadad9e17b9c7784abbc6b1c2.eot);
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70bafcaaadad9e17b9c7784abbc6b1c2.eot?#iefix) format('embedded-opentype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.719f7321a8366f4ee609737026432113.woff) format('woff'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.64f886b232962979e2eaf29d93108286.ttf) format('truetype'), url(https://static-assets.sxlcdn.com/webpack/fonts/OpenSans-SemiboldItalic-webfont.70eb93d7ba2ad241180085a9a74b0b95.svg#open_sanssemibold_italic) format('svg');
      font-weight: 600;
      font-style: italic;
      font-display: swap;
    }

    .shopping-cart-wrapper {
      height: 100%;
    }

    .shopping-container .cart-title {
      line-height: 1;
      font-size: 18px;
      font-weight: bold;
      color: #4b5056;
      margin-bottom: 22px;
      padding: 30px 40px 0 40px;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .shopping-container .cart-panel {
      overflow-y: auto;
    }

    .shopping-container .cart-panel .cart-item-wrapper {
      padding: 0 40px;
    }

    .shopping-footer {
      padding: 20px 0;
      margin: 0 40px;
      background-color: #ffffff;
      border-top: 1px solid #E2E4E7;
    }

    .shopping-footer .price-panel {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .shopping-footer .coupon-panel {
      margin-top: 10px;
    }

    .shopping-footer .coupon-panel .guide-item {
      display: flex;
      justify-content: flex-end;
      font-size: 14px;
      color: #4b5056;
    }

    .shopping-footer .coupon-panel .guide-item .icon {
      width: 20px;
      height: 14px;
    }

    .shopping-footer .coupon-panel .redemption-item {
      justify-content: flex-end;
    }

    .shopping-footer .coupon-panel .redemption-item .s-kit-input {
      width: 240px;
      height: 36px;
    }

    .shopping-footer .coupon-panel .redemption-item .s-common-button {
      width: auto;
      padding: 0 18px;
      height: 36px;
      line-height: 36px;
      font-size: 14px;
    }

    .shopping-footer .coupon-panel .form-field-error {
      margin-top: 10px;
      text-align: right;
      color: #E64751;
    }

    .shopping-footer .fee-detail {
      padding-bottom: 20px;
      margin-bottom: 10px;
      border-bottom: 1px solid #E2E4E7;
    }

    .shopping-footer .fee-detail .fee-item {
      justify-content: flex-end;
      font-weight: bold;
      color: #8D949C;
      font-size: 14px;
    }

    .shopping-footer .fee-detail .fee-item .amount {
      margin-left: 25px;
    }

    .shopping-footer .fee-detail .fee-item.coupon .amount,
    .shopping-footer .fee-detail .fee-item.coupon .coupon-info,
    .shopping-footer .fee-detail .fee-item.coupon .discount {
      font-family: open_sans, Open Sans, sans-serif;
      color: #93b719;
    }

    .shopping-footer .fee-detail .fee-item.coupon .value {
      display: flex;
    }

    .shopping-footer .fee-detail .fee-item.coupon .coupon-info-group {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .shopping-footer .fee-detail .fee-item.coupon .coupon-info-group .remove-coupon {
      font-weight: normal;
      cursor: pointer;
      margin-right: 15px;
    }

    .shopping-footer .fee-detail .fee-item.coupon .coupon-info-group .remove-coupon .s-kit-icon {
      color: #8D949C;
    }

    .shopping-footer .fee-detail .fee-item.coupon .coupon-info-group .coupon-info {
      display: flex;
      align-items: center;
    }

    .shopping-footer .fee-detail .fee-item.coupon .coupon-info-group .coupon-info .icon {
      margin-right: 5px;
      width: 20px;
      height: 14px;
    }

    .shopping-footer .variation-panel {
      width: 200px;
      margin-bottom: 10px;
    }

    .shopping-footer .shopping-guide {
      width: 70%;
    }

    .shopping-footer .shopping-guide .shipping-icon {
      margin-top: 2px;
      margin-right: 4px;
    }

    .shopping-footer .shopping-guide .free-shipping {
      display: flex;
      color: #8D949C;
      align-items: center;
      font-family: open_sans, Open Sans, sans-serif;
    }

    .shopping-footer .error-message {
      width: 90%;
      color: #E64751;
      margin-top: 6px;
    }

    .shopping-footer .price-info {
      display: flex;
      align-items: center;
    }

    .shopping-footer .price-info .label {
      font-weight: bold;
      margin-right: 16px;
      color: #4b5056;
      text-transform: uppercase;
      font-family: open_sans, Open Sans, sans-serif;
    }

    .shopping-footer .price-info .currency {
      margin-right: 8px;
    }

    .shopping-footer .price-info .amount {
      font-size: 16px;
      color: #2E2E2F;
      font-weight: bold;
    }

    .shopping-footer .terms-checkbox {
      color: #4b5056;
      margin-top: 6px;
    }

    .shopping-footer .terms-checkbox .s-kit-checkbox-wrapper {
      display: flex;
      word-break: break-word;
      align-items: flex-start;
    }

    .shopping-footer .terms-checkbox .s-kit-checkbox-wrapper .s-terms-link {
      display: inline-block;
    }

    .shopping-footer .terms-checkbox .s-kit-checkbox {
      vertical-align: bottom;
    }

    .shopping-footer .terms-checkbox a span {
      color: #636972;
      text-decoration: underline;
      font-family: 'open_sans', 'Open Sans', sans-serif;
    }

    .shopping-footer .terms-checkbox a span:lang(ja) {
      font-family: 'open_sans', 'Open Sans', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    }

    .shopping-footer .terms-checkbox a span:lang(zh-cn),
    .shopping-footer .terms-checkbox a span:lang(zh),
    .shopping-footer .terms-checkbox a span:lang(sxl) {
      font-family: 'open_sans', 'Open Sans', 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", sans-serif;
    }

    .shopping-footer .terms-checkbox a span:lang(zh-tw) {
      font-family: 'open_sans', 'Open Sans', 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei, sans-serif;
    }

    .shopping-footer .terms-checkbox .s-common-link {
      color: inherit;
      margin: 0 4px;
      text-decoration: underline;
    }

    .shopping-footer .checkout-buttons {
      width: 100%;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .shopping-footer .checkout-buttons .pay-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      width: 198px;
      cursor: pointer;
      border-radius: 4px;
      margin-right: 12px;
      border: 2px solid #6D48FD;
    }

    .shopping-footer .checkout-buttons .square-payment-btn {
      margin-right: 20px;
    }

    .shopping-footer .checkout-buttons .checkout-btn {
      height: 20px;
      width: 202px;
      margin: 0;
      max-width: 100%;
      padding: 14px 0;
      cursor: pointer;
      font-size: 18px;
      line-height: 20px;
      text-align: center;
      border-radius: 4px;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .shopping-footer .checkout-buttons .checkout-btn .fa-spinner {
      color: inherit;
      margin-right: 6px;
    }

    .shopping-footer .checkout-buttons .checkout-btn.disabled {
      cursor: not-allowed;
      border-color: transparent;
      background-color: #E2E4E7;
    }

    @media screen and (max-width: 800px) {
      .shopping-container .cart-title {
        font-size: 18px;
        padding: 30px 20px 0 20px;
      }

      .shopping-container .cart-panel .cart-item-wrapper {
        padding: 0 20px;
        align-items: flex-start;
      }

      .shopping-container .product-info .image {
        width: 92px;
        height: 92px;
        margin-right: 16px;
      }

      .shopping-container .info-content .name {
        font-size: 14px;
        font-weight: 400;
      }

      .shopping-container .info-content .estimated-delivery {
        margin-top: 0;
      }

      .shopping-container .info-content .quantity-operation {
        margin-top: 5px;
      }

      .shopping-container .info-content .minus-icon,
      .shopping-container .info-content .plus-icon {
        width: 24px;
        height: 24px;
        font-size: 14px;
        line-height: 24px;
      }

      .shopping-container .info-content .quantity-input {
        width: 24px;
        height: 24px;
        font-size: 13px;
      }

      .shopping-container .product-price {
        font-size: 14px;
        font-weight: 400;
      }

      .shopping-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        margin: 0 20px;
        width: -webkit-fill-available;
      }

      .shopping-footer .price-panel {
        display: flex;
        flex-wrap: wrap;
        text-align: start;
        align-items: flex-end;
        justify-content: flex-end;
        flex-direction: column-reverse;
      }

      .shopping-footer .price-panel .price-info {
        justify-content: flex-end;
      }

      .shopping-footer .price-panel .s-kit-checkbox-wrapper {
        display: flex;
        align-items: flex-start;
      }

      .shopping-footer .price-panel .terms-checkbox .legal-text {
        line-height: 1.2;
        display: inline-block;
      }

      .shopping-footer .price-panel .terms-checkbox .legal-text * {
        display: inline;
      }

      .shopping-footer .fee-detail .fee-item .coupon-info .discount {
        max-width: 150px;
        word-break: break-all;
      }

      .shopping-footer .shopping-guide {
        width: 100%;
      }

      .shopping-footer .error-message {
        width: 100%;
        text-align: left;
      }

      .shopping-footer .checkout-buttons {
        flex-wrap: wrap;
      }

      .shopping-footer .checkout-buttons .stripe-payment-btn {
        width: 100%;
        margin-bottom: 10px;
      }

      .shopping-footer .checkout-buttons div,
      .shopping-footer .checkout-buttons .checkout-btn {
        width: 100%;
        max-width: 100%;
      }
    }

    @media screen and (max-width: 1000px) {
      .shopping-footer .checkout-buttons .square-payment-btn {
        margin-right: 0;
      }
    }
  </style>
  <style>
    .input-field input {
      height: 42px;
      width: 100%;
    }

    .input-field .s-kit-input {
      box-shadow: none;
    }
  </style>
  <style></style>
  <style>
    .contact-info-panel {
      margin-bottom: 20px;
    }

    .contact-info-panel .contact-form .continue-btn {
      border-radius: 4px;
    }
  </style>
  <style>
    .shipping-options-panel .shipping-list .title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #4b5056;
    }

    .shipping-options-panel .shipping-list .s-kit-basic-card {
      border-top: 0px;
      border-radius: 0px;
    }

    .shipping-options-panel .shipping-list .s-kit-basic-card:first-child {
      border-top: 1px solid #E2E4E7;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .shipping-options-panel .shipping-list .s-kit-basic-card:last-child {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  </style>
  <style>
    .shipping-info-panel,
    .contact-info-panel {
      margin-bottom: 20px;
    }

    .shipping-info-panel .name-field,
    .contact-info-panel .name-field {
      justify-content: space-between;
    }

    .shipping-info-panel .name-field .input-field,
    .contact-info-panel .name-field .input-field {
      width: 49%;
    }

    .shipping-info-panel .name-field .chinese-name,
    .contact-info-panel .name-field .chinese-name {
      width: 100%;
    }

    .shipping-info-panel .mobile-field,
    .contact-info-panel .mobile-field {
      display: none;
    }

    .shipping-info-panel .province-field,
    .contact-info-panel .province-field {
      justify-content: space-between;
    }

    .shipping-info-panel .province-field .province-select-section,
    .contact-info-panel .province-field .province-select-section {
      width: 32%;
    }

    .shipping-info-panel .province-field .input-field,
    .contact-info-panel .province-field .input-field {
      width: 32%;
    }

    .shipping-info-panel .full-width-zip,
    .contact-info-panel .full-width-zip {
      width: 100%;
    }

    @media screen and (max-width: 980px) {
      .shipping-info-panel .mobile-field {
        display: block;
      }

      .shipping-info-panel .desktop-field .desktop-state {
        display: none;
      }

      .shipping-info-panel .desktop-field .input-field {
        width: 49%;
      }
    }
  </style>
  <style>
    .product-item-wrapper {
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .product-item-wrapper .product-info {
      display: flex;
      align-content: center;
    }

    .product-item-wrapper .product-info .image {
      width: 86px;
      height: 86px;
      border-radius: 4px;
      margin-right: 15px;
      background-size: cover;
      background-position: center;
    }

    .product-item-wrapper .product-content {
      flex: 1;
      font-family: open_sans, Open Sans, sans-serif;
    }

    .product-item-wrapper .product-content .name {
      font-size: 14px;
      line-height: 1.5;
      color: #4b5056;
      max-height: 200px;
      word-break: break-word;
    }

    .product-item-wrapper .product-content .specification-item {
      display: flex;
      align-items: center;
      margin-top: 5px;
      font-size: 14px;
    }

    .product-item-wrapper .product-content .variation-name {
      margin-right: 10px;
      color: #a9aeb2;
    }

    .product-item-wrapper .product-content .estimated-delivery {
      color: #a9aeb2;
    }

    .product-item-wrapper .product-price {
      font-size: 14px;
      color: #4b5056;
    }

    .product-item-wrapper .product-price .quantity {
      text-align: right;
      color: #a9aeb2;
    }
  </style>
  <style>
    .order-overview-panel {
      overflow-y: hidden;
      padding: 30px 36px;
    }

    .order-overview-panel .overview-container .product-panel {
      overflow-y: auto;
      margin-top: 20px;
    }

    .order-overview-panel .footer {
      padding-top: 20px;
      border-top: 1px solid #E2E4E7;
    }

    .order-overview-panel .fee-detail {
      margin: 14px 0;
    }

    .order-overview-panel .fee-detail .tax-include .name,
    .order-overview-panel .fee-detail .tax-include .amount {
      color: #a9aeb2;
    }

    .order-overview-panel .sub-total {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      padding-top: 16px;
      font-weight: bold;
      color: #4b5056;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
      border-top: 1px solid #E2E4E7;
    }

    .order-overview-panel .sub-total .label {
      font-weight: bold;
      text-transform: uppercase;
    }

    .order-overview-panel .sub-total .amount {
      margin-left: 6px;
    }
  </style>
  <style>
    .payment-method-panel .font-bold {
      font-weight: bold;
    }

    .payment-method-panel .payment-card-package {
      display: none;
    }

    .payment-method-panel .payment-card-package.show-payment-card {
      display: block;
      border-top: 1px solid #E2E4E7;
    }

    .payment-method-panel .payment-card-wrap {
      padding: 20px;
    }

    .payment-method-panel .payment-card-wrap .payment-card-panel {
      display: none;
    }

    .payment-method-panel .payment-card-wrap .payment-card-panel.show {
      display: block;
    }

    .payment-method-panel .payment-card-wrap .payment-card-title {
      font-size: 12px;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
      color: #93b719;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

    .payment-method-panel .payment-card-wrap .payment-card-title .password-icon {
      margin-right: 5px;
    }

    .payment-method-panel .payment-card-wrap .payment-card-title>p {
      font-size: inherit;
      line-height: 1.5;
    }

    .payment-method-panel .payment-list {
      margin-bottom: 10px;
      border: 1px solid #E2E4E7;
      border-radius: 4px;
    }

    .payment-method-panel .payment-list .payment-item {
      color: #636972;
      padding: 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #E2E4E7;
      background-color: #F4F6F8;
      position: relative;
    }

    .payment-method-panel .payment-list .payment-item.more-payment-item {
      padding: 12px 15px;
    }

    .payment-method-panel .payment-list .payment-item.more-payment-item .logo {
      height: 20px;
    }

    .payment-method-panel .payment-list .payment-item.more-payment-item .online-title,
    .payment-method-panel .payment-list .payment-item.more-payment-item .title {
      font-size: 14px;
    }

    .payment-method-panel .payment-list .payment-item .row-item {
      display: flex;
      align-items: center;
    }

    .payment-method-panel .payment-list .payment-item .s-kit-radio-wrapper {
      align-items: flex-start;
    }

    .payment-method-panel .payment-list .payment-item .s-kit-radio-wrapper::after {
      content: '';
      position: absolute;
      top: 5px;
      right: 5px;
      bottom: 5px;
      left: 5px;
    }

    .payment-method-panel .payment-list .payment-item:first-child {
      border-radius: 4px 4px 0px 0px;
    }

    .payment-method-panel .payment-list .payment-item:last-child {
      border-radius: 0px 0px 4px 4px;
      border-bottom: 0px;
    }

    .payment-method-panel .payment-list .payment-item .s-kit-radio-input {
      width: 18px;
      height: 18px;
    }

    .payment-method-panel .payment-list .s-kit-radio-wrapper,
    .payment-method-panel .payment-list .payment-container {
      display: flex;
      align-items: center;
      width: auto;
      margin-right: 0;
      color: #494D56;
    }

    .payment-method-panel .payment-list .payment-container {
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .payment-method-panel .payment-list .payment-container .online-title {
      font-size: 16px;
      font-weight: 700;
      line-height: 18px;
    }

    .payment-method-panel .payment-list .title {
      font-size: 16px;
      font-weight: 700;
      font-family: open_sans, Open Sans, sans-serif;
      line-height: 18px;
    }

    .payment-method-panel .payment-list .sub-text {
      font-size: 14px;
      line-height: 1.5;
      margin-top: 5px;
      font-weight: 400;
      color: #8D949C;
    }

    .payment-method-panel .payment-list .logo {
      height: 30px;
      width: auto;
      margin-left: auto;
    }

    .payment-method-panel .payment-list .logo.wechatpay,
    .payment-method-panel .payment-list .logo.pingppWxPubQr {
      height: 26px;
    }

    .payment-method-panel .payment-list .logo.stripeKlarna {
      height: 14px;
    }

    .payment-method-panel .payment-list .logo.stripeAfterpay,
    .payment-method-panel .payment-list .logo.stripeClearpay {
      height: 16px;
    }

    .payment-method-panel .continue-btn .entypo-credit-card {
      color: inherit;
      margin-right: 10px;
    }

    .payment-method-panel .pay-pal-guide-line,
    .payment-method-panel .cancel-warning {
      font-size: 14px;
      margin-bottom: 10px;
      color: #a9aeb2;
      font-family: open_sans, Open Sans, sans-serif;
    }

    .payment-method-panel .pay-pal-guide-line .cancel,
    .payment-method-panel .cancel-warning .cancel {
      color: #1bb0e6;
      margin-left: 6px;
    }

    .payment-method-panel .cancel-warning {
      cursor: pointer;
      margin-top: 20px;
      text-align: center;
    }

    .payment-method-panel .selected-payment-panel .title {
      font-size: 16px;
      font-weight: 700;
      font-family: open_sans, Open Sans, sans-serif;
    }

    .payment-method-panel .selected-payment-panel .sub-text {
      font-size: 14px;
      margin-top: 5px;
      font-weight: 400;
      color: #a9aeb2;
    }

    .payment-method-panel .selected-payment-panel .logo {
      height: 30px;
      width: auto;
    }

    @media screen and (max-width: 980px) {

      .payment-method-panel .payment-item .logo.stripe,
      .payment-method-panel .payment-item .logo.paynowCreditCard {
        height: 22px;
      }

      .payment-method-panel .payment-item .payment-container .online-title {
        font-size: 16px;
      }
    }
  </style>
  <style>
    .contact-info-panel {
      margin-bottom: 20px;
    }

    .contact-info-panel .contact-form .continue-btn {
      border-radius: 4px;
    }
  </style>
  <style>
    .checkout-payment-wrapper {
      height: 100vh;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .checkout-payment-wrapper .info-item {
      display: flex;
    }

    .checkout-payment-wrapper .info-item .info-text {
      width: 100%;
      word-break: break-word;
    }

    .checkout-payment-wrapper .info-title {
      margin-right: 6px;
      word-break: break-word;
    }

    .checkout-payment-wrapper .info-title,
    .checkout-payment-wrapper .info-text {
      font-size: 14px;
      color: #a9aeb2;
    }

    .checkout-payment-wrapper .form-field {
      margin-bottom: 10px;
    }

    .checkout-payment-wrapper .form-field .Select-control {
      box-shadow: none;
    }

    .checkout-payment-wrapper .field-item {
      display: flex;
      align-items: flex-start;
    }

    .checkout-payment-wrapper .title-panel {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .checkout-payment-wrapper .title-panel.show-edit {
      margin-bottom: 5px;
    }

    .checkout-payment-wrapper .title-panel .edit {
      cursor: pointer;
      margin-left: 10px;
      color: #a9aeb2;
      text-decoration: underline;
    }

    .checkout-payment-wrapper .checkout-title {
      line-height: 1;
      font-size: 18px;
      font-weight: bold;
      color: #4b5056;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .checkout-payment-wrapper .checkout-title.disabled {
      color: #a9aeb2;
      margin-bottom: 10px;
    }

    .checkout-payment-wrapper .checkout-panel {
      overflow-y: auto;
      width: 55%;
      height: 100%;
      padding: 30px;
      box-sizing: border-box;
      background-color: #fff;
    }

    .checkout-payment-wrapper .checkout-panel .notice-message-section {
      margin-bottom: 20px;
      color: #4b5056;
      word-break: break-word;
    }

    .checkout-payment-wrapper .checkout-panel .notice-message-section .title {
      font-weight: bold;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .checkout-payment-wrapper .checkout-panel .notice-message-section .notice-content {
      white-space: break-spaces;
    }

    .checkout-payment-wrapper .checkout-panel .continue-btn {
      width: 100%;
      height: 48px;
      padding: 0;
      font-size: 18px;
      max-width: 100%;
      margin-top: 5px;
      line-height: 48px;
      border-radius: 4px;
      text-align: center;
      box-sizing: border-box;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .checkout-payment-wrapper .checkout-panel .continue-btn .fa-spinner {
      color: inherit;
      font-size: 16px;
      margin-right: 5px;
      vertical-align: revert;
    }

    .checkout-payment-wrapper .overview-panel {
      width: 45%;
      height: 100%;
      box-sizing: border-box;
      background-color: #F4F6F8;
    }

    .checkout-payment-wrapper .form-field-error {
      color: #E64751;
      line-height: 1.2;
      margin-top: 10px;
    }

    @media screen and (max-width: 980px) {
      .checkout-payment-wrapper {
        overflow-y: auto;
        flex-direction: column-reverse;
        height: 100%;
      }

      .checkout-payment-wrapper .info-item {
        display: block;
      }

      .checkout-payment-wrapper .checkout-panel,
      .checkout-payment-wrapper .overview-panel {
        width: 100%;
        overflow-y: visible;
      }

      .checkout-payment-wrapper .checkout-panel .continue-btn {
        max-width: 100%;
      }

      .checkout-payment-wrapper .order-overview-container {
        padding: 30px 20px 20px 20px;
      }

      .checkout-payment-wrapper .checkout-panel {
        height: initial;
        padding: 30px 20px 70px 20px;
      }
    }
  </style>
  <style>
    .buyer-checkout-dialog-wrapper {
      background: transparent;
    }

    .buyer-checkout-dialog-wrapper .s-kit-modal-body {
      padding: 0;
    }

    .buyer-checkout-dialog-wrapper .s-kit-modal-content {
      height: 100%;
      width: 800px;
      border-radius: 0;
      min-width: 360px;
      overflow: visible;
      position: relative;
    }

    .buyer-checkout-dialog-wrapper .bigger-modal .s-kit-modal-content {
      width: 980px;
    }

    .buyer-checkout-dialog-wrapper .close-modal-icon {
      position: absolute;
      top: 0px;
      right: 30px;
      z-index: 2600;
      font-size: 36px;
      font-weight: 300;
      cursor: pointer;
    }

    .buyer-checkout-dialog-wrapper .close-modal-icon::before {
      content: "×";
      display: block;
      font-family: "action";
    }

    @media screen and (max-width: 1080px) {
      .buyer-checkout-dialog .s-kit-modal-body {
        overflow: initial;
      }

      .buyer-checkout-dialog .close-modal-icon {
        top: 4px;
        right: 18px;
        color: #2E2E2F;
        font-size: 30px;
      }
    }

    @media screen and (max-width: 1000px) {

      .buyer-checkout-dialog.bigger-modal .s-kit-modal-content,
      .buyer-checkout-dialog .s-kit-modal-content {
        height: 100vh;
        width: 100vw;
      }

      .buyer-checkout-dialog .shopping-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        margin: 0 20px;
        width: -webkit-fill-available;
      }

      .buyer-checkout-dialog .shopping-footer .price-panel {
        display: flex;
        flex-wrap: wrap;
        text-align: start;
        align-items: flex-end;
        justify-content: flex-end;
        flex-direction: column;
      }

      .buyer-checkout-dialog .shopping-footer .price-panel .price-info {
        justify-content: flex-end;
        margin-top: 10px;
      }

      .buyer-checkout-dialog .shopping-footer .price-panel .s-kit-checkbox-wrapper {
        display: flex;
        align-items: flex-start;
      }

      .buyer-checkout-dialog .shopping-footer .price-panel .terms-checkbox .legal-text {
        line-height: 1.2;
        display: inline-block;
      }

      .buyer-checkout-dialog .shopping-footer .price-panel .terms-checkbox .legal-text * {
        display: inline;
      }

      .buyer-checkout-dialog .shopping-footer .shopping-guide {
        width: 100%;
      }

      .buyer-checkout-dialog .shopping-footer .error-message {
        width: 100%;
        text-align: left;
      }

      .buyer-checkout-dialog .shopping-footer .checkout-buttons {
        flex-wrap: wrap;
      }

      .buyer-checkout-dialog .shopping-footer .checkout-buttons .stripe-payment-btn {
        width: 100%;
        margin-bottom: 10px;
      }

      .buyer-checkout-dialog .shopping-footer .checkout-buttons div,
      .buyer-checkout-dialog .shopping-footer .checkout-buttons .checkout-btn {
        width: 100%;
        max-width: 100%;
      }
    }

    @media screen and (max-width: 500px) {
      .buyer-checkout-dialog .s-kit-modal-body {
        max-height: 100vh;
      }
    }
  </style>
  <style>
    .payment-success-dialog-wrapper {
      background: transparent;
    }

    .payment-success-container {
      text-align: center;
    }

    .payment-success-container .icon {
      font-size: 70px;
      color: #93b719;
      margin-bottom: 25px;
    }

    .payment-success-container .title {
      text-transform: uppercase;
      font-weight: 600;
      font-size: 20px;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .payment-success-container .success-panel {
      max-width: 340px;
    }

    .payment-success-container .success-panel .message {
      line-height: 1.5;
      font-size: 14px;
      color: #636972;
      margin-bottom: 30px;
      font-family: open_sans, Open Sans, sans-serif;
    }

    .payment-success-container .success-panel .confirm-btn {
      width: 100%;
      height: 36px;
      padding: 0;
      font-size: 16px;
      line-height: 36px;
      border-radius: 4px;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .payment-success-container .success-panel .download-btn {
      height: 44px;
      line-height: 44px;
    }

    .payment-success-container .success-panel .fa-download {
      margin-right: 8px;
    }

    @media screen and (max-width: 727px) {
      .payment-success-dialog-wrapper .payment-success-container .s-kit-modal-content {
        width: 100%;
        height: initial;
        padding: 0;
      }
    }
  </style>
  <style>
    .square-payment-dialog-wrapper .s-kit-modal-body {
      padding: 0;
      min-width: 560px;
    }

    .square-payment-dialog-wrapper .square-payment-panel .square-form .title {
      font-size: 16px;
      font-weight: 700;
      color: #4b5056;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .square-payment-dialog-wrapper .square-payment-panel .square-form .s-form-field input {
      padding: 12px 8px 12px 60px;
    }

    @media screen and (max-width: 560px) {
      .square-payment-dialog-wrapper .s-kit-modal-body {
        min-width: inherit;
      }
    }
  </style>
  <style>
    .stripe-payment-dialog-wrapper .s-kit-modal-body {
      padding: 0;
    }

    .stripe-payment-dialog-wrapper .stripe-payment-panel .stripe-form .title {
      font-size: 16px;
      font-weight: 700;
      color: #4b5056;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .stripe-payment-dialog-wrapper .stripe-payment-panel .stripe-form .s-form-field input {
      padding: 9px 8px 8px 40px;
    }

    .stripe-payment-dialog-wrapper .stripe-payment-panel .stripe-form .entypo-mail {
      top: 3px;
    }

    .stripe-payment-dialog-wrapper .stripe-payment-panel .stripe-form .s-btn {
      text-align: center;
    }
  </style>
  <style>
    .payment-qr-code-container {
      width: 560px;
      margin: 0 auto;
    }

    .payment-qr-code-container .payment-title {
      margin: 10px 0 30px 0;
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      color: #525A61;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .payment-qr-code-container .qr-code-panel {
      text-align: center;
    }

    .payment-qr-code-container .qr-code-panel canvas {
      width: 180px;
      height: 180px;
      padding: 20px;
      border: 1px solid #EBEDEF;
    }

    .payment-qr-code-container .additional-panel {
      width: 100%;
      display: table;
      margin: 0 auto;
      padding-top: 20px;
      text-align: center;
    }

    .payment-qr-code-container .payment-hint {
      padding: 1px 6px;
      font-weight: 300;
      border-radius: 4px;
      color: #60bd38;
      border: 1px solid #60bd38;
    }

    .payment-qr-code-container .payment-hint.alipay {
      color: #00AAD7;
      border: 1px solid #00AAD7;
    }

    .payment-qr-code-container .payment-action {
      color: #52616a;
      font-weight: 300;
      padding: 37px 0 10px 0;
    }

    @media screen and (max-width: 727px) {
      .payment-qr-code-container {
        width: 100%;
      }

      .payment-qr-code-container .payment-title {
        margin-top: 30px;
      }

      .payment-qr-code-dialog-wrapper .s-kit-modal-content {
        height: 100vh;
      }
    }
  </style>
  <style>
    .ecommerce-legal-dialog-wrapper .s-kit-modal-body {
      padding: 0;
    }

    .ecommerce-legal-dialog-wrapper .s-kit-modal-content {
      height: 100%;
      width: 800px;
      border-radius: 0;
      min-width: 360px;
      overflow: visible;
      position: relative;
    }

    .ecommerce-legal-dialog-wrapper .s-kit-modal-content .s-kit-modal-body {
      height: 100%;
    }

    .ecommerce-legal-dialog-wrapper .legal-container {
      height: 100%;
    }

    .ecommerce-legal-dialog-wrapper .legal-container .legal-title {
      font-size: 20px;
      font-weight: bold;
      color: #4b5056;
      text-align: left;
      padding: 30px 30px 0;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
      margin-bottom: 12px;
    }

    .ecommerce-legal-dialog-wrapper .legal-container .legal-content {
      font-size: 15px;
      color: #636972;
      padding: 0 30px;
      box-sizing: border-box;
      line-height: 1.4;
      white-space: pre-wrap;
      font-family: open_sans, Open Sans, sans-serif;
      height: calc(100% - 50px);
      overflow-y: auto;
      word-wrap: break-word;
      max-height: calc(100vh - 90px);
    }

    .ecommerce-legal-dialog-wrapper .close-modal-icon {
      position: absolute;
      top: 0px;
      right: 30px;
      z-index: 2600;
      font-size: 36px;
      font-weight: 300;
      cursor: pointer;
    }

    .ecommerce-legal-dialog-wrapper .close-modal-icon::before {
      content: "×";
      display: block;
      font-family: "action";
    }

    @media screen and (max-width: 800px) {
      .ecommerce-legal-dialog-wrapper .s-kit-modal-body {
        overflow: initial;
        max-height: none;
      }

      .ecommerce-legal-dialog-wrapper.bigger-modal .s-kit-modal-content,
      .ecommerce-legal-dialog-wrapper .s-kit-modal-content {
        height: 100vh;
        width: 100vw;
      }

      .ecommerce-legal-dialog-wrapper .close-modal-icon {
        top: 4px;
        right: 18px;
        color: #2E2E2F;
        font-size: 30px;
      }
    }
  </style>
  <style>
    .pay-now-credit-card-dialog-wrapper .s-kit-modal-content {
      width: 460px;
    }

    .pay-now-credit-card-dialog-wrapper .credit-card-title {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      color: #4b5056;
    }

    .pay-now-credit-card-dialog-wrapper .credit-card-title .card-image {
      height: 23px;
      margin-left: 6px;
    }

    .pay-now-credit-card-dialog-wrapper .credit-card-form-panel {
      color: #4b5056;
    }

    .pay-now-credit-card-dialog-wrapper .credit-card-form-panel .form-row {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
    }

    .pay-now-credit-card-dialog-wrapper .credit-card-form-panel .expiration-date-panel .field-row {
      display: flex;
      align-items: flex-start;
    }

    .pay-now-credit-card-dialog-wrapper .credit-card-form-panel .expiration-date-panel .s-kit-input {
      width: 80px;
    }

    .pay-now-credit-card-dialog-wrapper .credit-card-form-panel .expiration-date-panel .split-line {
      font-weight: bold;
      margin: 16px 6px 0 6px;
    }

    .pay-now-credit-card-dialog-wrapper .submit-btn {
      width: 100%;
      margin: 20px 0 0 0;
    }

    .pay-now-credit-card-dialog-wrapper .form-field-error {
      color: #E64751;
      line-height: 1.2;
      margin-top: 6px;
    }

    .pay-now-credit-card-dialog-wrapper .charge-error {
      color: #E64751;
      font-size: 14px;
      margin-top: 6px;
    }

    @media screen and (max-width: 560px) {
      .pay-now-credit-card-dialog-wrapper .s-kit-modal-content {
        width: 100%;
      }

      .pay-now-credit-card-dialog-wrapper .credit-card-title {
        font-size: 16px;
      }

      .pay-now-credit-card-dialog-wrapper .credit-card-title .card-image {
        height: 20px;
      }

      .pay-now-credit-card-dialog-wrapper .credit-card-form-panel .expiration-date-panel {
        margin-right: 10px;
      }
    }
  </style>
  <style>
    .pay-now-bank-card-validation-dialog-wrapper .s-kit-modal-content {
      width: 460px;
      font-size: 14px;
    }

    .pay-now-bank-card-validation-dialog-wrapper .s-kit-modal-content .s-kit-modal-title {
      font-size: 22px;
    }
  </style>
  <style>
    .shipping-wrapper .field-section {
      margin-bottom: 20px;
    }

    .shipping-wrapper .estimated-section {
      display: flex;
      align-items: center;
      margin-top: 5px;
    }

    .shipping-wrapper .estimated-section .s-kit-label {
      margin-bottom: 0;
      margin-right: 10px;
    }

    .shipping-wrapper .estimated-section .input {
      width: 72px;
      line-height: 1;
      text-align: center;
    }

    .shipping-wrapper .estimated-section .estimated-error {
      font-weight: 400;
      color: #E64751;
      margin-left: 6px;
    }

    .shipping-wrapper .save-btn {
      display: block;
      margin-top: 30px;
    }

    .loading-container {
      text-align: center;
      margin-top: 20vh;
      font-size: 20px;
    }

    .s-variation-default .s-common-button {
      box-shadow: none;
    }

    .s-variation-default .s-common-button:hover {
      box-shadow: none;
    }

    .s-bg-dark-text .s-variation-default .s-common-button {
      box-shadow: none;
    }

    .s-variation-black .s-common-button {
      box-shadow: none;
    }

    .s-variation-black .s-common-button:hover {
      box-shadow: none;
    }

    .s-bg-dark-text .s-variation-black .s-common-button {
      box-shadow: none;
    }

    .s-variation-blue .s-common-button {
      box-shadow: none;
    }

    .s-variation-blue .s-common-button:hover {
      box-shadow: none;
    }

    .s-bg-dark-text .s-variation-blue .s-common-button {
      box-shadow: none;
    }

    .s-variation-green .s-common-button {
      box-shadow: none;
    }

    .s-variation-green .s-common-button:hover {
      box-shadow: none;
    }

    .s-bg-dark-text .s-variation-green .s-common-button {
      box-shadow: none;
    }

    .s-variation-red .s-common-button {
      box-shadow: none;
    }

    .s-variation-red .s-common-button:hover {
      box-shadow: none;
    }

    .s-bg-dark-text .s-variation-red .s-common-button {
      box-shadow: none;
    }

    .s-variation-violet .s-common-button {
      box-shadow: none;
    }

    .s-variation-violet .s-common-button:hover {
      box-shadow: none;
    }

    .s-bg-dark-text .s-variation-violet .s-common-button {
      box-shadow: none;
    }

    .s-custom-colors .s-common-button {
      box-shadow: none;
    }

    .s-custom-colors .s-common-button:hover {
      box-shadow: none;
    }

    .s-bg-dark-text .s-custom-colors .s-common-button {
      box-shadow: none;
    }
  </style>
  <style data-emotion="css" data-s=""></style>
  <style>
    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-regular-webfont.4d6517993b36d06d996466e0b5c52c4c.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-regular-webfont.b4c9edbc6cf9391f12b35ecf8cca9641.woff) format('woff');
      font-weight: 400;
      font-display: swap;
    }

    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-semibold-webfont.de55ee1f3df2a2ac8f413c03b9571609.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-semibold-webfont.cbafba8611124877604db21adad2c5d5.woff) format('woff');
      font-weight: 600;
      font-display: swap;
    }

    @font-face {
      font-family: 'martel-sans';
      src: url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-bold-webfont.274d43a28e6fc5c72940558e6ca280d0.woff2) format('woff2'), url(https://static-assets.sxlcdn.com/webpack/fonts/martelsans-bold-webfont.3131eb46ccad412a794726f332d53a8b.woff) format('woff');
      font-weight: 700;
      font-display: swap;
    }

    .member-order-history-dialog .order-detail .header,
    .member-order-history-dialog .order-list .header {
      margin-bottom: 20px;
    }

    .member-order-history-dialog .order-detail .header .fa-angle-left,
    .member-order-history-dialog .order-list .header .fa-angle-left {
      font-size: 1.3em;
      margin-right: 10px;
    }

    .member-order-history-dialog .order-detail .header-text,
    .member-order-history-dialog .order-list .header-text {
      font-size: 18px;
      color: #50555c;
      cursor: pointer;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .member-order-history-dialog .order-detail .header-text:lang(ja),
    .member-order-history-dialog .order-list .header-text:lang(ja) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
    }

    .member-order-history-dialog .order-detail .header-text:lang(zh-cn),
    .member-order-history-dialog .order-list .header-text:lang(zh-cn),
    .member-order-history-dialog .order-detail .header-text:lang(zh),
    .member-order-history-dialog .order-list .header-text:lang(zh),
    .member-order-history-dialog .order-detail .header-text:lang(sxl),
    .member-order-history-dialog .order-list .header-text:lang(sxl) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑";
    }

    .member-order-history-dialog .order-detail .header-text:lang(zh-tw),
    .member-order-history-dialog .order-list .header-text:lang(zh-tw) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei;
    }

    .member-order-history-dialog .order-detail {
      font-size: 14px;
      color: #52616a;
    }

    .member-order-history-dialog .order-detail .left {
      float: left;
    }

    .member-order-history-dialog .order-detail .right {
      float: right;
    }

    .member-order-history-dialog .order-detail .bold {
      font-weight: 600;
    }

    .member-order-history-dialog .order-detail .bold-700 {
      font-weight: 700;
    }

    .member-order-history-dialog .order-detail .normal-title {
      font-size: 16px;
      font-weight: 600;
      color: #52616a;
      margin-bottom: 10px;
      margin-right: 10px;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
    }

    .member-order-history-dialog .order-detail .normal-title:lang(ja) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
    }

    .member-order-history-dialog .order-detail .normal-title:lang(zh-cn),
    .member-order-history-dialog .order-detail .normal-title:lang(zh),
    .member-order-history-dialog .order-detail .normal-title:lang(sxl) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑";
    }

    .member-order-history-dialog .order-detail .normal-title:lang(zh-tw) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei;
    }

    .member-order-history-dialog .order-detail .normal-text {
      line-height: 1.4;
      font-size: 14px;
      color: #636972;
    }

    .member-order-history-dialog .order-detail .normal-text.small {
      line-height: 20px;
    }

    .member-order-history-dialog .order-detail .normal-text.light {
      font-weight: 300;
    }

    .member-order-history-dialog .order-detail .fa.l-m {
      margin-left: 5px;
    }

    .member-order-history-dialog .order-detail .fa.r-m {
      margin-right: 5px;
    }

    .member-order-history-dialog .order-detail .row-section {
      margin: 25px auto;
    }

    .member-order-history-dialog .order-detail .row-section:first-child,
    .member-order-history-dialog .order-detail .row-section:first-of-type {
      margin-top: 0;
    }

    .member-order-history-dialog .order-detail .row-section:last-child,
    .member-order-history-dialog .order-detail .row-section:last-of-type {
      margin-bottom: 0;
    }

    .member-order-history-dialog .order-detail .row-section .s-box {
      padding: 12px 16px;
      line-height: 18px;
    }

    .member-order-history-dialog .order-detail .row-section .s-box .fa {
      margin-right: 5px;
    }

    .member-order-history-dialog .order-detail .row-section .s-box.white {
      background: #fff;
      border-radius: 4px;
      border: 1px solid #ddd;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper {
      border: 1px solid #ddd;
      border-radius: 4px;
      overflow-x: scroll;
      overflow-y: hidden;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list {
      width: 100% !important;
      text-align: left;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list th {
      background: #f6f6f6;
      padding: 10px 5px;
      font-weight: 600;
      white-space: nowrap;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td {
      padding: 0 5px 10px 5px;
      vertical-align: top;
      line-height: 1.25;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td.calculation-label {
      text-align: right;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td.product-name {
      min-width: 200px;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td.product-name .discount {
      display: block;
      color: #38b2a1;
      margin: 10px 0;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td .shipping-icon {
      margin-right: 4px;
      vertical-align: middle;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td .pay-now-payment-item {
      margin-left: 2px;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td .pay-now-payment-item span {
      margin-left: 2px;
      font-weight: bold;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td .bank-icon {
      height: auto;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td.total-price .total-price-value {
      vertical-align: middle;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td.total-price .currency-tag {
      vertical-align: middle;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
      padding: 1px 3px 1px;
      color: #a9aeb2 !important;
      border: 1px solid #a9aeb2;
      font-size: 10px !important;
      font-weight: bold;
      line-height: 1.25;
      border-radius: 3px;
      text-transform: uppercase;
      font-style: normal !important;
      margin-left: 5px;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td.total-price .currency-tag:lang(ja) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td.total-price .currency-tag:lang(zh-cn),
    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td.total-price .currency-tag:lang(zh),
    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td.total-price .currency-tag:lang(sxl) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑";
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td.total-price .currency-tag:lang(zh-tw) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei;
    }

    @media only screen and (max-width: 727px) {
      .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list td.total-price {
        white-space: normal;
      }
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.title-row th {
      border-bottom: 1px solid #ddd;
      color: #52616a;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.last-row td {
      padding: 15px 5px 10px;
      border-top: 1px solid #ddd;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.last-row td.bold {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
      font-weight: 700;
      padding-left: 20px;
      text-align: right;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.last-row td.bold:lang(ja) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic";
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.last-row td.bold:lang(zh-cn),
    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.last-row td.bold:lang(zh),
    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.last-row td.bold:lang(sxl) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang SC', "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑";
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.last-row td.bold:lang(zh-tw) {
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif, 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.last-row td img {
      height: 20px;
      vertical-align: middle;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.last-row td img.afterpay {
      height: 14px;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.last-row td img.klarna {
      height: 12px;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.last-row td .bank-icon {
      height: auto;
      margin-right: 4px;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.total-row td {
      padding: 0 5px 15px;
      font-size: 16px;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.first-data-row td {
      padding-top: 15px;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr.last-data-row td {
      padding-bottom: 15px;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr th.first,
    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr td.first {
      padding-left: 15px;
    }

    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr th.last,
    .member-order-history-dialog .order-detail .order-info .table-wrapper .item-list tr td.last {
      padding-right: 15px;
    }

    .member-order-history-dialog .order-detail .shipping-info,
    .member-order-history-dialog .order-detail .order-transactions {
      box-sizing: border-box;
    }

    @media only screen and (min-width: 728px) {

      .member-order-history-dialog .order-detail .shipping-info,
      .member-order-history-dialog .order-detail .order-transactions {
        width: 48%;
      }
    }

    .member-order-history-dialog .order-detail .shipping-info .notes span,
    .member-order-history-dialog .order-detail .order-transactions .notes span {
      font-weight: 400;
      word-wrap: break-word;
    }

    @media only screen and (min-width: 728px) {
      .member-order-history-dialog .order-detail .shipping-info {
        float: left;
      }
    }

    .member-order-history-dialog .order-detail .shipping-info .s-box {
      min-height: 120px;
    }

    .member-order-history-dialog .order-detail .shipping-info .s-box .info-label,
    .member-order-history-dialog .order-detail .shipping-info .s-box .info-content {
      display: inline-block;
      margin-bottom: 12px;
      vertical-align: top;
    }

    .member-order-history-dialog .order-detail .shipping-info .s-box .additional-item {
      display: flex;
      align-items: flex-start;
    }

    .member-order-history-dialog .order-detail .shipping-info .s-box .info-label {
      min-width: 100px;
      margin-right: 10px;
      color: #a9aeb2;
      word-break: break-word;
    }

    .member-order-history-dialog .order-detail .shipping-info .s-box .info-content {
      max-width: 250px;
      white-space: normal;
    }

    .member-order-history-dialog .order-detail .shipping-info .s-box .split-line {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #8D949C;
      margin-bottom: 10px;
    }

    .member-order-history-dialog .order-detail .shipping-info .s-box .split-line::before,
    .member-order-history-dialog .order-detail .shipping-info .s-box .split-line::after {
      content: '';
      flex: 1;
      height: 1px;
      background-color: #F4F6F8;
    }

    .member-order-history-dialog .order-detail .shipping-info .s-box .split-line::before {
      margin-right: 10px;
    }

    .member-order-history-dialog .order-detail .shipping-info .s-box .split-line::after {
      margin-left: 10px;
    }

    .member-order-history-dialog .order-detail .shipping-info .additional-info .additional-title {
      position: relative;
      text-align: center;
      font-size: 14px;
      padding: 20px 0;
      overflow: hidden;
      color: #636972;
    }

    .member-order-history-dialog .order-detail .shipping-info .additional-info .additional-title .inner {
      position: absolute;
      left: 50%;
      font-size: 14px;
      padding: 0 10px;
      white-space: nowrap;
      line-height: 1px;
      text-transform: capitalize;
      transform: translateX(-50%);
      border-left: 20vw solid #a9aeb2;
      border-right: 20vw solid #a9aeb2;
    }

    .member-order-history-dialog .order-detail .order-transactions .s-box {
      padding: 0;
    }

    .member-order-history-dialog .order-detail .order-transactions .history-item {
      padding: 15px;
      border-top: 1px solid #ddd;
    }

    .member-order-history-dialog .order-detail .order-transactions .history-item:first-child {
      border-top: none;
    }

    .member-order-history-dialog .order-detail .order-transactions .history-item .basic-info {
      overflow: hidden;
    }

    .member-order-history-dialog .order-detail .order-transactions .history-item .basic-info .item-date {
      color: #a9aeb2;
    }

    .member-order-history-dialog .order-detail .order-transactions .history-item .extra-info {
      margin-top: 5px;
      color: #a9aeb2;
      overflow: hidden;
    }

    .member-order-history-dialog .order-detail .order-transactions .history-item .extra-info .ib {
      max-width: 100%;
      word-wrap: break-word;
    }

    .member-order-history-dialog .order-list {
      margin-bottom: 40px;
    }

    .member-order-history-dialog .order-list .s-kit-table-row {
      cursor: pointer;
    }

    .member-order-history-dialog .order-list .s-kit-table-thead>tr>th {
      padding-right: 40px;
    }

    .member-order-history-dialog .order-list .s-kit-table-thead>tr>th:last-child {
      padding-right: initial;
    }

    .member-order-history-dialog .order-list .fa-angle-right {
      font-size: 1.4em;
    }
  </style>
  <style>
    .booking-events-dialog .s-kit-modal-body {
      width: 420px;
    }

    .booking-events-dialog .event-list-panel .header,
    .booking-events-dialog .event-detail-panel .header {
      margin-bottom: 20px;
    }

    .booking-events-dialog .event-list-panel .header .fa-angle-left,
    .booking-events-dialog .event-detail-panel .header .fa-angle-left {
      font-size: 1.3em;
      margin-right: 10px;
    }

    .booking-events-dialog .event-list-panel .header-text,
    .booking-events-dialog .event-detail-panel .header-text {
      font-size: 18px;
      cursor: pointer;
      text-transform: uppercase;
      font-family: 'brandon-grotesque', 'brandon', martel-sans, sans-serif;
      color: #50555c;
    }

    .booking-events-dialog .event-list-panel {
      margin-bottom: 40px;
    }

    .booking-events-dialog .event-list-panel .s-kit-table-row {
      cursor: pointer;
    }

    .booking-events-dialog .event-list-panel .time-zone {
      color: #a9aeb2;
      margin-top: 5px;
    }

    .booking-events-dialog .event-list-panel .event-name {
      line-height: 1.2;
    }

    .booking-events-dialog .event-type-detail {
      margin-bottom: 20px;
    }

    .booking-events-dialog .event-type-detail .event-type-item {
      display: flex;
      text-align: left;
      margin-bottom: 10px;
      align-items: flex-start;
    }

    .booking-events-dialog .event-type-detail .event-type-item .booking-label {
      width: 120px;
      color: #a9aeb2;
    }

    .booking-events-dialog .event-type-detail .event-type-item .booking-value {
      width: 100%;
    }

    .booking-events-dialog .event-type-detail .event-type-item .time-zone {
      color: #a9aeb2;
    }

    .booking-events-dialog .canceled-text {
      color: #a9aeb2;
      font-style: italic;
    }
  </style>
  <style>
    .product-reviews-dialog .s-kit-modal-content {
      width: 500px;
    }

    .product-reviews-dialog .product-info-panel {
      color: #636972;
      font-size: 14px;
      text-align: center;
    }

    .product-reviews-dialog .product-img {
      width: 60px;
      height: 60px;
      border-radius: 6%;
      margin: 30px auto 20px;
      background-size: cover;
      background-position: center;
    }

    .product-reviews-dialog .product-name {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .product-reviews-dialog .product-variations {
      font-weight: 600;
      margin-bottom: 24px;
    }

    .product-reviews-dialog .product-variations .line {
      height: 12px;
      width: 1px;
      margin: 0 10px;
      margin-right: 10px;
      display: inline-block;
      background-color: #a9aeb2;
    }

    .product-reviews-dialog .product-rate {
      font-weight: 600;
      margin-bottom: 30px;
    }

    .product-reviews-dialog .product-rate .rate-label.error {
      color: #E64751;
    }

    .product-reviews-dialog .product-rate .score-star {
      margin-top: 10px;
      display: inline-block;
    }

    .product-reviews-dialog .product-rate .star-icon {
      cursor: pointer;
      font-size: 30px;
      margin-right: 10px;
      color: #E2E4E7;
    }

    .product-reviews-dialog .product-rate .star-icon.selected {
      color: #F3C735;
    }

    .product-reviews-dialog .product-reviews-form .input-section input {
      width: 100%;
      height: 38px;
    }

    .product-reviews-dialog .product-reviews-form .textarea-section textarea {
      width: 100%;
      resize: none;
      height: 120px;
      margin-top: 20px;
    }

    .product-reviews-dialog .product-reviews-form .textarea-section .count {
      margin-top: 4px;
      font-size: 13px;
      text-align: right;
      color: #a9aeb2;
    }

    .product-reviews-dialog .gdpr-container {
      width: 100%;
      margin-top: 10px;
      text-align: left;
      display: inline-table;
    }

    .product-reviews-dialog .gdpr-container .review-checkbox {
      cursor: pointer;
      margin-right: 6px;
    }

    .product-reviews-dialog .gdpr-container .s-terms-link {
      color: #1bb0e6;
      cursor: pointer;
      display: inline-block;
    }

    .product-reviews-dialog .gdpr-container .gdpr-text {
      text-align: left;
    }

    .product-reviews-dialog .submit-btn {
      width: 100%;
    }

    .product-reviews-dialog .form-field-error {
      color: #E64751;
      margin-top: 6px;
      line-height: 1.2;
      text-align: left;
    }

    .product-review-success-dialog .review-success-panel {
      text-align: center;
    }

    .product-review-success-dialog .review-success-panel .success-icon {
      color: #93b719;
      font-size: 32px;
      margin-top: 40px;
    }

    .product-review-success-dialog .review-success-panel .review-title {
      color: #636972;
      font-size: 18px;
      margin-top: 20px;
      font-weight: bold;
    }

    .product-review-success-dialog .review-success-panel .review-text {
      margin: 10px 0 20px 0;
    }

    .product-review-success-dialog .review-success-panel .back-btn {
      width: 100%;
      display: none;
    }

    .product-review-failure-dialog .s-kit-modal-content {
      width: 470px;
    }

    .product-review-failure-dialog .message-icon {
      width: 40px;
      height: auto;
    }

    .product-review-failure-dialog .review-failure-panel {
      margin-top: 40px;
      text-align: center;
    }

    .product-review-failure-dialog .error-message {
      margin: 14px 0;
    }

    @media screen and (max-width: 500px) {
      .product-review-dialog-wrapper .s-kit-modal-content {
        padding-top: 10vh;
      }

      .product-review-dialog-wrapper .s-kit-modal-content .s-kit-modal-close {
        top: 60px;
      }

      .product-reviews-dialog .s-kit-modal-content,
      .product-review-success-dialog .s-kit-modal-content,
      .product-review-failure-dialog .s-kit-modal-content {
        height: 100vh;
        width: 100vw;
        border-radius: 0;
        box-sizing: border-box;
      }

      .product-reviews-dialog .s-kit-modal-content .s-kit-modal-body,
      .product-review-success-dialog .s-kit-modal-content .s-kit-modal-body,
      .product-review-failure-dialog .s-kit-modal-content .s-kit-modal-body {
        width: 100%;
        box-sizing: border-box;
      }

      .product-review-success-dialog {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .product-review-success-dialog .review-success-panel {
        margin-top: 24vh;
      }

      .product-review-success-dialog .review-success-panel .back-btn {
        display: block;
      }

      .product-review-failure-dialog .review-failure-panel {
        margin-top: 26vh;
      }
    }
  </style>
</head>

<body class="preview  locale-zh-CN product-sxl" id="sites" style="">
  <div id="s-page-container">
    <div>
      <div id="s-content"
        class="s-variation-default s-custom-colors  s-font-heading-hei s-font-title-hei s-font-body-hei s-font-button-hei s-font-weight-heading-default s-font-weight-title-default s-font-weight-body-default s-font-weight-button-default"
        lang="zh">
        <div class="social-thumbnail">
          <div style="display: none;"><img src="./assets/Fn4H125NIha2wkvsS6jMImTbf8JZ.png" width="300" height="300"
              alt="thumbnail image"></div>
        </div>
        <div>
          <style id="color-style-tag">
            .s-custom-colors .s-subtitle {
              color: #931515;
            }

            .s-custom-colors .s-subtitle .s-text .s-component-content a {
              color: #931515;
            }

            .s-custom-colors .s-item-subtitle {
              color: #931515;
            }

            .s-custom-colors .s-item-subtitle .s-text .s-component-content a {
              color: #931515;
            }

            .s-custom-colors .s-subtitle .s-text .s-component-content a {
              border-bottom: 1px solid rgba(147, 21, 21, 0.7);
            }

            .s-custom-colors .s-item-subtitle .s-text .s-component-content a {
              border-bottom: 1px solid rgba(147, 21, 21, 0.7);
            }

            .s-custom-colors .s-common-button {
              color: white;
              background: #931515;
              background-color: #931515;
              background-repeat: repeat-x;
              background-image: linear-gradient(to right, #a11717, #931515);
            }

            .s-custom-colors .s-common-button:hover {
              color: white;
              background: #b71a1a;
            }

            .s-custom-colors .s-mobile-actions .s-mobile-actions-item.one-item {
              background: #931515;
            }

            .s-custom-colors .s-mobile-actions .s-mobile-actions-item.selected:not(.one-item) {
              color: #931515;
            }

            .s-custom-colors .navbar-drawer-bar .navbar,
            .s-custom-colors .navbar-drawer-bar .mobile {
              background: #931515;
            }

            .s-custom-colors .s-bg-overlay:before {
              background: rgba(64, 64, 64, 0.35);
            }

            .s-custom-colors .s-component.s-social-media ul.s-social-media-buttons .s-social-icon {
              background: rgba(147, 21, 21, 0.5);
            }

            .s-custom-colors .s-blog-wrapper .s-blog-col-placeholder .s-blog-details .s-blog-info {
              color: #931515
            }

            .s-custom-colors .s-ecommerce-row-view-product .s-ecommerce-row-view-product-pricing,
            .s-custom-colors .s-ecommerce-card-view-card-price {
              color: #931515
            }

            .s-custom-colors .fixed-login-container .login-container {
              background: #931515;
            }

            .s-custom-colors .s-ecommerce-row-view-product .s-ecommerce-row-view-product-thumbnail-list ul li.current {
              border: 2px solid #931515
            }

            .s-custom-colors .s-ecommerce-card-view-wrapper .s-ecommerce-card-view-card .s-ecommerce-card-view-card-stock-warning {
              background: #931515;
            }

            .s-custom-colors .s-ecommerce-shopping-cart-wrapper .s-ecommerce-shopping-cart {
              background: #931515;
            }

            .s-custom-colors .s-ecommerce-shopping-cart-wrapper .s-ecommerce-shopping-cart.hovered {
              background: #931515;
            }

            .s-custom-colors .s-ecommerce-shopping-cart-wrapper .s-ecommerce-shopping-cart-mobile {
              background: #f7f7f7;
              border-top: 1px solid #c5c5c5;
            }

            .s-custom-colors .s-ecommerce-shopping-cart-wrapper .s-ecommerce-shopping-cart-mobile .check-btn {
              background: #931515;
            }

            .s-custom-colors .s-ecommerce-animation-item {
              border: 2px solid #931515;
              color: #931515;
            }

            .s-custom-colors .s-ecommerce-row-view-product .mobile-select .price-label {
              color: #931515
            }

            .s-custom-colors .s-ecommerce-row-view-product .mobile-select .variation-item.selected {
              border: 1px solid #931515;
              background: #931515;
            }

            .s-custom-colors .s-ecommerce-row-view-product .mobile-select .add-btn {
              background: #931515;
            }

            .s-custom-colors .s-ecommerce-row-view-product .slider-wrapper .slider-dot-wrapper .slider-dot {
              border: 1px solid #931515
            }

            .s-custom-colors .s-ecommerce-row-view-product .slider-wrapper .slider-dot-wrapper .slider-dot.selected {
              background: #931515
            }

            .s-custom-colors .s-section .s-category-bar .category-list .category-link-item.selected {
              color: #931515;
            }

            .s-custom-colors .s-section .s-category-bar .category-list .category-link-item.selected:after {
              background: #931515
            }

            .s-custom-colors .s-section .s-category-bar .category-list .category-link-item-wrapper:hover .category-link-item:not(.no-hover) {
              color: #931515;
            }

            .s-custom-colors .s-ecommerce-card-view-wrapper .s-ecommerce-card-view-cards .s-ecommerce-card-view-card .s-ecommerce-card-view-card-price {
              color: #931515;
            }

            .s-custom-colors .s-ecommerce .s-ecommerce-row-view-product .s-ecommerce-row-view-product-detail-panel .s-ecommerce-row-view-product-pricing {
              color: #931515;
            }

            .s-custom-colors .s-ecommerce .s-ecommerce-products-wrapper .s-ecommerce-card-view-wrapper .s-ecommerce-card-view-detail .s-ecommerce-card-view-detail-header .next-product-btn {
              color: #931515;
            }

            .s-custom-colors .s-ecommerce .s-ecommerce-products-wrapper .s-ecommerce-card-view-wrapper .s-ecommerce-card-view-detail .s-ecommerce-card-view-detail-header .prev-product-btn {
              color: #931515;
            }

            .s-custom-colors .s-ecommerce .s-ecommerce-products-wrapper .s-ecommerce-card-view-wrapper .s-ecommerce-card-view-detail .s-ecommerce-card-view-detail-header .back-btn {
              color: #931515;
            }

            .s-custom-colors .s-ecommerce .s-ecommerce-products-wrapper .s-ecommerce-card-view-wrapper .s-ecommerce-card-view-detail .s-ecommerce-card-view-detail-header .next-product-btn:hover {
              color: #a84343;
            }

            .s-custom-colors .s-ecommerce .s-ecommerce-products-wrapper .s-ecommerce-card-view-wrapper .s-ecommerce-card-view-detail .s-ecommerce-card-view-detail-header .prev-product-btn:hover {
              color: #a84343;
            }

            .s-custom-colors .s-ecommerce .s-ecommerce-products-wrapper .s-ecommerce-card-view-wrapper .s-ecommerce-card-view-detail .s-ecommerce-card-view-detail-header .back-btn:hover {
              color: #a84343;
            }

            .s-custom-colors .s-donation-section .s-component.s-donation .s-donation-progress .progress-bar .progress {
              background: #931515
            }

            .s-custom-colors .s-donation-section .s-component.s-donation .s-donation-progress .progress-bar .indicator:before {
              background: #931515
            }

            .s-custom-colors .s-donation-section .s-component.s-donation .s-donation-progress .progress-bar .indicator:after {
              border-top-color: #931515
            }

            .s-custom-colors .s-theme-color-1 {
              color: #931515
            }

            .s-custom-colors .s-bg-theme-color-1 {
              background-color: #931515
            }

            .s-custom-colors .s-bg-theme-color-fade-1 {
              background-color: rgba(147, 21, 21, 0.07)
            }

            .s-custom-colors .s-bg-theme-color-fade-2 {
              background-color: rgba(147, 21, 21, 0.2)
            }

            .s-custom-colors .s-border-theme-color-1 {
              border-color: #931515
            }

            .s-custom-colors .s-button-theme-style {
              background-color: rgba(147, 21, 21, 0.2);
              color: #931515
            }

            .s-custom-colors .s-button-theme-style-shadow {
              background-color: rgba(147, 21, 21, 0.2);
              box-shadow: 0px 3px 0 rgba(147, 21, 21, 0.2);
              color: #931515
            }

            .s-custom-colors .s-button-theme-style-border {
              background-color: rgba(147, 21, 21, 0.2);
              border: 2px solid rgba(147, 21, 21, 0.2);
              color1: #931515
            }

            .s-custom-colors .s-button-theme-style-important {
              background-color: rgba(147, 21, 21, 0.2) !important;
              color: #931515 !important
            }

            .s-custom-colors #header-container .header .nav ul a {}

            .s-custom-colors #header-container .header .nav ul a.selected,
            .s-custom-colors #header-container .header .nav ul a:hover {
              color: #931515;
            }

            .s-custom-colors .s-section.s-contact-section:not(.s-bg-white),
            .s-custom-colors .s-section.s-text-section:not(.s-bg-white),
            .s-custom-colors .s-section.s-media-section:not(.s-bg-white),
            .s-custom-colors .s-section.s-signup-section:not(.s-bg-white) {
              background-color: #fbfbfb;
            }

            .s-custom-colors .s-section.s-bg-white,
            .s-custom-colors .s-component.s-background .s-component-editor .stock-images li.s-bg-white {
              background-color: white;
            }

            .s-custom-colors .s-section.s-bg-gray,
            .s-custom-colors .s-component.s-background .s-component-editor .stock-images li.s-bg-gray {
              background-color: #fbfbfb;
            }

            .s-custom-colors .s-title,
            .s-custom-colors .s-item-title {
              color: #c8c8c8;
            }

            .s-custom-colors .s-section:not(.s-bg-image):not(.s-bg-video) .s-title-group .has-line .s-title:before,
            .s-custom-colors .s-section:not(.s-bg-image):not(.s-bg-video) .s-title-group .has-line .s-title:after,
            .s-custom-colors .s-section:not(.s-bg-image):not(.s-bg-video) .s-title-group .has-fresh-line .s-component-content:before,
            .s-custom-colors .s-section:not(.s-bg-image):not(.s-bg-video) .s-title-group .has-fresh-line .s-component-content:after {
              background-color: #c8c8c8;
            }

            .s-custom-colors .s-text-color-custom1 {
              color: #931515;
            }

            .s-custom-colors .s-text-color-custom2 {
              color: #ffffff;
            }
          </style>
          <style id="font-style-tag">
            #s-content.s-font-body-hei .s-font-body {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", serif;
            }

            #s-content.s-font-body-hei .s-font-body:lang(ja) {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", serif
            }

            #s-content.s-font-body-hei .s-font-body:lang(zh-cn),
            #s-content.s-font-body-hei .s-font-body:lang(sxl),
            #s-content.s-font-body-hei .s-font-body:lang(zh) {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", Cardo, STSong, "Songti SC", SimSun, "PingFang SC", "Microsoft YaHei", 微软雅黑, STXihei, 华文细黑, serif
            }

            #s-content.s-font-body-hei .s-font-body:lang(zh-tw) {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei, serif;
            }

            #s-content.s-font-title-hei .s-font-title {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", serif;
            }

            #s-content.s-font-title-hei .s-font-title:lang(ja) {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", serif
            }

            #s-content.s-font-title-hei .s-font-title:lang(zh-cn),
            #s-content.s-font-title-hei .s-font-title:lang(sxl),
            #s-content.s-font-title-hei .s-font-title:lang(zh) {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", Cardo, STSong, "Songti SC", SimSun, "PingFang SC", "Microsoft YaHei", 微软雅黑, STXihei, 华文细黑, serif
            }

            #s-content.s-font-title-hei .s-font-title:lang(zh-tw) {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei, serif;
            }

            #s-content.s-font-heading-hei .s-font-heading {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", serif;
            }

            #s-content.s-font-heading-hei .s-font-heading:lang(ja) {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", serif
            }

            #s-content.s-font-heading-hei .s-font-heading:lang(zh-cn),
            #s-content.s-font-heading-hei .s-font-heading:lang(sxl),
            #s-content.s-font-heading-hei .s-font-heading:lang(zh) {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", Cardo, STSong, "Songti SC", SimSun, "PingFang SC", "Microsoft YaHei", 微软雅黑, STXihei, 华文细黑, serif
            }

            #s-content.s-font-heading-hei .s-font-heading:lang(zh-tw) {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei, serif;
            }

            #s-content.s-font-button-hei .s-font-button {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", serif;
            }

            #s-content.s-font-button-hei .s-font-button:lang(ja) {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", serif
            }

            #s-content.s-font-button-hei .s-font-button:lang(zh-cn),
            #s-content.s-font-button-hei .s-font-button:lang(sxl),
            #s-content.s-font-button-hei .s-font-button:lang(zh) {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", Cardo, STSong, "Songti SC", SimSun, "PingFang SC", "Microsoft YaHei", 微软雅黑, STXihei, 华文细黑, serif
            }

            #s-content.s-font-button-hei .s-font-button:lang(zh-tw) {
              font-family: "Open Sans", "open_sans", "Lucida Grande", "Verdana", "Pingfang SC", "Pingfang TC", "Hiragino Sans GB", "Microsoft YaHei", 'PingFang TC', 'Microsoft JhengHei', "微軟正黑體", STXihei, serif;
            }
          </style>
        </div>
        <div class="s-navbar-section">
          <div id="header-container" class="navigator" style="margin-top: -120px;">
            <div class="container wide-container">
              <div class="sixteen columns header center">
                <div id="logo" class="logo ib">
                  <div class="s-component s-image">
                    <div>
                      <div class="s-component-content">
                        <div class="s-img-wrapper"><img src="./assets/FhRcxKSuVSPuFY_-qq7AZv4EYRWZ.png" alt="" title=""
                            class="crop-default" data-description="" data-image-link="javascript:void(0);"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="nav no-power">
                  <ul class="s-nav"><span>
                      <li style="display: none;"><a class="s-nav-item"
                          href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#_1"><span
                            class="s-font-body"></span></a></li>
                      <li><a class="s-nav-item"
                          href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#_2"><span
                            class="s-font-body">关于大会</span></a></li>
                      <li><a class="s-nav-item"
                          href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#_3"><span
                            class="s-font-body">演讲嘉宾</span></a></li>
                      <li><a class="s-nav-item"
                          href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#_4"><span
                            class="s-font-body">日程安排</span></a></li>
                      <li><a class="s-nav-item"
                          href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#_5"><span
                            class="s-font-body">会议地址</span></a></li>
                      <li><a class="s-nav-item selected"
                          href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#_6"><span
                            class="s-font-body">赞助商</span></a></li>
                      <li style="display: none;"><a class="s-nav-item"
                          href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#_7"><span
                            class="s-font-body">银牌赞助商</span></a></li>
                      <li style="display: none;"><a class="s-nav-item"
                          href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#_8"><span
                            class="s-font-body">合作伙伴</span></a></li>
                    </span><span>
                      <li><a class="s-external-link-item s-nav-item" href="http://blog.rubyconfchina.org/"
                          target="_blank"><span class="s-font-body">博客</span></a></li>
                      <li><a class="s-external-link-item s-nav-item" href="http://www.bagevent.com/event/139682"
                          target="_blank"><span class="s-font-body">购票参加</span></a></li>
                    </span></ul>
                  <div id="navbarPopover"></div>
                </div>
              </div>
            </div>
          </div>
          <div id="header-spacer" style="height: 187px;"></div>
        </div>
        <div class="s-navbar-container">
          <div class="navbar-drawer-bar">
            <div class="drawer-container">
              <div class="navbar s-mobile-nav-bar">
                <div class="navbar-icons"><span></span><span></span><span></span></div>
              </div>

              <div class="mobile-cart-icon" id="s-mobile-shopping-cart-new"></div>
              <div class="navbar-drawer-title-container"></div>
            </div>
          </div>
          <div id="navbar-drawer-mask"></div>
          <div class="navbar-drawer strikingly-drawer bottom-border">
            <ul id="nav-drawer-list"><span>
                <li><a class="navbar-drawer-item s-font-body"
                    href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#1"></a></li>
              </span><span>
                <li><a class="navbar-drawer-item s-font-body"
                    href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#2">关于大会</a></li>
              </span><span>
                <li><a class="navbar-drawer-item s-font-body"
                    href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#3">演讲嘉宾</a></li>
              </span><span>
                <li><a class="navbar-drawer-item s-font-body"
                    href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#4">日程安排</a></li>
              </span><span>
                <li><a class="navbar-drawer-item s-font-body"
                    href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#5">会议地址</a></li>
              </span><span>
                <li><a class="navbar-drawer-item s-font-body selected"
                    href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#6">赞助商</a></li>
              </span><span>
                <li style="display: none;"><a class="navbar-drawer-item s-font-body"
                    href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#7">银牌赞助商</a></li>
              </span><span>
                <li style="display: none;"><a class="navbar-drawer-item s-font-body"
                    href="https://www.sxl.cn/s/sites/10852868/preview?mode=iframe&amp;v4=1#8">合作伙伴</a></li>
              </span><span>
                <li><a class="s-font-body" href="http://blog.rubyconfchina.org/" target="_blank">博客</a></li>
              </span><span>
                <li><a class="s-font-body" href="http://www.bagevent.com/event/139682" target="_blank">购票参加</a></li>
              </span>
              <li id="mobileLoginDropdown"></li>
              <li id="mobileLangSwitcher"></li>
              <li class="logo"><a class="logo"
                  href="https://www.sxl.cn/?ref=logo&amp;permalink=rubyconfchina2016&amp;m=1" target="_blank"><img
                    src="./assets/logo-small-2-sxl-grey.png" alt="Strikingly"
                    style="height: 16px; vertical-align: middle; margin-right: 6px;"><span class="msg">提供技术支持</span></a>
              </li>
            </ul>
          </div>
          <div class="mobile-actions">
            <ul id="mobile-action-list"></ul>
          </div>
        </div>
        <div class="page-wrapper">
          <ul class="slides s-page-1 " style="display: block;">
            <div>
              <li class="slide s-section-1 s-first-visible-section "
                id="section-f_9fe04d7a-33d1-4a8a-ab8d-d40ca218b80a">
                <div class="waypoint"></div>
                <div class="section-anchor" style="top: -187px;"></div>
                <div
                  class="s-bg-image s-bg-blurred s-bg-light-text s-bg-overlay s-block-section s-section background-image lazyloaded transition"
                  data-bg="//user-assets.sxlcdn.com/images/27813/FsagFIl5_VGNeSGQ4r-6kq-Os0WL.png?imageMogr2/strip/auto-orient/thumbnail/2000x1500&gt;/quality/90!/format/png"
                  data-react-style="{&quot;backgroundRepeat&quot;:&quot;no-repeat&quot;,&quot;backgroundSize&quot;:&quot;cover&quot;,&quot;backgroundColor&quot;:&quot;transparent&quot;,&quot;backgroundPosition&quot;:&quot;50% 50%&quot;}"
                  style="background-repeat: no-repeat; background-size: cover; background-color: transparent; background-position: 50% 50%; background-image: url(&quot;//user-assets.sxlcdn.com/images/27813/FsagFIl5_VGNeSGQ4r-6kq-Os0WL.png?imageMogr2/strip/auto-orient/thumbnail/2000x1500&gt;/quality/90!/format/png&quot;);">
                  <div class="blurred-layer loaded css-1tnf9eu css-1ksxsxc0"></div>
                  <div class="container">
                    <div class="columns sixteen"></div>
                    <div class="alignment-container ">
                      <div class="s-repeatable s-block s-component s-mh ">
                        <div class="s-block-item s-repeatable-item s-block-sortable-item  image s-last-row">
                          <div>
                            <div>
                              <div class="s-block-item-inner clearfix" style="position: relative;">
                                <div class="  columns sixteen">
                                  <div class="s-component s-image">
                                    <div>
                                      <div class="s-component-content">
                                        <div class="s-img-wrapper"><img src="./assets/FkluQW-zzgPi6RPGYkFcarSEJms-.png"
                                            alt="" title="" class="crop-default" data-description=""
                                            data-image-link="javascript:void(0);"></div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="slide s-section-2 " id="section-f_3f9b9c49-5279-46d6-8dd7-01f2cbdb5dae">
                <div class="waypoint"></div>
                <div class="section-anchor" style="top: -67px;"></div>
                <div>
                  <div
                    class="s-no-bg  s-new-text-section s-section s-text-section   background-image lazyloaded transition"
                    data-react-style="{}">
                    <div class="container">
                      <div class="clearfix">
                        <div class="columns sixteen">
                          <div class="s-title-group  ">
                            <div class="s-title  has-fresh-line">
                              <div class="s-component s-text">
                                <div class="">
                                  <div class="s-component-content s-font-title" style="white-space: pre-wrap;">
                                    <h2>
                                      <p>关于 RubyConf China</p>
                                    </h2>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="s-subtitle">
                              <div class="s-component s-text">
                                <div class="">
                                  <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                    <h4>
                                      <p style="font-size:80%" class="s-text-color-gray">中国规模最大、最高水平、最有影响力的 Ruby 技术大会
                                      </p>
                                    </h4>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="">
                        <div class="s-mh s-repeatable">
                          <div>
                            <div data-sorting-index="0" class="fourteen columns no-float s-repeatable-item s-last-row">
                              <div class="s-mhi">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p style="font-size:80%" class="s-text-color-black">RubyConf China 是由 Ruby
                                              China 社区以非盈利形式组织的一年一度的技术交流大会，自 2009 年始至 2015 年已成功举办了七届，我们会邀请国内外的明星开发者、知名项目
                                              / 团队的负责人以及海内外技术专家来分享 Ruby 和相关领域的最新成果、经验总结。</p>
                                            <p style="font-size:80%" class="s-text-color-black">&nbsp;</p>
                                            <p style="font-size:80%" class="s-text-color-black">2016
                                              年，第八届大会，我们终于来到了有着天府之国之称的成都！相信五湖四海的朋友们会在成都获得视觉、听觉、味觉全方面的体验，不虚此行。</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class=""></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="slide s-section-3 " id="section-f_7931cd2c-dee5-4c92-880a-4fe4fe1459fb">
                <div class="waypoint"></div>
                <div class="section-anchor" style="top: -67px;"></div>
                <div>
                  <div
                    class="s-new-media-section s-section s-columns-section     background-image lazyloaded transition"
                    data-react-style="{}">
                    <div class="container">
                      <div class="columns sixteen">
                        <div class="s-title-group  ">
                          <div class="s-title  has-fresh-line">
                            <div class="s-component s-text">
                              <div class="">
                                <div class="s-component-content s-font-title" style="white-space: pre-wrap;">
                                  <h2>
                                    <p>演讲嘉宾</p>
                                  </h2>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="s-subtitle">
                            <div class="s-component s-text">
                              <div class=""></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="s-mh  s-repeatable">
                        <div>
                          <div data-sorting-index="0" class="four columns half-fixed no-float s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/Fn-39aCGoRFzi2G_XfdXWp1twICx.jpg"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/Fn-39aCGoRFzi2G_XfdXWp1twICx.jpg?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/quality/90!/interlace/1/format/jpeg">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-black">陈金洲</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank" href="https://github.com/mechiland">@mechiland</a>
                                              </p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p><a target="_blank" href="https://jinshuju.net/">金数据</a> 创始人，RubyConf
                                              China 2012、2013 讲师。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="1" class="four columns half-fixed no-float s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/FksT_xGvCYCw5UQzIfnd3ma-l5UQ.jpg"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FksT_xGvCYCw5UQzIfnd3ma-l5UQ.jpg?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/quality/90!/interlace/1/format/jpeg">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-black">黄增光(Rei)</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank" href="https://ruby-china.org/rei">@rei</a></p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>Ruby China 创始人之一，以及第 1 号会员，忠实的 Ruby、Rails 爱好者，<a target="_blank"
                                                href="http://selfstore.io/">SelfStore</a> 创始人，目前已加入 <a target="_blank"
                                                href="http://www.dji.com/cn">大疆</a>。RubyConf China 2015 讲师，同时也是 <a
                                                target="_blank" href="https://github.com/chloerei/alipay">alipay</a> -
                                              支付宝 Gem 的作者。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="2" class="four columns half-fixed no-float s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/FjOKhLnqOXa8gx8r9Eo444iWE76O.jpeg"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FjOKhLnqOXa8gx8r9Eo444iWE76O.jpeg?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/interlace/1/format/jpeg">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-black">潘旻琦</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank" href="https://ruby-china.org/psvr">@pmq20</a></p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>支付宝技术专家，专注 GitLab 项目改善，曾以讲师的身份参加美国的 RailsConf 2016，同时他也是 Node.js 的贡献者。
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="3" class="four columns half-fixed no-float s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/FvOlClTl5Ck4A3KZoQJfRp4VMnX9.jpeg"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FvOlClTl5Ck4A3KZoQJfRp4VMnX9.jpeg?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/interlace/1/format/jpeg">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-black">李亚飞</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank" href="https://ruby-china.org/lyfi2003">@windy</a>
                                              </p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>深圳百分之八十网络技术公司联合创始人, 深圳 Ruby 活动组织者, Ruby on Rails 资深开发者, 负责过多起创业产品的开发,
                                              擅长极速开发新产品。经过长期的创业经历, 对产品设计, 前端开发均有深入研究。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="4" class="four columns half-fixed no-float s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/FgSoqdTBYxWcuZikPKKry-dwZJCZ.jpeg"
                                                  data-src="//user-assets.sxlcdn.com/images/29630/FgSoqdTBYxWcuZikPKKry-dwZJCZ.jpeg?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/interlace/1/format/jpeg">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-black">鄭伊廷(Xdite)</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank" href="https://ruby-china.org/xdite">@</a><a
                                                  href="https://ruby-china.org/xdite">xdite</a></p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>台湾 Ruby 社区知名人物，RubyConf China 2012、2013 讲师，《<a target="_blank"
                                                href="http://blog.xdite.net/www.growthschool.com/courses/rails-101/">Rails
                                                101</a>》作者，RailsPacific 主办者。<br>现职 GrowthSchool 教育机构创办人，全职 Rails / Agile
                                              / Growth 教练。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="5" class="four columns half-fixed no-float s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/Frq9-oqMLs66lB64XpphdPS0O3aO.jpg"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/Frq9-oqMLs66lB64XpphdPS0O3aO.jpg?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/quality/90!/interlace/1/format/jpeg">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-black">邱华</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank" href="https://ruby-china.org/qhwa">@qhwa</a></p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>全栈 Geek， 热爱 Web 技术，擅长 Ruby 和 JavaScript 。曾在阿里巴巴工作超过 7 年，参与开发了阿里巴巴少数几个基于
                                              Ruby 的产品，目前在 <a target="_blank" href="http://www.helijia.com/">河狸家</a> 从事
                                              Web 开发。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="6" class="four columns half-fixed no-float s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/FlPXGLnvZ0TxYB7xvShj49O8x7dq.png"
                                                  data-src="//user-assets.sxlcdn.com/images/29630/FlPXGLnvZ0TxYB7xvShj49O8x7dq.png?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-black">太檑(Terry Tai)</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank"
                                                  href="https://ruby-china.org/poshboytl">@poshboytl</a></p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>8 年 Ruby / Rails 开发经验, 2012 年 RubyConf China 讲师，<a target="_blank"
                                                href="http://teahour.fm/">Teahour.FM</a> 创始人，<a target="_blank"
                                                href="http://railscasts-china.org/">railscasts-china</a> 创始人，
                                              前风车创始人及核心开发者。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="7" class="four columns half-fixed no-float s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/FqkwJ2n7Any-LNCBwJWmhf2Bi-Me.jpg"
                                                  data-src="//user-assets.sxlcdn.com/images/29630/FqkwJ2n7Any-LNCBwJWmhf2Bi-Me.jpg?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/interlace/1/format/jpeg">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-black" style="font-size: 80%;">黄信翔 (Juanito Fatas)
                                              </p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank" href="https://ruby-china.org/juanito">@juanito</a>
                                              </p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p><a target="_blank" href="https://www.ruby-lang.org/zh_tw/">Ruby
                                                官方网站</a>繁体中文版维护者！<a target="_blank"
                                                href="https://github.com/jollygoodcode/twemoji">Twemoji</a> 的作者，目前在做自动更新
                                              Gem 的创业产品 <a target="_blank"
                                                href="https://www.deppbot.com/">Deepbot</a>。此外他整理的 <a target="_blank"
                                                href="https://github.com/JuanitoFatas/fast-ruby">fast-ruby</a> 在 GitHub
                                              上面 Star 超过 3000 个。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="8" class="four columns half-fixed no-float s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/Fod_RePLgiC68E40kQ3LH5EH3Gft.jpg"
                                                  data-src="//user-assets.sxlcdn.com/images/29630/Fod_RePLgiC68E40kQ3LH5EH3Gft.jpg?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/quality/90!/interlace/1/format/jpeg">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p style="font-size:80%" class="s-text-color-black">徐峥(古灵)</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank" href="https://ruby-china.org/zchar">@zchar</a></p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>成都本地的 Ruby 公司 <a target="_blank" href="https://tower.im/">彩程设计</a>
                                              联合创始人、CTO，<a target="_blank" href="https://tower.im/">Tower.im</a>
                                              就是他们做的，目前主要在做人力资源管理软件 <a target="_blank"
                                                href="https://zhirenhr.com/">知人</a>。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="9" class="four columns half-fixed no-float s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/FjAcOWilox2kynO-URI5CLqllqm1.png"
                                                  data-src="//user-assets.sxlcdn.com/images/29630/FjAcOWilox2kynO-URI5CLqllqm1.png?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p style="font-size:80%" class="s-text-color-black">谢文威</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank" href="https://ruby-china.org/zchar">@</a><a
                                                  href="https://ruby-china.org/vincent">vincent</a></p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p><a target="_blank" href="http://www.boohee.com/">薄荷科技</a>
                                              联合创始人、CTO，中国最早一批 Rubyist，超过 10 年 Ruby / Rails 开发经验，RubyConf China 2014 讲师。
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="10" class="four columns half-fixed no-float s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/FgaM54Odh5G8Ue6QgjcV1TW3h7Vs.png"
                                                  data-src="//user-assets.sxlcdn.com/images/29630/FgaM54Odh5G8Ue6QgjcV1TW3h7Vs.png?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-black">龚凌晖</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank" href="https://github.com/danielglh">@danielglh</a>
                                              </p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p><a target="_blank" href="https://www.strikingly.com/">Strikingly</a>
                                              早期创始团队成员，第一个工程师。做过产品，搞过运维自动化，研究过 Web Analytics 和
                                              SEO，玩过数据分析。目前负责产品后端，系统运维及数据分析的项目研发和团队管理。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="11" class="four columns half-fixed no-float s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/FqkndENgtGS5hWDqRC_NB17iQXKk.png"
                                                  data-src="//user-assets.sxlcdn.com/images/29630/FqkndENgtGS5hWDqRC_NB17iQXKk.png?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p style="font-size:80%" class="s-text-color-black">张运政</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank" href="https://github.com/danielglh">@</a><a
                                                  target="_blank" href="https://ruby-china.org/42thcoder">42thcoder</a>
                                              </p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>杭州大搜车高级软件工程师, 拍卖及订单团队核心成员。热爱 Web 开发，目前跟一帮很棒的小伙伴，一起使用 Ruby 构建企业级应用。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="12"
                            class="four columns half-fixed no-float s-repeatable-item s-last-row">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/Fg_2e_LfQ-JkQ8DJLj6_jts9RR_i.png"
                                                  data-src="//user-assets.sxlcdn.com/images/29630/Fg_2e_LfQ-JkQ8DJLj6_jts9RR_i.png?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p style="font-size:80%" class="s-text-color-black">曹力</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank"
                                                  href="https://ruby-china.org/ShiningRay">@ShiningRay</a></p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>暴走漫画 CTO，8 年 Rails 应用开发经验。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="13"
                            class="four columns half-fixed no-float s-repeatable-item s-last-row">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/FvUvLIoKCQx22TviqznSTJQh6f8F.jpg"
                                                  data-src="//user-assets.sxlcdn.com/images/29630/FvUvLIoKCQx22TviqznSTJQh6f8F.jpg?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/quality/90!/interlace/1/format/jpeg">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p style="font-size:80%" class="s-text-color-black">赵明</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank" href="https://ruby-china.org/zmbacker">@zmbacker</a>
                                              </p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>大米科技技术总监， 大米研究院院长， 专注互联网、Ruby、Rails 多年，全栈程序员， 智慧云科技创始人，前
                                              NHN（韩国最大互联网公司）Ruby 技术专家。曾组建多支 Ruby 开发团队。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="14"
                            class="four columns half-fixed no-float s-repeatable-item s-last-row">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper s-mhi " style="min-height: 236px;">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 320px; max-height: 320px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-circle lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="320" height="320"
                                                  src="./assets/Fm7XHtVO1pF0j5Lhqr7uqt539-Y3.jpg"
                                                  data-src="//user-assets.sxlcdn.com/images/29630/Fm7XHtVO1pF0j5Lhqr7uqt539-Y3.jpg?imageMogr2/strip/auto-orient/thumbnail/!320x320r/gravity/Center/crop/320x320/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="">
                                  <div class="s-item-text-group ">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p style="font-size:80%" class="s-text-color-black">欧阳继超</p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <h6>
                                              <p><a target="_blank" href="https://github.com/jcouyang">@jcouyang</a></p>
                                            </h6>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>ThoughtWorks 高级咨询师，活跃开源贡献者，喜欢给 Rubyist 教 JavaScript 的 Scala
                                              程序员，《前端函数式攻城指南》作者，《JavaScript 函数式编程》译者。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="slide s-section-4 " id="section-f_1b1441a5-95b3-49b5-a726-971cdd52a4b3">
                <div class="waypoint"></div>
                <div class="section-anchor" style="top: -67px;"></div>
                <div>
                  <div
                    class="s-no-bg  s-new-text-section s-section s-info-section   background-image lazyloaded transition"
                    data-react-style="{}">
                    <div class="container">
                      <div class="clearfix">
                        <div class="columns sixteen">
                          <div class="s-title-group  ">
                            <div class="s-title  has-fresh-line">
                              <div class="s-component s-text">
                                <div class="">
                                  <div class="s-component-content s-font-title" style="white-space: pre-wrap;">
                                    <h2>
                                      <p>日程安排</p>
                                    </h2>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="s-subtitle">
                              <div class="s-component s-text">
                                <div class="">
                                  <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                    <h4>
                                      <p>出场顺序</p>
                                    </h4>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="">
                        <div class="s-mh s-repeatable">
                          <div>
                            <div data-sorting-index="0" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">基于 Turbolinks 跨平台开发 - Rei</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p><a target="_blank"
                                              href="https://github.com/turbolinks/turbolinks">Turbolinks</a> 自发布以来，就是
                                            Rails 框架中最被误解的组件。因为它需要改变组织前端代码的方式，多数人的选择就是去掉它。在 Rails 5 中，Turbolinks
                                            将适用领域扩展到了移动端，未来都会是 Rails 框架的重要部分。如果您继续忽视它，那么将错过一大部分 Rails 的精华。这个主题将向您讲述
                                            Turbolinks 5 的原理以及如何用于跨平台应用开发。</p>
                                          <p>&nbsp;</p>
                                          <p>Day 1 9:00 - 9:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="1" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">谈谈知人是怎么算工资的 - 徐峥</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>基于彩程的新产品「<a target="_blank"
                                              href="https://zhirenhr.com/">知人</a>」，谈谈从入职到最终给员工发工资过程中，面对复杂的请假、考勤、计薪规则应该怎么设计业务模型，分享使用
                                            Rails 做企业级产品开发踩过的坑。</p>
                                          <p>&nbsp;</p>
                                          <p>Day 1 10:00 - 10:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="2" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">ReConsider REST: A simple, better way to
                                              construct your Rails app - 陈金洲</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>小的时候人人喜欢，臃肿之后面目可憎，这几乎是所有的应用在面对业务扩张的时候要面对的挑战。这个分享重新思考了HTTP / REST,
                                            并且从资源的角度入手，重新规划和思考在 Rails
                                            应用中如何更好地组织代码，从而让复杂度维持在一个低的水平。为了帮助听众更好地在实际项目中进行实际操练，我也会分享在实际项目中遇到的挑战，当然还有吐槽。
                                          </p>
                                          <p>&nbsp;</p>
                                          <p>Day 1 11:00 - 11:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="3" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">打造国际化产品：Strikingly 的 I18n 实践 - 龚凌晖</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>Strikingly 的用户遍及 200 多个国家和地区，这些用户来自不同的文化背景，熟悉不同的语言，如何使这些用户使用各自熟悉的语言访问我们的
                                            Web
                                            服务和移动应用，与我们的客服人员沟通，甚至将该语言的文化元素融入到产品设计中，是我们一直致力于解决的问题，在这个过程中我们也积累了不少经验，希望可以分享出来并帮助到有志于打造国际化产品的团队。
                                          </p>
                                          <p>&nbsp;</p>
                                          <p>Day 1 13:00 - 13:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="4" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">如何给 Rails 应用减肥 - 薄荷微服务化实践 - 谢文威</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>一个庞大臃肿的 Monolith Rails 应用面临诸多挑战，微服务化是给 Rails 应用减肥的一种有效手段，但是微服务化并非 Rails
                                            的主菜，所以过程困难重重。另外微服务化并非银弹，它同时带来很多额外的问题，如何选择和取舍？如何应对其中的关键问题？将分享<a
                                              target="_blank" href="http://www.boohee.com/">薄荷</a>在微服务化实践过程中的经验教训。</p>
                                          <p>&nbsp;</p>
                                          <p>Day 1 14:00 - 14:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="5" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">如何在 Rails 应用里面寻找内存泄漏 - 张运政</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>如何修复秒杀类 Rails App 中出现的内存泄露，Ruby 是如何使用内存的，哪些地方容易内存泄露，Rails 本身是如何做内存优化的。</p>
                                          <p>介绍常见的 Profiler 工具、Heap 的采集分析工具、GC 的参数配置。</p>
                                          <p>&nbsp;</p>
                                          <p>Day 1 15:00 - 15:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="6" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">Rubyists 可以从 Elixir 学到什么 - 邱华</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>Ruby 无疑是最「开发者友好」的编程语言，她拥有简洁、自然的语法，高度的动态性和开放性，以及优秀的工具。然而 Ruby 并不完美。<a
                                              target="_blank" href="https://www.erlang.org/">Erlang</a> 是和 Ruby
                                            较为互补的语言，有很多和 Ruby 对立的设计，Ruby 的一些弱项 (性能、并发程序的开发难度、多核 CPU 的利用率）恰恰也是 Erlang
                                            的强项。Erlang 也有很多独特的哲学理念，在过去二十多年被证明是成功的。作为一个从 Erlang 基础上发明，吸收 Ruby 优点的新语言 <a
                                              target="_blank" href="http://elixir-lang.org/">Elixir</a>，获得了非常多的赞誉。Dave
                                            Thomas (《Programming Ruby》、《Programming Elixir》的作者) 称「Elixir 改变了我对编程的看法」。Joe
                                            Amstrong (Erlang 语言设计者) 介绍 Elixir 时多次提出「we should add this to
                                            Erlang」。所以让我们暂时忘记 Ruby、OOP，来场和 Elixir 的约会吧！</p>
                                          <p>&nbsp;</p>
                                          <p>Day 1 16:00 - 16:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="7" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">Building API For The Rest Of Us - Terry Tai
                                            </p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>提供 API 几乎已经成了现在互联网应用所『必须』的功能，我们如何优雅且高效的给用户提供 API
                                            成了一个非常重要的话题。本主题就和你讨论我在这方面的一些经验，如何在不同的情况做技术选型，如何优雅的做版本控制，如何更严谨的做
                                            authentication, 如何规划好你的 status code ... 这一切的一切让我给你娓娓道来...</p>
                                          <p>&nbsp;</p>
                                          <p>Day 1 17:00 - 17:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="8" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">构造自动依赖与安全性更新服务的故事 - Juanito Fatas</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>本主题关于一个良好的工程实践，持续更新。什么是持续更新？为什么要持续更新？以及如何做？将项目依赖保持在最新的状态很好。多数的 RubyGem
                                            维护者只对新版本的 Bug 感兴趣，新版本的 RubyGem 通常有：安全性修复、更佳的性能。使用较新的 RubyGem 项目升级 Rails
                                            更容易。但依赖人力的更新不容易，为什么最终我打造了一个叫做 <a target="_blank"
                                              href="https://www.deppbot.com/">deppbot</a> 的服务并分享一些开发 deppbot 背后的故事。</p>
                                          <p>&nbsp;</p>
                                          <p>Day 2 9:00 - 9:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="9" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">Refactoring lesson : from GPA 1.4 to GPA 3.0 -
                                              Xdite</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>人人都说创业应该 MVP，MVP 成功后再招聘牛人来重构业务逻辑。但 MVP 的后果就是疯狂膨胀并且丑陋的代码 + 团队人数瞬间 10 倍。这个
                                            Talk 将会示范，如何在一个月内的时间，在保持稳定的 release 的条件下，将 codebase 重构到 <a target="_blank"
                                              href="https://codeclimate.com/">CodeClimate</a> 评分从 GPA 1.4 上升到 3.0，代码覆盖率从
                                            0% 升到 60%。</p>
                                          <p>&nbsp;</p>
                                          <p>Day 2 10:00 - 10:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="10" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">环境变量为何能让 Ruby 启动快十倍 - 潘旻琦</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>一个简单的 <a target="_blank"
                                              href="http://ruby-doc.org/core-2.3.0/Kernel.html">Kernel#system</a>
                                            调用，清理环境变量前后性能居然有十倍之差！该情况仅发生在调用外部 Ruby 程序的时候，且 hello world 即可复现，因此真相一定隐藏在
                                            Ruby 启动过程与其环境变量相互作用的玄机之中！此话题将向大家揭开这个问题的谜底，并向大家介绍隐藏在 Ruby 启动过程背后的技术细节。</p>
                                          <p>&nbsp;</p>
                                          <p>Day 2 11:00 - 11:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="11" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">如何利用 Rails 在 21 天单枪匹马上线一个产品 - 李亚飞</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>结合八十二十产品的开发，讲如何从零开发出理想产品的演进过程。</p>
                                          <p>此话题涵盖了 Turborlinks、微信支付、ActionCable 等技术以及八十二十的实践经验。</p>
                                          <p>&nbsp;</p>
                                          <p>Day 2 13:00 - 13:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="12" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">ActionCable 与实时交互 - 曹力</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>介绍 ActionCable 出现的时代背景和对未来产品发展带来的影响，介绍 ActionCable 的架构以及它的优劣点。</p>
                                          <p>&nbsp;</p>
                                          <p>Day 2 14:00 - 14:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="13" class="fourteen columns no-float s-repeatable-item">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">函数式 Ruby 编程 - 欧阳继超</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>Ruby 作为一门纯面向对象语言，函数式的一面往往被忽略，lambda、模式匹配、Monad、Actor 模型，Ruby
                                            样样都不缺。不管这些词听没听过，让我们一起见识一下函数式 Ruby 的奇技淫巧，以及这些 FP 技巧如何使我们的代码更易读，易测，且具有更好性能。
                                          </p>
                                          <p>&nbsp;</p>
                                          <p>Day 2 15:00 - 15:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div data-sorting-index="14" class="fourteen columns no-float s-repeatable-item s-last-row">
                              <div class="s-mhi s-info-box">
                                <div class="s-item-text-group ">
                                  <div class="s-item-title">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                          <h3>
                                            <p class="s-text-color-black">打造 Ruby 开发团队的航母 - 赵明</p>
                                          </h3>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="s-item-text">
                                    <div class="s-component s-text">
                                      <div class="">
                                        <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                          <p>如何自建内部 Gem 库达到组件化开发方式，提高团队工作效率，降低核心系统的错误率。 让新员工快速进入开发状态。主要介绍如何定义有关
                                            CMS、用户系统、权限系统、基础 API、前端框架等。</p>
                                          <p>&nbsp;</p>
                                          <p>Day 2 16:00 - 16:50</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="slide s-section-5 " id="section-f_fd128141-54a0-46dc-be64-abb4c3f8722f">
                <div class="waypoint"></div>
                <div class="section-anchor" style="top: -67px;"></div>
                <div
                  class="s-no-bg  s-block-section s-section   background-image lazyloaded transition collapse-bottom-padding"
                  data-react-style="{}">
                  <div class="container">
                    <div class="columns sixteen">
                      <div class="s-title-group  ">
                        <div class="s-title  has-fresh-line">
                          <div class="s-component s-text">
                            <div class="">
                              <div class="s-component-content s-font-title" style="white-space: pre-wrap;">
                                <h2>
                                  <p>会议地址</p>
                                </h2>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="s-subtitle">
                          <div class="s-component s-text">
                            <div class="">
                              <div class="s-component-content s-font-heading" style="white-space: pre-wrap;">
                                <h4>
                                  <p>四川省成都市总府街 31 号（临近春熙路）</p>
                                  <p>成都总府皇冠假日酒店</p>
                                </h4>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="alignment-container ">
                      <div class="s-repeatable s-block s-component s-mh "></div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="slide s-section-6 " id="section-f_7450ca54-f8b0-4809-a000-18c240300308">
                <div class="waypoint"></div>
                <div class="section-anchor" style="top: -67px;"></div>
                <div>
                  <div
                    class="s-new-media-section s-section s-rows-section     background-image lazyloaded transition collapse-bottom-padding"
                    data-react-style="{}">
                    <div class="container">
                      <div class="columns sixteen">
                        <div class="s-title-group  ">
                          <div class="s-title  has-fresh-line">
                            <div class="s-component s-text">
                              <div class="">
                                <div class="s-component-content s-font-title" style="white-space: pre-wrap;">
                                  <h2>
                                    <p>金牌赞助商</p>
                                  </h2>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="s-subtitle">
                            <div class="s-component s-text">
                              <div class=""></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="s-media-left s-layout-mediaLeft s-repeatable">
                        <div>
                          <div data-sorting-index="0" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper five columns offset-one s-left-in-row s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 720px; max-height: 216px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 30.13%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-default lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="720" height="216"
                                                  src="./assets/FjzePgk4nZGzNVlbzaSfvqRj_Q4A.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FjzePgk4nZGzNVlbzaSfvqRj_Q4A.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-right-in-row s-rva-text">
                                  <div class="s-item-text-group half-offset-left">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-custom1"><a target="_blank"
                                                  href="http://www.uniqueway.com/">无二之旅</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>无二之旅，成立于 2012 年，是国内最专业的海外旅行定制公司，已为超过 4 万用户定制了属于自己的海外旅行。</p>
                                            <p>
                                              我们创造出了一种全新的海外旅行服务模式：不组团、没有地接导游，帮用户量身设计行程，制作路书，并把一切旅行中事项都安排好，用户拿着路书，就可以轻松玩转自由行。
                                            </p>
                                            <p>无二之旅拥有 50 多名旅行定制师，将近 40 名开发工程师，专业的推荐、周全的设计、严谨的安排、24
                                              小时电话和网络协助，一切都只为让旅游爱好者的旅行有温度。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="1" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper five columns offset-one s-left-in-row s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 720px; max-height: 184px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 25.5%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-default lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="720" height="184"
                                                  src="./assets/Fi1bBg9PoPzQwzGcXAmwlBeA_S5F.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/Fi1bBg9PoPzQwzGcXAmwlBeA_S5F.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-right-in-row s-rva-text">
                                  <div class="s-item-text-group half-offset-left">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-custom1"><a target="_blank"
                                                  href="http://freewheel.tv/">FreeWheel</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>
                                              FreeWheel创建于2007年，是美国最大的综合性传媒集团康卡斯特（Comcast）的全资子公司，全球员工近700人。公司总部位于硅谷，在纽约、伦敦和北京分别设有办公室。其中北京办公室作为全球研发中心，负责公司全部核心产品的开发。
                                            </p>
                                            <p>
                                              基于精准的商业模式和产品定位，并借助高效的技术研发和运营，FreeWheel已成长为美国视频行业领先的媒体运营平台，助力大型媒体公司在数字时代最大化挖掘其内容的广告价值。目前90%美国主流电视媒体和运营商使用我们的广告平台。2015年，我们服务的视频播放超过1600亿次。
                                            </p>
                                            <p>作为第三方的广告技术平台，FreeWheel通过了业内最严格的权威认证——</p>
                                            <p>· 美国互动广告局(Interactive Advertising Bureau) : IAB</p>
                                            <p>· 媒介视听率评级委员会 (Media Rating Council): MRC</p>
                                            <p>· 美国注册会计师协会 (American Institute of Certified Public Accountants) :
                                              SAS70/SOC1</p>
                                            <p>此外，我们还是 NBCU2012 年伦敦奥运会、2014 索契冬奥会和 ESPN 2010/2014 年 FIFA
                                              世界杯视频直播的广告服务提供商。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="2" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper five columns offset-one s-left-in-row s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 475px; max-height: 158px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 33.11%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-default lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="475" height="158"
                                                  src="./assets/Fh8l0g9R36q1ScQ1ckCTDFMlDRMK.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/Fh8l0g9R36q1ScQ1ckCTDFMlDRMK.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-right-in-row s-rva-text">
                                  <div class="s-item-text-group half-offset-left">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-custom1"><a target="_blank"
                                                  href="http://www.qiniu.com/">七牛云</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>
                                              七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化PaaS服务。围绕富媒体场景，七牛先后推出了对象存储，融合CDN加速，数据通用处理，内容反垃圾服务，以及直播云服务等。目前，七牛云已经在为
                                              40多万家企业提供服务, 亲历互联网创新创业发展的同时，也深入理解传统企业转型过程中的云服务需求场景，推出了有针对性的一系列行业解决方案。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="3" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper five columns offset-one s-left-in-row s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 617px; max-height: 618px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="crop-default lazyloaded" data-description=""
                                                  data-image-link="javascript:void(0);" width="617" height="618"
                                                  src="./assets/FhHwL46i92NERA0_ZEs0sTwBOH2l.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FhHwL46i92NERA0_ZEs0sTwBOH2l.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-right-in-row s-rva-text">
                                  <div class="s-item-text-group half-offset-left">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-custom1"><a target="_blank"
                                                  href="http://www.thoughtworks.com/cn/">ThoughtWorks</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>ThoughtWorks
                                              是一家全球技术信息服务公司，在美国，英国，澳大利亚，德国，新加坡，印度，巴西，南非，中国，厄瓜多尔，土耳其等十几个国家中，她成为超过 3000
                                              技术牛人的实践乐园。<br>在进入中国十年中，分别在北京，上海，深圳，西安，成都和武汉成立了分公司 ，有接近 700
                                              名员工通过全球资源共享和人才交流，服务全球各行业的顶尖客户。<br>ThoughtWorks
                                              不仅仅是一家软件公司，同时也是一个社区：我们汇集满怀激情的软件精英，通过技术和客户共同应对最艰巨的挑战。同时我们寻求IT行业的革新，并致力于对社会产生积极的影响力。
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="4" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper five columns offset-one s-left-in-row s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 720px; max-height: 612px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 85.1%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="720" height="612"
                                                  src="./assets/Ft7DeeqTP-ajuuRIS9Zqy2QWRgDz.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/Ft7DeeqTP-ajuuRIS9Zqy2QWRgDz.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-right-in-row s-rva-text">
                                  <div class="s-item-text-group half-offset-left">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-custom1"><a target="_blank"
                                                  href="http://www.oneapm.com/">OneAPM</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>OneAPM 是中国基础软件领域的新兴领军企业，专注于为互联网企业提供精准、有效的应用性能管理 SaaS 云解决方案，解决 Web、App
                                              在开发及运行过程中的各种性能问题，支持多种 Ruby Web 框架的性能监控。</p>
                                            <p>OneAPM for Ruby 能够深入到所有 Ruby
                                              应用内部完成应用性能管理和监控，包括代码级别性能问题的可见性、性能瓶颈的快速识别与追溯、真实用户体验监控、服务器监控和端到端的应用性能管理。
                                              追溯性能瓶颈至：性能表现差的 SQL 语句、第三方 API、Web Services、Caching Layers、后台任务等。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="5" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper five columns offset-one s-left-in-row s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 400px; max-height: 84px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 20.86%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="400" height="84"
                                                  src="./assets/FlqnRsqsA3xBQBWWCmkL9FfeHXBs.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FlqnRsqsA3xBQBWWCmkL9FfeHXBs.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-right-in-row s-rva-text">
                                  <div class="s-item-text-group half-offset-left">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-custom1"><a target="_blank"
                                                  href="https://tower.im/about_us">彩程设计</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>彩程专注于为中小企业设计简单好用的 SaaS 软件产品，旗下拥有 500 万注册用户的团队协作产品 Tower，服务上千人公司使用的 21
                                              世纪人力资源管理系统「知人」，致力于成为中国最好的企业领域软件开发商。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="6" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper five columns offset-one s-left-in-row s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 720px; max-height: 162px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 22.52%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="720" height="162"
                                                  src="./assets/FpDE0IUJRaK3iTonSV_Pof7HSusc.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FpDE0IUJRaK3iTonSV_Pof7HSusc.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-right-in-row s-rva-text">
                                  <div class="s-item-text-group half-offset-left">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-custom1"><a target="_blank"
                                                  href="https://coding.net/">Coding</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>CODING，国内专业的云端开发协作平台，提供包括代码托管，项目管理，产品演示，WebIDE 等工具，帮助软件开发者提高生产效率，旨在并实现
                                              “Coding Anytime Anywhere” 的愿景。目前已经积累了超 25 万开发者，超过 35 万个项目。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="7" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper five columns offset-one s-left-in-row s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 519px; max-height: 184px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 35.43%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="519" height="184"
                                                  src="./assets/FqEB58yUXp3TchV53meOYGENR-fa.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FqEB58yUXp3TchV53meOYGENR-fa.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-right-in-row s-rva-text">
                                  <div class="s-item-text-group half-offset-left">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-custom1"><a target="_blank"
                                                  href="https://ucloud.cn/">UCloud</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>UCloud（上海优刻得云计算技术有限公司）是国内专业的基础云计算服务商，依托全球 10 个数据中心以及全国1 1 地线下服务站，UCloud
                                              为超过 2 万家企业级用户提供服务。UCloud 的业务覆盖了O2O、电商、互联网金融、游戏、在线教育等 19
                                              个互联网行业的细分领域；通过对用户需求的深入分析，UCloud 推出适合行业特性的产品与服务，取得了较为领先的地位。 UCloud
                                              的核心团队主要由国内外知名云计算互联网公司的优秀人才组成，具有丰富的云计算研发和运营经验。UCloud崇尚以客户为先的企业文化，围绕用户的需求持续创新,
                                              具有非常强烈的用户服务意识。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="8" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper five columns offset-one s-left-in-row s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 239px; max-height: 89px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 37.24%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="239" height="89"
                                                  src="./assets/FiElbJdjHCJ3MjfbUu1wQct_U987.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FiElbJdjHCJ3MjfbUu1wQct_U987.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-right-in-row s-rva-text">
                                  <div class="s-item-text-group half-offset-left">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-custom1"><a target="_blank"
                                                  href="https://yunbi.com/">云币网</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>云币网由李笑来管理的比特基金投资，使用自主研发的PEATIO 开源程序搭建而成，是一家致力于透明、公开、公正的的区块链资产交易平台。</p>
                                            <p>云币网除了提供比特币及以太币等主流的区块链资产的撮合交易服务，还从全球范围优选多个品种上线，为中国投资者提供参与全球领先的区块链项目的机会。
                                            </p>
                                            <p>目前主要交易的品种有：比特币（BTC）；以太币（ETH）；云储币（SC）；数字黄金权益（DGD）。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="9" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper five columns offset-one s-left-in-row s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 720px; max-height: 300px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 41.72%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="720" height="300"
                                                  src="./assets/FmPfxovvW9yD7KXkpG8-aj6IHgR3.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FmPfxovvW9yD7KXkpG8-aj6IHgR3.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-right-in-row s-rva-text">
                                  <div class="s-item-text-group half-offset-left">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-custom1"><a target="_blank"
                                                  href="http://faria.co/">Faria Systems</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>
                                              Faria创立于2006年，是一家教育领域的SaaS软件公司。公司无外部投资，目前有超过2000所国际学校付费使用我们的产品，处于盈利状态。我们实行远程工作制，团队成员分散在全球12个城市，在台北、香港、芝加哥和伦敦共设有4个办公室，近期计划在上海开设办公室。
                                            </p>
                                            <p>
                                              我们致力于推动国际文凭学校从传统的文书处理模式向云端处理模式转型，为此，我们怀着紧迫感在全球范围内兢兢业业地付出努力，我们希望将来可以自豪地说：“我来时，罗马城还是一片砖块垒砌，我走时，则留下一座大理石筑就的城市。
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="10" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper five columns offset-one s-left-in-row s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 500px; max-height: 500px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="500" height="500"
                                                  src="./assets/FiAkkh-1q0CfnaPYYIb-dAyMKMOh.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FiAkkh-1q0CfnaPYYIb-dAyMKMOh.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-right-in-row s-rva-text">
                                  <div class="s-item-text-group half-offset-left">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-custom1"><a target="_blank"
                                                  href="http://www.sxl.cn/">上线了</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>我们是 <a target="_blank" href="http://www.strikingly.com/">Strikingly</a>,
                                              一款简洁美观好用的建站平台，任何人都可以在15分钟内做出一个能够自动适应移动端屏幕大小的网站。我们于2016年4月正式推出针对中国市场的产品。
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="11" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper five columns offset-one s-left-in-row s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 474px; max-height: 69px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 14.57%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="474" height="69"
                                                  src="./assets/FgA8g7bDQ9qHMfvv1_Ne6b7yCukO.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FgA8g7bDQ9qHMfvv1_Ne6b7yCukO.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-right-in-row s-rva-text">
                                  <div class="s-item-text-group half-offset-left">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-custom1"><a target="_blank"
                                                  href="http://sendcloud.sohu.com/">SendCloud</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>
                                              SendCloud是专业的邮件发送服务商，致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台。为开发者提供便利的API接口来调用服务，让邮件准确迅速到达用户收件箱并获得丰富的追踪数据。<br>开发者只需简单的几行代码即可接入SendCloud的服务，实现邮件发送、邮件数据追踪和邮件地址管理等功能，无需花费过多的成本在系统搭建、ESP关系维护和运维监控上，是节约时间和成本的最优选择。目前已有超过5万的创业团队和企业选择了SendCloud。
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="12" class="s-repeatable-item s-last-row">
                            <div class="clearfix">
                              <div>
                                <div class="s-item-media-wrapper five columns offset-one s-left-in-row s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 720px; max-height: 346px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 48.01%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="720" height="346"
                                                  src="./assets/FuMyr5dtw8RZdRqL2pMzMrl3nQsE.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FuMyr5dtw8RZdRqL2pMzMrl3nQsE.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-right-in-row s-rva-text">
                                  <div class="s-item-text-group half-offset-left">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p class="s-text-color-custom1"><a target="_blank"
                                                  href="https://www.jiguang.cn/">极光</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>
                                              极光作为国内领先的大数据综合服务商，2011年创立至今，极光秉承“效率第一”的基本原则，以移动大数据为基础，以推送、即时聊天等开发者服务为依托，打造了极光开发者服务、极光广告服务、极光数据服务三大产品体系，帮助各行各业节约开发资源，提高运营效率，优化企业决策。
                                            </p>
                                            <p>极光现已服务全球30万款移动应用，覆盖总用户数超过40亿，月活用户数5亿，日推送信息量超过5亿条。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="slide s-section-7 " id="section-f_dd778707-0485-4498-9fb0-1866448bc487">
                <div class="waypoint"></div>
                <div class="section-anchor" style="top: -67px;"></div>
                <div>
                  <div
                    class="lazyload   s-new-media-section s-section s-rows-section     background-image transition collapse-bottom-padding"
                    data-react-style="{}">
                    <div class="container">
                      <div class="columns sixteen">
                        <div class="s-title-group  ">
                          <div class="s-title  has-fresh-line">
                            <div class="s-component s-text">
                              <div class="">
                                <div class="s-component-content s-font-title" style="white-space: pre-wrap;">
                                  <h2>
                                    <p>银牌赞助商</p>
                                  </h2>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="s-subtitle">
                            <div class="s-component s-text">
                              <div class=""></div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="s-media-right s-layout-mediaRight s-repeatable">
                        <div>
                          <div data-sorting-index="0" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div
                                  class="s-item-media-wrapper five columns offset-one s-right-in-row right s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 400px; max-height: 150px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 37.42%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="400" height="150"
                                                  src="./assets/Fvez8LEPwMz9GET_iBF70NYJ8eHp.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/Fvez8LEPwMz9GET_iBF70NYJ8eHp.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-left-in-row right s-rva-text">
                                  <div class="s-item-text-group half-offset-right">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p><a target="_blank" href="http://www.shinetechchina.com.cn/">盛安德</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>盛安德在全球范围内提供为客户带来最大业务价值的软件定制服务。十余年来，我们和 1000 多客户建立合作，涵盖亚洲、北美、欧洲 20
                                              余国，并在纽约，伦敦，悉尼等地建立分公司，服务当地客户。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="1" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div
                                  class="s-item-media-wrapper five columns offset-one s-right-in-row right s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 720px; max-height: 720px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="720" height="720"
                                                  src="./assets/FlLVl8AUpcewRVImJ0UBK0Tj-GT_.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FlLVl8AUpcewRVImJ0UBK0Tj-GT_.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-left-in-row right s-rva-text">
                                  <div class="s-item-text-group half-offset-right">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p><a target="_blank" href="http://www.jianshu.com/">简书</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>作为基于Ruby on
                                              Rails最著名的原创内容分享社区，在这里，你既可以发现各种新鲜有趣的内容，也可以找到引人深思的文章。你也可以把自己的故事或是想法写出来与人分享，找到同好。你一定不知道有非常多的程序员已经入驻简书，那些代码内外的故事与想法，每个人都可以在简书自由地发现或分享。
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="2" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div
                                  class="s-item-media-wrapper five columns offset-one s-right-in-row right s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 720px; max-height: 339px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 47.02%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="720" height="339"
                                                  src="./assets/FvMt2hjZPdRPURvF2zY6PQXdixnJ.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FvMt2hjZPdRPURvF2zY6PQXdixnJ.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-left-in-row right s-rva-text">
                                  <div class="s-item-text-group half-offset-right">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p><a target="_blank" href="https://jinshuju.net/">金数据</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>金数据，最好用的在线表单设计、数据收集、统计和分享工具，百万用户的信赖选择，人人可用的数据平台。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="3" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div
                                  class="s-item-media-wrapper five columns offset-one s-right-in-row right s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 720px; max-height: 182px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 25.17%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="720" height="182"
                                                  src="./assets/FqkXodUlGHZeuCzE_nEKnbAosofn.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FqkXodUlGHZeuCzE_nEKnbAosofn.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-left-in-row right s-rva-text">
                                  <div class="s-item-text-group half-offset-right">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p><a target="_blank" href="http://www.liulishuo.com/">流利说</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>“英语流利说” App 是中国领先的移动英语学习应用、最活跃的语言学习社区，深受 3000 万用户的喜爱。2013年被苹果 App Store
                                              评为“年度精选 App ”和“ App Store 精华”，并在全中国苹果零售商店样机中预装展示。 2016年推出的“懂你英语”是全球首个基于智能
                                              AI 技术的自适应移动英语课堂，由流利说公司自主研发世界领先的口语评价技术、自适应学习技术，并结合世界知名语言教学专家 Lance Knowles
                                              博士的突破性“RHR”语言学习理论，斥资数千万，历时两年打造而成。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="4" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div
                                  class="s-item-media-wrapper five columns offset-one s-right-in-row right s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 720px; max-height: 722px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100.33%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="720" height="722"
                                                  src="./assets/Fk4mnJckLBWl-vj4umVzsi7Ec5DS.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/Fk4mnJckLBWl-vj4umVzsi7Ec5DS.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-left-in-row right s-rva-text">
                                  <div class="s-item-text-group half-offset-right">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p><a target="_blank" href="https://www.80percent.io/">百分之八十</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>深圳市百分之八十网络技术有限公司是你创业的技术合伙人，我们帮助客户敏捷实现产品从 0 到 1
                                              的打造，并且愿意在交付后持续提供服务。帮助客户把精力用在最有成效的地方，80% 的价值源自于 20%
                                              的决策行为。我们拥抱远程工作文化，推崇新技术和工具，追求极致的开发效率和持续高质量的交付产品，同时关注开发人员的工作生活平衡，我们相信的 80%
                                              的有效投入带来 120% 的产出。</p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="5" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div
                                  class="s-item-media-wrapper five columns offset-one s-right-in-row right s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 700px; max-height: 700px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="700" height="700"
                                                  src="./assets/FmT4GKuv6MWSviaQOyD6OAkBzSbn.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FmT4GKuv6MWSviaQOyD6OAkBzSbn.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-left-in-row right s-rva-text">
                                  <div class="s-item-text-group half-offset-right">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p><a target="_blank" href="https://pipihosting.com/">PIPI Hosting</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>PIPI Hosting
                                              专注于提供针对海外市场的短租数据分析技术和海外房产管理服务，目前在日本市场已经是占有率第一的短租房产管理公司。我们相信中国互联网的技术、团队，与运营能力出海发展的巨大潜力。
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="6" class="s-repeatable-item">
                            <div class="clearfix">
                              <div>
                                <div
                                  class="s-item-media-wrapper five columns offset-one s-right-in-row right s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 720px; max-height: 720px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 100%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="720" height="720"
                                                  src="./assets/Fn6cQHYH2JswLx7ZRTNJh6lSxqrj.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/Fn6cQHYH2JswLx7ZRTNJh6lSxqrj.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-left-in-row right s-rva-text">
                                  <div class="s-item-text-group half-offset-right">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p><a target="_blank" href="http://www.ceasia.cn/sonkwogame.html">杉果游戏</a>
                                              </p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>
                                              杉果游戏，诞生于专注电子游戏推广与运营的北京中电博亚科技有限公司。秉承公司精神，杉果游戏致力于创造中国最好的数字互动娱乐平台及游戏社群，为玩家呈现精彩游戏体验。
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="7" class="s-repeatable-item s-last-row">
                            <div class="clearfix">
                              <div>
                                <div
                                  class="s-item-media-wrapper five columns offset-one s-right-in-row right s-rva-media">
                                  <div class="s-item-media-group">
                                    <div class="s-component s-media ">
                                      <div>
                                        <div class="s-component-content">
                                          <div class="s-img-wrapper">
                                            <div class="s-ratio-box" style="max-width: 720px; max-height: 216px;">
                                              <div class="s-ratio-fill" style="padding-bottom: 30.13%;"></div>
                                              <div class="s-img-wrapper"><img alt="Section image" title=""
                                                  class="lazyload crop-default" data-description=""
                                                  data-image-link="javascript:void(0);" width="720" height="216"
                                                  src="./assets/FpiqKEmXqGZXWcT4-M2bXfneF-EC.png"
                                                  data-src="//user-assets.sxlcdn.com/images/27616/FpiqKEmXqGZXWcT4-M2bXfneF-EC.png?imageMogr2/strip/auto-orient/thumbnail/720x1440&gt;/quality/90!/format/png">
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <div class="nine columns s-left-in-row right s-rva-text">
                                  <div class="s-item-text-group half-offset-right">
                                    <div class="s-item-title">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-heading"
                                            style="white-space: pre-wrap;">
                                            <h3>
                                              <p><a target="_blank" href="http://www.yundianjia.com/">云深网络</a></p>
                                            </h3>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    <div class="s-item-subtitle">
                                      <div class="s-component s-text">
                                        <div class=""></div>
                                      </div>
                                    </div>
                                    <div class="s-item-text">
                                      <div class="s-component s-text">
                                        <div class="">
                                          <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                                            <p>从事移动电商、健康医疗、跨境出口和供应链金融自主研发创新的互联网公司。从2011年成立起一直在用Ruby On
                                              Rails技术快乐编程。主要产品有：“云店家”SAAS模式的精品电子商务平台，“微内”基于医疗硬件＋移动医疗服务的慢病管理APP，“越域网”集大数据选品、拣货分销和供应链协同系统于一体的跨境出口交易平台。
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="slide s-section-8 " id="section-f_96e73000-1363-494c-a2a4-13ea2bba0d7b">
                <div class="waypoint"></div>
                <div class="section-anchor" style="top: -67px;"></div>
                <div class="lazyload   s-icons-section s-section   background-image transition collapse-bottom-padding"
                  data-react-style="{}">
                  <div class="container">
                    <div class="columns sixteen">
                      <div class="s-title-group  ">
                        <div class="s-title  has-fresh-line">
                          <div class="s-component s-text">
                            <div class="">
                              <div class="s-component-content s-font-title" style="white-space: pre-wrap;">
                                <h2>
                                  <p>合作伙伴</p>
                                </h2>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="s-subtitle">
                          <div class="s-component s-text">
                            <div class=""></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="">
                      <div class="s-mh s-repeatable">
                        <div>
                          <div data-sorting-index="0"
                            class="four columns half-fixed no-float s-repeatable-item s-last-row">
                            <div class="s-item-media-group s-mhi" style="min-height: 142px;">
                              <div class="s-component s-image">
                                <div>
                                  <div class="s-component-content">
                                    <div class="s-img-wrapper s-mh-nudge" style="padding-top: 34px;"><a
                                        href="https://testerhome.com/" target="_blank" aria-label="image link">
                                        <div class="s-ratio-box" style="max-width: 480px; max-height: 150px;">
                                          <div class="s-ratio-fill" style="padding-bottom: 31.36%;"></div>
                                          <div class="s-img-wrapper"><img alt="Section image" title=""
                                              class="lazyload crop-default" data-description=""
                                              data-image-link="https://testerhome.com/" width="480" height="150"
                                              src="./assets/FhDfys4InmaVtPWmAL7xZHsPUHRy.png"
                                              data-src="//user-assets.sxlcdn.com/images/27616/FhDfys4InmaVtPWmAL7xZHsPUHRy.png?imageMogr2/strip/auto-orient/thumbnail/480x960&gt;/format/png">
                                          </div>
                                        </div>
                                      </a></div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="1"
                            class="four columns half-fixed no-float s-repeatable-item s-last-row">
                            <div class="s-item-media-group s-mhi" style="min-height: 142px;">
                              <div class="s-component s-image">
                                <div>
                                  <div class="s-component-content">
                                    <div class="s-img-wrapper s-mh-nudge" style="padding-top: 25px;"><a
                                        href="https://knewone.com/less" target="_blank" aria-label="image link">
                                        <div class="s-ratio-box" style="max-width: 460px; max-height: 180px;">
                                          <div class="s-ratio-fill" style="padding-bottom: 38.98%;"></div>
                                          <div class="s-img-wrapper"><img alt="Section image" title=""
                                              class="lazyload crop-default" data-description=""
                                              data-image-link="https://knewone.com/less" width="460" height="180"
                                              src="./assets/Frg6hBwff4w9A1TyPMHhJBBeQTtu.jpg"
                                              data-src="//user-assets.sxlcdn.com/images/27616/Frg6hBwff4w9A1TyPMHhJBBeQTtu.jpg?imageMogr2/strip/auto-orient/thumbnail/480x960&gt;/interlace/1/format/jpeg">
                                          </div>
                                        </div>
                                      </a></div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="2"
                            class="four columns half-fixed no-float s-repeatable-item s-last-row">
                            <div class="s-item-media-group s-mhi" style="min-height: 142px;">
                              <div class="s-component s-image">
                                <div>
                                  <div class="s-component-content">
                                    <div class="s-img-wrapper s-mh-nudge" style="padding-top: 25px;"><a
                                        href="http://consenlabs.com/" target="_blank" aria-label="image link">
                                        <div class="s-ratio-box" style="max-width: 460px; max-height: 180px;">
                                          <div class="s-ratio-fill" style="padding-bottom: 38.98%;"></div>
                                          <div class="s-img-wrapper"><img alt="Section image" title=""
                                              class="lazyload crop-default" data-description=""
                                              data-image-link="http://consenlabs.com/" width="460" height="180"
                                              src="./assets/FnPchwT0FPkg4uWoeCKbFjAsC3YQ.jpg"
                                              data-src="//user-assets.sxlcdn.com/images/27616/FnPchwT0FPkg4uWoeCKbFjAsC3YQ.jpg?imageMogr2/strip/auto-orient/thumbnail/480x960&gt;/quality/90!/interlace/1/format/jpeg">
                                          </div>
                                        </div>
                                      </a></div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div data-sorting-index="3"
                            class="four columns half-fixed no-float s-repeatable-item s-last-row">
                            <div class="s-item-media-group s-mhi" style="min-height: 142px;">
                              <div class="s-component s-image">
                                <div>
                                  <div class="s-component-content">
                                    <div class="s-img-wrapper"><a href="https://segmentfault.com/" target="_blank"
                                        aria-label="image link">
                                        <div class="s-ratio-box" style="max-width: 480px; max-height: 288px;">
                                          <div class="s-ratio-fill" style="padding-bottom: 60.17%;"></div>
                                          <div class="s-img-wrapper"><img alt="Section image" title=""
                                              class="lazyload crop-default" data-description=""
                                              data-image-link="https://segmentfault.com/" width="480" height="288"
                                              src="./assets/FtzzjHzhrMKCQRIAx_-hTkfRka8G.png"
                                              data-src="//user-assets.sxlcdn.com/images/27616/FtzzjHzhrMKCQRIAx_-hTkfRka8G.png?imageMogr2/strip/auto-orient/thumbnail/480x960&gt;/format/png">
                                          </div>
                                        </div>
                                      </a></div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="waypoint"></div>
              </li>
            </div>
          </ul>
        </div>
        <div class="navigation-buttons strikingly-fixed" style="bottom: 20px;"><span class="prev"></span><span
            class="next"></span></div>
        <div id="strikingly-tooltip-container"></div>
        <div id="s-footer-section-container">
          <div class="lazyload   s-footer-section s-section show-strikingly-logo   background-image transition"
            data-react-style="{}">
            <div class="container s-layout-vertical">
              <div class="columns sixteen ">
                <div>
                  <div class="waypoint"></div>
                </div>
                <div class="s-footer-text">
                  <div class="s-component s-text">
                    <div class="">
                      <div class="s-component-content s-font-body" style="white-space: pre-wrap;">
                        <p>Copyright 2016, <a target="_blank" href="https://ruby-china.org/">Ruby China</a>.</p>
                        <p>感谢历届的赞助商和参会者们！</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class=" s-component s-regulation-info">
                  <div class="s-component-editor-wrapper"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="s-footer-logo-wrapper" style="width: 100%;">
          <div class="s-component s-footer-logo " style="display: block; bottom: 0px; position: absolute;"><span><a
                class="logo-link logo-link-sxl animate-hide" target="_parent"
                href="https://www.sxl.cn/?ref=logo&amp;permalink=rubyconfchina2016&amp;custom_domain=2016.rubyconfchina.org&amp;utm_campaign=footer_pbs&amp;utm_content=http%3A%2F%2F2016.rubyconfchina.org%2F&amp;utm_medium=user_page&amp;utm_source=27616&amp;utm_term=pbs_a">
                Powered by Strikingly - Best website builder for the mobile age
              </a>
              <div class="logo-hover logo-hover-sxl"></div>
              <div class="s-footer-logo-tooltip">
                <div class="tooltip-container">
                  <div class="tooltip-white">
                    开始用上线了创建自己的网站
                  </div>
                </div>
              </div>
            </span></div>
        </div>
        <div id="ecommerce-drawer" class="s-category-drawer-wrapper"></div>
        <div id="blog-category-drawer" class="s-category-drawer-wrapper"></div>
        <div class="s-floated-components">
          <div></div>
          <div>
            <div id="s-ecommerce-shopping-cart-wrapper" class="s-ecommerce-shopping-cart-wrapper no-cart"></div>
            <div id="fixedContainer">
              <div id="fixedLoginContainer" class="fixed-login-container"></div>
              <div id="fixedMultiLangSwitcher" class="fixed-multi-lang-container"></div>
            </div>
          </div>
        </div>
        <div class="shipping-wrapper"></div>
        <div></div>
        <div class="social-thumbnail">
          <div id="lw-share-data" style="display: none;">
            <div class="lws-title">RubyConf China 2016</div>
            <div class="lws-description">RubyConf China 2016 官方网站</div>
            <div class="lws-image">
              http://user-assets.sxlcdn.com/images/27813/Fn4H125NIha2wkvsS6jMImTbf8JZ.png?imageMogr2/strip/thumbnail/1200x630&gt;
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="fb-root"></div>
  <div id="app-script-root"></div>
  <div id="app-view-root"></div>
  <div class="s-cookie-notification-bar" style="position: fixed; bottom: -1000px !important;">
    <div class="cookie-notification-title">Cookie的使用</div>
    <span class="cookie-notification-text">我们使用cookies来确保流畅的浏览体验。若继续，我们认为你接受使用cookies。</span>
    <div>
      <button>确认</button>
    </div>
    <a href="https://www.sxl.cn/s/sites/10852868/pages/cookie-policy" target="_blank">了解更多</a>
  </div>

  <script src="./assets/jquery.min.js" defer="defer"></script>
  <script>
    window.jQuery || document.write('<script src="https://static-assets.sxlcdn.com/jquery-f4e2137d267f77818d966e03df031337a38003039d43f15029422ddd171e14c4.js" defer="defer"><\/script>');
  </script>
  <script src="./assets/jquery-f4e2137d267f77818d966e03df031337a38003039d43f15029422ddd171e14c4.js"
    defer="defer"></script>

  <div id="s-support-widget-container"></div>
  <!-- CUSTOM_CODE_START -->
  <!-- CUSTOM_CODE_END -->

  <script>
    window.pingpp = {}
  </script>

  <script src="./assets/i18n-2ace11ac644d0b40fb8b7cb65e9dd1e553022750e0254118dacbe1fe50735e97.js"
    defer="defer"></script>
  <script src="./assets/site-dll.9333826922d2cecd5255.js" defer="defer"></script>
  <script src="./assets/page-site-bundle.992de283f5cf7573e2fa.js" defer="defer"></script>


</body>

</html>