/* Scroll Animation */
@media(prefers-reduced-motion:no-preference){
	section:has(:where([data-se*="-left"], [data-se*="-right"], [data-se="flip-Y"])){ overflow: clip visible; }
	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="blur"]{ filter: blur(20rem); }
	[data-se="radius"]{ border-radius: 100%; }
	[data-se="clip-centerline"]{ clip-path: inset(0 50%); }
	[data-se="clip-midline"]{ clip-path: inset(50% 0); }
	[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*="flip-"]{ backface-visibility: hidden; }
	[data-se="flip-up"]{ transform: perspective(2500rem) rotateX(-100deg); }
	[data-se="flip-Y"]{ opacity: 0; }
	[data-se="hidden-up"]{ transform: translateY(30rem); clip-path: inset(0 0 100%); }
	[data-se="hidden-right"]{ transform: translateX(-30rem); clip-path: inset(0 100% 0 0); }
	[data-se="hidden-left"]{ transform: translateX(30rem); clip-path: inset(0 0 0 100%); }
	[data-se*="slide-"]:not(.seActive){ opacity: 0; }
	[data-se="slide-up"]{ transform: translateY(40rem); }
	[data-se="slide-left"]{ transform: translateX(40rem); }
	[data-se="slide-right"]{ transform: translateX(-40rem); }
	[data-se="swaying-top"]{ transform: perspective(400px) rotateX(90deg); transform-origin: top; backface-visibility: hidden; }
	[data-se="parallax-y"]{ translate: 0 clamp(-65%, var(--translateY, -50%), -35%); transition: .6s cubic-bezier(0, 0, 0.4, 1); }
	.seActive[data-se="blur"]{ filter: blur(0); }
	.seActive[data-se="radius"]{ border-radius: 0; }
	.seActive[data-se*="clip-"]{ clip-path: inset(0); }
	.seActive[data-se*="flip-"]{ transform: perspective(2500rem) rotateX(0deg); }
	.seActive[data-se="flip-Y"]{ animation: flip-Y 1s both; }
	.seActive[data-se*="hidden-"]{ transform: translate(0); clip-path: inset(0); }
	.seActive[data-se*="slide-"]{ transform: translate(0); }
	@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="swaying-top"]{ animation: swaying-top 1s both; }
	@keyframes swaying-top{
		0%{ transform: perspective(400px) rotateX(90deg); }
		20%{ transform: perspective(400px) rotateX(-60deg); }
		40%{ transform: perspective(400px) rotateX(20deg); }
		60%{ transform: perspective(400px) rotateX(-10deg); }
		80%{ transform: perspective(400px) rotateX(5deg); }
		100%{ transform: perspective(400px) rotateX(0deg); }
	}
	.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*="hidden-"]{ transform: translate(0); clip-path: inset(0); }
		.seActive[data-se] [data-se*="flip-"]{ transform: perspective(2500rem) rotateX(0deg); }
		.seActive[data-se] [data-se*="slide-"]{ transform: translate(0); opacity: 1; }
		.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="2"] > *:nth-child(2n+1) [data-se].seActive,
		[data-se-column="2"] [data-se].seActive:nth-child(2n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="2"] > *:nth-child(2n+2) [data-se].seActive,
		[data-se-column="2"] [data-se].seActive:nth-child(2n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="2"] > *:nth-child(3n+1) [data-se].seActive,
		[data-se-column="3"] [data-se].seActive:nth-child(3n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="3"] > *:nth-child(3n+2) [data-se].seActive,
		[data-se-column="3"] [data-se].seActive:nth-child(3n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="3"] > *:nth-child(3n+3) [data-se].seActive,
		[data-se-column="3"] [data-se].seActive:nth-child(3n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] > *:nth-child(4n+1) [data-se].seActive,
		[data-se-column="4"] [data-se].seActive:nth-child(4n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] > *:nth-child(4n+2) [data-se].seActive,
		[data-se-column="4"] [data-se].seActive:nth-child(4n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] > *:nth-child(4n+3) [data-se].seActive,
		[data-se-column="4"] [data-se].seActive:nth-child(4n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="4"] > *:nth-child(4n+4) [data-se].seActive,
		[data-se-column="4"] [data-se].seActive:nth-child(4n+4){ transition-delay: calc(3 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] > *:nth-child(5n+1) [data-se].seActive,
		[data-se-column="5"] [data-se].seActive:nth-child(5n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] > *:nth-child(5n+2) [data-se].seActive,
		[data-se-column="5"] [data-se].seActive:nth-child(5n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] > *:nth-child(5n+3) [data-se].seActive,
		[data-se-column="5"] [data-se].seActive:nth-child(5n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] > *:nth-child(5n+4) [data-se].seActive,
		[data-se-column="5"] [data-se].seActive:nth-child(5n+4){ transition-delay: calc(3 * calc(var(--delay) * 1ms)); }
		[data-se-column="5"] > *:nth-child(5n+5) [data-se].seActive,
		[data-se-column="5"] [data-se].seActive:nth-child(5n+5){ transition-delay: calc(4 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] > *:nth-child(6n+1) [data-se].seActive,
		[data-se-column="6"] [data-se].seActive:nth-child(6n+1){ transition-delay: calc(0 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] > *:nth-child(6n+2) [data-se].seActive,
		[data-se-column="6"] [data-se].seActive:nth-child(6n+2){ transition-delay: calc(1 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] > *:nth-child(6n+3) [data-se].seActive,
		[data-se-column="6"] [data-se].seActive:nth-child(6n+3){ transition-delay: calc(2 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] > *:nth-child(6n+4) [data-se].seActive,
		[data-se-column="6"] [data-se].seActive:nth-child(6n+4){ transition-delay: calc(3 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] > *:nth-child(6n+5) [data-se].seActive,
		[data-se-column="6"] [data-se].seActive:nth-child(6n+5){ transition-delay: calc(4 * calc(var(--delay) * 1ms)); }
		[data-se-column="6"] > *:nth-child(6n+6) [data-se].seActive,
		[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+2), :nth-child(6n+5)){ transition-delay: calc( 1 * calc(var(--delay) * 1ms)); }
		:is([data-se-column="5"], [data-se-column="6"]) > [data-se].seActive:is(:nth-child(6n+3), :nth-child(6n+6)){ 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 */
.wrapper{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); }
.inr{position:relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); }
.inr-wide{position:relative; margin: 0 auto; max-width: calc(var(--inr-wide) * 1rem); width: calc(var(--inr-width) * 100%);}
.inr-full{position:relative; margin: 0 auto; max-width: calc(var(--inr-full) * 1rem);}
.inr-narrow{position:relative; margin: 0 auto; max-width: calc(var(--inr-narrow) * 1rem); width: calc(var(--inr-width) * 100%);}

/* header */
:root{ --header-height:86rem; }
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:4;}
.logo{position:relative; display:block; height:27rem;}
.logo > img{display:block; position:absolute; left:0; top:0; width:auto; height:100%; transition:0.2s;}
.logo_img{opacity:0;}
header.active .logo_img{opacity:1;}
header.active .logo_img2{opacity:0;}

/* gnb */
header .menuWrap{display:flex; align-items:center; height:100%;}
header nav{ position: relative; display: flex; align-items: center; height: 100%; color: var(--black); }
header.active nav{display:none;}
header .gnb{ position: relative; display: flex; height: 100%; }
header .gnb > li{ position: relative; display: inline-block; margin-right:90rem; height: 100%; }
header .gnb [data-gnb="1"]{display:flex; align-items:center; height:100%; font-size:18rem; font-weight:600; color:#fff; font-family:var(--font-mont);}
header .gnb .sub_menu{ visibility: hidden; position: absolute; top: 75%; left: 50%; transform: translateX(-50%); padding:20rem 0; min-width:130rem; width: max-content; background: #fff; border: 1px solid #ddd; opacity: 0; }
header .gnb li:hover .sub_menu{ visibility: visible; top: 85%; opacity: 1; }
header .gnb [data-gnb="2"]{ display: block; padding:0 14rem; color: #333; font-size:17rem; text-align: center; transition:0.2s;}
header .gnb [data-gnb="2"]:hover{ color:var(--primary); font-weight:bold;}
header .gnb .sub_menu li+li{margin-top:10rem;}

/* mobile-menu */
.btn_menu{position: relative; width:30rem; height:30rem; background: 0; color: inherit; z-index:5; overflow:hidden; border:none; cursor:pointer;}
.btn_menu span{display:block; position:absolute; margin-left: auto; width: 100%; height:2rem; background:#fff; transition:0.2s ease;}
.btn_menu span:nth-child(1){transform: translateY(-10rem); right:0;}
.btn_menu span:nth-child(2){ transform-origin: right; }
.btn_menu span:nth-child(3){transform: translateY(10rem); }
.active .btn_menu span{background:#333;}
.active .btn_menu span:nth-child(1){width:100%; transform: translateY(0) rotate(-45deg);}
.active .btn_menu span:nth-child(2){transform: scaleX(0); }
.active .btn_menu span:nth-child(3){width:100%; transform: translateY(0) rotate(45deg);}
@media(prefers-reduced-motion:no-preference){
	header,
	.logo__img,
	.gnb .sub_menu,
	.btn-menu span{ transition: .4s; }
}
@media(max-width: 1279px){
	:root{ --header-height: 70rem; }
    header{position:fixed; top:0; left:0;}
    .logo{height:25rem;}
	header nav{ display: none; }
    header.fixed{background:#fff; border-bottom:1px solid #ddd;}
    header.fixed .logo_img{opacity:1;}
    header.fixed .logo_img2{opacity:0;}
    header.fixed .btn_menu span{background:#333;}
}
@media(max-width:767px){
    :root{ --header-height:66rem; }
    .logo{height:23rem;}
}

/* 모바일 메뉴 */
.mGnb{ overflow: hidden auto; position: fixed; top: 0; right: 0; transform: translateX(100%); width: 100%; height: 100%; background: var(--white); z-index: 3; }
.mGnb.active{ transform: translateX(0); }
.mGnb__header{ display: grid; align-items: center; justify-content: flex-end; height: var(--header-height); border-bottom:1px solid #ddd;}

.mGnb_All{display:none; padding:60rem 80rem; text-align:center;}
.mGnb_All > ul{display:flex;}
.mGnb_All > ul > li{width:calc(100% / 4);}
.mGnb_All > ul > li > a{display:block; font-size:25rem; color:var(--primary); font-weight:bold; font-family:var(--font-mont);}
.mGnb_All__sub{margin-top:25rem;}
.mGnb_All__sub li+li{margin-top:12rem;}
.mGnb_All__sub li a{display:inline-block; font-size:20rem; color:#333; transition:0.2s; font-weight:500;}

.mGnb__ul{padding:50rem 40rem;}
.mGnb__ul > li+li{margin-top:20rem;}
.mGnb [data-gnb="1"]{ position: relative; display: block; padding:5rem 0; font-size:20rem; color:#111; font-family:var(--font-mont); font-weight:700;}
.mGnb [data-gnb="1"] + a{ display: none; }
.mGnb [data-gnb="1"].open::before{ content: ''; position: absolute; top: 50%; transform: translateY(-50%); right:0; display: block; width:20rem; height:12rem; background: url('/images/common/menu_button.svg') no-repeat 50% 0 / contain; }
.mGnb [data-gnb="1"].active::before{ transform: translateY(-50%) rotate(180deg); }
.mGnb .sub_menu{ display: none; margin-top:10rem; margin-bottom:30rem;}
.mGnb .sub_menu > li+li{margin-top:12rem;}
.mGnb [data-gnb="2"]{ position: relative; display: block; padding:5rem 0; font-size:18rem; color:#333; }

.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(prefers-reduced-motion: no-preference){
	.mGnb{ transition: .5s ease-out; }
	.mGnb .btn_close{ transition: .8s; }
	.mGnb [data-gnb="1"]{ transition: .3s; }
	.mGnb [data-gnb="1"].open::before{ transition: .4s; }
	.cover{ transition: .4s; }
}
@media(hover:hover){
    .mGnb_All__sub li a:hover{opacity:0.6;}
}
@media(min-width:768px){
    @media(prefers-reduced-motion: no-preference){
        .mGnb{ transition: .3s ease-out; }
    }
    .mGnb{max-width:100%; transform:none; height: var(--header-height); visibility:hidden;}
    .mGnb.active{height:470rem; transform:none; visibility:visible;}
    .mGnb_All{display:block;}
    .mGnb__ul{display:none;}
}

/* footer */
.btnTop{display:none; position:fixed; right:2%; bottom:20rem; z-index:5;}
.btnTop span{display:flex; align-items:center; justify-content:center; width:70rem; height:70rem; background:rgba(175,175,175,0.6); cursor:pointer; border-radius:50%;}
.btnTop span i{display:block; font-size:15rem; font-family:var(--font-mont); color:#fff; font-style:normal;}
footer{padding:80rem 0; background:#222;}
.footerLink{display:flex;}
.footerLink li+li{margin-left:45rem;}
.footerLink__a{display:block; font-size:20rem; color:#f5f5f5; font-weight:500;}
.footerFamily{position:absolute; top:-13rem; right:0; width:270rem;}
.footerFamily_tit{display:flex; align-items:center; justify-content:space-between; padding:0 20rem; width:100%; height:56rem; line-height:56rem; font-size:18rem; color:#fff; font-family:var(--font-mont); border:1px solid #666; cursor:pointer;}
.footerFamily_tit img{display:block; width:12rem;}
.footerFamily_list{display:none; padding:25rem 20rem; width:100%; border:1px solid #666; border-top:0; background:#111; height:115rem; overflow-y:scroll;}
.footerFamily_list li+li{margin-top:12rem;}
.footerFamily_list a{display:block; font-size:17rem; color:#fff; transition:0.2s;}
.footerInfo{margin-top:50rem; font-size:0;}
.footerInfo span{display:inline-block; margin-bottom:8rem; margin-right:35rem; font-size:15rem; color:#aaa;}
.footerInfo span b{color:#fff;}
.footerInfo p{display:block; margin-top:30rem; font-size:14rem; text-transform:uppercase; color:#888;}
.footerInfo p b{color:#fff;}
@media(hover:hover){
    .footerFamily_list a:hover{opacity:0.6;}
}
@media(max-width:1279px){
    .btnTop span{width:55rem; height:55rem;}
    footer{padding:60rem 0;}
    .footerInfo{margin-top:35rem;}
    .footerInfo p{margin-top:20rem;}
    .footerFamily{width:220rem;}
}
@media(max-width:767px){
    footer{padding:50rem 0;}
    .footerFamily{position:relative; top:auto; margin-top:30rem;}
}








