/* 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="scale"]{ transform:scale(1.2); transition:5s; }
	[data-scroll_effect="scale"].effect_active{ transform:scale(1);}
	[data-scroll_effect="clip_left"].effect_active{ clip-path: inset(0); }
	[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; }

	/* 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{position:relative; margin: 0 auto; padding:0 13.2vw;}
.inr.wide{ max-width: 1720rem; }
.inr.narrow{ max-width: 1280rem; }
.wrapper{ position: relative; margin: 0 auto; max-width: calc(var(--inner) * 1rem); width: calc(var(--inner_width) * 100%); }
@media(max-width:1279px){
    .inr{padding:0 4vw;}
}

/* header */
#header{position:fixed; top:0; transition:0.3s ease; width:100%; height:88rem; z-index:10; border-bottom:1px solid rgba(255,255,255,0.3); background:none !important;}
#header.bg{background:#fff !important;}
#header.show{border-color:#e8e8e8;}
#header .header_inr{display:flex; margin:auto; justify-content:space-between; align-items:center; height:100%; z-index:unset; width:92%;}
#header .logo{display:block; position:relative; /*position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);*/ width:230rem; z-index:1;}
#header .logo img{display:block; width:100%; }
#header .logo img.logo_c{position:absolute; left:0; top:0; opacity:0;}
#header.show .logo img.logo_w{opacity:0;}
#header.show .logo img.logo_c{opacity:1;}

#header nav{position:relative; display:flex; align-items:center; height:100%; /*width:100%;*/}
#header .gnb{display:flex; position:relative; height:100%;  width:100%;}
/*
#header .gnb > div{display:flex; width:50%;}
#header .gnb > div.left{justify-content:flex-end; padding-right:240rem;}
#header .gnb > div.right{padding-left:240rem;}
*/
#header .gnb > div > 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 44.5rem; font-size:20rem; font-weight: 500; color:#fff;}
#header.show .gnb [data-gnb="1"]{color:#111;}
#header .gnb .sub_menu{visibility:hidden; position:absolute; top:90%; left:50%; transform: translateX(-50%); min-width:140rem; width: max-content; background:#fff; border:1px solid #ddd; opacity: 0; }
#header .gnb li:hover .sub_menu{ visibility: visible; top:100%; opacity: 1; }
#header .gnb .sub_menu li a{display:block; padding:14rem; color:#333; border-top:1px solid #ddd; font-size:18rem; text-align:center; transition:0.2s ease;}
#header .gnb .sub_menu li a:hover{background:var(--primary); color:#fff; }
#header .gnb .sub_menu li:first-child a{border-top:0;}

/* mobile-menu */
/*
.btn_menu{ display: inline-flex; display:none; flex-direction: column; justify-content: space-around; position: relative; width: 3.125em; height: 3.125em; padding: .8125em; background: #ffc641; border-radius: 2em; box-sizing: border-box; font-size: 1rem; color: inherit; z-index: 1; }
.btn_menu span{ display: block; width: 100%; height: 2px; background: currentcolor; }
*/

