@font-face {
	font-family: 'NEXONFootballGothicLA1';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXONFootballGothicLA1.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'NEXONFootballGothicBA1';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXONFootballGothicBA1.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'SokchoBadaDotum';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_1@1.0/SokchoBadaDotum.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'KOTRA_BOLD-Bold';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.1/KOTRA_BOLD-Bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}


@keyframes bounceIn {
	0%{opacity:0;transform:scale(0);}
	20%{opacity:1;}
	40%{transform:scale(1.15);}
	70%{transform:scale(.9);}
	100%{transform:scale(1);}
}
@keyframes slideDown {
	0%{transform:translateY(-50px);opacity:0;}
	20%{opacity:1;}
	40%{transform:translateY(5px);}
	70%{transform:translateY(-3px);}
	100%{transform:translateY(0);}
}
@keyframes slideUp {
	0%{transform:translateY(50px);opacity:0;}
	20%{opacity:1;}
	40%{transform:translateY(-3px);}
	70%{transform:translateY(5px);}
	100%{transform:translateY(0);}
}
@keyframes spinIn {
	0%{opacity:0;transform:rotate(180deg)scale(0);}
	20%{opacity:1;}
	40%{transform:rotate(360deg)scale(1.15);}
	70%{transform:rotate(360deg)scale(.9);}
	100%{transform:rotate(360deg)scale(1);}
}


