@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;
}

* {
	line-height: 1.3;
	letter-spacing: -0.02em;
}

html,
body {
	width: 100%;
	max-width: 100%;
}

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;
}

.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 {
	opacity: 0;
	transform: translateY(100%);
	transition: all 0.4s;
}

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

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

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

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

.more-hover:hover .more em span:nth-child(4) {
	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: 2;
	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: flex-start;
}

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

header .logo {
	width: 126px;
	height: 40px;
}

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 0.4s;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

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-left: 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 .depth1 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

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

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

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

header .depth1>li.on:hover .depth2::before {
	height: 100%;
	transition: all 0.8s;
}

header .depth1>li.on:hover .depth2>li>a {
	color: rgba(255, 255, 255, 0.3);
}

header .depth1>li.on:hover .depth2>li.on>a {
	color: var(--color-white);
}

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

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

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

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

header .language {
	margin: 0 30px 0 60px;
	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: var(--color-black);
	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: #ddd;
	padding: 5px;
	transition: all 0.4s;
}

header .language ul li:hover 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.color-on a, header.gnb-on a, header.opacity-on a {
	color: #333;
}

header.color-on::after, header.opacity-on::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: #f5f5f5;
	position: absolute;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
}

header.color-on .logo-text, header.opacity-on .logo-text {
	fill: var(--color-black);
}

header.color-on .menu-button span, header.opacity-on .menu-button span {
	background: var(--color-black);
}

header.gnb-on .logo-text {
	fill: var(--color-black);
}

header.gnb-on .gnb-bg {
	height: calc(var(--gnb-height) + 80px);
	opacity: 1;
	transition-delay: 0s;
}

header.gnb-on nav::before {
	height: var(--gnb-height);
	transition-delay: 0.4s;
}

header.gnb-on .depth1>li {
	width: 200px;
}

header.gnb-on .depth2 {
	pointer-events: inherit;
}

header.gnb-on .depth2>li>a {
	transform: translateY(0);
}

header.gnb-on .depth2>li:nth-child(1)>a {
	transition: all 0.4s 0.36s, color 0.4s;
}

header.gnb-on .depth2>li:nth-child(2)>a {
	transition: all 0.4s 0.44s, color 0.4s;
}

header.gnb-on .depth2>li:nth-child(3)>a {
	transition: all 0.4s 0.52s, color 0.4s;
}

header.gnb-on .depth2>li:nth-child(4)>a {
	transition: all 0.4s 0.6s, color 0.4s;
}

header.gnb-on .depth2>li:nth-child(5)>a {
	transition: all 0.4s 0.68s, color 0.4s;
}

header.gnb-on .depth2>li:nth-child(6)>a {
	transition: all 0.4s 0.76s, color 0.4s;
}

header.gnb-on .depth2>li:nth-child(7)>a {
	transition: all 0.4s 0.84s, color 0.4s;
}

header.gnb-on .depth2>li:nth-child(8)>a {
	transition: all 0.4s 0.92s, color 0.4s;
}

header.gnb-on .depth2>li:nth-child(9)>a {
	transition: all 0.4s 1s, color 0.4s;
}

header.gnb-on .depth2>li:nth-child(10)>a {
	transition: all 0.4s 1.08s, color 0.4s;
}

header.gnb-on .menu-button span {
	background: var(--color-black);
}

header.snb-on {
	z-index: 3;
}

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);
}

header.opacity-on {
	background: rgba(255, 255, 255, 0.6);
}

header.opacity-on.color-on::after {
	display: none;
}

.site-map {
	width: 100%;
	height: auto;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(5px);
	padding: 80px 0;
	z-index: 2;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	/*
	right: 0;
	bottom: 0;
	*/
}

.site-map::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
	position: absolute;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
}

.site-map .inner {
	padding-top: 80px;
}

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

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

.site-map .depth1>li::after {
	content: "";
	display: block;
	width: 0;
	height: 1px;
	background: var(--color-green);
	transition: all 0.6s;
	position: absolute;
	top: 100%;
	left: 0;
}

.site-map .depth1>li>a {
	width: 240px;
	flex-shrink: 0;
	font-size: 3.2rem;
	font-weight: 700;
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
	transition: all 0.8s;
}

.site-map .depth1>li:hover::after {
	width: 100%;
}

.site-map .depth2 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	column-gap: 60px;
}

.site-map .depth2>li {
	opacity: 0;
	transform: translateX(40px);
	transition: all 0.6s;
}

.site-map .depth2>li>a {
	font-size: 1.8rem;
	font-weight: 500;
	font-family: var(--font-pretendard);
	opacity: 0.3;
	transition: all 0.4s;
}

.site-map .depth2>li:hover>a {
	opacity: 1;
}

.site-map.on .depth1>li>a {
	clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}

.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-size: 1.8rem;
	font-family: var(--font-pretendard);
}

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("/img/common/sns_instagram_on.png");
}
footer .sns-box ul li a.smartstore {
	background-image: url("/img/common/sns_smartstore_on.png");
}
footer .sns-box ul li a.youtube {
	background-image: url("/img/common/sns_youtube_on.png");
}
/*
footer .sns-box ul li a:hover.instagram {
	background-image: url("/img/common/sns_instagram_on.png");
}
footer .sns-box ul li a:hover.smartstore {
	background-image: url("/img/common/sns_smartstore_on.png");
}
footer .sns-box ul li a:hover.youtube {
	background-image: url("/img/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: 60px;
	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;
	background: #f8f8f8;
	border-radius: 5px;
	position: fixed;
}

.top-button * {
	color: #ccc;
}

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

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

.popup {
	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 {
	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] h5 {
	color: #111;
	font-size: 3rem;
	font-weight: 600;
	font-family: var(--font-pretendard);
}

.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 {
	opacity: 1;
	pointer-events: inherit;
}