/* Scroll Animation */
@media(prefers-reduced-motion: no-preference){
	[scroll_effect="clip_right"]{ clip-path: inset(0 100% 0 0); transition: .8s; }
	[scroll_effect="slide_up"]{ transform: translateY(20px); opacity: 0; transition: .6s; }
	[scroll_effect="slide_left"]{ transform: translateX(20px); opacity: 0; transition: .6s; }
	[scroll_effect="slide_right"]{ transform: translateX(-20px); opacity: 0; transition: .6s; }
	[scroll_effect*="flip_"]{ backface-visibility: hidden; }
	[scroll_effect="flip_up"]{ transform: perspective(2500px) rotateX(-100deg); transition: .6s; }
	[scroll_effect="clip_right"].effect_active{ clip-path: inset(0); }
	[scroll_effect*="slide_"].effect_active{ transform: translate(0); opacity: 1; }
	[scroll_effect*="flip_"].effect_active{ transform: perspective(2500px) rotateX(0deg); }
	[scroll_effect_delay="50"]{ transition-delay: .05s; }
	[scroll_effect_delay="100"]{ transition-delay: .1s; }
	[scroll_effect_delay="150"]{ transition-delay: .15s; }
	[scroll_effect_delay="200"]{ transition-delay: .2s; }
	[scroll_effect_delay="250"]{ transition-delay: .25s; }
	[scroll_effect_delay="300"]{ transition-delay: .3s; }
	[scroll_effect_delay="350"]{ transition-delay: .35s; }
	[scroll_effect_delay="400"]{ transition-delay: .4s; }
	[scroll_effect_delay="450"]{ transition-delay: .45s; }
	[scroll_effect_delay="500"]{ transition-delay: .5s; }
	[scroll_effect_column] [scroll_effect]{ transition-delay: calc( var(--index) * calc( var(--delay) * 1ms )); }
	@media(min-width:768px){
		[scroll_effect].effect_active [scroll_effect]{ transform: translate(0); opacity: 1; }
	}
	@media(max-width:1279px) and (min-width:768px){
		:is([scroll_effect_column="3"], [scroll_effect_column="4"]) > *:nth-child(odd){ transition-delay: 0s; }
		:is([scroll_effect_column="3"], [scroll_effect_column="4"]) > *:nth-child(even){ transition-delay: calc( var(--delay) * 1ms ); }
		:is([scroll_effect_column="5"], [scroll_effect_column="6"]) > *:nth-child(4){ transition-delay: calc( (var(--index) - 1 ) * calc( var(--delay) * 1ms )); }
		:is([scroll_effect_column="5"], [scroll_effect_column="6"]) > *:nth-child(5){ transition-delay: calc( (var(--index) - 2 ) * calc( var(--delay) * 1ms )); }
		:is([scroll_effect_column="5"], [scroll_effect_column="6"]) > *:nth-child(6){ transition-delay: calc( (var(--index) - 3 ) * calc( var(--delay) * 1ms )); }
	}
	@media(max-width:767px){
		[scroll_effect_delay]{ transition-delay: 0s; }
		[scroll_effect_column] > *:nth-child(odd){ transition-delay: 0s; }
		[scroll_effect_column] > *:nth-child(even){ transition-delay: calc( var(--delay) * 1ms ); }
	}

	@keyframes svgAni {
		0% { stroke-dashoffset: var(--stroke-dash); }
		100% { stroke-dashoffset: 0; }
	}
	svg.scroll_effect{ stroke-dasharray: var(--stroke-dash); stroke-dashoffset: var(--stroke-dash); opacity: 1; transform: translate(0) }
	svg.active{ animation: svgAni 1s linear both; }
}

.inr{ position: relative; margin: 0 auto; max-width: var(--inner); width: 92%; height: 100%; z-index: 2; }
.inr.wide{ max-width: var(--inner); }
.inr.narrow{ max-width: 1400px; }
.wrapper{margin: 0 auto; max-width: var(--inner); width: 95%; }
/* header */
:root{
	--header_height: 100px;
}
.header{ height: var(--header_height); }
#header{ position:relative; inset: 0 0 auto; background: #fff; border-bottom: 1px solid var(--border); box-sizing: border-box; z-index:99; }
.header__inr{ display: flex; justify-content: space-between; align-items: center; }
.header__logo{ display: inline-flex; align-items: center; gap: .6em; position:relative; top: calc( var(--header_height) * -.04 ); height: 1.83333333em; font-size: 25px; font-weight: 800; }
.header__logo-img{ min-height: 20px; height: 100%; }
.header__logo-txt{ position: relative; top: .28em; }