a,button,label{cursor:pointer;}
td{vertical-align:middle;}
.text-left{text-align:left;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.container {
	margin: 0 auto;
	max-width: 960px;
}
@media (max-width: 1000px) {
	.container {
		padding: 0 16px;
	}
}


body {
	font-family: "Lato", "NEXONFootballGothicLA1", sans-serif;
	font-optical-sizing: auto;
	background-color: #fff;
}
body[data-page="home"] {
	background-color: #eff2f6;
}


.logo > a {
	display: grid;
	margin: 0 auto;
	max-width: 152px;
	max-height: 32px;
	width: 100%;
	height: 100%;
	align-items: center;
	font-family: "Protest Guerrilla", sans-serif;
	font-size: 24px;
	font-weight: normal;
	color: #26c6da;
	color: #fff;
	text-decoration: none;
}
.logo > a > span::before {
	margin-right: 4px;
	display: inline-block;
	font-family: "Font Awesome 6 Free";
	font-size: 16px;
	font-weight: 900;
	content: "\f1b2";
}
.navik-menu ul li > a {
	font-family: inherit;
	font-size: 16px;
}
.navik-menu ul ul li > a {
	font-size: 14px;
	font-style: normal;
}
.navik-header.header-dark.sticky {
	background-color: #ac905e;
}
.header-dark .navik-menu ul li > a {
	color: rgba(255,255,255,.6);
}
.header-dark .navik-menu ul li.current-menu > a,
.header-dark .navik-menu ul li:hover > a {
	color: rgba(255,255,255,1);
}
@media (min-width: 1200px) {
	.navik-header.header-opacity-on {
		background-color: rgba(0,0,0,0);
		border-bottom: 1px solid rgba(255,255,255,.125);
	}
	.header-dark .navik-menu ul li.dropdown_menu > a > span::before {
		border-color: rgba(255,255,255,.5);
		transition: all .2s ease-in-out;
	}
	.header-dark .navik-menu ul li.current-menu.dropdown_menu > a > span::before,
	.header-dark .navik-menu ul li.dropdown_menu:hover > a > span::before {
		border-color: rgba(255,255,255,.75);
	}
}


.superhero {
	padding: 32px 24px;
	overflow: hidden;
	margin-bottom: 24px;
	background-color: #3f3f3f;
	color: #fff;
}
.superhero > div {
	display: grid;
	align-items: center;
	padding: 24px 0;
}
.superhero .container {
	width: 100%;
}
.superhero .desc {
	text-align: center;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	font-optical-sizing: auto;
	font-size: 16px;
	color: rgba(255,255,255,.65);
	line-height: 1.75;
}
.superhero .desc h3 {
	font-size: 40px;
	font-weight: 300;
	color: rgba(255,255,255,.85);
}
.superhero .desc strong {
	font-weight: 700;
	color: rgba(255,255,255,1);
}
.superhero .desc span {
	display: inline-block;
}
.bounce_in_animation {
	text-align: left;
	display: inline-block;
	font-family: "KOTRA_BOLD-Bold", sans-serif;
	font-optical-sizing: auto;
	font-size: 20px;
}
@media (min-width: 1200px) {
	.superhero {
		padding: 90px 0 0 0;
	}
}


main > section {
	overflow: hidden;
}
main.home {
	display: grid;
	gap: 24px;
	align-items: start;
}
@media (min-width: 1000px) {
	main.home {
		grid-template-columns: 1fr 240px;
	}
	main.home > aside {
		position: sticky;
		top: 90px;
	}
}
main.sell {
	border-top: 1px solid #2d2d2d;
	display: grid;
	gap: 1px;
	background-color: #e5e5e5;
}
main.sell > aside {
	background-color: #fff;
	height: 100%;
}
main.sell > aside > div {
	position: sticky;
	top: 90px;
}
main.sell > aside > div > ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
main.sell > aside > div > ul > li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #e5e5e5;
}
main.sell > aside > div > ul > li > a {
	display: grid;
	padding: 16px;
	text-decoration: none;
	transition: all .25s ease;
	font-size: 16px;
	color: #222;
	grid-template-columns: 32px 1fr;
	gap: 16px;
	align-items: center;
}
main.sell > aside > div > ul > li > a > i {
	font-size: 20px;
	text-align: center;
}
main.sell > aside > div > ul > li > a:hover {
	background-color: #f6f6f6;
}
main.sell > aside > div > ul > li.current > a {
	background-color: #2d2d2d;
	color: #fff;
}
main.sell > section {
	padding: 32px 0;
	background-color: #fff;
	height: 100%;
}
main.sell > section > header {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: end;
}
main.sell > section > header > i {
	font-size: 48px;
}
main.sell > section > header > h3 {
	margin: 0;
	padding: 0;
	font-size: 24px;
	line-height: 1.6;
}
main.sell > section > h4 {
	margin: 40px 0 0 0;
	padding: 0;
	font-size: 16px;
	color: #222;
}
main.sell > section > ul {
	margin: 16px 0 0 0;
	padding: 0;
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2px;
}
main.sell > section > ul > li {
	background-color: #f6f6f6;
	padding: 16px 24px;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
main.sell > section > ul > li .item {
	font-size: 14px;
	color: #222;
}
main.sell > section > ul > li .price {
	text-align: right;
	font-size: 14px;
	color: #666;
}
main.sell > section > ul > li:nth-child(-n+2) {
	border-top: 1px solid #2d2d2d;
}
@media (min-width: 1000px) {
	main.sell {
		grid-template-columns: 240px 1fr;
		align-items: start;
	}
	main.sell > section {
		padding: 32px 0 32px 32px;
	}
}
main.price {
	display: grid;
	gap: 24px;
	align-items: start;
}
main.price > aside {
	font-size: 14px;
}
main.price > aside h4 {
	margin: 0 0 16px 0;
	padding: 0 0 16px 0;
	position: relative;
	font-family: "Lato", "NEXONFootballGothicBA1", sans-serif;
	color: rgba(51,51,51,1);
}
main.price > aside h4::after {
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	content: "";
	width: 16px;
	height: 1px;
	background-color: rgba(85,85,85,1);
	overflow: hidden;
}
main.price > aside ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
main.price > aside ul > li {
	margin: 0 0 8px 0;
	padding: 0;
}
main.price > aside ul > li > a {
	position: relative;
	display: block;
	padding: 3px 0;
	font-size: 15px;
	color: rgba(0,0,0,.5);
	text-decoration: none;
	transition: all .25s;
}
main.price > aside ul > li > a:hover {
	color: #7f5b15;
	padding-left: 16px;
}
main.price > aside ul > li > a:hover::before {
	display: grid;
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 100%;
	align-items: center;
	font-family: "Font Awesome 6 Free";
	font-size: 10px;
	font-weight: 900;
	content: "\f068";
	transition: opacity .25s;
}
main.price > aside ul > li.current > a {
	color: #7f5b15;
	padding-left: 0;
}
main.price > aside ul > li.current > a::before {
	display: grid;
	position: absolute;
	top: 0;
	left: -16px;
	width: 16px;
	height: 100%;
	align-items: center;
	font-family: "Font Awesome 6 Free";
	font-size: 10px;
	font-weight: 900;
	content: "\f061";
}
main.price > aside ul > li.current > a {
	color: #7f5b15;
}
main.price > aside dl {
	margin: 1em 0 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1em;
	color: rgba(51,51,51,1);
}
main.price > aside dl > dt {
	text-align: left;
}
main.price > aside dl > dd {
	text-align: left;
}
@media (min-width: 1000px) {
	main.price {
		grid-template-columns: 1fr 240px;
	}
	main.price > aside {
		position: sticky;
		top: 90px;
	}
}
main.gb {
	font-size: 14px;
}


section.splide {
	background-color: #e2e8f0;
	margin: 48px 0 0 0;
	padding: 32px 0;
}
li.splide__slide {
	height: 128px;
}
li.splide__slide > figure {
	margin: 0;
	padding: 0;
}
li.splide__slide > figure > img {
	display: block;
	max-height: 128px;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(17,24,39,.09);
	background-color: #fff;
}


body > footer {
	background-color: #fff;
	margin: 0;
	padding: 48px 0;
}
body > footer h4 {
	font-size: 16px;
}
body > footer dl {
	margin: 16px 0 0 0;
	padding: 0;
	font-family: "Lato", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	font-optical-sizing: auto;
	font-size: 14px;
	line-height: 1.6;
}
body > footer dl > dt {
	display: inline;
}
body > footer dl > dt:not(:first-child)::before {
	content: "\a";
	white-space: pre;
}
body > footer dl > dt::after {
	margin: 0 4px;
	display: inline;
	content: ":";
}
body > footer dl > dd {
	display: inline;
}
@media (min-width: 1000px) {
	body > footer dl > dt:not(:first-child)::before {
		margin: 0 8px;
		display: inline;
		content: "|";
		opacity: .25;
	}
}


div.sheet {
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.09);
	border-radius: 4px;
}
div.sheet > div.cover > figure {
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	height: 240px;
	border-radius: 4px 4px 0 0;
}
div.sheet > div.cover > figure > img {
	display: block;
	max-width: 100%;
	object-fit: cover;
	border-radius: 4px 4px 0 0;
	margin-top: -10%;
}
div.sheet > div.cover > figure > figcaption {
	position: absolute;
	right: 1em;
	bottom: 1em;
	z-index: 1;
	display: block;
	background-color: rgba(255,255,255,.35);
	font-family: "Lato", sans-serif;
	font-size: 12px;
	color: #000;
	padding: 8px 12px;
	border-radius: 3px;
}
div.sheet > div.cover > figure > figcaption > a {
	color: #000;
	text-decoration: none;
}
div.sheet > div.head {
	padding: 24px 16px 0 20px;
}
div.sheet > div.head h4 {
	font-family: "Lato", "NEXONFootballGothicLA1", sans-serif;
	font-optical-sizing: auto;
	font-size: 16px;
	color: #14191e;
}
div.sheet > div.body {
	padding: 16px;
}


