/* Scroll Animation */
@media(prefers-reduced-motion:no-preference){
	section:has(:where([data-se="slide-left"], [data-se="slide-right"], [data-se="flip-Y"])){ overflow: clip; }
	span[data-se]{ display: inline-block; }
	.seActive [data-se]:not([data-se*="parallax"], [data-se^="clip-"]),
	.seActive[data-se]:not([data-se*="parallax"], [data-se^="clip-"]){ transition-duration: .6s; }
	[data-se="clip-right"]{ clip-path: inset(0 100% 0 0); }
	[data-se="clip-left"]{ clip-path: inset(0 0 0 100%); }
	[data-se="clip-down"]{ clip-path: inset(0 0 100% 0); }
	[data-se="slide-up"]{ transform: translateY(40rem); opacity: 0; }
	[data-se="slide-left"]{ transform: translateX(40rem); opacity: 0; }
	[data-se="slide-right"]{ transform: translateX(-40rem); opacity: 0; }
	[data-se*="flip-"]{ backface-visibility: hidden; }
	[data-se="flip-up"]{ transform: perspective(2500rem) rotateX(-100deg); }
	[data-se="flip-Y"]{ opacity: 0; }
	.seActive[data-se*="clip-"]{ clip-path: inset(0); }
	.seActive[data-se*="slide-"]{ transform: translate(0); opacity: 1; }
	.seActive[data-se*="flip-"]{ transform: perspective(2500rem) rotateX(0deg); }
	.seActive[data-se="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; }
	}
	.seActive [data-se-delay="50"], .seActive[data-se-delay="50"]{ transition-delay: .05s; }
	.seActive [data-se-delay="100"], .seActive[data-se-delay="100"]{ transition-delay: .1s; }
	.seActive [data-se-delay="150"], .seActive[data-se-delay="150"]{ transition-delay: .15s; }
	.seActive [data-se-delay="200"], .seActive[data-se-delay="200"]{ transition-delay: .2s; }
	.seActive [data-se-delay="250"], .seActive[data-se-delay="250"]{ transition-delay: .25s; }
	.seActive [data-se-delay="300"], .seActive[data-se-delay="300"]{ transition-delay: .3s; }
	.seActive [data-se-delay="350"], .seActive[data-se-delay="350"]{ transition-delay: .35s; }
	.seActive [data-se-delay="400"], .seActive[data-se-delay="400"]{ transition-delay: .4s; }
	.seActive [data-se-delay="450"], .seActive[data-se-delay="450"]{ transition-delay: .45s; }
	.seActive [data-se-delay="500"], .seActive[data-se-delay="500"]{ transition-delay: .5s; }
	.seActive [data-se-delay="600"], .seActive[data-se-delay="600"]{ transition-delay: .6s; }
	.seActive [data-se-delay="700"], .seActive[data-se-delay="700"]{ transition-delay: .7s; }
	@media(min-width: 768px){
		[data-se] [data-se="clip-right"]{ clip-path: inset(0 100% 0 0); }
		[data-se] [data-se="clip-left"]{ clip-path: inset(0 0 0 100%); }
		[data-se] [data-se="clip-down"]{ clip-path: inset(0 0 100% 0); }
		[data-se] [data-se="slide-up"]{ transform: translateY(40rem); opacity: 0; }
		[data-se] [data-se="slide-left"]{ transform: translateX(40rem); opacity: 0; }
		[data-se] [data-se="slide-right"]{ transform: translateX(-40rem); opacity: 0; }
		.seActive[data-se] [data-se*="clip-"]{ clip-path: inset(0); }
		.seActive[data-se] [data-se*="slide-"]{ transform: translate(0); opacity: 1; }
		.seActive[data-se] [data-se*="flip-"]{ transform: perspective(2500rem) rotateX(0deg); }
		.seActive[data-se]:not([data-se-offset]) [data-se]{ transform: translate(0); opacity: 1; }
		[data-se-column] [data-se].seActive{ transition-delay: calc(var(--index) * calc(var(--delay) * 1ms)); animation-delay: calc(var(--index) * calc(var(--delay) * 1ms)); }
	}
	@media(min-width:1280px){
		.seActive[data-se^="clip-"]{ transition-duration: 1s; }
		[data-se-column="3"] [data-se].seActive:nth-child(3n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="3"] [data-se].seActive:nth-child(3n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="3"] [data-se].seActive:nth-child(3n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] [data-se].seActive:nth-child(4n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] [data-se].seActive:nth-child(4n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] [data-se].seActive:nth-child(4n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] [data-se].seActive:nth-child(4n+4){ transition-delay: calc(3 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] [data-se].seActive:nth-child(5n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] [data-se].seActive:nth-child(5n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] [data-se].seActive:nth-child(5n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] [data-se].seActive:nth-child(5n+4){ transition-delay: calc(3 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] [data-se].seActive:nth-child(5n+5){ transition-delay: calc(4 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] [data-se].seActive:nth-child(6n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] [data-se].seActive:nth-child(6n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] [data-se].seActive:nth-child(6n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] [data-se].seActive:nth-child(6n+4){ transition-delay: calc(3 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] [data-se].seActive:nth-child(6n+5){ transition-delay: calc(4 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] [data-se].seActive:nth-child(6n+6){ transition-delay: calc(5 * calc(var(--delay) * 1ms)); }
	}
	@media(max-width: 1279px){
		.seActive[data-se^="clip-"]{ transition-duration: .6s; }
		[data-se-column] [data-se*="slide-"]{ transform: translateY(40rem); }
		[data-se-column] [data-se*="slide-"].seActive{ transform: translate(0); }
	}
	@media(max-width: 1279px) and (min-width: 768px){
		/* :is([data-se-column="3"], [data-se-column="4"]) > [data-se].seActive:nth-child(odd){ transition-delay: 0s; }
		:is([data-se-column="3"], [data-se-column="4"]) > [data-se].seActive:nth-child(even){ transition-delay: calc(var(--delay) * 1ms); } */
		:is([data-se-column="5"], [data-se-column="6"]) > [data-se].seActive:is(:nth-child(6n+1), :nth-child(6n+4)){ transition-delay: calc( 0 * calc(var(--delay) * 1ms)); }
		:is([data-se-column="5"], [data-se-column="6"]) > [data-se].seActive:is(:nth-child(6n+1), :nth-child(6n+4)){ transition-delay: calc( 1 * calc(var(--delay) * 1ms)); }
		:is([data-se-column="5"], [data-se-column="6"]) > [data-se].seActive:is(:nth-child(6n+1), :nth-child(6n+4)){ transition-delay: calc( 2 * calc(var(--delay) * 1ms)); }
	}
	@media(max-width: 767px){
		#wrap [data-se-delay]{ transition-delay: 0s; }
		[data-se-column] > *:nth-child(odd){ transition-delay: 0s; }
		[data-se-column] > *:nth-child(even){ transition-delay: calc(var(--delay) * 1ms); }
	}
	@keyframes svgAni{
		0%{ stroke-dasharray: var(--totalLength); stroke-dashoffset: var(--totalLength); }
		100%{ stroke-dasharray: var(--totalLength); stroke-dashoffset: 0; }
	}
	svg.se{ opacity: 1; transform: translate(0); }
	svg.active{ animation: svgAni 1s linear both; }

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

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

/* header */
:root{
	--header_height: 100rem;
}
header{ position: absolute; width: 100%; height: var(--header_height); z-index: 50; }
.header__inr{ display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 35rem; height: 100%; z-index: unset; }
.logo{ display: inline-block; position: relative; z-index: 1; }
/* .logo__a{ display: inline-block; font-size: 0; } */
.logo__a{ display: inline-block; font-size: 27.5rem; }
.logo__svg{ height: 25rem; min-height: 20px; font-size: 1rem; fill: currentColor; }

header nav{ position: relative; display: flex; align-items: center; height: 100%; }
header .gnb{ display: flex; position: relative; height: 100%; }
header .gnb > li{ display: inline-block; position: relative; height: 100%; pointer-events: auto; }
header .gnb [data-gnb="1"]{ display: flex; align-items: center; height: 100%; padding: 0 3.35ch; font-size: 18rem; font-weight: 600; }
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 li:hover .sub_menu{ visibility: visible; top: 80%; opacity: 1; }
header .gnb [data-gnb="2"]{ display: block; padding: 14px; color: #333; border-top: 1px solid #ddd; font-size: 14px; text-align: center; }
header .gnb [data-gnb="2"]:hover{ background: var(--primary); color: #fff; }
header .gnb li:first-child [data-gnb="2"]{ border-top: 0; }

/* mobile-menu */
.btn_menu{ position: relative; width: 28rem; height: 28rem; background: 0; box-sizing: border-box; color: inherit; z-index: 1; }
.btn_menu span{ display: block; margin-left: auto; width: 100%; height: 2rem; background: currentcolor; }
.btn_menu span + span{ margin-top: 8rem; }
@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; }
}

/* 모바일 메뉴 */
.m_gnb { z-index:90; opacity:0; display: flex; flex-direction: column;  visibility: hidden; position:fixed; top:0; left:0; width:100%; height:100vh;  background:#fff; transition:0.5s }
/* mheader */
.m_gnb__header{width:90%; margin: 0 auto; position: relative; z-index: 50; box-sizing: border-box;}
.m_gnb__header h1 {position: absolute; top: 30rem; left: 0}
.m_gnb .btn_close{ position: absolute; top: 40rem;  right:-100rem; opacity: 0; flex: 0 0 25rem; display: block; width: 22rem; height: 22rem; background: 0; font-size: 0; }
.m_gnb.active .btn_close{ opacity: 1; right: 0; }
.m_gnb .btn_close::before,
.m_gnb .btn_close::after{ content: ''; display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 1rem; background: #000; transform: translateY(-50%) rotate(45deg); }
.m_gnb .btn_close::after{ transform: translateY(-50%) rotate(-45deg); }
.m_gnb .logo__svg {fill: #222;}

.m_gnb.active{ opacity:1; visibility: visible; background:#fff; }
.m_gnb .sub_menu { display: none; margin-top: 20rem;}
.m_gnb [data-gnb="2"]{ position: relative; display: block; padding: 8rem 0; font-size: var(--fs18); color: #111; font-weight: 300; transition: all .3s; }
.m_gnb [data-gnb="2"]:hover {color: var(--primary); font-weight: 400;}
.m_gnb .mgnb_menu {display:flex; align-items: center; height: 100%;}
.m_gnb .mgnb_menu > ul {width: 50%;}
.m_gnb .mgnb_menu > div {width:50%; height:100%}

.m_gnb div[data-full="bg"]{background-image:url(/images/content/mgnb_img.jpg); background-size:cover; background-repeat:no-repeat; background-position:50% 50%; transition: all .5s;}
.m_gnb div[data-full="menu"] > ul {margin-left:100rem; margin-top: 50rem;}
.m_gnb div[data-full="menu"] > ul > li{margin-bottom:30rem; text-align:left;}
.m_gnb div[data-full="menu"] > ul > li [data-gnb="1"] {display: flex;align-items: center;font-size: 32rem;color:#111;font-weight: 400;}
.m_gnb div[data-full="menu"] > ul > li > [data-gnb="1"]:before{content:''; display:block; width:0; height:1rem; background:#111;  transition:0.5s}
.m_gnb div[data-full="menu"] > ul > li > [data-gnb="1"]:hover:before{width:50rem; margin-right:30rem; transition:0.5s}


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

@media(max-width: 1080px){
	.m_gnb div[data-full="bg"] {display: none;}
	.m_gnb .mgnb_menu > ul {width: 100%;}
}
@media(max-width: 767px){
	.logo__svg {height: 20rem;}
	.btn_menu span {height: 1rem;}
	.btn_menu span + span {margin-top: 6rem;}
	.m_gnb__header h1 {top: 25rem;}
	.m_gnb.active .btn_close {top: 30rem;}
	.m_gnb .logo__svg {height: 20rem;} 
	.m_gnb div[data-full="menu"] > ul {margin-left: 10%; margin-top: 0;}
	.m_gnb div[data-full="menu"] > ul > li [data-gnb="1"] {font-size: 20rem;}
	.m_gnb [data-gnb="2"] {font-size: 16rem;}
	.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;}
}

/* footer */
footer{ padding: 50rem 0 55rem; background: #111; font-size: 14rem; color: #bbb; }
.footer__inr{ display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 40rem; max-width: 1600rem; }
.footer__address{ display: flex; flex-wrap: wrap; gap: 4rem 34rem; }
.footer__copyright{ margin-top: 7rem; text-transform: capitalize; font-weight: 500; }
.footerSns{ margin-top: 4rem; display: flex; gap: 15rem; }
.footerSns__a{ display: flex; align-items: center; justify-content: center; width: 42rem; height: 42rem; border: 1px solid #fff; border-radius: 50%; }
.footerSns__svg{ fill: #fff; }
.footerSns__svg.youtube{ width: 18rem; height: 13rem; }
.footerSns__svg.instagram{ width: 18rem; height: 18rem; }
.footerSns__svg.homepen{ width: 16rem; height: 16rem; }
@media(prefers-reduced-motion:no-preference){
	.footerSns__a,
	.footerSns__svg{ transition: .4s; }
}
@media(hover:hover){
	.footerSns__a:not(:hover){ border-color: #ffffff80; }
	.footerSns__a:not(:hover) .footerSns__svg{ opacity: .6; }
}