.btn_menu{display:none; position:absolute; flex-direction: column; justify-content: space-around; width: 25px; height:20px; background: 0; box-sizing: border-box; color: inherit; z-index: 1; right:4%; top:50%; transform:translateY(-50%);}
.btn_menu span{display:block; width:100%; height:2px; background:#fff; }
.btn_menu span + span{ margin-top: 5px; }
#header.show .btn_menu span{background:#333;}

.fixed_btn{display:flex; flex-direction:column; align-items:flex-end; position:fixed; z-index:10; right:2%;  transition:0.3s ease; bottom:-20rem;}
.fixed_btn a{display:flex; position:relative; align-items:center; width:50rem; height:50rem; border-radius:25rem; cursor:pointer;}
.fixed_btn a.btn_inquiry{padding-left:18rem; background:var(--primary); transition:0.4s ease;}
.fixed_btn a.btn_inquiry img{display:block; width:19rem;}
.fixed_btn a.btn_inquiry span{position:absolute; top:50%; left:45rem; transform:translateY(-50%); font-size:14rem; font-weight:500; color:#fff; opacity:0; transition:0.5s ease;}
.fixed_btn a.btn_top{justify-content:center; margin-top:10rem; background:rgba(205,205,205,0.3); transition:0.2s ease; opacity:0; visibility:hidden;}
.fixed_btn a.btn_top i{display:block; margin-top:4rem; width:12rem; height:12rem; border-top:2px solid #333; border-right:2px solid #000; transform:rotate(315deg); transition:0.2s ease;}
.fixed_btn.top{bottom:40rem;}
.fixed_btn.top a.btn_top{opacity:1; visibility:visible;}
@media(hover:hover){
    .fixed_btn a.btn_inquiry:hover{padding-left:20rem; width:125rem;}
    .fixed_btn a.btn_inquiry:hover span{opacity:1;}
    .fixed_btn a.btn_top:hover{background:#111;}
    .fixed_btn a.btn_top:hover i{border-color:#fff;}
}
@media(prefers-reduced-motion:no-preference){
	#header,
	.logo__img,
	.gnb .sub_menu,
	.btn_menu span{ transition: .4s; }
}

/* 모바일 메뉴 */
.m_gnb{ overflow: hidden auto; position: fixed; top: 0; right: 0; transform: translateX(100%); width:280rem; height: 100%; background: var(--white); transition-timing-function: ease-out; z-index: 3; }
.m_gnb.active{ transform: translateX(0); }
.m_gnb__header{ display: flex; align-items: center; justify-content: flex-end; height: var(--header_height); }
.m_gnb > ul{padding:40rem 0;}
.m_gnb > ul > div > li > a{display:block; position:relative; padding:15rem 25rem; color:#111; transition:all .3s ease 0s; font-size:22rem;}
.m_gnb > ul > div > 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 > div > li > a.active::before{ transform: translateY(-50%) rotate(180deg); }
.m_gnb .sub_menu{display:none; padding:12rem 0; background: #f5f5f5;}
.m_gnb .sub_menu > li+li{margin-top:10rem;}
.m_gnb .sub_menu > li > a{ position: relative; display: block; padding:3rem 25rem; font-size: 18rem; color: var(--black); }

#header .btn_close{display:block; position:fixed; width:45rem; height:45rem; border-radius:50%; background:#fff; z-index:3; right:-100%; top:15rem; transition:0.7s ease; transition-timing-function: ease-out;}
#header .btn_close::before,
#header .btn_close::after{ content: ''; display: block; position: absolute; top: 50%; left:50%; width:22rem; height:2px; background:#333;}
#header .btn_close::before{ transform: translate(-50%,-50%) rotate(45deg); }
#header .btn_close::after{ transform: translate(-50%,-50%) rotate(135deg); }
#header .btn_close.active{right:300rem; transition:0.7s ease; transition-timing-function: ease-out;}

.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){
	.m_gnb{ transition-duration: .5s; }
	.m_gnb .btn_close{ transition: .8s; }
	.cover{ transition: .4s; }
}

@media(max-width:1279px){
    #header{height:80rem;}
    #header .header_inr{position:relative;}
/*    #header .logo{left:0; transform:translate(0, -50%);}*/
	#header .gnb{display:none;}
    .btn_menu{display:inline-flex;}
    .fixed_btn{bottom:-35rem;}
    .fixed_btn.top{bottom:20rem;}
    .fixed_btn a{width:45rem; height:45rem;}
    .fixed_btn a.btn_inquiry{padding-left:15rem;}
    
}
@media(max-width:767px){
    #header .logo{width:200rem;}
    .m_gnb{width:80%}
    #header .btn_close.active{right:calc(80% + 10rem);}
}

/* footer */
#footer{padding:80rem 0; background:#f0f0f0; color: #999; }
#footer .logo{display:block; width:200rem;}
#footer .logo img{display:block; width:100%;}
#footer .company{display:flex; flex-direction:row-reverse; justify-content:space-between; margin-top:40rem;}
#footer .company .link{width:160rem;}
#footer .company .link li+li{margin-top:10rem;}
#footer .company .link li a{display:block; width:100%; height:40rem; line-height:40rem; border-radius:20rem; border:1px solid #aaa; font-size:16rem; color:#333; text-align:center; font-weight:500; transition:0.2s ease;}
#footer .company .address{width:calc(100% - 200rem);}
#footer .company .address address{margin-bottom:25rem; font-size:0;}
#footer .company .address address span{display:inline-block; margin-bottom:8rem; margin-right:30rem; font-size:14rem; color:#777;}
#footer .company .address address span b{display:inline-block; margin-right:5rem; color:#333;}
#footer .company .address address span a{display:inline-block;}
#footer .company .address p{color:#aaa;  font-size:13rem;}
#footer .company .address p b{color:#333;}
@media(hover:hover){
    #footer .company .link li a:hover{border-color:#333; background:#333; color:#fff;}
}
@media(max-width:1279px){
    #footer{padding:50rem 0;}
    #footer .company{margin-top:30rem;}
    #footer .company .address address{margin-bottom:15rem;}
    #footer .company .address address span{margin-bottom:6rem;}
}
@media(max-width:767px){
    #footer .logo{margin:auto; width:180rem;}
    #footer .company{display:block;}
    #footer .company .link{display:flex; width:100%; justify-content:center;}
    #footer .company .link li{width:160rem;}
    #footer .company .link li+li{margin-top:0; margin-left:10rem;}
    #footer .company .address{margin-top:30rem; width:100%; text-align:center;}
    #footer .company .address address span{margin:0 15rem 5rem;}
}


/* bg_line */
.bg_line{display:flex; position:absolute; z-index:-1; top:0; left:0; padding:0 13.2vw; width:100%; height:100%; justify-content:space-between; pointer-events:none;}
.bg_line li{width:1px; height:100%; background:#f1f1f1;}
@media(max-width:1279px){
    .bg_line{padding:0 4vw;}
}