/* Scroll Animation */
@media (prefers-reduced-motion: no-preference) {
  [data-scroll_effect="clip_right"] { clip-path: inset(0 100% 0 0); transition: 0.8s; }
  [data-scroll_effect="slide_up"] { transform: translateY(20px); opacity: 0; transition: 0.6s; }
  [data-scroll_effect="slide_left"] { transform: translateX(20px); opacity: 0; transition: 0.6s; }
  [data-scroll_effect="slide_right"] { transform: translateX(-20px); opacity: 0; transition: 0.6s; }
  [data-scroll_effect*="flip_"] { backface-visibility: hidden; }
  [data-scroll_effect="flip_up"] { transform: perspective(2500px) rotateX(-100deg); transition: 0.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(2500px) rotateX(0deg); }
  [data-scroll_effect_delay="50"] { transition-delay: 0.05s; }
  [data-scroll_effect_delay="100"] { transition-delay: 0.1s; }
  [data-scroll_effect_delay="150"] { transition-delay: 0.15s; }
  [data-scroll_effect_delay="200"] { transition-delay: 0.2s; }
  [data-scroll_effect_delay="250"] { transition-delay: 0.25s; }
  [data-scroll_effect_delay="300"] { transition-delay: 0.3s; }
  [data-scroll_effect_delay="350"] { transition-delay: 0.35s; }
  [data-scroll_effect_delay="400"] { transition-delay: 0.4s; }
  [data-scroll_effect_delay="450"] { transition-delay: 0.45s; }
  [data-scroll_effect_delay="500"] { transition-delay: 0.5s; }
  [data-scroll_effect_delay="600"] { transition-delay: 0.6s; }
  [data-scroll_effect_delay="700"] { transition-delay: 0.7s; }
  [data-scroll_effect_column] [data-scroll_effect] { transition-delay: calc(var(--index) * calc(var(--delay) * 1ms)); }

@media (min-width: 768px) {
  [data-scroll_effect].effect_active [data-scroll_effect] { transform: translate(0); opacity: 1; }
}
@media (max-width: 1279px) {
  [data-scroll_effect_column] [data-scroll_effect*="slide_"] { transform: translateY(20px); }
  [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) {
  [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-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: calc(var(--inner) * 1rem);width: calc(var(--inner_width) * 100%);height: 100%;z-index: 2;}
.inr.wide { max-width: 1820rem; }
.inr.narrow { max-width: 1400rem; }
.wrapper { margin: 0 auto; max-width: calc(var(--inner) * 1rem); width: calc(var(--inner_width) * 100%); }

/* header */
:root { --header_height: 100rem; }
.header { height: 100rem; }
#header {position: relative;inset: 0 0 auto;border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-sizing: border-box;color: #fff;z-index: 99;}
.header__inr { display: flex; justify-content: space-between; align-items: center; }
.header__logo { display: inline-block; position: relative; }
.header__logo a { display: block; font-size: 0; }
.header__logo img {height: 50rem;min-height: 20rem;font-size: 1rem;}
#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%;color: #222;}
#header .gnb [data-gnb="1"] {display: flex;align-items: center;height: 100%;padding: 0 40rem;width: auto;font-family: "Poppins";font-size: 18rem;font-weight: 400;}
#header .gnb > li:hover > [data-gnb="1"] { color: var(--primary); }
#header .gnb .sub_menu { visibility: hidden; position: absolute; top: 75%; min-width: 120px; 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: 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; }

/* cta sns */
.cta-sns { display: flex; gap: 10rem; }
.cta-sns .btn { display: flex; padding: 8rem; aspect-ratio: 1; border: 1.5rem solid #365ec3; border-radius: 50rem; transition: all .3s; }
.cta-sns .btn svg { fill: #365ec3; }
.cta-sns .btn:hover { background: #365ec3; transition: all .3s; }
.cta-sns .btn:hover svg { fill: #fff; }

/* util */
.header_util {display: flex;gap: 29px;align-items: center;}
.header_util__login { display: flex; gap: 1.5em; }
.header_util__login-a { display: flex; gap: 0.82em; align-items: center; position: relative; }
.header_util__login-a::before { content: ""; position: absolute; inset: -0.6em; }

/* member */
.header__member { font-size: 15rem; color: #222; }
.header__member .member_grade { font-size: 14px; color: var(--secondary); padding-right: 0.125em; }

/* mobile-menu */
.btn_menu {position: relative;width: 50rem;height: 20rem;background: 0;box-sizing: border-box;color: inherit;z-index: 90;}
.btn_menu::before { content: ""; position: absolute; inset: -0.6em; }
.btn_menu span {display: block;margin-left: auto;width: 100%;height: 2px;background: #222; transition: all .3s;}
.btn_menu:hover span:first-child { width: 100%; }
.btn_menu:hover span { width: 50%; }


.btn_menu span:first-child {
    width: 50%;
}
.btn_menu span + span { margin-top: 6px; }

/* 모바일 메뉴 */
.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; }
.m_gnb > ul > li > a { display: block; position: relative; padding: 15rem 25rem; border-bottom: 1rem solid #eaeaea; color: #424242; transition: all 0.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: 20rem;width: 11rem;height: 7rem;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: 1rem solid #dedede; }
.m_gnb .sub_menu > li > a { position: relative; display: block; padding: 15rem 25rem; color: var(--black); }
.m_gnb .btn_close { opacity: 0; flex: 0 0 25px; display: block; position: relative; margin-right: -100vw; width: 20px; height: 20px; background: 0; font-size: 0px; }
.m_gnb.active { transform: translateX(0); }
.m_gnb.active .btn_close {opacity: 1;margin-right: 20rem;}
.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: 0.3s; }
  .m_gnb { transition-duration: 0.5s; }
  .m_gnb .btn_close { transition: 0.8s; }
  .cover { transition: 0.4s; }
}
@media (max-width: 1460px) {
  #header .gnb { display: none; }
}
@media (max-width: 767px) {
  .header { height: 80px; }
  .header__logo img {width: auto;height: 40rem;object-fit: cover;object-position: 0;}
  .header_util {gap: 10rem;}
  .header_util__login {gap: 10rem;}
  .header__member { font-size: 14px; }
  .header__member .member_grade { font-size: 13px; }
  .header_util__login-a { gap: 0.6em; }

  .cta-sns { display: none; }
}


/* footer */
#footer {padding: 50px 0 80px;background: #222;color: #fff;}
.footer__inr {display: flex;flex-direction: column;font-family: 'Poppins';max-width: calc(1600 * 1rem);}
.footer__link { grid-area: link; }
.footer__link-a {position: relative;font: 500 16rem 'Poppins';font-weight: 500;padding: 10rem 20rem;background: #323232;border-radius: 100rem;}
.footer__link-a + .footer__link-a {}
.footer__link-a + .footer__link-a::before {}
.footer__logo {height: 50rem;}
.footer__info {color: #B8B8B8;}
.footer__info-address {display: flex;flex-wrap: wrap;gap: 5rem 40rem;font-size: 16rem;color: #B8B8B8;}
.footer__info-address span b { margin-right: 10rem; }
.footer__info-copyright {margin-top: 20rem;font-size: 15rem;font-weight: 300;}
.footer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20rem; border-bottom: 1rem solid #555; }
.footer-top .footer__link { display: flex; gap: 10rem; }
.footer-bot { margin-top: 30rem; display: flex; justify-content: space-between; align-items: center; }
.footer-bot .cta-socmed { display: flex; gap: 10rem; }
.footer-bot .cta-socmed a { display: flex; width: 50rem; border: 1rem solid #b8b8b8; border-radius: 50rem; aspect-ratio: 1/1; align-items: center; justify-content: center; }

@media (min-width: 1280px) {
  .footer__inr {}
  .footer__logo {}
}
@media (max-width: 1279px) {
  .footer__inr { grid-template: "link" "logo" "info"; }
  .footer__logo { opacity: 0.55; }
}
@media (max-width: 767px) {
  .footer-top { flex-wrap: wrap; gap: 30rem; }
  .footer__link { margin-bottom: 5px; }
  .footer__link-a { font-size: 14rem; }
  .footer__logo { height: 32px; }
  .footer-bot {flex-direction: column;align-items: flex-start;gap: 30rem;}
}