/* Scroll Animation */
@media(prefers-reduced-motion:no-preference){
	section:has(:where([data-scroll_effect="slide_left"], [data-scroll_effect="slide_right"], [data-scroll_effect="flip_Y"])){ overflow: clip; }
	span[data-scroll_effect]{ display: inline-block; }
	.effect_active [data-scroll_effect]{ transition-duration: .6s; }
	.effect_active[data-scroll_effect]{ transition-duration: .6s; }
	[data-scroll_effect="clip_right"]{ clip-path: inset(0 100% 0 0); }
	[data-scroll_effect="clip_left"]{ clip-path: inset(0 0 0 100%); }
	[data-scroll_effect="clip_down"]{ clip-path: inset(0 0 100% 0); }
	[data-scroll_effect="slide_up"]{ transform: translateY(40rem); opacity: 0; }
	[data-scroll_effect="slide_left"]{ transform: translateX(40rem); opacity: 0; }
	[data-scroll_effect="slide_right"]{ transform: translateX(-40rem); opacity: 0; }
	[data-scroll_effect*="flip_"]{ backface-visibility: hidden; }
	[data-scroll_effect="flip_up"]{ transform: perspective(2500rem) rotateX(-100deg); }
	[data-scroll_effect="flip_Y"]{ opacity: 0; }
	.effect_active[data-scroll_effect*="clip_"]{ clip-path: inset(0); }
	.effect_active[data-scroll_effect*="slide_"]{ transform: translate(0); opacity: 1; }
	.effect_active[data-scroll_effect*="flip_"]{ transform: perspective(2500rem) rotateX(0deg); }
	.effect_active[data-scroll_effect="flip_Y"]{ animation: flip_Y 1s both; }
	@keyframes flip_Y {
		0%{ transform: perspective(400rem) rotateY(0deg); opacity: 0; }
		20%{ transform: perspective(400rem) rotateY(-30deg); }
		50%{ transform: perspective(400rem) rotateY(20deg); }
		75%{ transform: perspective(400rem) rotateY(-10deg); }
		100%{ transform: perspective(400rem) rotateY(0deg); opacity: 1; }
	}
	.effect_active [data-scroll_effect_delay="50"], .effect_active[data-scroll_effect_delay="50"]{ transition-delay: .05s; }
	.effect_active [data-scroll_effect_delay="100"], .effect_active[data-scroll_effect_delay="100"]{ transition-delay: .1s; }
	.effect_active [data-scroll_effect_delay="150"], .effect_active[data-scroll_effect_delay="150"]{ transition-delay: .15s; }
	.effect_active [data-scroll_effect_delay="200"], .effect_active[data-scroll_effect_delay="200"]{ transition-delay: .2s; }
	.effect_active [data-scroll_effect_delay="250"], .effect_active[data-scroll_effect_delay="250"]{ transition-delay: .25s; }
	.effect_active [data-scroll_effect_delay="300"], .effect_active[data-scroll_effect_delay="300"]{ transition-delay: .3s; }
	.effect_active [data-scroll_effect_delay="350"], .effect_active[data-scroll_effect_delay="350"]{ transition-delay: .35s; }
	.effect_active [data-scroll_effect_delay="400"], .effect_active[data-scroll_effect_delay="400"]{ transition-delay: .4s; }
	.effect_active [data-scroll_effect_delay="450"], .effect_active[data-scroll_effect_delay="450"]{ transition-delay: .45s; }
	.effect_active [data-scroll_effect_delay="500"], .effect_active[data-scroll_effect_delay="500"]{ transition-delay: .5s; }
	.effect_active [data-scroll_effect_delay="600"], .effect_active[data-scroll_effect_delay="600"]{ transition-delay: .6s; }
	.effect_active [data-scroll_effect_delay="700"], .effect_active[data-scroll_effect_delay="700"]{ transition-delay: .7s; }
	@media(min-width: 768px){
		[data-scroll_effect] [data-scroll_effect="clip_right"]{ clip-path: inset(0 100% 0 0); }
		[data-scroll_effect] [data-scroll_effect="clip_left"]{ clip-path: inset(0 0 0 100%); }
		[data-scroll_effect] [data-scroll_effect="clip_down"]{ clip-path: inset(0 0 100% 0); }
		[data-scroll_effect] [data-scroll_effect="slide_up"]{ transform: translateY(40rem); opacity: 0; }
		[data-scroll_effect] [data-scroll_effect="slide_left"]{ transform: translateX(40rem); opacity: 0; }
		[data-scroll_effect] [data-scroll_effect="slide_right"]{ transform: translateX(-40rem); opacity: 0; }
		.effect_active[data-scroll_effect] [data-scroll_effect*="clip_"]{ clip-path: inset(0); }
		.effect_active[data-scroll_effect] [data-scroll_effect*="slide_"]{ transform: translate(0); opacity: 1; }
		.effect_active[data-scroll_effect] [data-scroll_effect*="flip_"]{ transform: perspective(2500rem) rotateX(0deg); }
		.effect_active[data-scroll_effect]:not([data-scroll_effect_offset]) [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)); animation-delay: calc(var(--index) * calc(var(--delay) * 1ms)); }
	}
	@media(min-width:1280px){
		[data-scroll_effect^="clip_"]{ transition: .8s; }
	}
	@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; }

	/* stroke-dasharray 최대값 */
	/* svg *{ stroke-dasharray: var(--total_length); stroke-dashoffset: var(--total_length); opacity: 1; transform: translate(0); }
	svg.effect_active *{ animation: svgAni 1s linear both; } */
}

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

