@charset "utf-8";
/* 
	common.css : 헤더, 푸터, 레이아웃 정의
*/

html {
	scrollbar-gutter: stable;
	font-family: 'pretendard', sans-serif;
	--header-h: 100px;
	--app-svh: 100vh;
	--app-svh: 100svh;
}
html.lenis,
html.lenis body {
	height: auto;
}
html.lenis.lenis-smooth {
	scroll-behavior: auto;
}
html.lenis.lenis-stopped {
	overflow: hidden;
}

.mo-only-br {
	display: none;
}

.pc-only-br {
	display: block;
}

@media (max-width: 560px) {
	.mo-only-br {
		display: block;
	}

	.pc-only-br {
		display: none;
	}
}


/******************************************************************************
 header { ******************************************************************************* */

.header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:999;
	background:transparent;
	box-sizing:border-box;
	mix-blend-mode:difference;
}
.header .logo__wr{
	overflow:visible;
}
.header .logo__wr img{
	filter:invert(1);
}
.header .main__nav__a{
	color:#fff;
}
.header .header__contact__btn{
	background:transparent;
	color:#fff;
}
.header .header__contact__btn__icon{
	filter:invert(1);
}
.header__inner{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	align-items:center;
	justify-content:space-between;
	min-height:100px;
	padding:24px 0;
	box-sizing:border-box;
}

.logo__wr{
	display:block;
	width:178px;
	height:40px;
	flex-shrink:0;
	overflow:hidden;
}
.logo__wr img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}

.main__nav__wr{
	margin-left:0;
}
.main__nav__ul{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	align-items:center;
	justify-content:center;
	gap:60px;
	margin:0;
	padding:0;
	list-style:none;
}
.main__nav__li{
	position:relative;
	margin-left:0;
	list-style:none;
}
.main__nav__a{
	display:block;
	position:relative;
	font-size:16px;
	font-weight:400;
	line-height:1.1;
	letter-spacing:-0.4px;
	color:#000;
	text-decoration:none;
	white-space:nowrap;
}
.main__nav__a::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:-6px;
	height:1px;
	background:currentColor;
	transform:scaleX(0);
	transform-origin:100% 50%;
	transition:transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events:none;
}
@media (pointer: fine) {
	.main__nav__a:hover::after{
		transform:scaleX(1);
		transform-origin:0 50%;
	}
}

.header__contact__btn{
	display:inline-flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	gap:4px;
	flex-shrink:0;
	position:relative;
	padding:2px 8px 6px;
	background:transparent;
	color:#000;
	border:0;
	border-radius:0;
	font-size:16px;
	font-weight:600;
	line-height:1.5;
	letter-spacing:-0.4px;
	text-transform:uppercase;
	text-decoration:none;
	white-space:nowrap;
	box-sizing:border-box;
	cursor:pointer;
	font-family:inherit;
}
.header__contact__btn__label{
	display:block;
}
.header__contact__btn__icon{
	display:block;
	width:24px;
	height:24px;
	flex-shrink:0;
	transition:transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.header__contact__btn::after{
	content:"";
	position:absolute;
	left:8px;
	right:8px;
	bottom:0;
	height:1px;
	background:currentColor;
	transform:scaleX(0);
	transform-origin:100% 50%;
	transition:transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events:none;
}
@media (pointer: fine) {
	.header__contact__btn:hover::after{
		transform:scaleX(1);
		transform-origin:0 50%;
	}
	.header__contact__btn:hover .header__contact__btn__icon{
		transform:rotate(-45deg);
	}
}
button.main__nav__a{
	background:transparent;
	border:0;
	padding:0;
	cursor:pointer;
	font-family:inherit;
}

#hd, #wrapper, #ft {min-width:0;}
#wrapper{
	padding-top:var(--header-h);
	background:#fff;
	z-index:auto;
}

/* } header *****************************************************************************
***************************************************************************************/



/******************************************************************************
side menu { ******************************************************************************* */