.dtl > ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	border-top: 1px solid rgba(0,0,0,.75);
}
.dtl > ul > li {
	margin: 0;
	padding: .75em 1em;
	display: grid;
	align-items: center;
	row-gap: 1em;
	grid-template-columns: 1fr auto;
	font-size: 14px;
	color: #5f6368;
}
.dtl > ul > li.head {
	display: grid;
	padding: 1em;
	font-size: 14px;
	border-bottom: 1px dashed rgba(0,0,0,.075);
}
.dtl > ul > li > .price {
	display: grid;
	grid-template-columns: minmax(80px,1fr) minmax(80px,1fr) minmax(80px,1fr);
}
.dtl > ul > li:not(.head):nth-child(odd) {
	background-color: rgba(0,0,0,.075);
}
.dtl > ul > li .face,
.dtl > ul > li .sell,
.dtl > ul > li .buy {
	text-align: right;
}
@media (max-width: 767px) {
	.dtl > ul > li {
		grid-template-columns: 1fr;
		padding: 0;
		font-size: 16px;
		row-gap: 0;
	}
	.dtl > ul > li.head {
		display: none;
	}
	.dtl > ul > li:not(.head) .name {
		display: block;
		background-color: #ac905e;
		color: #fff;
		padding: 8px 12px;
	}
	.dtl > ul > li:not(.head) .price {
		padding: 1em;
	}
	.dtl > ul > li:not(.head) .face::before,
	.dtl > ul > li:not(.head) .sell::before,
	.dtl > ul > li:not(.head) .buy::before {
		display: block;
		font-size: 11px;
		opacity: .5;
		margin-bottom: 4px;
	}
	.dtl > ul > li:not(.head) .face::before{content:"액면가";}
	.dtl > ul > li:not(.head) .sell::before{content:"고객판매가";}
	.dtl > ul > li:not(.head) .buy::before{content:"고객구매가";}
	.dtl > ul > li .face,
	.dtl > ul > li .sell,
	.dtl > ul > li .buy {
		text-align: left;
	}
}