#header nav{ display: flex; justify-content: center; align-items: center; position: absolute; inset: 0; pointer-events: none; }
#header .gnb{ display: flex; position:relative; height: 100%; pointer-events: auto; }
#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 35rem; font-size:17px; font-weight:600; }
#header .gnb > li:hover > [data-gnb="1"]{ color: var(--primary); }
#header .gnb .sub_menu{ visibility: hidden; position:absolute; top: 75%; min-width: 130px; width: max-content; left: 50%; transform: translateX(-50%); background:#fff; border:1px solid #ddd; opacity: 0; z-index:99; }
#header .gnb li:hover .sub_menu{ visibility: visible; top: 85%; opacity: 1; }
#header .gnb .sub_menu li a{ display: block; padding:14px; color:#333; 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 }

#header .hidden {display: none;}

@media(max-width:1279px){
	#header .gnb{ display: none; }
}

@media(max-width:767px){
	:root{
		--header_height: 80px;
	}

	.header__logo {font-size:var(--font_size18);}
}



/* util */
.header_wrap_util{ display: flex; align-items: center; gap: 2em; }
.header_util{ display: inline-flex; align-items: center; position:relative; gap: 20px; }
.header_util__icon{ display:inline-flex; justify-content: center; align-items: center; width:50px; height:50px; background:#fff; border: 1px solid #0000; border-radius:50%; box-sizing: border-box; }
.header_util__icon-img{ height: 40%; }
.header_util__txt{display:inline-block; color:#fff;}
.header_util__txt-title{ display: block; position: relative; top: .14285714em; font-size:14px; color: #d9d9d9; }
.header_util__txt-number{ display: block; font-size:20px; font-weight: 800; color:#fff; }
.header_util.show_mo{ padding: 14px 15px; }
.header_util.show_mo .header_util__icon{ background: #f5f5f5; border-color: #eaeaea; }
.header_util.show_mo .header_util__txt-title{ font-size: 14rem; color: #666; }
.header_util.show_mo .header_util__txt-number{ font-size: 20rem; color: var(--primary); }

/* mobile-menu */
.btn_menu{ position:relative; flex-shrink: 0; width:27px; height:25px; background: 0; box-sizing: border-box; color: inherit; z-index:90; }
.btn_menu span{ display:block; margin-left: auto; width:100%; height:1px; background: currentColor; }
.btn_menu span + span{margin-top:8px; }

/* 모바일 메뉴 */
.m_gnb{overflow: hidden auto; position:fixed; top:0px; right: 0; transform: translateX(100%); max-width:280rem; width: 100%; height:100%; background:var(--white); transition-timing-function: ease-out; z-index:999;}
.m_gnb .header{ display: flex; align-items: center; justify-content: flex-end; height: var(--header_height); }
.m_gnb > ul > li > a{display:block; position:relative; padding:15px 25px; border-bottom: 1px solid #eaeaea; color:#424242; transition:all 0.3s ease 0s;}
.m_gnb > ul > li:first-child > a{ border-top: 1px solid #eaeaea }
.m_gnb > ul > li > a.open:before{content:''; display:block; position:absolute; top:50%; transform: translateY(-50%); right:10px; width:11px; height:7px; background:url(../images/common/menu_button.svg) no-repeat 50% 0; transition:all 0.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:1px solid #dedede;}
.m_gnb .sub_menu > li > a{position:relative; display:block; padding:15px 25px; font-size:0.95em; color:var(--black); }

.m_gnb .btn_close{opacity: 0; flex-shrink: 0; display: block; position:relative; margin-right: -100vw; width:27px; height:27px; background: 0; font-size:0px; }
.m_gnb.active{transform: translateX(0);}
.m_gnb.active .btn_close{opacity:1; margin-right: 15px }
.m_gnb .btn_close:before,
.m_gnb .btn_close:after{content: ''; display:block; position:absolute; top:50%; left:0px;  width:100%; height:1px; 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, 0.4); z-index:995; visibility: hidden; opacity: 0; }
.cover.active{visibility: visible; opacity: 1 }
@media(prefers-reduced-motion: no-preference){
	#header .gnb > li > .sub_menu{ transition: .3s; }
	.m_gnb{ transition-duration: .5s; }
	.m_gnb .btn_close{ transition: .8s; }
	.cover{ transition: .4s; }
}

/* footer */
#footer{ padding: 39px 0 40px; background: #111; color: rgba(255, 255, 255, 0.25); }
.footer__address{ display: flex; flex-wrap: wrap; justify-content: center; gap: 4rem 27rem; font-size:14px; }
.footer__copyright{ font-size: 12rem; color: #767676; }
.footer__copyright-office{ font-weight: 600; color: #bbb; }