@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
/* 전체공통속성 */

body,p,ul,li,h5 {margin:0; padding:0; font-family: 'Nanum Gothic', sans-serif; font-size:11pt; color:#000;line-height:150%;}
:root {
      --black: #000;
      --white: #fff;
      --muted: #d7d7d7;
      --paper: #f8f7f6;
      --ink: #1b1b1b;
      --footer-text: #777;
      --footer-strong: #5e5e5e;
      --line: #6b6b6b;
      --header-height: 52px;
      --font: Arial, "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
      --serif: Georgia, "Times New Roman", serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }
table {border-collapse: collapse;border-spacing:0px;padding:0px;margin:0px;}
a {color:#000}
img{margin:0;padding:0;vertical-align:text-bottom}
textarea {border-color:#ccc;}

body {
      margin: 0;
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      color: inherit;
      font: inherit;
    }

.normal     { font-weight: 400 }
.bold       { font-weight: 500 }
.bolder     { font-weight: 800 }
.light      { font-weight: 300 }
.red {color:#DA4C2A;}
.blue {color:#308BD8;}
.gnb_menu_term {width:20px;}
.gnb_menu {cursor:pointer;padding:5px;}
.gnb_menu.is-current,
.gnb_menu_s {border-bottom:3px solid #000;cursor:pointer;padding:5px;}

/* 기본 = 모바일 */
div.top_fixed_mobile {height:52px;width:100%;z-index:500;position: fixed;top:0px;background-color:#fff;color:#000;font-size:16px;display: block;}
div.top_fixed_pc {display: none;}
img.logo_img{padding:0px;height:23px;width:auto;}
.menu_container {position:fixed;top:13px;left:15px;z-index:705;}
div.slide_layer_bottom {width:100%;height:100%;z-index:702;position: fixed;background-color:#000;top:0px;opacity: 0.7;display:none;}

.hero-banner {
      width: 100%;
      height: 800px;
      position: relative;
      isolation: isolate;
      display: grid;
      place-items: end center;
      overflow: hidden;
      background: var(--black);
      color: var(--white);
    }

    .hero-banner::before {
      content: "";
      position: absolute;
      z-index: -2;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.74) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.06) 42%, rgba(0, 0, 0, 0.5) 100%),
        var(--image) center / cover no-repeat;
      transform: scale(1.01);
    }

    .hero-banner::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      background: radial-gradient(circle at 50% 20%, transparent 0 34%, rgba(0, 0, 0, 0.34) 70%);
    }

    .hero-content {
      width: min(720px, calc(100% - 40px));
      margin: 0 auto clamp(48px, 7vh, 76px);
      text-align: center;
      background: transparent;
      color: var(--white);
    }

    .hero-kicker {
      margin: 0 0 14px;
      background: transparent;
      color: var(--white);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.18em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .hero-title {
      margin: 0;
      background: transparent;
      color: var(--white);
      font-size: clamp(28px, 4.1vw, 54px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: 0;
      word-break: keep-all;
    }

    .hero-copy {
      width: min(520px, 100%);
      margin: 18px auto 0;
      background: transparent;
      color: var(--muted);
      font-size: clamp(14px, 1.4vw, 17px);
      line-height: 1.7;
      word-break: keep-all;
    }

    .hero-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      min-width: 108px;
      height: 38px;
      padding: 0 22px;
      border: 1px solid var(--white);
      background: var(--white);
      color: var(--black);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
    }

    .hero-link::after {
      content: none;
    }

    .registration {
      width: 100%;
      min-height: 100vh;
      padding: clamp(70px, 8vw, 138px) clamp(20px, 4.7vw, 78px);
      background: var(--paper);
      color: var(--ink);
    }

    .registration__inner {
      width: 100%;
      max-width: 1528px;
      margin: 0 auto;
      background: transparent;
    }

    .registration__title {
      margin: 0 0 clamp(26px, 2.8vw, 42px);
      background: transparent;
      color: var(--ink);
      font-family: var(--font);
      font-size: clamp(24px, 2.1vw, 32px);
      font-weight: 800;
      line-height: 1.18;
      letter-spacing: 0;
      word-break: keep-all;
    }

    .registration__list {
      display: grid;
      gap: clamp(16px, 1.6vw, 24px);
      background: transparent;
    }

    .registration-button {
      min-height: 112px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 24px;
      padding: 0 clamp(22px, 2.6vw, 44px);
      border: 2px solid var(--black);
      background: transparent;
      color: var(--ink);
      transition:
        background-color 420ms ease,
        color 420ms ease,
        border-color 420ms ease,
        transform 420ms ease;
    }

    .registration-button:hover,
    .registration-button:focus-visible,
    .registration-button.is-active {
      border-color: var(--black);
      background: var(--black);
      color: var(--white);
    }

    .registration-button:focus-visible {
      outline: 3px solid rgba(0, 0, 0, 0.22);
      outline-offset: 4px;
    }

    .registration-button__text {
      min-width: 0;
      background: transparent;
      color: inherit;
      font-size: clamp(18px, 1.45vw, 24px);
      font-weight: 400;
      line-height: 1.25;
      letter-spacing: 0;
      word-break: keep-all;
    }

    .registration-button__arrow {
      width: clamp(30px, 2.4vw, 40px);
      height: clamp(30px, 2.4vw, 40px);
      display: grid;
      place-items: center;
      background: transparent;
      color: inherit;
      font-size: clamp(26px, 2vw, 34px);
      font-weight: 300;
      line-height: 1;
      transform: translateY(-2px);
      transition: transform 420ms ease;
    }

    .registration-button:hover .registration-button__arrow,
    .registration-button:focus-visible .registration-button__arrow,
    .registration-button.is-active .registration-button__arrow {
      transform: translate(8px, -2px);
    }

    .site-footer {
      width: 100%;
      min-height: 268px;
      display: grid;
      grid-template-columns: minmax(280px, 1fr) auto minmax(280px, 1fr);
      align-items: center;
      gap: clamp(32px, 5vw, 84px);
      padding: 54px clamp(32px, 5vw, 100px);
      background: var(--black);
      color: var(--footer-text);
    }

    .footer-main {
      background: transparent;
    }

    .footer-brand {
      display: block;
      width: min(174px, 100%);
      height: auto;
      margin: 0 0 10px;
      background: transparent;
    }

    .footer-copy {
      margin: 0;
      background: transparent;
      color: var(--footer-text);
      font-size: clamp(16px, 1.25vw, 22px);
      line-height: 1.35;
    }

    .footer-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(42px, 4.8vw, 72px);
      background: transparent;
      color: var(--footer-text);
      font-size: clamp(16px, 1.2vw, 22px);
      line-height: 1;
      white-space: nowrap;
    }

    .footer-links a,
    .footer-icon {
      transition:
        color 260ms ease,
        border-color 260ms ease,
        opacity 260ms ease;
    }

    .footer-links a:hover,
    .footer-links a:focus-visible {
      color: var(--white);
      outline: 0;
    }

    .footer-actions {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 14px;
      background: transparent;
    }

    .footer-icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--footer-text);
      cursor: pointer;
    }

    .footer-icon:hover,
    .footer-icon:focus-visible {
      border-color: var(--white);
      color: var(--white);
      outline: 0;
    }

    .footer-icon svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .footer-icon svg.fill-icon {
      fill: currentColor;
      stroke: none;
    }
.banner-stack {
      padding-top: var(--header-height);
    }

    .page-home .top_fixed_mobile,
    .page-home .top_fixed_pc,
    .page-profile .top_fixed_mobile,
    .page-profile .top_fixed_pc {
      border-bottom: 1px solid #ececec;
    }

    .page-about .top_fixed_mobile,
    .page-about .top_fixed_pc {
      background: transparent;
      border-bottom: 0;
      box-shadow: none;
      transition:
        background-color 260ms ease,
        border-color 260ms ease;
    }

    .page-about.is-about-nav-solid .top_fixed_mobile,
    .page-about.is-about-nav-solid .top_fixed_pc {
      background: var(--white);
      border-bottom: 1px solid #ececec;
    }

    .about-page {
      min-height: 100vh;
      padding-top: 0;
      background: var(--white);
      color: var(--black);
    }

    .about-hero {
      width: 100%;
      height: 800px;
      margin: 0;
      overflow: hidden;
      background: #f2f2f2;
    }

    .about-hero img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      background: transparent;
    }

    .about-intro {
      width: 100%;
      margin: 0 auto;
      padding: clamp(42px, 4.8vw, 62px) 24px clamp(96px, 10vw, 140px);
      display: grid;
      justify-items: center;
      row-gap: clamp(42px, 5vw, 62px);
      text-align: center;
      background: transparent;
    }

    .about-photo {
      margin: 0;
      overflow: hidden;
      background: #eee;
    }

    .about-photo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: transparent;
    }

    .about-photo--portrait {
      width: min(240px, 58vw);
      aspect-ratio: 174 / 260;
    }

    .about-photo--portrait img {
      object-position: 58% center;
    }

    .about-photo--second img {
      object-position: 50% center;
    }

    .about-photo--wide {
      width: min(520px, 100%);
      aspect-ratio: 376 / 248;
    }

    .about-photo--wide img {
      object-position: 56% center;
    }


    .about-video {
      position: relative;
      width: 100%;
      height: min(760px, 72vw);
      min-height: 520px;
      margin-left: 0;
      overflow: hidden;
      background: var(--black);
      isolation: isolate;
    }

    .about-video::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, .08), transparent 38%, rgba(0, 0, 0, .24));
      pointer-events: none;
    }

    .about-video__media {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .about-video__controls {
      position: absolute;
      right: 42px;
      bottom: 42px;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .about-video__control {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      color: #fff;
      background: rgba(0, 0, 0, .16);
      border: 1px solid rgba(255, 255, 255, .82);
      border-radius: 50%;
      cursor: pointer;
      backdrop-filter: blur(6px);
      transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
    }

    .about-video__control:hover {
      background: rgba(255, 255, 255, .18);
      border-color: #fff;
      transform: translateY(-1px);
    }

    .about-video__control svg {
      display: block;
      width: 18px;
      height: 18px;
      overflow: visible;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .about-video__control--motion .icon-play,
    .about-video__control--motion.is-paused .icon-pause {
      display: none;
    }

    .about-video__control--motion.is-paused .icon-play {
      display: block;
    }

    .about-video__control--sound .icon-wave,
    .about-video__control--sound.is-on .icon-muted {
      opacity: 0;
      transform: translateX(-2px);
    }

    .about-video__control--sound.is-on .icon-wave,
    .about-video__control--sound .icon-muted {
      opacity: 1;
      transform: translateX(0);
    }

    .about-video__control--sound .icon-wave,
    .about-video__control--sound .icon-muted {
      transition: opacity .22s ease, transform .22s ease;
    }

    .about-video + .about-gallery {
      margin-top: calc(clamp(42px, 5vw, 62px) * -1);
    }

    .about-gallery {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      background: transparent;
    }

    .about-gallery__item {
      margin: 0;
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: #eee;
    }

    .about-gallery__item img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: transparent;
    }

    .about-copy {
      width: min(760px, calc(100% - 48px));
      display: grid;
      gap: 28px;
      background: transparent;
      color: var(--black);
      font-family: var(--font);
      font-size: clamp(16px, 1.45vw, 19px);
      font-weight: 400;
      line-height: 1.36;
      letter-spacing: 0;
      word-break: keep-all;
    }

    .about-copy p {
      margin: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      line-height: inherit;
      letter-spacing: inherit;
    }

    .about-copy--contact {
      gap: 30px;
      font-size: clamp(15px, 1.35vw, 18px);
      line-height: 1.32;
    }

    .about-profile-link {
      display: inline-block;
      padding: 4px 0;
      background: transparent;
      color: #2A6EF4;
      text-decoration: none;
    }

    .about-profile-link:hover,
    .about-profile-link:focus-visible {
      text-decoration: underline;
      text-underline-offset: 6px;
      outline: 0;
    }

    .profile-page {
      min-height: 100vh;
      padding: calc(var(--header-height) + clamp(56px, 7vw, 92px)) 24px clamp(88px, 10vw, 140px);
      background: var(--white);
      color: var(--black);
    }

    .profile-list {
      width: min(100%, 720px);
      margin: 0 auto;
      display: grid;
      gap: clamp(82px, 10vw, 132px);
      background: transparent;
    }

    .profile-card {
      display: grid;
      justify-items: center;
      gap: 28px;
      background: transparent;
    }

    .profile-photo {
      width: min(520px, 100%);
      aspect-ratio: 1 / 1;
      margin: 0;
      overflow: hidden;
      border: 1px solid #b7b7b7;
      background: #f2f2f2;
    }

    .profile-photo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      background: transparent;
    }

    .profile-name {
      margin: 0;
      background: transparent;
      color: var(--black);
      font-family: var(--font);
      font-size: clamp(28px, 3.2vw, 34px);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: 0;
      text-align: center;
    }

    .profile-section {
      width: 100%;
      display: grid;
      gap: 12px;
      background: transparent;
      color: var(--black);
    }

    .profile-section h2 {
      margin: 0;
      background: transparent;
      color: inherit;
      font-family: var(--font);
      font-size: clamp(20px, 2vw, 23px);
      font-weight: 800;
      line-height: 1.35;
      letter-spacing: 0;
    }

    .profile-section ul {
      margin: 0;
      padding: 0;
      display: grid;
      gap: 4px;
      list-style: none;
      background: transparent;
    }

    .profile-section li {
      margin: 0;
      padding: 0;
      background: transparent;
      color: inherit;
      font-family: var(--font);
      font-size: clamp(16px, 1.55vw, 18px);
      font-weight: 400;
      line-height: 1.48;
      letter-spacing: 0;
      word-break: keep-all;
    }

    .profile-section li::before {
      content: "- ";
    }
    
/* 태블릿 이상 */
@media (min-width:768px){
  div.top_fixed_mobile {height:52px;width:100%;z-index:500;position: fixed;top:0px;background-color:#fff;color:#000;font-size:16px;display: block;}
  div.top_fixed_pc {display: none;}
  img.logo_img{padding:0px;height:23px;width:auto;}
  .menu_container {position:fixed;top:13px;left:15px;z-index:705;}
  div.slide_layer_bottom {width:100%;height:100%;z-index:702;position: fixed;background-color:#000;top:0px;opacity: 0.7;display:none;}
}

@media (max-width:760px){
  :root {
    --header-height: 52px;
  }

  .hero-banner {
    width: 100%;
    height: 400px;
  }

  .hero-banner::before {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.22) 44%, rgba(0, 0, 0, 0.82) 100%),
      var(--image) center center / cover no-repeat;
  }

  .hero-content {
    width: min(330px, calc(100% - 32px));
    margin-bottom: 28px;
  }

  .hero-kicker {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .hero-title {
    font-size: 24px;
  }

  .hero-copy {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.45;
  }

  .hero-link {
    margin-top: 14px;
  }

  .registration {
    min-height: auto;
    padding: 42px 17px;
  }

  .registration__title {
    margin-bottom: 18px;
    font-size: 20px;
    line-height: 1.25;
  }

  .registration__list {
    gap: 12px;
  }

  .registration-button {
    min-height: 68px;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 13px;
  }

  .registration-button__text {
    font-size: 14px;
    line-height: 1.32;
  }

  .registration-button__arrow {
    width: 26px;
    height: 26px;
    color: transparent;
    font-size: 34px;
    position: relative;
    transform: translateY(-1px);
  }

  .registration-button__arrow::before {
    content: ">";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ink);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }

  .registration-button:hover .registration-button__arrow,
  .registration-button:focus-visible .registration-button__arrow,
  .registration-button.is-active .registration-button__arrow {
    transform: translate(5px, -1px);
  }

  .registration-button:hover .registration-button__arrow::before,
  .registration-button:focus-visible .registration-button__arrow::before,
  .registration-button.is-active .registration-button__arrow::before {
    color: var(--white);
  }

  .site-footer {
    min-height: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 34px;
    padding: 46px 24px 42px;
    text-align: center;
  }

  .footer-main {
    display: grid;
    justify-items: center;
  }

  .footer-brand {
    width: 140px;
    margin-bottom: 8px;
  }

  .footer-copy {
    font-size: 14px;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 18px 28px;
    font-size: 14px;
    white-space: normal;
  }

  .footer-actions {
    justify-self: center;
  }

  .about-hero {
    height: 500px;
  }

  .about-intro {
    padding: 38px 0 96px;
    row-gap: 42px;
  }

  .about-photo--portrait,
  .about-photo--wide {
    width: 100%;
  }

  .about-video {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    max-height: 260px;
  }

  .about-video__controls {
    right: 18px;
    bottom: 18px;
    gap: 8px;
  }

  .about-video__control {
    width: 36px;
    height: 36px;
  }

  .about-video + .about-gallery {
    margin-top: -42px;
  }

  .about-gallery {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-copy {
    width: calc(100% - 40px);
    font-size: 17px;
    line-height: 1.44;
  }

  .about-copy--contact {
    font-size: 16px;
  }

  .profile-page {
    padding: 86px 0 96px;
  }

  .profile-list {
    width: 100%;
    gap: 76px;
  }

  .profile-card {
    gap: 24px;
  }

  .profile-photo {
    width: 100%;
    border-left: 0;
    border-right: 0;
  }

  .profile-name {
    font-size: 26px;
  }

  .profile-section {
    width: calc(100% - 48px);
    gap: 14px;
  }

  .profile-section h2 {
    font-size: 19px;
  }

  .profile-section li {
    font-size: 14px;
    line-height: 1.48;
  }
}

@media (max-width:420px){
  .site-footer {
    align-items: center;
    padding-inline: 18px;
  }

  .footer-links {
    display: grid;
    gap: 14px;
  }
}

/* PC 이상 */
@media (min-width:1200px){
  div.top_fixed_pc {height:60px;width:100%;z-index:500;position: fixed;top:0px;background-color:#fff;color:#000;font-size:16px;display: block;}
  div.top_fixed_mobile {display: none;}
  img.logo_img{padding:0px;height:29px;width:auto;}
  .menu_container {position:fixed;top:13px;left:15px;z-index:705;display: none;}
  div.slide_layer_bottom {display:none !important;}
  .slide {display:none !important;}
  :root {
        --header-height: 60px;
      }
  .hero-banner:first-child::before {
        background:
          linear-gradient(180deg, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0.74) 100%),
          linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.16) 38%, rgba(0, 0, 0, 0.58) 100%),
          var(--image) center 36% / cover no-repeat,
          #000;
      }
}
div.bottom_fixed {width:100%;z-index:500;position: fixed;bottom:0px;}

div.slide {width:70%;height:100%;z-index:703;position:fixed;background-color:#fff;top:0px;right:100%;font-size:1em;color:#000;}

table.slide_menu td{padding:10px 10px 10px 20px;border-bottom:0px solid #958958;height:27px;}
table.slide_menu td.is-current{font-weight:800;}
table.slide_menu td .slide_menu_label{display:inline-block;padding-bottom:4px;}
table.slide_menu td.is-current .slide_menu_label{border-bottom:3px solid #000;}

/* 메뉴 아이콘 */

.menu {display: inline-block;position:relative; cursor: pointer; width:25px; height:26px;}
.bar1{position: absolute;top:5px;width:25px;height: 2px;background-color: #000;transition: 0.4s;}
.bar2{position: absolute;top:12px;width:25px;height: 2px;background-color: #000;transition: 0.4s;}
.bar3{position: absolute;top:19px;width:25px;height: 2px;background-color: #000;transition: 0.4s;}

.change .bar1 {top:12px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.change .bar2 {opacity: 0;}
.change .bar3 {top:12px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}