@media (hover: hover) and (pointer: fine) {
	.cursor .inner {
		width: 180px;
		height: 180px;
		background: rgba(255, 255, 255, 0.2);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		margin: -50% -50%;
		opacity: 0;
		transition: width 0.2s cubic-bezier(0.25, 1, 0.5, 1), height 0.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1);
		backdrop-filter: blur(2.5px);
	}

	.cursor.on {
		opacity: 1;
	}

	.cursor.on .inner {
		opacity: 1;
		z-index: 2;
	}
}

.cursor {
	opacity: 0;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2;
	pointer-events: none;
}

.cursor .inner {
	position: relative;
}

.cursor .flex-box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 20px;
}

.cursor .flex-box * {
	color: var(--color-white);
	opacity: 0.5;
}

.cursor .flex-box span {
	font-weight: 700;
}

hr,
figure {
	padding: 0;
	margin: 0;
}

pre {
	white-space: pre-wrap;
}

textarea {
	resize: none;
}

hr {
	border: none;
	margin: 0;
}

#wrap {
	width: 100%;
	max-width: 100%;
	font-size: 1.6rem;
	position: relative;
	opacity: 0;
	overflow: hidden;
}
#wrap.show {
	opacity: 1;
}

.w1760 {
	max-width: 1760px;
	margin: 0 auto;
	width: 100%;
	height: 100%;
}

.w1600 {
	max-width: 1600px;
	margin: 0 auto;
	width: 100%;
	height: 100%;
}

.tab-contents>div {
	position: absolute;
	top: -222222px;
	left: -222222px;
}

.tab-contents>div.on {
	position: relative;
	top: auto;
	left: auto;
}

.ani {
	transition: all 1s;
}

.ani.down {
	transform: translateY(-80px);
}

.ani.up {
	transform: translateY(80px);
}

.ani.left {
	transform: translateX(80px);
}

.ani.right {
	transform: translateX(-80px);
}

.ani.opacity {
	opacity: 0;
}

