/* 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="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.wide{ max-width: 1680rem; }
.inr.narrow{ max-width: 1280rem; }
.wrapper{ position: relative; margin: 0 auto; max-width: calc(var(--inner) * 1rem); width: calc(var(--inner_width) * 100%); }

/* header */
#header{position:absolute; top:0; left:0; width:100%; height:100rem; z-index:10; border-bottom:1px solid rgba(255,255,255,0.3);}
#header .inr{display:flex; justify-content:space-between; align-items:center; height:100%;}
.header_logo{height:100%;}
.header_logo a{display:block; position:relative; width:140rem; height:100%;}
.header_logo a img{display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%;}

#header nav{ position: relative; display: flex; margin-right:-50rem; 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 50rem; font-size:18rem; font-weight:500; font-family:'MaruBuri'; color:#fff;}
#header .gnb .sub_menu{visibility:hidden; position:absolute; top:80rem; 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:99rem; opacity: 1; }
#header .gnb .sub_menu li a{ display: block; padding: 14px; color: #333; border-top: 1px solid #ddd; font-size:14rem; text-align: center; transition:0.3s ease; font-family:'MaruBuri';}
#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; 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:10; }
.btn_menu span{ display: block; width: 100%; height: 2px; background: currentcolor; }
.btn_menu{ position: relative; width:30px; height:22px; background: 0; box-sizing: border-box; color: inherit; z-index: 1; }
.btn_menu span{ display: block; margin-left:auto; width:100%; height:2px; background: currentcolor;}
.btn_menu span + span{ margin-top:7px; }
.btn_menu{display:none;}
.btn_menu.active{display:none;}
@media(prefers-reduced-motion:no-preference){
	#header,
	.gnb .sub_menu,
	.btn_menu span{ transition: .4s; }
}

/* 모바일 메뉴 */
.m_gnb{ overflow: hidden auto; position: fixed; top: 0; right: 0; transform: translateX(100%); max-width:100%; width: 100%; 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{margin-top:80rem; padding:30rem 0; border-top:1px solid #ddd;}
.m_gnb > ul > li > a{display: block; position: relative; padding: 15rem 200rem; color: #424242; transition: all .3s ease 0s; font-size:22rem;  font-family:'MaruBuri'; font-weight: 500;}
.m_gnb > ul > li > a.active{font-weight:bold; color: var(--primary);}
.m_gnb > ul > li > a.open::before{ content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); right:200rem; 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; padding-bottom:20rem;}
.m_gnb .sub_menu > li > a{ position: relative; display: block; padding:10rem 220rem; font-size: 18rem; color:#666; font-family:'MaruBuri';}

#header .btn_close{ opacity: 0; flex: 0 0 25rem; display:none; position:absolute; top:50%; right:-10%; transform:translateY(-50%); width:25px; height:40px; background:#fff; font-size: 0; z-index:11;}
#header .btn_close.active{opacity:1; right:4%;}
#header .btn_close::before,
#header .btn_close::after{ content: ''; display: block; position: absolute; top: 50%; left: 0; width:25px; height:2px; background: var(--black); transform: translateY(-50%) rotate(45deg); }
#header .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; }

.gnb_logo{position:absolute; top:50%; transform:translateY(-50%); left:4%; width:120rem; opacity:0; transition:0.5s; z-index:12;}
.gnb_logo img{display:block; width:100%;}
.gnb_logo.active{opacity:1;}
@media (prefers-reduced-motion: no-preference){
	.m_gnb{ transition-duration: .5s; }
	#header .btn_close{ transition: .8s; }
	.cover{ transition: .4s; }
}
@media (max-width: 1279px){
    #header{position:fixed; height:80rem;}
    .header_logo a{width:120rem;}
	#header .gnb{ display: none; }
    .btn_menu{display:block; position:absolute; right:4%; top:50%; transform:translateY(-50%); z-index:10;}
    #header .btn_close{display:block;}
}
@media(max-width:767px){
    .m_gnb > ul > li > a{padding:20rem 50rem;}
    .m_gnb > ul > li > a.open::before{right:50rem;}
    .m_gnb .sub_menu > li > a{padding:10rem 70rem;}
}

/* footer */
#footer{padding:60rem 0; background:#222;}
#footer .inr{display:flex; justify-content:space-between;}
#footer address{font-size:0;}
#footer address span{display:inline-block; margin-right:25rem; font-size:14rem; color:#fff;}
#footer address span em{display:inline-block; margin-right:6rem; font-weight:bold;}
#footer address span a{display:inline-block; opacity:0.6;}
#footer p.copy{font-size:13rem; color:#fff; opacity:0.5; text-transform:uppercase;}
@media(max-width:767px){
    #footer{padding:45rem 0;}
    #footer .inr{display:block;}
    #footer address span{margin-right:20rem; margin-bottom:3rem;}
    #footer address span em{margin-right:3rem;}
    #footer p.copy{margin-top:10rem;}
}