.tags > ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	flex-wrap: wrap;
	display: flex;
	gap: 8px;
}
.tags > ul > li {
	margin: 0;
	padding: 0;
	display: inline-block;
}
.tags > ul > li > a {
	text-decoration: none;
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid #eef0f2;
	border-radius: 3px;
	font-size: 14px;
	color: #676a79;
	transition: all .3s ease-in-out;
}
.tags > ul > li > a:hover {
	background-color: #e1e4e6;
	border: 1px solid #e1e4e6;
	color: #14191e;
}


.display > ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
@media (min-width: 768px) {
	.display > ul {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}
@media (min-width: 1000px) {
	.display > ul {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
}
.display > ul > li {
	margin: 0 0 72px 0;
	padding: 0;
	font-family: "Lato", "Pretendard Variable", sans-serif;
	font-optical-sizing: auto;
}
.display > ul > li > * {
	display: block;
	text-decoration: none;
}
.display > ul > li > * > .image {
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
}
.display > ul > li > * > .image::after {
	content: "";
	display: block;
	padding-bottom: 100%;
}
.display > ul > li > * > .image > figure {
	display: grid;
	position: absolute;
	width: 100%;
	height: 100%;
	align-items: center;
	text-align: center;
}
.display > ul > li > * > .image > figure > img {
	display: block;
	max-width: 100%;
}
.display > ul > li > * > .subtitle {
	margin-top: 32px;
	padding: 0 8px;
	font-size: 14px;
	color: #8b714c;
}
.display > ul > li > * > .title {
	margin: 16px 0 0 0;
	padding: 0 8px;
	font-size: 18px;
	font-weight: 400;
	color: #222;
}
.display > ul > li > * > ul.items {
	margin: 16px 0 0 0;
	padding: 0 8px;
	font-size: 14px;
	font-weight: 400;
	color: #888;
}
.display > ul > li > * > ul.items > li {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}
.display > ul > li > * > ul.items > li:not(:first-child) {
	margin-top: 8px;
}
.display > ul > li > * > ul.items > li .item {
	text-align: left;
}
.display > ul > li > * > ul.items > li .price {
	color: #555;
	text-align: right;
}
.display > ul > li > * > ul.items > li .price::after {
	margin-left: 3px;
	content: "원";
	color: #888;
}