/* Scroll Animation */
@media(prefers-reduced-motion:no-preference){
	section:has(:where([data-scroll_effect="slide_left"], [data-scroll_effect="slide_right"])){ overflow: clip; }
	span[data-scroll_effect]{ display: inline-block; }
	[data-scroll_effect="clip_right"]{ clip-path: inset(0 100% 0 0); transition: .6s; }
	[data-scroll_effect="clip_left"]{ clip-path: inset(0 0 0 100%); transition: .6s; }
	[data-scroll_effect="slide_up"]{ transform: translateY(40rem); opacity: 0; transition: .6s; }
	[data-scroll_effect="slide_left"]{ transform: translateX(40rem); opacity: 0; transition: .6s; }
	[data-scroll_effect="slide_right"]{ transform: translateX(-40rem); opacity: 0; transition: .6s; }
	[data-scroll_effect*="flip_"]{ backface-visibility: hidden; }
	[data-scroll_effect="flip_up"]{ transform: perspective(2500rem) rotateX(-100deg); transition: .6s; }
	[data-scroll_effect="clip_right"].effect_active{ clip-path: inset(0); }
	[data-scroll_effect*="slide_"].effect_active{ transform: translate(0); opacity: 1; }
	[data-scroll_effect*="flip_"].effect_active{ transform: perspective(2500rem) rotateX(0deg); }
	:where([data-scroll_effect].effect_active) [data-scroll_effect_delay="50"]{ transition-delay: .05s; }
	:where([data-scroll_effect].effect_active) [data-scroll_effect_delay="100"]{ transition-delay: .1s; }
	:where([data-scroll_effect].effect_active) [data-scroll_effect_delay="150"]{ transition-delay: .15s; }
	:where([data-scroll_effect].effect_active) [data-scroll_effect_delay="200"]{ transition-delay: .2s; }
	:where([data-scroll_effect].effect_active) [data-scroll_effect_delay="250"]{ transition-delay: .25s; }
	:where([data-scroll_effect].effect_active) [data-scroll_effect_delay="300"]{ transition-delay: .3s; }
	:where([data-scroll_effect].effect_active) [data-scroll_effect_delay="350"]{ transition-delay: .35s; }
	:where([data-scroll_effect].effect_active) [data-scroll_effect_delay="400"]{ transition-delay: .4s; }
	:where([data-scroll_effect].effect_active) [data-scroll_effect_delay="450"]{ transition-delay: .45s; }
	:where([data-scroll_effect].effect_active) [data-scroll_effect_delay="500"]{ transition-delay: .5s; }
	:where([data-scroll_effect].effect_active) [data-scroll_effect_delay="600"]{ transition-delay: .6s; }
	:where([data-scroll_effect].effect_active) [data-scroll_effect_delay="700"]{ transition-delay: .7s; }
	[data-scroll_effect_delay="50"].effect_active{ transition-delay: .05s; }
	[data-scroll_effect_delay="100"].effect_active{ transition-delay: .1s; }
	[data-scroll_effect_delay="150"].effect_active{ transition-delay: .15s; }
	[data-scroll_effect_delay="200"].effect_active{ transition-delay: .2s; }
	[data-scroll_effect_delay="250"].effect_active{ transition-delay: .25s; }
	[data-scroll_effect_delay="300"].effect_active{ transition-delay: .3s; }
	[data-scroll_effect_delay="350"].effect_active{ transition-delay: .35s; }
	[data-scroll_effect_delay="400"].effect_active{ transition-delay: .4s; }
	[data-scroll_effect_delay="450"].effect_active{ transition-delay: .45s; }
	[data-scroll_effect_delay="500"].effect_active{ transition-delay: .5s; }
	[data-scroll_effect_delay="600"].effect_active{ transition-delay: .6s; }
	[data-scroll_effect_delay="700"].effect_active{ transition-delay: .7s; }
	
	/* data-scroll_effect_delay */
	@media(min-width: 768px){
		[data-scroll_effect].effect_active [data-scroll_effect]{ transform: translate(0); opacity: 1; }
		[data-scroll_effect_column] [data-scroll_effect].effect_active{ transition-delay: calc(var(--index) * calc(var(--delay) * 1ms)); }
	}
	@media(min-width:1280px){
		[data-scroll_effect^="clip_"]{ transition: .8s; }
		[data-scroll_effect="tab"] [data-scroll_effect]{ transform: translate(0); opacity: 1; }
	}
	@media(max-width: 1279px){
		[data-scroll_effect_column] [data-scroll_effect*="slide_"]{ transform: translateY(40rem); }
		[data-scroll_effect_column] [data-scroll_effect*="slide_"].effect_active{ transform: translate(0); }
	}
	@media(max-width: 1279px) and (min-width: 768px){
		:is([data-scroll_effect_column="3"], [data-scroll_effect_column="4"]) > *:nth-child(odd){ transition-delay: 0s; }
		:is([data-scroll_effect_column="3"], [data-scroll_effect_column="4"]) > *:nth-child(even){ transition-delay: calc(var(--delay) * 1ms); }
		:is([data-scroll_effect_column="5"], [data-scroll_effect_column="6"]) > *:nth-child(4){ transition-delay: calc((var(--index) - 1 ) * calc(var(--delay) * 1ms)); }
		:is([data-scroll_effect_column="5"], [data-scroll_effect_column="6"]) > *:nth-child(5){ transition-delay: calc((var(--index) - 2 ) * calc(var(--delay) * 1ms)); }
		:is([data-scroll_effect_column="5"], [data-scroll_effect_column="6"]) > *:nth-child(6){ transition-delay: calc((var(--index) - 3 ) * calc(var(--delay) * 1ms)); }
	}
	@media(max-width: 767px){
		#wrap [data-scroll_effect_delay]{ transition-delay: 0s; }
		[data-scroll_effect_column] > *:nth-child(odd){ transition-delay: 0s; }
		[data-scroll_effect_column] > *:nth-child(even){ transition-delay: calc(var(--delay) * 1ms); }
	}
	@keyframes svgAni{
		0%{ stroke-dasharray: var(--total_length); stroke-dashoffset: var(--total_length); }
		100%{ stroke-dasharray: var(--total_length); stroke-dashoffset: 0; }
	}
	svg.scroll_effect{ opacity: 1; transform: translate(0); }
	svg.active{ animation: svgAni 1s linear both; }
}

