@import url(../../earlyaccess/notosanskr.css);
@import url('../../css%3Ffamily=Black+Han+Sans:400.css');
@import url('../../css%3Ffamily=Black+Han+Sans&display=swap&subset=korean.css');
@font-face {
  font-family: 'GmarketSans';
  src: url('../../gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'GmarketSans';
  src: url('../../gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'GmarketSans';
  src: url('../../gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

.ft-f0 { font-family: 'Noto Sans KR'; }
.ft-f1 { font-family: 'Black Han Sans'; }
.ft-f2 { font-family: 'GmarketSans'; }

ul { list-style: none; }
a { color: inherit; text-decoration: none; }
* { box-sizing: border-box; word-break: keep-all; word-wrap: normal; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 400;
  line-height: 1.4;
}
.ft-mi { 
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  /*display: inline-block;*/
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga'; 
}
.ft-mio { 
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  /*display: inline-block;*/
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga'; 
}
.ft-mit { 
  font-family: 'Material Icons Two Tone';
  font-weight: normal;
  font-style: normal;
  /*display: inline-block;*/
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga'; 
}

.ft-lnr-bf::before,
.ft-lnr-af::after {
  font-family: Linearicons-Free;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ft-xi {
  font-family: xeicon;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
}
.ft-xi-bf::before,
.ft-xi-af::after {
  font-family: xeicon;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
}


::selection {
  background: #eee;
  color: #efbd00;
  text-shadow: none;
}
::-moz-selection {
  background: #eee;
  color: #efbd00;
  text-shadow: none;
}
::-webkit-selection {
  background: #eee;
  color: #efbd00;
  text-shadow: none;
}

::-webkit-scrollbar { width: 10px; height: 6px; }
::-webkit-scrollbar-thumb { background-color: #000; }

.ft-rd { color: #ff0000; }
.ft-bl { color: rgb(0, 0, 255); }
.ft-wh, .ft-hover-wrap:hover .ft-wh-hover, .ft-wh-hover:hover, .hover-wrap:hover .ft-wh-hover, .selected.ft-wh-sel, .ft-sel-wrap.selected .ft-wh-sel 
{ color: #fff; }
.ft-bk, .ft-hover-wrap:hover .ft-bk-hover, .ft-bk-hover:hover, .hover-wrap:hover .ft-bk-hover, .selected.ft-bk-sel, .ft-sel-wrap.selected .ft-bk-sel 
{ color: #000; }
.ft-bk0, .ft-hover-wrap:hover .ft-bk0-hover, .ft-bk0-hover:hover, .hover-wrap:hover .ft-bk0-hover, .selected.ft-bk0-sel, .ft-sel-wrap.selected .ft-bk0-sel 
{ color: #242224; }
.ft-lg, .ft-hover-wrap:hover .ft-lg-hover, .ft-lg-hover:hover, .hover-wrap:hover .ft-lg-hover, .selected.ft-lg-sel, .ft-sel-wrap.selected .ft-lg-sel 
{ color: #f1f1f1; }
.ft-lg0, .ft-hover-wrap:hover .ft-lg0-hover, .ft-lg0-hover:hover, .hover-wrap:hover .ft-lg0-hover, .selected.ft-lg0-sel, .ft-sel-wrap.selected .ft-lg0-sel 
{ color: #f7f6f1; }
.ft-gr, .ft-hover-wrap:hover .ft-gr-hover, .ft-gr-hover:hover, .hover-wrap:hover .ft-gr-hover, .selected.ft-gr-sel, .ft-sel-wrap.selected .ft-gr-sel 
{ color: #ddd; }
.ft-gr0, .ft-hover-wrap:hover .ft-gr0-hover, .ft-gr0-hover:hover, .hover-wrap:hover .ft-gr0-hover, .selected.ft-gr0-sel, .ft-sel-wrap.selected .ft-gr0-sel 
{ color: #ccc; }
.ft-gr1, .ft-hover-wrap:hover .ft-gr1-hover, .ft-gr1-hover:hover, .hover-wrap:hover .ft-gr1-hover, .selected.ft-gr1-sel, .ft-sel-wrap.selected .ft-gr1-sel 
{ color: #b2b2b2; }
.ft-gr2, .ft-hover-wrap:hover .ft-gr2-hover, .ft-gr2-hover:hover, .hover-wrap:hover .ft-gr2-hover, .selected.ft-gr2-sel, .ft-sel-wrap.selected .ft-gr2-sel 
{ color: #9c9c9c; }
.ft-gr3, .ft-hover-wrap:hover .ft-gr3-hover, .ft-gr3-hover:hover, .hover-wrap:hover .ft-gr3-hover, .selected.ft-gr3-sel, .ft-sel-wrap.selected .ft-gr3-sel 
{ color: #808080; }
.ft-gr4, .ft-hover-wrap:hover .ft-gr4-hover, .ft-gr4-hover:hover, .hover-wrap:hover .ft-gr4-hover, .selected.ft-gr4-sel, .ft-sel-wrap.selected .ft-gr4-sel 
{ color: #525252; }

.bg-clr-wh, .bg-clr-wh-hover:hover, .bg-hover-wrap:hover .bg-clr-wh-hover, .bg-clr-wh-bf::before, .bg-clr-wh-af::after, .bg-clr-wh-sel.selected, .bg-clr-wrap.selected .bg-clr-wh-sel 
{ background-color: #fff; }
.bg-clr-bk, .bg-clr-bk-hover:hover, .bg-hover-wrap:hover .bg-clr-bk-hover, .bg-clr-bk-bf::before, .bg-clr-bk-af::after, .bg-clr-bk-sel.selected, .bg-clr-wrap.selected .bg-clr-bk-sel 
{ background-color: #000; }
.bg-clr-bk0, .bg-clr-bk0-hover:hover, .bg-hover-wrap:hover .bg-clr-bk0-hover, .bg-clr-bk0-bf::before, .bg-clr-bk0-af::after, .bg-clr-bk0-sel.selected, .bg-clr-wrap.selected .bg-clr-bk0-sel 
{ background-color: #242224; }
.bg-clr-lg, .bg-clr-lg-hover:hover, .bg-clr-lg-bf::before, .bg-clr-lg-af::after, .bg-clr-lg-sel.selected, .bg-clr-wrap.selected .bg-clr-lg-sel 
{ background-color: #f1f1f1; }
.bg-clr-lg0, .bg-clr-lg0-hover:hover, .bg-clr-lg0-bf::before, .bg-clr-lg0-af::after, .bg-clr-lg0-sel.selected, .bg-clr-wrap.selected .bg-clr-lg0-sel 
{ background-color: #f7f6f1; }
.bg-clr-gr, .bg-clr-gr-hover:hover, .bg-clr-gr-bf::before, .bg-clr-gr-af::after, .bg-clr-gr-sel.selected, .bg-clr-wrap.selected .bg-clr-gr-sel 
{ background-color: #ddd; }
.bg-clr-gr0, .bg-clr-gr0-hover:hover, .bg-clr-gr0-bf::before, .bg-clr-gr0-af::after, .bg-clr-gr0-sel.selected, .bg-clr-wrap.selected .bg-clr-gr0-sel 
{ background-color: #ccc; }
.bg-clr-gr1, .bg-clr-gr1-hover:hover, .bg-clr-gr1-bf::before, .bg-clr-gr1-af::after, .bg-clr-gr1-sel.selected, .bg-clr-wrap.selected .bg-clr-gr1-sel 
{ background-color: #b2b2b2; }
.bg-clr-gr2, .bg-clr-gr2-hover:hover, .bg-clr-gr2-bf::before, .bg-clr-gr2-af::after, .bg-clr-gr2-sel.selected, .bg-clr-wrap.selected .bg-clr-gr2-sel 
{ background-color: #9c9c9c; }
.bg-clr-dg, .bg-clr-dg-hover:hover, .bg-clr-dg-bf::before, .bg-clr-dg-af::after, .bg-clr-dg-sel.selected, .bg-clr-wrap.selected .bg-clr-dg-sel 
{ background-color: #676767; }

.svg-rd svg, .svg-rd { stroke: #ff0000; }
.svg-wh svg, .svg-wh { stroke: #fff; }
.svg-bk svg, .svg-bk { stroke: #000; }
.svg-frd svg, .svg-frd { fill: #ff0000; }
.svg-fwh svg, .svg-fwh { fill: #fff; }
.svg-fbk svg, .svg-fbk { fill: #000; }
.svg-flg svg, .svg-flg, .hover-wrap:hover .svg-flg-hover { fill: #f1f1f1; }
.svg-fgr svg, .svg-fgr, .hover-wrap:hover .svg-fgr-hover { fill: #ddd; }
.svg-fdg svg, .svg-fdg, .hover-wrap:hover .svg-fdg-hover { fill: rgb(122, 122, 122); }



.ft-c0, .ft-hover-wrap:hover .ft-c0-hover, .ft-c0-hover:hover, .hover-wrap:hover .ft-c0-hover, .selected.ft-c0-sel, .ft-sel-wrap.selected .ft-c0-sel 
{ color: #af0014; }
.ft-c1, .ft-hover-wrap:hover .ft-c1-hover, .ft-c1-hover:hover, .hover-wrap:hover .ft-c1-hover, .selected.ft-c1-sel, .ft-sel-wrap.selected .ft-c1-sel 
{ color: #e8d3b0; }
.ft-c2, .ft-hover-wrap:hover .ft-c2-hover, .ft-c2-hover:hover, .hover-wrap:hover .ft-c2-hover, .selected.ft-c2-sel, .ft-sel-wrap.selected .ft-c2-sel 
{ color: #34bcdf; }
.ft-c3, .ft-hover-wrap:hover .ft-c3-hover, .ft-c3-hover:hover, .hover-wrap:hover .ft-c3-hover, .selected.ft-c3-sel, .ft-sel-wrap.selected .ft-c3-sel 
{ color: #fdd130; }
.ft-c4, .ft-hover-wrap:hover .ft-c4-hover, .ft-c4-hover:hover, .hover-wrap:hover .ft-c4-hover, .selected.ft-c4-sel, .ft-sel-wrap.selected .ft-c4-sel 
{ color: #fff7d9; }
.ft-c5, .ft-hover-wrap:hover .ft-c5-hover, .ft-c5-hover:hover, .hover-wrap:hover .ft-c5-hover, .selected.ft-c5-sel, .ft-sel-wrap.selected .ft-c5-sel 
{ color: #ff7d27; }
.ft-c6, .ft-hover-wrap:hover .ft-c6-hover, .ft-c6-hover:hover, .hover-wrap:hover .ft-c6-hover, .selected.ft-c6-sel, .ft-sel-wrap.selected .ft-c6-sel 
{ color: #7e63f7; }
.ft-c7, .ft-hover-wrap:hover .ft-c7-hover, .ft-c7-hover:hover, .hover-wrap:hover .ft-c7-hover, .selected.ft-c7-sel, .ft-sel-wrap.selected .ft-c7-sel 
{ color: #6600e4; }
.ft-c8, .ft-hover-wrap:hover .ft-c8-hover, .ft-c8-hover:hover, .hover-wrap:hover .ft-c8-hover, .selected.ft-c8-sel, .ft-sel-wrap.selected .ft-c8-sel 
{ color: #c80000; }
.ft-c9, .ft-hover-wrap:hover .ft-c9-hover, .ft-c9-hover:hover, .hover-wrap:hover .ft-c9-hover, .selected.ft-c9-sel, .ft-sel-wrap.selected .ft-c9-sel 
{ color: #244dc2; }




.bg-clr-0, .bg-clr-0-hover:hover, .bg-hover-wrap:hover .bg-clr-0-hover, .bg-clr-0-bf::before, .bg-clr-0-af::after, .bg-clr-0-sel.selected, .bg-clr-wrap.selected .bg-clr-0-sel 
{ background-color: #af0014; }
.bg-clr-1, .bg-clr-1-hover:hover, .bg-hover-wrap:hover .bg-clr-1-hover, .bg-clr-1-bf::before, .bg-clr-1-af::after, .bg-clr-1-sel.selected, .bg-clr-wrap.selected .bg-clr-1-sel 
{ background-color: #e8d3b0; }
.bg-clr-2, .bg-clr-2-hover:hover, .bg-hover-wrap:hover .bg-clr-2-hover, .bg-clr-2-bf::before, .bg-clr-2-af::after, .bg-clr-2-sel.selected, .bg-clr-wrap.selected .bg-clr-2-sel 
{ background-color: #34bcdf; }
.bg-clr-3, .bg-clr-3-hover:hover, .bg-hover-wrap:hover .bg-clr-3-hover, .bg-clr-3-bf::before, .bg-clr-3-af::after, .bg-clr-3-sel.selected, .bg-clr-wrap.selected .bg-clr-3-sel 
{ background-color: #fdd130; }
.bg-clr-4, .bg-clr-4-hover:hover, .bg-hover-wrap:hover .bg-clr-4-hover, .bg-clr-4-bf::before, .bg-clr-4-af::after, .bg-clr-4-sel.selected, .bg-clr-wrap.selected .bg-clr-4-sel 
{ background-color: #fff7d9; }
.bg-clr-5, .bg-clr-5-hover:hover, .bg-hover-wrap:hover .bg-clr-5-hover, .bg-clr-5-bf::before, .bg-clr-5-af::after, .bg-clr-5-sel.selected, .bg-clr-wrap.selected .bg-clr-5-sel 
{ background-color: #ff7d27; }
.bg-clr-6, .bg-clr-6-hover:hover, .bg-hover-wrap:hover .bg-clr-6-hover, .bg-clr-6-bf::before, .bg-clr-6-af::after, .bg-clr-6-sel.selected, .bg-clr-wrap.selected .bg-clr-6-sel 
{ background-color: #7e63f7; }
.bg-clr-7, .bg-clr-7-hover:hover, .bg-hover-wrap:hover .bg-clr-7-hover, .bg-clr-7-bf::before, .bg-clr-7-af::after, .bg-clr-7-sel.selected, .bg-clr-wrap.selected .bg-clr-7-sel 
{ background-color: #6600e4; }
.bg-clr-8, .bg-clr-8-hover:hover, .bg-hover-wrap:hover .bg-clr-8-hover, .bg-clr-8-bf::before, .bg-clr-8-af::after, .bg-clr-8-sel.selected, .bg-clr-wrap.selected .bg-clr-8-sel 
{ background-color: #c80000; }
.bg-clr-9, .bg-clr-9-hover:hover, .bg-hover-wrap:hover .bg-clr-9-hover, .bg-clr-9-bf::before, .bg-clr-9-af::after, .bg-clr-9-sel.selected, .bg-clr-wrap.selected .bg-clr-9-sel 
{ background-color: #244dc2; }

.svg-c0 svg, .svg-c0 { stroke: #af0014; }
.svg-c1 svg, .svg-c1 { stroke: #e8d3b0; }
.svg-c2 svg, .svg-c2 { stroke: #34bcdf; }
.svg-c3 svg, .svg-c3 { stroke: #fdd130; }
.svg-c4 svg, .svg-c4 { stroke: #fff7d9; }
.svg-c5 svg, .svg-c5 { stroke: #ff7d27; }
.svg-c6 svg, .svg-c6 { stroke: #7e63f7; }
.svg-c7 svg, .svg-c7 { stroke: #6600e4; }
.svg-c8 svg, .svg-c8 { stroke: #c80000; }
.svg-c9 svg, .svg-c9 { stroke: #244dc2; }

.svg-f0 svg, .svg-f0, .hover-wrap:hover .svg-f0-hover { fill: #af0014; }
.svg-f1 svg, .svg-f1, .hover-wrap:hover .svg-f1-hover { fill: #e8d3b0; }
.svg-f2 svg, .svg-f2, .hover-wrap:hover .svg-f2-hover { fill: #34bcdf; }
.svg-f3 svg, .svg-f3, .hover-wrap:hover .svg-f3-hover { fill: #fdd130; }
.svg-f4 svg, .svg-f4, .hover-wrap:hover .svg-f4-hover { fill: #fff7d9; }
.svg-f5 svg, .svg-f5, .hover-wrap:hover .svg-f5-hover { fill: #ff7d27; }
.svg-f6 svg, .svg-f6, .hover-wrap:hover .svg-f6-hover { fill: #7e63f7; }
.svg-f7 svg, .svg-f7, .hover-wrap:hover .svg-f7-hover { fill: #6600e4; }
.svg-f8 svg, .svg-f8, .hover-wrap:hover .svg-f8-hover { fill: #c80000; }
.svg-f9 svg, .svg-f9, .hover-wrap:hover .svg-f9-hover { fill: #244dc2; }

.bd-c4 { border: 1px solid #fff7d9; }
.bd-tp-c4 { border-top: 1px solid #fff7d9; }


.bg-cover::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.bg-cover.bg-c1::before { background-color: rgba(101,101,101, 0.2); }
.bg-cover.bg-c2::before { background-color: rgba(0,0,0, 0.5); }
.bg-cover.bg-c22::before { background-color: rgba(0,0,0, 0.2); }
.bg-cover.bg-wh::before { background-color: rgba(255,255,255, 0.6); }
.bg-cover.bg-wh4::before { background-color: rgba(255,255,255, 0.4); }
.bg-clr-3-op4 { background-color: rgba(217, 217, 227,.6); }
.bg-clr-2-op4 { background-color: rgba(152, 152, 184,.6); }
.bg-clr-wh-op4 { background-color: rgba(255,255,255,.7); }
.bg-clr-bk-op4 { background-color: rgba(0,0,0,.4); }


html {
	height: 100%;
}
body {
	font-size: 14px;
	width: 100%;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.hidden {
	overflow-y: hidden;
}
#container {
  z-index: 1;
  position: relative;
  width: 100%;
}
.container { max-width: none;}
#wrapper {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.jhc-loading-area {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 40px;
  text-align: center;
}
.jhc-loading-svg {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-image: url('https://www.audreypet.com/static/img/icon/hexa.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /*animation: loading-svg-spin 1s infinite linear;*/
}
@media all and (-ms-high-contrast:none) {
 .jhc-loading-svg { background-image: url('https://www.audreypet.com/static/img/icon/loading.svg'); animation: loading-svg-spin 1s infinite linear; } /* IE10 */
 *::-ms-backdrop, .jhc-loading-svg { background-image: url('https://www.audreypet.com/static/img/icon/loading.svg'); animation: loading-svg-spin 1s infinite linear; } /* IE11 */
}
@keyframes loading-svg-spin {
  100% {
    transform: rotate(360deg);
  }
}

#page-404-container {
	position: relative;
	width: 100%;
	height: 100vh;
}
#page-404-container .page {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
#page-404-container .page .status {
	font-family: sans-serif;
	font-size: 40vw;
	font-weight: 900;
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: .1;
	transform: translate(-50%, -50%);
}
#page-404-container .page .title {
	font-size: 4vw;
	font-weight: 900;
	position: relative;
	max-width: 600px;
	text-align: center;
}
#page-404-container .page .btn {
	display: block;
	color: #fff;
	position: relative;
	margin-top: 20px;
	padding: 20px 40px;
	background-color: #d62323;
}