.header__menu__btn{
	display:none;
	position:relative;
	width:24px;
	height:24px;
	padding:0;
	border:0;
	background:transparent;
	flex-shrink:0;
	cursor:pointer;
	box-sizing:content-box;
}
.header__menu__bar{
	position:absolute;
	left:0;
	width:24px;
	height:1px;
	background:#fff;
	pointer-events:none;
}
.header__menu__bar:nth-child(1){top:5px;}
.header__menu__bar--mid{
	top:12px;
	left:7px;
	width:17px;
}
.header__menu__bar:nth-child(3){top:19px;}

.side__menu{
	display:none;
	position:fixed;
	inset:0;
	z-index:9990;
	background:#fff;
	overflow:auto;
}
.side__menu.is-open{
	display:block;
}
.side__menu__top{
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	height:72px;
	padding:0 16px;
	box-sizing:border-box;
}
.side__menu__top .logo__wr{
	width:94px;
	height:21px;
}
.side__menu__close{
	display:block;
	width:24px;
	height:24px;
	padding:0;
	border:0;
	background:transparent;
	cursor:pointer;
	overflow:hidden;
	flex-shrink:0;
}
.side__menu__close img{
	display:block;
	width:24px;
	height:24px;
}
.side__menu__nav{
	display:flex;
	flex-direction:column;
	margin:48px 16px 0;
}
.side__menu__a{
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:24px;
	width:100%;
	height:88px;
	padding:0;
	border:0;
	border-bottom:1px solid rgba(0,0,0,0.2);
	background:transparent;
	color:#000;
	text-decoration:none;
	cursor:pointer;
	font-family:inherit;
	text-align:left;
	box-sizing:border-box;
}
.side__menu__a:first-child{
	height:auto;
	padding:24px 0;
	border-top:1px solid rgba(0,0,0,0.2);
}
.side__menu__num{
	display:block;
	font-size:12px;
	font-weight:700;
	letter-spacing:-0.3px;
	line-height:1.3;
	flex-shrink:0;
}
.side__menu__label{
	display:block;
	font-size:30px;
	font-weight:500;
	letter-spacing:-0.75px;
	line-height:1.3;
}

html.side-open,
html.side-open body,
body.side-open{
	overflow:hidden;
}

/* } side menu *****************************************************************************
***************************************************************************************/




/******************************************************************************
footer { ******************************************************************************* */

.footer{
	position:relative;
	background:#fff;
	color:#000;
	overflow:visible;
	padding:0;
}
.footer__inner{
	padding:40px 0;
	box-sizing:border-box;
}