/* header */
:root{
	--header_height: 80rem;
}
#header{ position: absolute; width: 100%; height: var(--header_height); z-index: 10; }
.header__inr{ display: flex; justify-content: space-between; align-items: center; height: 100%; z-index: unset; }
.logo{ display: inline-block; position: relative; z-index: 1; top: 8rem;}
.logo__a{ display: block; font-size: 0; }

#header nav{height: 100%; position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;}
#header .gnb{ display: flex; position: relative; height: 100%; }
#header .gnb > li{ display: inline-block; position: relative; height: 100%; pointer-events: auto; color: #fff;}
#header .gnb [data-gnb="1"]{ display: flex; align-items: center; height: 100%; padding: 0 40rem; font-size: 20rem; font-weight: 600; }
#header .gnb > li:hover > [data-gnb="1"]{ color: #b3dcff; }
#header .gnb .sub_menu{ visibility: hidden; position: absolute; top: 75%; left: 50%; transform: translateX(-50%); min-width: 120px; width: max-content; background: #fff; border: 1px solid #ddd; opacity: 0; }
#header .gnb .sub_menu.menu01 {opacity: 0 !important;}
#header .gnb li:hover .sub_menu{ visibility: visible; top: 80%; opacity: 1; }
#header .gnb .sub_menu li a{ display: block; padding: 14px 40px; color: #333; border-top: 1px solid #ddd; font-size: 14px; text-align: center; }
#header .gnb .sub_menu li a:hover{ background: var(--primary); color: #fff; }
#header .gnb .sub_menu li:first-child a{ border-top: 0; }
.logo__img {width: 80%; }