.fix_cs {position: fixed; right: 20rem; bottom: 20rem; z-index: 10; text-align: center;}
.fix_cs a {display: block; padding: 12rem 22rem; font-size: 16rem; font-weight: 400; background: #282726; color: #ddd; box-shadow: 0 0 0 2px #777571 inset;}
.fix_cs span {display: inline-block; margin-left: 5rem;}

@media (min-width: 767px){
	.fix_cs {right:50rem; bottom: 50rem;}
	.fix_cs a {font-size: 20rem; font-weight: 500; padding: 15rem 30rem; box-shadow: 0 0 0 5px #777571 inset; }
	.fix_cs span {display: block; }
}

/* inner */
#wrap {position: relative; overflow: hidden;}
.inr{ position: relative; margin: 0 auto; max-width: calc(var(--inner) * 1rem); width: calc(var(--inner_width) * 100%); height: 100%; box-sizing: border-box; z-index: 2; }
.inr.wide{ max-width: 1760rem; }
.inr.narrow{ max-width: 1400rem; }
.wrapper{ margin: 0 auto; max-width: calc(var(--inner) * 1rem); width: calc(var(--inner_width) * 100%); }

/* header */
:root{
	--header_height: 110rem;
	--subMenuHeight: 0;
}
#header{ position: absolute; inset: 0 0 auto; width: 100%; height: var(--header_height); color: #fff; z-index: 10; }
#header::before{content:''; position:absolute; display:block; top:0; left:0; width:100%; height:0; background:#fff; }
#header::after{content:''; position:absolute; inset: 0; border-bottom: 1px solid #ddd; opacity:0; pointer-events: none; }
#header.active{ color: var(--black); }
.header__inr{ display: flex; justify-content: space-between; align-items: center; z-index: unset; }
.logo{ display: inline-block; position: relative; z-index: 4; }
.logo__a{ display: block; font-size: 0; }
.logo__svg{ height: calc( var(--header_height) * 0.72727273 ); }
[class*="logo"]{ color: inherit; fill: currentColor; }
[class*="logo"] .line{ fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:2px;}

#header nav{ position: relative; margin-left: -20rem; display: flex; align-items: center; height: 100%; }
#header .gnb{ position: relative; display:flex; height: 100%; }
#header .gnb > li{ display: inline-block; position: relative; height: 100%; pointer-events: auto; }
#header .gnb [data-gnb="1"]{ display: flex; position:relative; align-items: center; height: 100%; padding: 0 49rem; font-size: 20rem; font-weight: 400; }
#header.active .gnb [data-gnb="1"]{ color: #fff; }
#header .gnb [data-gnb="1"]:before{content:''; display:block; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:0; height:3px; background:var(--primary); transition:0.3s ease;}
#header .gnb [data-gnb="1"].menuOn:before{width:100%;}
#header .gnb .sub_menu{visibility:hidden; opacity:0; position: absolute; top:75%; left: 50%; transform: translateX(-50%); width:100%; padding:20rem 0;}
#header .gnb li:hover .sub_menu{ visibility: visible; top:100%; opacity: 1; }
#header .gnb .sub_menu li a{ display: block; padding: 14px; color: #333; font-size:18rem; text-align: center; transition:0.2s ease;}
#header .gnb .sub_menu li a:hover{color:var(--primary); }

/* mobile-menu */
.btn_menu{ position: relative; width: 38rem; height: 38rem; background: 0; box-sizing: border-box; color: inherit; z-index: 4; }
.btn_menu span{ position: absolute; inset: 0; margin: auto; display: block; margin-left: auto; width: 100%; height: 2px; background: currentcolor; }
.btn_menu span:nth-child(1){ transform: translateY(-11rem); }
.btn_menu span:nth-child(2){ transform-origin: right; }
.btn_menu span:nth-child(3){ transform: translateY(11rem); }
.active .btn_menu span:nth-child(1){ transform: translateY(0) rotate(-45deg); }
.active .btn_menu span:nth-child(2){ transform: scaleX(0); }
.active .btn_menu span:nth-child(3){ transform: translateY(0) rotate(45deg); }
@media(hover:hover){
	#header.menuOpen{ color: var(--black); }
	#header.menuOpen::after{ opacity:1; }
    #header.menuOpen:before{height:calc(var(--header_height) + var(--subMenuHeight));}
}
@media(prefers-reduced-motion:no-preference){
	#header,
	#header::before,
	#header::after,
	.gnb .sub_menu{ transition: .4s; }
	.btn_menu span{ transition: transform .4s; }
}
@media (max-width: 1279px){
	:root{
		--header_height: 80rem;
	}
	#header .gnb{ display: none; }
}

/* 모바일 메뉴 */
.m_gnb{ position: absolute; inset: 100% 0 auto; padding: clamp(70rem, 7.1875vw, 115rem) 0 clamp(86rem, 8.875vw, 142rem); background: #fff; color: var(--black); clip-path: inset(calc( var(--header_height) * -1 ) 0 calc( 100% + var(--header_height)) ); z-index: 3; }
.m_gnb::before{ content: ''; position: absolute; inset: calc( var(--header_height) * -1 ) 0 0; background: inherit; }
.active .m_gnb{ clip-path: inset(calc( var(--header_height) * -1 ) 0 0); }
.m_gnb .inr{ display: grid; align-items: center; }
.m_gnb__ul > li{ display: flex; gap: .5em 56rem; }
.m_gnb__ul > li + li{ margin-top: 45rem; }
.m_gnb [data-gnb="1"]{ font-size: var(--fs30); font-weight: 500; }
.m_gnb [data-gnb="1"]::before{ content: attr(data-eng); margin: 0 0 4rem 3rem; display: block; font-size: 16rem; font-weight: 600; color: var(--primary); }
.m_gnb .sub_menu{ position: relative; display: flex; gap: 43rem; }
.m_gnb .sub_menu li{ position: relative; font-family: 'Pretendard', '맑은 고딕', '돋움', 'Dotum', '굴림', 'Gulim', Sans-serif; font-size: 20rem; color: #999; }
.m_gnb .sub_menu li + li::before{ content: ''; position: absolute; top: 12rem; left: -23.5rem; width: 6rem; height: 6rem; background: #ccc; border-radius: 50%; }
.m_gnb .on[data-gnb="2"]{ font-weight: 700; color: var(--primary); }
.m_gnb__img{ height: 573rem; background: url(/images/common/m_gnb.jpg) no-repeat 50% / cover; }
.cover{ position: fixed; inset: 0; background: rgba(0, 0, 0, .6); visibility: hidden; opacity: 0; z-index: 2; }
.active .cover{ visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: no-preference){
	.m_gnb{ transition: .4s; }
	.m_gnb .btn_close{ transition: .8s; }
	.cover{ transition: .4s; }
}
@media(min-width:768px){
	.m_gnb .inr{ grid-template-columns: repeat(2, 1fr); }
}
@media(min-width:1280px){
	.m_gnb__ul > li{ align-items: flex-end; }
	.m_gnb .sub_menu{ bottom: 6rem; }
}
@media(max-width:1279px){
	.m_gnb__ul > li{ flex-direction: column; }
}
@media(max-width:767px){
	.m_gnb .sub_menu{ gap: 40rem; }
	.m_gnb .sub_menu li + li::before{ left: -23rem; }
	.m_gnb__img{ display: none; }
}

/* footer */
#footer{ position: relative; padding: 60rem 0 57rem; background: #282726; text-align: center; color: #fff; }
.footer__logo{ opacity: .5; }
footer .footer__links{ margin-top: 48rem; display: flex; justify-content: center; gap: 44rem; font-size: 15rem; font-weight: 300; color: #eee; }
footer .footer__links li{ position: relative; }
footer .footer__links li + li::before{ content: ''; position: absolute; top: 8rem; left: -24rem; display: inline-block; width: 5rem; height: 5rem; background: #777; border-radius: 50%; }
.footer__address{ margin-top: 31rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 4rem 24rem; font-size: 13rem; font-weight: 300; color: #aaa; }
.footer__copyright{ margin-top: 32rem; text-transform: uppercase; font-size: 12rem; font-weight: 300; color: #777; }
.footer__copyright span{ color: #fff; }
.top_btn{ position: absolute; inset: 0; margin: 60rem 20rem auto auto; width: 60rem; height: 60rem; background: #4f4f4e; border-radius: 50%; z-index: 3; }
.top_btn::before{ content: ''; position: relative; inset: 0; margin: 18% auto auto; display: inline-block; width: 26.66666667%; height: 26.66666667%; border: solid currentColor; border-width: 2px 0 0 2px; transform: rotate(45deg); }
@media(min-width:768px){
	.top_btn{ margin: auto 20rem auto auto; }
}