.footer__top{
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	justify-content:space-between;
	gap:40px;
}
.footer__label{
	font-size:16px;
	font-weight:400;
	line-height:1.5;
	letter-spacing:-0.4px;
	color:#000;
	margin-bottom:40px;
	opacity:0;
	transform:translate3d(0, 18px, 0);
}
.footer--in .footer__label{
	opacity:1;
	transform:none;
	transition:opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer__title{
	font-size:80px;
	font-weight:400;
	line-height:1.1;
	letter-spacing:-2px;
	color:#000;
}
.footer__title__line{
	display:block;
	white-space:nowrap;
	opacity:0;
	transform:translate3d(0, 56px, 0);
}
.footer--in .footer__title__line{
	opacity:1;
	transform:none;
	transition:opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer--in .footer__title__line--indent{
	transition-delay:0.1s;
}
.footer__title__line--indent{
	margin-left:280px;
}
.footer__arrow{
	--arrow-inset:11%;
	--arrow-ease:cubic-bezier(0.22, 1, 0.36, 1);
	display:block;
	position:relative;
	width:160px;
	height:160px;
	flex-shrink:0;
	margin-top:80px;
	padding:0;
	border:0;
	background:transparent;
	color:#000;
	cursor:pointer;
	overflow:visible;
}
.footer__arrow__stack{
	display:block;
	position:relative;
	width:100%;
	height:100%;
}
.footer__arrow__svg{
	display:block;
	width:100%;
	height:100%;
	overflow:visible;
	pointer-events:none;
}
.footer__arrow__corners{
	transform-box:fill-box;
	transform-origin:50% 50%;
	transform:rotate(-360deg);
	opacity:0;
}
.footer--in .footer__arrow__corners{
	transform:rotate(0deg);
	opacity:1;
	transition:transform 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, opacity 0.4s 0.18s ease;
}
.footer__arrow__corner,
.footer__arrow__icon{
	transform-box:view-box;
	transition:transform 0.4s var(--arrow-ease);
}
.footer__arrow__corner{
	transform-origin:0 0;
}
.footer__arrow__icon{
	transform-origin:center;
	transform:translate(-42px, -42px);
	opacity:0;
}
.footer--in .footer__arrow__icon{
	transform:none;
	opacity:1;
	transition:transform 0.4s var(--arrow-ease), opacity 0.35s 0.52s ease;
}
@media (hover:hover){
	.footer__arrow:hover .footer__arrow__corner--tl,
	.footer__arrow:focus-visible .footer__arrow__corner--tl{
		transform:translate(var(--arrow-inset), var(--arrow-inset));
	}
	.footer__arrow:hover .footer__arrow__corner--tr,
	.footer__arrow:focus-visible .footer__arrow__corner--tr{
		transform:translate(calc(var(--arrow-inset) * -1), var(--arrow-inset));
	}
	.footer__arrow:hover .footer__arrow__corner--bl,
	.footer__arrow:focus-visible .footer__arrow__corner--bl{
		transform:translate(var(--arrow-inset), calc(var(--arrow-inset) * -1));
	}
	.footer__arrow:hover .footer__arrow__corner--br,
	.footer__arrow:focus-visible .footer__arrow__corner--br{
		transform:translate(calc(var(--arrow-inset) * -1), calc(var(--arrow-inset) * -1));
	}
	.footer__arrow:hover .footer__arrow__icon,
	.footer__arrow:focus-visible .footer__arrow__icon{
		transform:rotate(-45deg);
		transition:transform 0.4s var(--arrow-ease);
	}
}
.footer__arrow:focus-visible{
	outline:2px solid #000;
	outline-offset:6px;
}
@media (prefers-reduced-motion:reduce){
	.footer__arrow__corner,
	.footer__arrow__icon,
	.footer__arrow__corners,
	.footer__label,
	.footer__title__line,
	.footer__line,
	.footer__col,
	.footer__bottom{
		transition:none;
		opacity:1;
		transform:none;
	}
}

.footer__line{
	width:100%;
	height:1px;
	background:#000;
	margin:80px 0 40px;
	transform:scaleX(0);
	transform-origin:0 50%;
}
.footer--in .footer__line{
	transform:scaleX(1);
	transition:transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.38s;
}

.footer__info{
	display:grid;
	grid-template-columns:minmax(0,1fr) 400px 400px;
	column-gap:80px;
	align-items:flex-start;
}
.footer__col{
	opacity:0;
	transform:translate3d(0, 28px, 0);
}
.footer--in .footer__col{
	opacity:1;
	transform:none;
	transition:opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer--in .footer__col--media{transition-delay:0.42s;}
.footer--in .footer__col--business{transition-delay:0.52s;}
.footer--in .footer__col--contact{transition-delay:0.62s;}
.footer__col__title{
	font-size:14px;
	font-weight:600;
	line-height:1.5;
	letter-spacing:-0.35px;
	color:#000;
	margin-bottom:21px;
}
.footer__sns{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:18px;
}
.footer__sns__a{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:24px;
	font-weight:500;
	line-height:1.1;
	letter-spacing:-0.6px;
	text-transform:capitalize;
	color:#000;
	text-decoration:none;
	transition:opacity .2s ease;
}
.footer__sns__a img{
	display:block;
	width:24px;
	height:24px;
	flex-shrink:0;
	transform-origin:center;
	transition:transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover:hover) {
	.footer__sns__a:hover img,
	.footer__sns__a:focus-visible img{
		transform:rotate(-45deg);
	}
}
.footer__text{
	font-size:16px;
	font-weight:300;
	line-height:1.5;
	letter-spacing:-0.4px;
	color:#000;
	max-width:400px;
}

.footer__bottom{
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	margin-top:184px;
	opacity:0;
	transform:translate3d(0, 16px, 0);
}
.footer--in .footer__bottom{
	opacity:1;
	transform:none;
	transition:opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.7s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.7s;
}
.footer__copy{
	font-size:16px;
	font-weight:500;
	line-height:1.5;
	letter-spacing:-0.4px;
	color:#000;
}
.footer__top__btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:16px;
	font-weight:500;
	line-height:1.5;
	letter-spacing:-0.4px;
	color:#000;
	text-decoration:none;
	text-transform:uppercase;
	transition:opacity .2s ease;
}
.footer__top__btn img{
	display:block;
	width:24px;
	height:24px;
	flex-shrink:0;
}
@media (pointer: fine) {
	.footer__top__btn:hover{opacity:0.5;}
}


@media screen and (max-width:1440px){
	.footer__title{font-size:56px;}
	.footer__title__line--indent{margin-left:160px;}
	.footer__info{
		grid-template-columns:minmax(0,1fr) minmax(240px,1fr) minmax(240px,1fr);
		column-gap:40px;
	}
	.footer__bottom{margin-top:80px;}
}

@media screen and (max-width:1024px){
	html{--header-h:80px;}
	.header__inner{padding:16px 0; min-height:80px;}
	.main__nav__ul{gap:24px;}
	.main__nav__a{font-size:14px;}
	#wrapper{padding-top:var(--header-h);}

	.footer__inner{padding:40px 0;}
	.footer__title{font-size:40px; letter-spacing:-1px;}
	.footer__title__line--indent{margin-left:0;}
	.footer__arrow{width:140px; height:140px; margin-top:32px;}
	.footer__info{
		grid-template-columns:1fr 1fr;
		column-gap:40px;
		row-gap:40px;
	}
	.footer__col--media{grid-column:1 / -1;}
	.footer__sns__a{font-size:20px;}
	.footer__line{margin:48px 0 40px;}
	.footer__text{max-width:none;}
}

@media screen and (max-width:767px){
	html{
		--header-h:72px;
		overflow-x:hidden;
		overflow-y:auto;
	}
	html, body{
		height:auto;
		touch-action:pan-y;
	}
	.header__inner{
		width:100%;
		max-width:none;
		min-height:72px;
		padding:0 16px;
	}
	.header .logo__wr{
		width:94px;
		height:21px;
	}
	.main__nav__wr{display:none;}
	.header__contact__btn{display:none;}
	.header__menu__btn{display:block;}

	.footer__inner{
		width:100%;
		max-width:none;
		padding:16px 16px 40px;
		box-sizing:border-box;
	}
	.footer__top{flex-direction:column; gap:40px;}
	.footer__label{
		font-size:12px;
		letter-spacing:-0.3px;
		margin-bottom:24px;
	}
	.footer__title{
		font-size:32px;
		letter-spacing:-0.8px;
		line-height:1.1;
	}
	.footer__title__line{white-space:normal;}
	.footer__arrow{width:160px; height:160px; margin-top:40px;}
	.footer__line{margin:32px 0 16px;}
	.footer__info{
		grid-template-columns:1fr;
		row-gap:32px;
	}
	.footer__col--media{grid-column:auto;}
	.footer__col__title{
		font-size:10px;
		letter-spacing:-0.25px;
		margin-bottom:16px;
	}
	.footer__sns{gap:8px;}
	.footer__sns__a{
		font-size:16px;
		letter-spacing:-0.4px;
	}
	.footer__sns__a img{
		width:16px;
		height:16px;
	}
	.footer__text{
		font-size:12px;
		letter-spacing:-0.3px;
	}
	.footer__bottom{
		flex-direction:row;
		align-items:flex-end;
		justify-content:space-between;
		gap:16px;
		margin-top:74px;
	}
	.footer__copy{
		font-size:12px;
		letter-spacing:-0.3px;
	}
	.footer__top__btn{
		width:60px;
		height:60px;
		padding:6px;
		background:#000;
		color:#fff;
		justify-content:center;
		gap:0;
	}
	.footer__top__btn__label{display:none;}
	.footer__top__btn img{
		width:48px;
		height:48px;
		filter:invert(1);
	}
}



/* } footer *****************************************************************************
***************************************************************************************/
/* #52463A */

/* #372C24 */