/* mobile-menu */
.mobile_menu {display: flex; color: #fff ; font-size: 20rem; gap: 20px; align-items: center; z-index: 9; font-weight: 500; letter-spacing: 0.025em; margin-top: 6rem;}
.mobile_menu div {background: #fff; width: 1px; height: 20px; opacity: 0.4;}
.mobile_menu img {margin-left: 6rem; margin-bottom: 6rem;}
@media(prefers-reduced-motion:no-preference){
	#header,
	.logo__img,
	.gnb .sub_menu,
	.btn_menu span{ transition: .4s; }
}
@media (max-width: 1279px){
	:root{
		--header_height: 80rem;
	}
	#header .gnb{ display: none; }

	.mobile_menu a {font-size: 0;}
}

.area_util_m > div { background: var(--primary); padding: 25rem 20rem; gap: 20rem; display: flex; flex-direction: column; justify-content: space-between; margin-top: 20rem;}
.area_util_m > div > img {margin: 0 auto;}
.area_util_m > div > div {display: flex; color: #fff; justify-content: center; font-size: 20rem;  align-items: center; gap: 10rem;}
.area_util_m > div > div p {background: #fff; width: 40rem; height: 40rem; display: flex; justify-content: center; align-items: center; border-radius: 50%;}

@media (max-width: 1279px){
	
}
/* 모바일 메뉴 */
.m_gnb{ overflow: hidden auto; position: fixed; top: 0; right: 0; transform: translateX(100%); max-width: 40%; width: 100%; height: 100%; background: var(--white); transition-timing-function: ease-out; z-index: 10; }
.m_gnb.active{ transform: translateX(0); }
.m_gnb__header{ display: flex; align-items: center; justify-content: flex-end; height: var(--header_height); }
.area_util_m .logo__img{ height: 69rem; object-fit: contain; }
.m_gnb > ul > li > a{ display: block; position: relative; padding: 40rem 25rem; border-bottom: 1rem solid #eaeaea; color: #424242; transition: all .3s ease 0s; font-size: 20rem; text-align: center;}
.m_gnb > ul > li:first-child > a{ border-top: 1rem solid #eaeaea; }
.m_gnb > ul > li > a.open::before{ content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 10rem; width: 11rem; height: 7rem; background: url('../images/common/menu_button.svg') no-repeat 50% 0; transition: all .4s ease 0s; background-size: 100%; }
.m_gnb > ul > li > a.active::before{ transform: translateY(-50%) rotate(180deg); }
.m_gnb .sub_menu{ display: none; background: #efefef; }
.m_gnb .sub_menu > li{ border-bottom: 1rem solid #dedede; }
.m_gnb .sub_menu > li > a{ position: relative; display: block; padding: 15rem 25rem; font-size: 14rem; color: var(--black);  text-align: center; font-size: 18rem;}

.m_gnb .btn_close{ opacity: 0; flex: 0 0 25rem; display: block; position: relative; margin-right: -100vw; width: 30rem; height: 30rem; background: 0; font-size: 0; }
.m_gnb.active .btn_close{ opacity: 1; margin: 20rem 20rem 0 auto;}
.m_gnb .btn_close::before,
.m_gnb .btn_close::after{ content: ''; display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 1rem; background: var(--black); transform: translateY(-50%) rotate(45deg); }
.m_gnb .btn_close::after{ transform: translateY(-50%) rotate(-45deg); }

.cover{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, .4); visibility: hidden; opacity: 0; z-index: 2; }
.cover.active{ visibility: visible; opacity: 1; }

@media (max-width: 768px){
	.m_gnb {max-width: 100%;}

}


@media (prefers-reduced-motion: no-preference){
	.m_gnb{ transition-duration: .5s; }
	.m_gnb .btn_close{ transition: .8s; }
	.cover{ transition: .4s; }
}

/* footer */
#footer{ padding: 60rem 0 90rem; background: #111; color: #999; }
/* .footer__inr{ display: flex; justify-content: space-between; gap: 1.5em; } */
.footer__info {border-top: 1px solid #4e4e4e;margin-top: 15rem; padding-top: 30rem;}
.footer__address {color: #ccc; font-size: 15rem;}
.footer__address b {color: #fff; margin-right: 10rem;}
.footer__address span {border-right: 1px solid #ccc; padding-right: 10rem; margin-right: 10rem;}
.footer__address span:last-child {border-right: none;}
.footer__copyright{ margin-top: 26rem; }
.top_btn{ position: absolute; top: -7rem; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rem; width: 60rem; height: 60rem; background: var(--primary); font-size: 10rem; font-weight: 900; color: #fff; }
.top_btn__svg{ position: relative; top: 2rem; height: 7rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2px; }