.ani.clip-left {
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.ani.clip-right {
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.ani.on.down,
.ani.on.up {
	transform: translateY(0);
}

.ani.on.left,
.ani.on.right {
	transform: translateX(0);
}

.ani.on.opacity {
	opacity: 1;
}

.ani.on.clip-left,
.ani.on.clip-right {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

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

	30% {
		transform: translateY(-60px);
	}

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

.ani-text span {
	display: inline-block;
	opacity: 0;
}

.ani-text.on span {
	animation: aniText 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
}

.ani-text.on span:nth-child(1) {
	animation-delay: 0.04s;
}

.ani-text.on span:nth-child(2) {
	animation-delay: 0.08s;
}

.ani-text.on span:nth-child(3) {
	animation-delay: 0.12s;
}

.ani-text.on span:nth-child(4) {
	animation-delay: 0.16s;
}

.ani-text.on span:nth-child(5) {
	animation-delay: 0.2s;
}

.ani-text.on span:nth-child(6) {
	animation-delay: 0.24s;
}

.ani-text.on span:nth-child(7) {
	animation-delay: 0.28s;
}

.ani-text.on span:nth-child(8) {
	animation-delay: 0.32s;
}

.ani-text.on span:nth-child(9) {
	animation-delay: 0.36s;
}

.ani-text.on span:nth-child(10) {
	animation-delay: 0.4s;
}

.ani-text.on span:nth-child(11) {
	animation-delay: 0.44s;
}

.ani-text.on span:nth-child(12) {
	animation-delay: 0.48s;
}

.ani-text.on span:nth-child(13) {
	animation-delay: 0.52s;
}

.ani-text.on span:nth-child(14) {
	animation-delay: 0.56s;
}

.ani-text.on span:nth-child(15) {
	animation-delay: 0.6s;
}

.ani-text.on span:nth-child(16) {
	animation-delay: 0.64s;
}

.ani-text.on span:nth-child(17) {
	animation-delay: 0.68s;
}

.ani-text.on span:nth-child(18) {
	animation-delay: 0.72s;
}

.ani-text.on span:nth-child(19) {
	animation-delay: 0.76s;
}

.ani-text.on span:nth-child(20) {
	animation-delay: 0.8s;
}

.has-scroll-smooth {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.scroller {
	width: 100%;
	max-width: 100%;
	position: relative;
	overflow-x: hidden;
}

.scroller::-webkit-scrollbar {
	width: 0;
}

.radius-item {
	display: block;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hover-item {
	position: relative;
	overflow: hidden;
}

.hover-item .hover-bg {
	display: block;
	width: 0;
	height: 0;
	border-radius: 50%;
	position: absolute;
	z-index: -1;
	transform: translate(-50%, -50%);
	transition: all 0.6s;
}

.more-hover:hover .more::before,
.more-hover:focus-visible .more::before {
	opacity: 0;
	transform: translateY(100%);
	transition: all 0.4s;
}

.more-hover:hover .more em span,
.more-hover:focus-visible .more em span {
	transform: rotateX(0);
	transition: all 0.4s;
}

.more-hover:hover .more em span:nth-child(1),
.more-hover:focus-visible .more em span:nth-child(1) {
	transition-delay: 0.2s;
}

.more-hover:hover .more em span:nth-child(2),
.more-hover:focus-visible .more em span:nth-child(2) {
	transition-delay: 0.4s;
}

.more-hover:hover .more em span:nth-child(3),
.more-hover:focus-visible .more em span:nth-child(3) {
	transition-delay: 0.6s;
}

.more-hover:hover .more em span:nth-child(4),
.more-hover:focus-visible .more em span:nth-child(5) {
	transition-delay: 0.8s;
}

.more {
	font-size: 1.8rem;
	font-weight: 700;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	column-gap: 10px;
}

.more::before {
	content: attr(data-text);
	transform: translateY(-0.1rem);
	transition: all 0s;
}

.more em {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.more em span {
	display: inline-block;
	transform: rotateX(90deg);
	transform-origin: bottom;
	transition: all 0s;
}

.more .plus {
	width: 10px;
	height: 10px;
	position: relative;
}

.more .plus span {
	display: block;
	background: var(--color-white);
	transition: all 0.4s;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.more .plus span:first-child {
	width: 10px;
	height: 2px;
}

.more .plus span:last-child {
	width: 2px;
	height: 10px;
}

header {
	width: 100%;
	height: 80px;
	background: transparent;
	z-index: 100;
	transition: all 0.4s;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

header .header-box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

header .header-box>*:not(nav) {
	flex-shrink: 0;
}

header .logo {
	margin-top: -8px;
	width: 160px;
	height: 48px;
}

header .logo a {
	display: block;
	width: 100%;
	height: 100%;
}

header a {
	color: var(--color-white);
	line-height: 1.3;
	transition: all 0.4s;
}

header .gnb-bg {
	width: 100%;
	height: 0;
	background: var(--color-white);
	opacity: 0;
	z-index: -1;
	transition: all 0.4s;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
header.snb-on .gnb-bg {
	display: none;
}

header .gnb-bg::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: #e5e5e5;
	transition: all 0.4s;
	z-index: -1;
	position: absolute;
	top: 80px;
	left: auto;
	right: 0;
}

header nav,
header .depth1,
header .depth1>li,
header .depth1>li>a {
	height: 100%;
}

header nav {
	margin: 0 auto;
	position: relative;
	transition: all 0.4s;
}

header nav::before {
	content: "";
	width: 100%;
	height: 0;
	background-size: calc(16.6666666667% - 0.1666666667px) 100%;
	background-image: linear-gradient(to right, #e5e5e5 1px, transparent 0px, transparent calc(100% - 1px));
	transition: all 0.4s;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}
header.snb-on nav::before {
	display: none;
}

header .depth1 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

header .depth1>li {
	width: 200px;
	position: relative;
	transition: all 0.4s;
}

header .depth1>li>a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 1.8rem;
	font-weight: 400;
	letter-spacing: 0;
}

header .depth1>li.active>a,
header .depth1>li:hover>a,
header .depth1>li:focus-within>a {
	color: var(--color-green);
}

header .depth1>li:hover>a,
header .depth1>li:focus-within>a {
	text-decoration: underline;
}

header .depth1>li:hover .depth2::before,
header .depth1>li:focus-within .depth2::before {
	height: 100%;
	transition: all 0.8s;
}

header .depth1>li:hover .depth2>li>a,
header .depth1>li:focus-within .depth2>li>a {
	color: rgba(255, 255, 255, 1);
}
header .depth1>li:hover .depth2>li.active>a,
header .depth1>li:hover .depth2>li>a:hover,
header .depth1>li:focus-within .depth2>li.active>a,
header .depth1>li:focus-within .depth2>li>a:focus-visible {
	color: #fff;
	text-decoration: underline;
	transition: 0.2s ease;
}

header nav .depth2 {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: var(--gnb-height);
	padding: 12.5px 0;
	pointer-events: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}
header.snb-on nav .depth2 {
	display: none;
}

header nav .depth2::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: -1;
	width: 100%;
	height: 0;
	background: var(--color-green);
	transition: all 0.4s;
	transform: translateX(-50%);
}

header nav .depth2>li {
	text-align: center;
	overflow: hidden;
}

header nav .depth2>li:focus-within {
	overflow: visible;
}

header nav .depth2>li>a {
	display: block;
	padding: 7.5px 0;
	/* color: #ccc; */
	color: #949494;
	font-family: var(--font-pretendard);
	font-size: 1.7rem;
	font-weight: 500;
	transform: translateY(-100%);
}

header nav .depth2>li.sitemap {
	display: none;
}
header nav .depth2>li.sns {
	margin-top: auto;
}
header nav .depth2>li.sns>a {
  display: inline-block;
	margin: 0 4px;
  padding: 0;
	width: 48px;
  height: 48px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
	transition: all 0.1s 0s;
}
header nav:hover .depth2>li.sns>a {
	transition: all 0.2s 1s;
}

header nav .depth2>li.sns>a.instagram {
	background-image: url("/assets/images/common/sns_instagram_on.png");
}

header nav .depth2>li.sns>a.smartstore {
	background-image: url("/assets/images/common/sns_smartstore_on.png");
}

header nav .depth2>li.sns>a.youtube {
	background-image: url("/assets/images/common/sns_youtube_on.png");
}

header nav .depth2>li.sns>a span {
	text-indent: -9999em;
	overflow: hidden;
	display: inline-block;
	white-space: nowrap;
}

header .language {
	margin: 0 30px 0 0;
	position: relative;
}

header .language span,
header .language a {
	font-size: 1.5rem;
	font-weight: 700;
}

header .language button * {
	transition: all 0.4s;
}

header .language button {
	background: #000;
	border-radius: 100px;
	padding: 8px 20px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	column-gap: 8px;
}

header .language button span {
	color: var(--color-white);
}

header .language button .angle {
	width: 10px;
	transition: all 0.4s;
	filter: brightness(0) invert(1);
}

header .language button.on .angle {
	transform: rotateX(180deg);
}

header .language ul {
	width: 100%;
	background: var(--color-white);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	border-radius: 15px;
	padding: 15px 0;
	z-index: 1;
	display: none;
	position: absolute;
	top: calc(100% + 5px);
	left: 50%;
	transform: translateX(-50%);
}

header .language ul li {
	text-align: center;
}

header .language ul li a {
	display: block;
	color: #aaa;
	padding: 5px;
	transition: all 0.4s;
}

header .language ul li:hover a,
header .language ul li:focus-within a,
header .language ul li.on a {
	color: #111;
}

header .catalog {
	position: absolute;
	right: 110px;
	top: 0;
	display: none;
	overflow: hidden;
}

header.snb-on .catalog {
	display: block;
}

header .catalog * {
	color: #fff !important;
}

header .catalog a {
	display: flex;
	align-items: center;
	padding: 0 37px 0 20px;
	background: var(--color-green);
	border-radius: 50px;
	height: 35px;
	white-space: nowrap;
	font-size: 1.5rem;
	font-weight: 600;
	width: 100%;
	gap: 0 5px;
}

header .catalog img {
	margin-right: 5px;
}

header .menu-button {
	width: 20px;
	height: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 3px;
}

header .menu-button span {
	display: block;
	width: 100%;
	height: 3px;
	background: var(--color-white);
	border-radius: 100px;
	transition: all 0.6s;
}

header.snb-on a,
header.color-on a,
header nav:hover a,
header nav:focus-within a {
	color: #232628;
}

header.color-on::after {
	content: "";
	display: block;
	position: absolute;
	top: 80px;
	left: 50%;
	width: 100%;
	height: 0;
	border-bottom: 1px solid #e5e5e5;
	transform: translateX(-50%);
}

header.color-on .menu-button span,
header.snb-on .menu-button span,
header:has(nav:hover) .menu-button span,
header:has(nav:focus-within) .menu-button span {
	background: var(--color-black);
}

header.snb-on .logo-text,
header.color-on .logo-text,
header:has(nav:hover) .logo-text,
header:has(nav:focus-within) .logo-text {
	fill: var(--color-black);
}

html:not(.js-site-map) header:has(nav:hover) .gnb-bg,
html:not(.js-site-map) header:has(nav:focus-within) .gnb-bg {
	height: calc(var(--gnb-height) + 80px);
	opacity: 1;
	transition-delay: 0s;
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

header nav:hover::before,
header nav:focus-within::before {
	height: var(--gnb-height);
	/* transition-delay: 0.4s; */
}

header nav:hover .depth1>li {
	/* width: 200px; */
}

header nav:hover .depth2,
header nav:focus-within .depth2 {
	pointer-events: inherit;
}

header nav:hover .depth2>li>a,
header nav:focus-within .depth2>li>a {
	transform: translateY(0);
}

header nav:hover .depth2>li:nth-child(1)>a,
header nav:focus-within .depth2>li:nth-child(1)>a {
	transition: all 0.4s 0.36s, color 0.4s;
}

header nav:hover .depth2>li:nth-child(2)>a,
header nav:focus-within .depth2>li:nth-child(2)>a {
	transition: all 0.4s 0.44s, color 0.4s;
}

header nav:hover .depth2>li:nth-child(3)>a,
header nav:focus-within .depth2>li:nth-child(3)>a {
	transition: all 0.4s 0.52s, color 0.4s;
}

header nav:hover .depth2>li:nth-child(4)>a,
header nav:focus-within .depth2>li:nth-child(4)>a {
	transition: all 0.4s 0.6s, color 0.4s;
}

header nav:hover .depth2>li:nth-child(5)>a,
header nav:focus-within .depth2>li:nth-child(5)>a {
	transition: all 0.4s 0.68s, color 0.4s;
}

header nav:hover .depth2>li:nth-child(6)>a,
header nav:focus-within .depth2>li:nth-child(6)>a {
	transition: all 0.4s 0.76s, color 0.4s;
}

header nav:hover .depth2>li:nth-child(7)>a,
header nav:focus-within .depth2>li:nth-child(7)>a {
	transition: all 0.4s 0.84s, color 0.4s;
}

header nav:hover .depth2>li:nth-child(8)>a,
header nav:focus-within .depth2>li:nth-child(8)>a {
	transition: all 0.4s 0.92s, color 0.4s;
}

header nav:hover .depth2>li:nth-child(9)>a,
header nav:focus-within .depth2>li:nth-child(9)>a {
	transition: all 0.4s 1s, color 0.4s;
}

header nav:hover .depth2>li:nth-child(10)>a,
header nav:focus-within .depth2>li:nth-child(10)>a {
	transition: all 0.4s 1.08s, color 0.4s;
}

header nav:hover .menu-button span,
header nav:focus-within .menu-button span {
	background: var(--color-black);
}

header.snb-on .logo-text {
	fill: var(--color-white);
}

header.snb-on nav {
	display: none;
}

header.snb-on .language {
	margin-left: auto;
}

header.snb-on .language button {
	background: var(--color-white);
}

header.snb-on .language .icon {
	filter: brightness(0);
}

header.snb-on .language span {
	color: #111;
}

header.snb-on .language .angle {
	filter: inherit;
}

header.snb-on .menu-button {
	row-gap: 0;
}

header.snb-on .menu-button span {
	height: 2px;
	background: var(--color-white);
}

header.snb-on .menu-button span:first-child {
	transform: translate(0, 1px) rotate(-45deg);
}

header.snb-on .menu-button span:last-child {
	transform: translate(0, -1px) rotate(45deg);
}

.site-map {
	display: none;
	align-items: flex-start;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	padding: 0;
	width: 100%;
	height: 100lvh;
	background-color: rgba(0, 0, 0, 0.95);
	overflow-x: hidden;
	overflow-y: auto;

	animation: hideSiteMap 0.8s ease 0s 1 normal both;
}
@supports (backdrop-filter: blur(4px)) {
  .site-map {
    background-color: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(8px);
  }
}
.site-map.on {
	display: flex;
	animation: showSiteMap 0.8s ease 0s 1 normal both;
}
@keyframes showSiteMap {
  0% {
    display: none;
    opacity: 0;
		transform: translate(0, -50%);
    overflow: hidden;
  }

  1% {
    display: flex;
    opacity: 0;
    overflow: hidden;
  }

  99% {
    display: flex;
    opacity: 1;
		transform: translate(0, 0%);
  }
}

@keyframes hideSiteMap {
  0% {
    display: flex;
    opacity: 1;
		transform: translate(0, 0%);
  }

  99% {
    display: flex;
    opacity: 0;
  }

  100% {
    display: none;
    opacity: 0;
		transform: translate(0, -50%);
  }
}




.site-map .w1600 {
	height: auto;
	margin-top: auto;
	margin-bottom: auto;
	padding-top: 120px;
	padding-bottom: 80px;
}

.site-map .inner {
	position: relative;
	padding: 40px 0;
}

.site-map .inner a {
	color: var(--color-white);
	line-height: 1.3;
}

.site-map .inner>button {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 0;
	padding: 5px 8px;
	opacity: 0;
	background-color: var(--color-white);
}

.site-map .inner>button:focus-visible {
	opacity: 1;
	height: auto;
}

.site-map .depth1 {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.site-map .depth1>li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	padding: 24px 20px;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	column-gap: 40px;
}

.site-map .depth1>li:has(a.on),
.site-map .depth1>li:hover {
	color: var(--color-white);
}

.site-map .depth1>li::after {
	content: "";
  display: block;
  width: 0;
  height: 1px;
  background: var(--color-green);
  transition: all 0.6s;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.site-map .depth1>li:has(a.on)::after,
.site-map .depth1>li:hover::after,
.site-map .depth1>li:focus-within::after {
	width: 100%;
}

.site-map .depth1>li>a {
	width: 240px;
	flex-shrink: 0;
	font-size: 2.8rem;
	font-weight: 700;
	transition: all 0.4s;
}

.site-map .depth2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 40px;
	width: 100%;
}

.site-map .depth2>li {
	opacity: 0;
	transform: translateX(40px);
	transition: all 0.6s;
}
.site-map .depth2>li.sns {
	display: none;
}
.site-map .depth2>li.sitemap1 {
	margin-left: auto;
}

.site-map .depth2>li>a {
	font-size: 2rem;
	font-weight: 500;
	font-family: var(--font-pretendard);
	transition: all 0.4s, color 0.4s;
	color: #eee;
	/* opacity: 0.3; */
}

.site-map .depth1>li:has(a.on) .depth2>li>a,
.site-map .depth1>li:hover .depth2>li>a {
	/* opacity: 1; */
}
.site-map .depth1>li:has(a.on) .depth2>li>a:hover,
.site-map .depth1>li:hover .depth2>li>a:hover,
.site-map .depth1>li .depth2>li>a:focus-visible {
	color: #fff;
	text-decoration: underline;
	opacity: 1;
}

.site-map.on .depth2>li {
	opacity: 1;
	transform: translateX(0);
}

.site-map.on .depth2>li:nth-child(1) {
	transition-delay: 0.1s;
}

.site-map.on .depth2>li:nth-child(2) {
	transition-delay: 0.2s;
}

.site-map.on .depth2>li:nth-child(3) {
	transition-delay: 0.3s;
}

.site-map.on .depth2>li:nth-child(4) {
	transition-delay: 0.4s;
}

.site-map.on .depth2>li:nth-child(5) {
	transition-delay: 0.5s;
}

.site-map.on .depth2>li:nth-child(6) {
	transition-delay: 0.6s;
}

.site-map.on .depth2>li:nth-child(7) {
	transition-delay: 0.7s;
}

.site-map.on .depth2>li:nth-child(8) {
	transition-delay: 0.8s;
}

.site-map.on .depth2>li:nth-child(9) {
	transition-delay: 0.9s;
}

.site-map.on .depth2>li:nth-child(10) {
	transition-delay: 1s;
}

footer {
	padding: 180px 0 60px;
}

footer .footer-box {
	display: flex;
	justify-content: space-between;
}

footer .contact * {
	color: #111;
}

footer .contact h2 {
	font-size: 6.8rem;
	font-weight: 700;
}

footer .contact p {
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.7;
	margin: 40px 0 40px;
}

footer .contact p .br640 {
	display: none;
}

footer .contact .more .plus span {
	background: var(--color-black);
}

footer .logo {
	display: block;
	width: 209px;
	height: 64px;
	margin-top: 120px;
}

footer .logo .logo-text {
	fill: var(--color-black);
}

footer .right {
	display: inline-flex;
	flex-direction: column;
	text-align: right;
}

footer .link-box,
footer .info-box {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
}

footer .link-box {
	row-gap: 20px;
}

footer .link-box li a {
	color: #111;
	font-size: 2.4rem;
	font-weight: 500;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	column-gap: 20px;
}

footer .info-box p,
footer .copy {
	font-family: var(--font-pretendard);
	font-size: 1.8rem;
}

footer .info-box {
	margin-top: 15px;
	row-gap: 15px;
}

footer .info-box div {
	display: inline-flex;
	align-items: center;
	gap: 0 15px;
	column-gap: 15px;
}

footer .info-box p {
	color: #555;
	font-size: 1.8rem;
	font-weight: 300;
}

footer .info-box hr {
	width: 1px;
	height: 15px;
	background: #e5e5e5;
}

footer .sns-box {
	display: flex;
	justify-content: flex-end;
	margin: 80px 0 20px;
}

footer .sns-box ul {
	display: flex;
	gap: 0 10px;
}

footer .sns-box ul li a {
	width: 80px;
	height: 80px;
	display: inline-block;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	transition: all 0.6s;
}

footer .sns-box ul li a.instagram {
	background-image: url("/assets/images/common/sns_instagram_on.png");
}

footer .sns-box ul li a.smartstore {
	background-image: url("/assets/images/common/sns_smartstore_on.png");
}

footer .sns-box ul li a.youtube {
	background-image: url("/assets/images/common/sns_youtube_on.png");
}

/*
footer .sns-box ul li a:hover.instagram {
	background-image: url("/assets/images/common/sns_instagram_on.png");
}
footer .sns-box ul li a:hover.smartstore {
	background-image: url("/assets/images/common/sns_smartstore_on.png");
}
footer .sns-box ul li a:hover.youtube {
	background-image: url("/assets/images/common/sns_youtube_on.png");
}
*/
footer .sns-box ul li a span {
	text-indent: -9999em;
	overflow: hidden;
	display: inline-block;
	white-space: nowrap;
}

footer .copy {
	color: #111;
	font-weight: 500;
	margin-top: 15px;
}

.top-fixed {
	height: 0;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-end;
	position: fixed;
	top: auto;
	left: 50%;
	right: auto;
	bottom: 40px;
	transform: translateX(-50%);
}

.top-fixed.on {
	opacity: 1;
	pointer-events: inherit;
}

.top-button {
	display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
	/* color: #ccc; */
	color: #888;
  background: #f8f8f8;
  border-radius: 5px;
  position: fixed;
}

.top-button i {
	font-size: 2rem;
}

.top-button span {
	font-size: 1.6rem;
	font-weight: 700;
}

.popup {
	display: none;
	width: 100vw;
	height: 100vh;
	opacity: 0;
	pointer-events: none;
	z-index: 10;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.popup .dimmed {
	background: rgba(0, 0, 0, 0.4);
	z-index: -1;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.popup .inner {
	width: 100%;
	background: var(--color-white);
}

.popup .scroll-y {
	height: 100%;
	overflow-y: scroll;
}

.popup .scroll-y::-webkit-scrollbar {
	width: 5px;
}

.popup .scroll-y::-webkit-scrollbar-track {
	background: #e5e5e5;
	border-radius: 10px;
}

.popup .scroll-y::-webkit-scrollbar-thumb {
	background: #333;
	border-radius: 10px;
}

.popup[data-name=inquiry] .inner {
	position: relative;
	max-width: 720px;
	padding: 60px;
}

.popup[data-name=inquiry] .top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 40px;
}

.popup[data-name=inquiry] .popup-close {
	position: absolute;
	top: 68px;
	right: 60px;
}

.popup[data-name=inquiry] h5 {
	color: #111;
	font-family: var(--font-pretendard);
	font-size: 3rem;
	font-weight: 600;
}

.popup[data-name=inquiry] .text {
	height: 365px;
	background: #F4F5F9;
	padding: 20px;
}

.popup[data-name=inquiry] .text p {
	color: #888;
	font-weight: 300;
	line-height: 1.6;
}

.popup[data-name=inquiry] .scroll-y {
	padding: 10px;
}

.popup.on {
	display: flex;
	opacity: 1;
	pointer-events: inherit;
}

/* 웹접근성 */
a:focus-visible,
button:focus-visible,
iframe:focus-visible,
label:focus-visible,
summary:focus-visible {
	outline: var(--a11y-border);
}

select:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid black !important;
}

#skipNav {
	position: relative;
	z-index: 3000;
}

#skipNav button {
	display: block;
	position: absolute;
	top: -30px;
	left: 0;
	width: 150px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	opacity: 0;
  text-decoration: none;
  color: var(--color-white);
	background-color: var(--color-blue);
}

#skipNav button:focus,
#skipNav button:focus-visible {
	top: 0;
	z-index: 1000;
	opacity: 1;
}

/* 레이어팝업 */
#LayerPopup {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  position: absolute;
  top: 220px;
  left: 50px;
  max-width: calc(100vw - 100px);
  z-index: 2000;
}

#LayerPopup>section {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-color: #fff;
  z-index: 1;
  transition: box-shadow 700ms ease, transform 700ms ease, opacity 700ms ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
  opacity: 0;
}

#LayerPopup>section.show {
  transform: scale(1);
  opacity: 1;
}

#LayerPopup>section:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
  z-index: 10;
}

#LayerPopup .image {
  overflow: hidden;
}

#LayerPopup .image img {
  display: block;
  width: 100%;
	height: auto;
}

#LayerPopup footer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  padding: 7px 10px;
	background-color: var(--color-green);
}

#LayerPopup footer .check,
#LayerPopup footer .button {
  display: block;
  margin: 0;
  padding: 5px 10px;
  font-size: 1.4rem;
  font-weight: 400;
  text-align: center;
  overflow: hidden;
  appearance: none;
}

#LayerPopup footer .check:hover,
#LayerPopup footer .button:hover {
  color: #fff;
}