/* Scroll Animation */
@media(prefers-reduced-motion:no-preference){
	section:has(:where([data-scroll_effect="slide_left"], [data-scroll_effect="slide_right"])){ overflow: hidden; }
	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="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_column] [data-scroll_effect].effect_active{ transition-delay: calc(var(--index) * calc(var(--delay) * 1ms)); }

	/* data-scroll_effect_delay */
	@media(min-width: 768px){
		[data-scroll_effect].effect_active [data-scroll_effect]{ transform: translate(0); opacity: 1; }
	}
	@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); }
	}
}
/* body overflow */
body{overflow-x:hidden;}

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

/* header */
:root{
	--header_height: 142rem;
}
.header{ height: var(--header_height); }
#header{ position: absolute; inset: 0 0 auto; color: #fff; z-index: 100; }
#header *{ letter-spacing: 0; }
.header__inr{ display: flex;  justify-content: space-between; align-items: center; z-index: unset; }
.logo{ display: inline-block; position: relative; z-index: 1; }
.logo__a{ display: block; font-size: 0; }
.logo__a img{max-width:50%; min-width:130px; height:40px;}
.logo__svg{max-width:50%; min-width:130px; height:40px; /*height: clamp(40rem, calc( 54 / var(--inner) * 100vw ), 54rem);*/ font-size: 1rem; }
/* .logo__svg{ height: calc( var(--header_height) * .37); min-height: 20px; font-size: 1rem; } */
.logo__svg :is(.b,.c,.d){fill:#fff;}
.logo__svg .c{fill-rule:evenodd;}
.logo__svg .d{opacity:.65;}

#header nav{ position: relative; display: flex; align-items: center; height: 100%; }
#header .gnb{ display: flex; position: relative; margin-left: 9rem; height: 100%; }
#header .gnb > li{ display: inline-block; position: relative; height: 100%; pointer-events: auto; color:#101010;}
#header .gnb [data-gnb="1"]{ display: flex; align-items: center; height: 100%; padding: 0 53rem; font-size: 17rem; font-weight: 700; }
#header .gnb .large[data-gnb="1"]{ font-size: 18rem; }
#header .gnb > li:hover > [data-gnb="1"]{ color: var(--primary); }
#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 .sub_menu li a{ display: block; padding: 14px; 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; }

.area_util ul{display:flex; gap:20px; padding-top:8rem; font-size:14rem;}
.area_util ul > li > a{display:inline-block; position:relative;}
.area_util ul > li > a span{opacity:0; position:absolute; bottom:-20px; left:50%; display:inline-block; padding:0 10px; background:#f1f1f1; border-radius:50rem; font-size:12px; color:#444; white-space:nowrap; transform:translateX(-50%) translateY(-20px); transition:0.3s ease;}
.area_util [data-util]:before{content:''; display:block; width:20px; height:20px; margin:0 auto 3px; background-repeat:no-repeat; background-position:50% 0;}
.area_util [data-util="login"]:before{background-image:url(../images/common/icon_util_login_b.png);}
.area_util [data-util="logout"]:before{background-image:url(../images/common/icon_util_login_b.png);}
.area_util [data-util="join"]:before{background-image:url(../images/common/icon_util_join_b.png);}
.area_util [data-util="mypage"]:before{background-image:url(../images/common/icon_util_join_b.png);}
.area_util [data-util="basket"]:before{background-image:url(../images/common/icon_util_basket_b.png);}
.area_util [data-util="basket"] i{display:inline-block; position:absolute; right:-10px; top:-4px; padding:2px 6px; background:var(--primary); border-radius:100%; font-size:10px; color:#fff;}


/* mobile-menu */
.header_util{ display: flex; align-items: center; gap: 25rem; }
.header_util__a{ display: flex; align-items: center; gap: 10rem; font-size: 15rem; font-weight: 300; }
.header_util__a strong{ font-size: 600; }
.header_util__svg{ height: 19rem; fill: var(--primary); }

.btn_menu{ position: relative; width: 25rem; height: 25rem; background: 0; box-sizing: border-box; color: inherit; z-index: 1; }
.btn_menu span{ display: block; margin-left: auto; width: 100%; height: 1px; background:#000; }
.btn_menu span + span{ margin-top: 7rem; }
@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; }
}

@media(max-width: 768px){
    .area_util ul{padding-top:5rem;}
	.logo__a img{min-width:120px;}
}

/* 모바일 메뉴 */
.m_gnb{ overflow: hidden auto; position: fixed; top: 0; right: 0; transform: translateX(100%); max-width: 280rem; width: 100%; height: 100%; background: var(--white); transition-timing-function: ease-out; z-index: 3; }
.m_gnb .header{ display: flex; align-items: center; justify-content: flex-end; }
.m_gnb > ul > li > a{ display: block; position: relative; padding: 15rem 25rem; border-bottom: 1rem solid #eaeaea; color: #424242; transition: all .3s ease 0s; }
.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); }

.m_gnb .btn_close{ opacity: 0; flex: 0 0 25rem; display: block; position: relative; margin-right: -100vw; width: 22rem; height: 22rem; background: 0; font-size: 0; }
.m_gnb.active{ transform: translateX(0); }
.m_gnb.active .btn_close{ opacity: 1; margin-right: 15rem; }

.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(prefers-reduced-motion: no-preference){
	.m_gnb{ transition-duration: .5s; }
	.m_gnb .btn_close{ transition: .8s; }
	.cover{ transition: .4s; }
}

/* footer */
#footer{ padding:0 0 105rem; font-size: 15rem; color: #888; }
#footer .inr{padding-top:80rem; border-top:1px solid #e5e5e5;}
#footer .links{ display: flex; gap: 35rem; color: #444; }
#footer .copy{ margin-top: 45rem; display: flex; flex-wrap: wrap; gap: 6rem 14rem; max-width: 1000rem; font-weight: 300; }
#footer .copy > span{display:inline-block; padding-right:50rem;}
#footer .copy p{ margin-top: 25rem; }
.footer_site{ position: relative; max-width: 190rem; width: 100%; }
.footer_site summary{ display: flex; align-items: center; justify-content: space-between; height: 55rem; padding: 0 20rem 0 19rem; border: 1px solid #e1e1e1; box-sizing: border-box; font-size: 14rem; color: #919191; cursor: pointer; }
.footer_site summary::after{ content: ''; position: relative; top: -2rem; display: inline-block; width: 7rem; height: 7rem; border: solid rgba(34, 34, 34, 0.71); border-width: 0 1px 1px 0; box-sizing: border-box; transform: rotate(45deg); }
.footer_site__window{ position: absolute; inset: auto 0 calc( 100% - 1px); background: #fff; border: 1px solid #e1e1e1; /* 스타일 정의 필요 */ }
.footer_site__window a{ display: block; }
@media(min-width:768px){
	.footer_site{ position: absolute; right: 0; bottom: 6rem; }
}
@media(max-width:767px){
	#footer .copy{ flex-direction: column; }
	.footer_site{ margin-top: 40rem; }
}