/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}


a {
  text-decoration: none;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

html, body {
  margin:0;
  background: #fafafa;
}

body * {
  font-family: 'Pretendard';
  letter-spacing: -0.04em;
}

.visual-area {
  height:100vh;
  background:#000;
  padding:0;
  .video-bg {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .drop {
      background: rgba(0,0,0,0.8);
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      z-index: 2;
    }
  }
  .wrapper {
    max-width:1440px;
    margin:0 auto;
    z-index:2;
    position: relative;
    height:100%;
    display: flex;
    align-items: center;
    gap:120px;
  }
  .slogan {
    flex:1;
    h1 {
      margin:0;
      font-size:80px;
      font-weight:800;
      letter-spacing: -0.05em;
      line-height:1.2;
      color:#ffb92b;
    }
    p {
      margin:40px 0;
      font-size:20px;
      color:#fff;
      font-weight:500;
      letter-spacing: -0.03em;
    }
  }
  .info-block-group {
    flex:1;
    display: flex;
    flex-wrap: wrap;
    gap:30px;
    .column {
      gap:30px;
      flex:4;
      display: flex;
      flex-direction: column;
    }
    .column:nth-child(2) {
      flex:3;
    }
    .block {
      background: rgba(255,255,255,0.9);
      border-radius: 36px;
      padding:36px 36px 46px;
      h4 {
        font-size:22px;
        font-weight:800;
        color:#111;
        margin:0 0 30px;
      }
      &.stock {
        background: rgba(255,205,71,0.9);
      }
      &.customer {
        background: rgba(56,53,46,0.9);
        h4 {
          color:#fff;
        }
      }
      &.invest {
        background: rgba(115,145,79,0.9);
        h4 {
          color:#fff;
        }
      }
      .stock-contents {
        margin-right:-36px;
        .label-row {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          padding-right:36px;
          label {
            font-family: Montserrat;
            font-size:16px;
            color:#5a4610;
          }
          p {
            font-family: Montserrat;
            font-size:18px;
            color:#111;
            font-weight:600;
            line-height:1;
            margin:0;
          }
          .price {
            font-size:36px;
            font-weight:800;
            span {
              font-size:16px;
              font-family: "Pretendard Variable", sans-serif;
              font-weight:500;
              padding-left:10px;

            }
          }
        }
        .label-row+.label-row {
          border-top:1px #111 solid;
          padding-top:20px;
          margin-top:20px;
        }
      }
      .post-list {
        list-style-type: none;
        padding:0;
        margin:0;
        .item {
          display: block;
          p { font-weight:600; color:#111; font-size:16px; margin:0 0 3px; line-height:1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
          span { font-size:14px; color:#999; font-family: Montserrat; line-height:1; }
        }
        li+li {
          border-top:1px #d0d0d0 solid;
          padding-top:20px;
          margin-top:15px;
        }
      }
      .menu-list {
        list-style-type: none;
        padding:0;
        margin:0 -36px 0 0;
        .item {
          font-size:16px;
          font-weight:600;
          line-height:1;
          display: flex;
          align-items: center;
          color:rgba(255,255,255,0.8);
          padding-right:36px;
          transition-duration: .3s;
          &:after {
            width:16px;
            height:16px;
            position: absolute;
            content:'';
            right:38px;
            background: url('../img/link-arrow.png') no-repeat;
            background-size:100%;
            transform: translateX(0px);
            transition-duration: .3s;
            opacity: 0.5;
          }
          &:hover {
            color:rgba(255,255,255,1);
            &:after {
              transition-duration: .3s;
              transform: translateX(-5px);
            }
          }
        }
        li+li {
          border-top:1px rgba(255,255,255,0.1) solid;
          padding-top:20px;
          margin-top:15px;
        }
      }
    }
  }
}

.container {
  max-width:1440px;
  width:100%;
  margin:0 auto;
  box-sizing: border-box;
}
header {
  position: fixed;
  height:86px;
  box-sizing: border-box;
  top:0;
  padding-top:20px;
  left:0;
  right:0;
  z-index: 3;
  box-sizing: border-box;
  transition-duration: .3s;
  border-bottom:1px rgba(255,255,255,0.1) solid;
  overflow: hidden;
  .logo-wrap {
    position: relative;
    height:50px;
    display: flex;
    align-items: center;
    line-height:0;
    .color {
      width:140px;
      position: absolute;
      z-index: 2;
      opacity: 0;
    }
    .white {
      width:140px;
    }
  }
  .container {
    display: flex;
    align-items: center;
    max-width:100%;
    padding:0 80px;
  }
  .gnb {
    margin:0;
    display: flex;
    align-items: center;
    list-style-type: none;
    flex:1;
    justify-content: center;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .main-item {
      font-family: 'Pretendard';
      display: flex;
      height:50px;
      align-items: center;
      justify-content: center;
      width:140px;
      font-size:16px;
      color:#fff;
      font-weight:700;
      transition-duration: .3s;
      cursor: pointer;
      &:hover,
      &:focus {
        color:#ecba43;
        transition-duration: .3s;
      }
    }
    .sub-item {
      position: absolute;
      display: flex;
      flex-direction: column;
      gap:10px;
      opacity:0;
      top:80px;
      transition-duration: .3s;
      transform: translateY(-20px);
      align-items: center;
      a {
        font-size:16px;
        text-align: center;
        font-weight:400;
        height:28px;
        color:#aaa;
        transition-duration: .3s;
        cursor: pointer;
        &:hover {
          color:#111;
          transition-duration: .3s;
        }
      }
    }
  }
  .tools {
    display: flex;
    align-items: center;
    gap:20px;
    height:50px;
    .lang {
      a {
        color:rgba(255,255,255,0.5);
        font-size:14px;
        font-family: Montserrat;
        transition-duration: .3s;
        cursor: pointer;
        &:hover,
        &.active {
          color:rgba(255,255,255,1);
          transition-duration: .3s;
        }
      }
      a+a {
        margin-left:15px;
        padding-left:15px;
        border-left:1px rgba(255,255,255,0.2) solid;
      }
    }
    .all-menu {
      background: #ecba43;
      border-radius: 50%;
      width:46px;
      height:46px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap:4px;
      flex-direction: column;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      > span {
        width:16px;
        height:2px;
        background: #111;
        position: relative;
        z-index: 3;
        transition-duration: .3s;
      }
      .effect {
        transform-origin: center;
        overflow: hidden;
        width:48px;
        height:48px;
        transform: scale(0);
        background: #111;
        border-radius: 50%;
        position: absolute;
        z-index: 2;
        gap:4px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transition-duration: .3s;
      }
      &:hover,
      &:focus,
      &:focus-within {
        > span {
          background: #fff;
          transition-duration: .3s;
        }
        .effect {
          transform: scale(1);
          transition-duration: .3s;
        }

      }
    }
  }
  &.fixed {
    height:70px;
    padding-top:10px;
    background: #fafafa;
    transition-duration: .3s;
    border-bottom:1px rgba(0,0,0,0.1) solid;
    .logo-wrap {
      .color {
        opacity: 1;
      }
      .white {
        opacity: 0;
      }
    }
    .gnb li .main-item {
      color:#111;
      &:hover,
      &:focus {
        color:#ecba43;
        transition-duration: .3s;
      }
    }
    .tools .lang {
      a {
        color:rgba(0,0,0,0.5);
        &:hover,
        &.active {
          color:rgba(0,0,0,1);
          transition-duration: .3s;
        }}
      a+a {
        border-left:1px rgba(0,0,0,0.2) solid;
      }
    }
    &:hover,
    &:focus,
    &:focus-within {
      transition-duration: .3s;
    }
  }
}
header:hover,
header:focus,
header:focus-within {
  background: #fafafa;
  height:360px;
  transition-duration: .3s;
  .container {
    align-items: flex-start;
    transition-duration: .3s;
  }
  .logo-wrap {
    .color {
      opacity: 1;
    }
    .white {
      opacity: 0;
    }
  }
  .gnb {
    align-items: flex-start;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      .main-item {
        color: #111;
        &:hover {
          color:#ecba43;
        }
      }
    }
  }
  .gnb li .sub-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap:10px;
    opacity:1;
    transform: translateY(0px);
    transition-duration: .3s;
    align-items: center;
    a {
      color:#aaa;
    }
    a:hover {
      color:#111;
    }
  }
  .tools .lang {
    a {
      color:rgba(0,0,0,0.5);
    }
    a+a {
      border-left:1px rgba(0,0,0,0.2) solid;
    }
  }
}
header.sub {
  background: #fafafa;
  transition-duration: .3s;
  border-bottom:1px rgba(0,0,0,0.1) solid;
  .logo-wrap {
    .color {
      opacity: 1;
    }
    .white {
      opacity: 0;
    }
  }
  .gnb li .main-item {
    color:#111;
    &:hover,
    &:focus {
      color:#ecba43;
      transition-duration: .3s;
    }
  }
  .tools .lang {
    a {
      color:rgba(0,0,0,0.5);
      &:hover,
      &.active {
        color:rgba(0,0,0,1);
        transition-duration: .3s;
      }}
    a+a {
      border-left:1px rgba(0,0,0,0.2) solid;
    }
  }
}
.sections-wrapper {
  position: relative;
}

.white-round {
  border-radius: 0 0 80px 80px;
  background: #fafafa;
  position: relative;
  z-index: 2;
  padding-bottom:40px;
}
section {
  padding:80px 0;
}
section.sticky {
  .container {
    display: flex;
    align-items: flex-start;
    height:auto;
    position: relative;
  }
  .section-title {
    position: sticky;
    top:100px;
  }
  .section-contents {
    flex:1;
  }
}
.section-title {
  flex:1;
  label {
    font-size:20px;
    color:#ecba43;
    font-weight:700;
    display: block;
  }
  h2 {
    font-weight:800;
    color:#111;
    font-size:48px;
    line-height:1.2;
    margin:10px 0 30px;
  }
  a {
    font-size:16px;
    font-weight:800;
    color:#111;
    display: flex;
    align-items: center;
    span {
      margin-left:10px;
      width:32px;
      height:32px;
      background: #ecba43;
      overflow: hidden;
      border-radius: 50%;
      position: relative;
      display: flex;
      align-items: center;
      &:before {
        content:'';
        position: absolute;
        height:2px;
        width:8px;
        background: #fff;
      }
      &:after {
        content:'';
        position: absolute;
        width:16px;
        height:16px;
        background:url('../img/link-arrow.png') no-repeat;
        background-size:100%;
        transform: translateX(0);
        transition-duration: .3s;
      }
    }
    &:hover {
      span {
        &:after {
          transform: translateX(6px);
          transition-duration: .3s;
        }
      }
    }
  }
}
.product-list-wrapper {
  padding-left:240px;
  overflow: hidden;
}
.product-list {
  display: flex;
  gap:40px;
  list-style-type: none;
  padding:0;
  .item {
    display: block;
    width:400px;
    border-radius: 40px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    .thumb {
      height:300px;
      img {
        width:100%;
        height:100%;
        object-fit: cover;
      }
    }
    .contents {
      padding:26px 30px 40px;
      h4 { font-size:20px; margin:0 0 8px; font-weight:800; }
      p { font-size:16px; color:#666; margin:0; }
    }
  }
}
.contact {
  p {
    font-size:16px;
    margin:30px;
    color:#888;
  }
}
.company-block {
  display: flex;
  flex-direction: column;
  gap:20px;
  list-style-type: none;
  padding: 0;
  li {
    padding:40px 30px;
    display: block;
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    transition-duration: .5s;
    h4 { font-size:20px; font-weight:800; margin:0 0 8px; }
    h6 { font-size:16px; margin:0; }
    p { font-size:16px; color:#666; margin:10px 0 0; }
    &:hover {
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.12);
      transition-duration: .5s;
    }
  }
}
.news-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  align-content: start;
  flex-wrap: wrap;
  position: relative;
  list-style-type: none;
  padding:0;
  row-gap: 30px;
  max-height:1200px;
  li {
    flex:1;
    min-width:50%;
    max-width: 50%;
    .item {
      padding:0 20px;
      display: block;
      text-decoration: none;
      .thumb {
        border-radius: 30px;
        background: #f0f0f0;
        width:100%;
        overflow: hidden;
        img {
          width:100%;
          transform: scale(1);
          transition-duration: .3s;
        }
      }
      p {
        font-size:18px;
        color:#111;
        font-weight:600;
        line-height:1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        line-clamp: 2;
        margin:10px 0 5px;
        word-break: keep-all;
      }
      span {
        color:#aaa;
        font-size:14px;
        font-family: 'Montserrat';
      }
      &:hover, &:focus, &:focus-within {
        .thumb {
          img {
            transform: scale(1.1);
            transition-duration: .3s;
          }
        }
      }
    }
  }
}
.qlink {
  background: url('../img/bg-qlink.png') no-repeat;
  margin-top:-80px;
  padding-top:160px;
  position: sticky;
  bottom:0;
  left:0;
  right:0;
  .container {
    display: flex;
    align-items: center;
  }
  .section-title {
    h2 { color:#fff; }
  }
  .section-contents {
    flex:1;
    display: flex;
    flex-direction: column;
    gap:30px;
    a {
      background:rgba(255,255,255,0.3);
      box-shadow: 0 0 30px rgba(0,0,0,0.3);
      backdrop-filter: blur(20px);
      padding:30px;
      display: block;
      border-radius: 30px;
      transition-duration: .3s;
      text-decoration: none;
      h4 { font-size:20px; color:#111; font-weight:800; margin:0 0 8px; }
      p { font-size:16px; color:#111; margin:10px 0 0; }
      &:hover, &:focus, &:focus-within {
        background:rgba(255,255,255,0.6);
        transition-duration: .3s;
      }
    }
  }
}

footer {
  background: #3c3634;
  padding-bottom:40px;
  .notice-line {
    border-bottom:1px rgba(255,255,255,0.1) solid;
    height:56px;
    overflow: hidden;
    .container {
      display: flex;
      align-items: center;
    }
    label {
      font-size:14px;
      font-weight:700;
      color:#fff;
      margin-right:40px;
    }
    ul {
      display: flex;
      flex-direction: column;
      list-style-type: none;
      padding:0;
      margin:0;
      li {
        height:56px;
        align-items: center;
        display: flex;
        color:#fff;
        font-size:14px;
        font-weight:300;
      }
    }
  }
  .logo-line {
    margin:40px 0;
    display: flex;
    align-items: flex-end;
    gap:30px;
    .logo {
      padding:0;
      img {
        width:180px;
        opacity: 0.5;
      }
    }
    a {
      padding-bottom:5px;
      color:#a19595;
      text-decoration: none;
      font-family: Montserrat;
      font-size:14px;
      cursor: pointer;
      transition-duration: .3s;
      &:hover {
        color:#fff;
        transition-duration: .3s;
      }
    }
  }
  .details-line {
    display: flex;
    align-items: center;
    .info {
      flex:1;
      display: flex;
      flex-direction: column;
      gap:15px;
      span {
        color:#a19595;
        font-family: Montserrat;
        font-size:14px;
        text-transform: uppercase;
      }
      .rows {
        display: flex;
        label {
          color:#a19595;
          font-family: Montserrat;
          font-size:14px;
          width:100px;
        }
        p {
          margin:0;
          font-size:14px;
          color:#fff;
          font-weight:400;
        }
      }
    }
    .fam_select {
      .selectbox-custom {
        position: relative;
        border:1px rgba(220,221,223,0.3) solid;
        width:280px;
        height:52px;
        display: flex;
        align-items: center;
        padding:0 20px;
        color:rgba(255,255,255,0.5);
        font-family: Montserrat;
        font-size:14px;
        transition-duration: .3s;
        .arr {
          display: flex;
          align-items: center;
          width:20px;
          height:20px;
          position: absolute;
          right:20px;
          opacity: 0.5;
          span {
            position: absolute;
            width:12px;
            height:1px;
            background: #fff;
            transform: rotate(45deg);
            left:0;
            &:nth-child(2) {
              transform: rotate(-45deg);
              right:0;
              left:auto;
            }
          }
        }
        &:hover {
          color:rgba(255,255,255,1);
          border-color:rgba(255,255,255,1);
          transition-duration: .3s;
          .arr {
            opacity: 0.8;
          }
        }
      }
    }
  }
}


/* sub layout common */

.title-area {
  padding-top:160px;
  position: relative;
  transition: all 0.6s ease;
  height: 100vh;
  box-sizing: border-box;
}
.title-area h5 {
  color:#ecba43;
  font-size:18px;
  font-weight:700;
  margin:0 0 20px;
  line-height:1;
  position: relative;
  z-index: 1;
}
.title-area h1 {
  color:#111;
  font-size:48px;
  line-height:1.2;
  font-weight:800;
  margin:0 0 40px;
  transition: all 0.5s ease;
  position: relative;
  z-index: 1;
}
.title-area .breadcrumb {
  display: flex;
  list-style-type: none;
  padding:0;
  gap:20px;
  position: relative;
  z-index: 1;
}
.title-area .breadcrumb li {
  position: relative;
  transition: all 0.5s ease;
}
.title-area .breadcrumb li a {
  color: #333333;
  transition: all 0.5s ease;
}
.title-area .breadcrumb .home {
  height:38px;
  display: flex;
  align-items: center;
}
.title-area .breadcrumb .home img {
  width:18px;
  height:18px;
  display: block;
  margin-bottom:4px;
}

.title-area .breadcrumb .link-item {
  font-size:14px;
  color:#111;
  height:38px;
  display: flex;
  align-items: center;
  padding-right:30px;
  padding-left:10px;
}



.title-area .breadcrumb .link-item span {
  position: absolute;
  right:0;
  margin-bottom:3px;
  width:20px;
  height:20px;
}
.title-area .breadcrumb .link-item img {
  width:100%;
}

.title-area .breadcrumb .sub-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color:#fff;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(255,255,255,0.1);
  padding:15px 30px;
  border-radius: 20px;
  align-items: center;
  left:50%;
  transform: translateX(-50%) translateY(-20px) scaleY(1);
  opacity: 0;
  transition-duration: .3s;
  transform-origin: top;
  a {
    height:34px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-size:14px;
    color:#555;
    text-align: center;
    transition-duration: .3s;
  }
  a:hover {
    color:#ecba43;
    transition-duration: .2s;
  }
  a.active {
    font-weight:600;
    color:#ecba43;
  }
}

.title-area .breadcrumb li:hover .sub-item {
  transform: translateX(-50%) translateY(0) scaleY(1);
  opacity: 1;
  transition-duration: .3s;
}

.sub-head-img {
  height:460px;
  background:#000;
  position: absolute;
  width: 100%;
  overflow: hidden;
  max-width: 1440px;
  margin: 0 auto;
  bottom: 40px;
  transition: all 0.6s ease;
  left: 0;
  right: 0;
  img {
    width:100%;
    height:100%;
    object-fit: cover;
  }
}


/* CEO 인사말 */
.message-layout {
  padding:80px 0;
  display: flex;
  flex-direction: column;
  gap:80px;
  .message-principal {
    display: flex;
    align-items: center;
    flex-direction: column;
    p {
      font-size:24px;
      font-weight:700;
      line-height:1.6;
      color:#111;
      text-align: center;
      position: relative;
      display: inline-block;
      margin:0 auto;
      z-index: 1;
    }
    p:first-child:before {
      content:'';
      position: absolute;
      left:-15px;
      top:-10px;
      width:30px;
      height:22px;
      background-image: url("/img/bl-message-l.png");
      background-size:100%;
      z-index: -1;
    }
    p:last-child:after {
      content:'';
      position: absolute;
      right:-15px;
      top:-5px;
      width:30px;
      height:22px;
      background-image: url("/img/bl-message-r.png");
      background-size:100%;
      z-index: -1;
    }
  }
  .img-block {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width:80%;
      max-width:800px;
    }
  }
  .txt-block {
    display: flex;
    flex-direction: column;
    gap:40px;
    p {
      margin:0;
      font-size:18px;
      font-weight:300;
      color:#333;
      line-height:1.6;
    }
  }
  .row {
    display: flex;
    gap:60px;
    flex-direction: row-reverse;
    align-items: center;
    > * {
      flex:1;
    }
  }
  .column {
    display: flex;
    flex-direction: column;
    gap:60px;
    .txt-block {
      display: flex;
      flex-direction: row;
      p {
        flex:1;
        text-align: justify;
      }
    }
  }
  .row:nth-child(2n) {
    flex-direction: row;
  }
  .writer {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap:20px;
    span {
      font-weight:700;
      color:#111;
      font-size:16px;
    }
    p {
      font-size:28px;
      color:#111;
      font-weight:400;
    }
  }
}
.history-layout {
  padding-top:80px;
  .history-block {
    border-top:1px #e2e4e7 solid;
    padding:60px 0;
    .container {
      display: flex;
      align-items: flex-start;
      height:auto;
      position: relative;
      .sticky-unit {
        position: sticky;
        top:100px;
        flex:1;
        h2 {
          font-size:40px;
          margin:30px 0 10px;
        }
        p {
          margin:0;
          font-size:18px;
          color:#aaa;
          font-family: 'Montserrat', sans-serif;
        }
      }
      .event-list {
        flex:1;
        list-style-type: none;
        padding:0;
        display: flex;
        flex-direction: column;
        li {
          display: flex;
          align-items: flex-start;
          padding:30px 0;
          .year {
            line-height:1.5;
            font-size:16px;
            font-weight:700;
            font-family: 'Montserrat',sans-serif;
            width:80px;
          }
          .event {
            display: flex;
            flex-direction: column;
            row-gap: 20px;
            p {
              margin:0;
              font-size:16px;
              color:#111;
            }
          }
        }
        li+li {
          border-top:1px #e2e4e7 solid;
        }
      }
    }
  }
}
.map-area {
  background: #f0f0f0;
  height:480px;
  margin-top:40px;
}
.contact-info {
  margin-top:60px;
  padding-bottom:120px;
  display: flex;
  gap:60px;
  .unit {
    flex:1;
    .icon {
      margin-bottom:20px;
      width:30px;
      height:30px;
      img {
        width:100%;
        height:100%;
      }
    }
    label {
      font-size:16px;
      font-family: 'Montserrat','Pretendard',sans-serif;
      font-weight:700;
      color:#111;
    }
    p {
      margin:5px 0;
      font-weight:400;
      font-family: 'Montserrat','Pretendard',sans-serif;
      font-size:20px;
      b {
        font-weight:700;
      }
    }
    span {
      font-size:14px;
      font-family: 'Montserrat','Pretendard',sans-serif;
      color:#999;
    }
  }
}

.post-layout {
  list-style-type: none;
  padding: 40px 0;
  margin:0 -20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  li {
    box-sizing: border-box;
    flex:1;
    min-width:33.3%;
    max-width:33.3%;
    padding:20px;
    display: flex;
    flex-direction: column;
    .thumb {
      border-radius: 20px;
      background: #f5f5f5;
      overflow: hidden;
      margin-bottom:10px;
      img {
        width: 100%;
        height:100%;
        object-fit: cover;
      }
    }
    p {
      font-size:20px;
      font-weight:600;
      color:#111;
      line-height:1.5;
      margin:5px 0;
      word-break: keep-all;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      text-overflow:ellipsis;
      overflow: hidden;
    }
    span {
      font-family: 'Montserrat','Pretendard', sans-serif;
      font-size:14px;
      color:#999;
    }

  }
}

.table-layout {
  padding:60px 0;
  .table-item {
    .table-header {
      display: flex;
      align-items: baseline;
      margin-bottom:20px;
      h4 {
        font-size:24px;
        font-weight:700;
        flex:1;
        margin:0;
      }
      span {
        font-size:16px;
        color:#999;
      }
    }
    table {
      width:100%;
      border-top:1px #e2e4e7 solid;
      border-bottom:1px #111 solid;
      th, td {
        height:60px;
        text-align: center;
        font-size:16px;
      }
      th {
        border-bottom:1px #111 solid;
      }
      td {
        border-bottom:1px #e2e4e7 solid;
      }
      tr:last-child td {
        border-width:0;
      }
    }
  }
}

.notice-layout {
  margin:0 0 160px;
  ul {
    list-style-type: none;
    padding:0;
    display: flex;
    flex-direction: column;
    li {
      flex:1;
      border-bottom:1px #e2e4e7 solid;
      .item {
        box-sizing: border-box;
        padding:30px 0;
        display: flex;
        flex-direction: column;
        p {
          font-size:22px;
          font-weight:700;
          color:#111;
          line-height:1.5;
          margin:5px 0;
          word-break: keep-all;
          white-space: nowrap;
          text-overflow:ellipsis;
          overflow: hidden;
        }
        span {
          font-family: 'Montserrat',sans-serif;
          font-size:16px;
          color:#999;
        }
      }

    }
  }
  button {
    margin:0 auto;
    width:60px;
    height:60px;
    background:#111;
    padding:0;
    border-radius: 50%;
    border:0;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width:40%;
      height:40%;
      object-fit: contain;
    }
  }
  &.download {
    ul {
      li {
        .item {
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          .icon-wrap {
            width:28px;
            height:28px;
            margin:0 20px;
            opacity: 0.4;
            transition-duration: .3s;
            img {
              width:100%;
              height:100%;
              object-fit: contain;
            }
          }
          &:hover {
            .icon-wrap {
              opacity: 0.8;
              transition-duration: .3s;
            }
          }
        }
      }
    }
  }
}

.product-layout {
  padding: 40px 0;
  ul {
    list-style-type: none;
    margin:0 -20px;
    padding:0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  li {
    box-sizing: border-box;
    flex:1;
    min-width:25%;
    max-width:25%;
    padding:20px;
    display: flex;
    flex-direction: column;
    .thumb {
      border-radius: 20px;
      background: #f5f5f5;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      margin-bottom:20px;
      img {
        width: 100%;
        height:100%;
        object-fit: cover;
      }
    }
    h4 {
      font-size:24px;
      font-weight:700;
      color:#111;
      line-height:1.5;
      margin:5px 0;
      word-break: keep-all;
      text-overflow:ellipsis;
      overflow: hidden;
      display: flex;
      align-items: baseline;
      span {
        font-family: 'Montserrat',sans-serif;
        font-size:14px;
        color:#999;
        font-weight:400;
        margin-left:8px;
      }
    }
    p {
      font-size:16px;
      font-weight:400;
      color:#555;
      line-height:1.6;
      margin:0;
      word-break: keep-all;
    }
  }
}

.product-details {
  margin-top:40px;
  margin-bottom:160px;
  .product-details-title {
    border-bottom:1px #e2e4e7 solid;
    padding-bottom:40px;
    margin-bottom:40px;
    h2 {
      font-size:38px;
      font-weight:700;
      margin:0;
      display: flex;
      align-items: baseline;
      span {
        font-size:16px;
        padding-left:10px;
        color:#999;
        font-family: 'Montserrat',sans-serif;
        font-weight: 400;
      }
    }
    p {
      font-size:18px;
      margin:10px 0 0;
      line-height:1.8;
      color:#333;
    }
  }
  .rows {
    display: flex;
    flex-direction: column;
    gap:40px;
    .row {
      display: flex;
      align-items: flex-start;
      h4 {
        width:280px;
        margin:0;
        font-size:18px;
        font-weight:800;
      }
      .contents {
        flex:1;
        display: flex;
        flex-direction: column;
        gap:30px;
        align-items: stretch;
        h5 {
          font-size:18px;
          font-weight:700;
          margin:0 0 15px;
        }
        p {
          font-size:18px;
          color:#666;
          font-weight:400;
          margin:0;
          line-height:1.8;
        }
        table {
          width:100%;
          border-top:1px #111 solid;
          border-bottom:1px #111 solid;
          th, td {
            text-align: left;
            padding:0;
            height:54px;
            font-size:14px;
          }
          th {
            border-bottom:1px #111 solid;
          }
          td {
            color:#666;
            border-bottom:1px #e2e4e7 solid;
          }
          tr:last-child td {
            border-bottom:0;
          }
          .lb {
            padding-left:30px;
            border-left:1px #e2e4e7 solid;
          }
        }
      }
    }
  }
}

.page-tab-area {
  margin-top:40px;
  padding-bottom:30px;
  border-bottom:1px #e2e4e7 solid;
  .container {
    display: flex;
    flex-direction: row;
    column-gap: 15px;
  }
  .item {
    height:50px;
    font-size:16px;
    padding:0 30px;
    color:#999;
    background: #f5f5f5;
    border:1px #e2e4e7 solid;
    border-radius: 25px;
    display: flex;
    align-items: center;
    font-family: 'Montserrat',sans-serif;
    &.active {
      font-weight:700;
      color:#111;
      background: #ecba43;
      border-color: #e6bd46;
    }
  }
}

.depth-layout {
  margin:40px 0 160px;
  ul {
    display: flex;
    padding:0;
    margin-left:-20px;
    margin-right:-20px;
    list-style-type: none;
    flex-wrap: wrap;
    li {
      flex:1;
      min-width:50%;
      max-width:50%;
      .item {
        border-radius: 20px;
        margin:20px;
        padding:40px;
        box-shadow: 0 0 20px rgba(0,0,0,0.05);
        background: #fff;
        h4 {
          font-size:30px;
          margin:0 0 5px;
        }
        span {
          font-size:16px;
          color:#999;
        }
        .info-group {
          margin-top:20px;
          display: flex;
          column-gap: 30px;
          .unit {
            display: flex;
            align-items: baseline;
            label {
              margin-right:10px;
              color:#999;
              font-size:14px;
              font-weight:400;
              font-family: 'Montserrat', sans-serif;
            }
            p {
              margin:0;
              font-size:16px;
              font-weight:700;
              font-family: 'Montserrat', sans-serif;
            }
          }
        }
      }
    }
  }
}

.sticky-list-basic {
  .sticky-block {
    border-top: 1px #e2e4e7 solid;
    padding: 60px 0;
    .container {
      display: flex;
      align-items: flex-start;
      height: auto;
      position: relative;
      .contents {
        flex:3;
        .photo {
          border:1px #e2e4e7 solid;
        }
        .img-wrapper {
          max-width:1200px;
          width:100%;
          img {
            width:100%;
          }
        }

        h4 {
          font-size:20px;
          line-height:1.5;
        }

        ul {
          flex:1;
          list-style-type: none;
          padding:0;
          display: flex;
          flex-direction: column;
          &.in-ico {
            li {
              align-items: flex-start;
              .ico {
                width:40px;
                margin-right:40px;
              }
              h5 {
                font-size:18px;
                margin:0 0 10px;
              }
              p {
                font-size:16px;
                font-weight:400;
                color:#666;
                margin:0;
              }
              .sep {
                display: flex;
                flex-wrap: wrap;
                margin-top:30px;
                gap:40px;
                .rows {
                  flex:1;
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;
                  h5 {
                    font-size:14px;
                    height:38px;
                    padding:0 20px;
                    border-radius: 20px;
                    display: flex;
                    background: #111;
                    color:#fff;
                    align-items: center;
                    justify-content: center;
                  }
                }
              }
              .details-wrapper {
                display: flex;
                align-items: flex-start;
                margin:15px 0;
                label {
                  white-space: nowrap;
                  font-weight:700;
                  font-size:14px;
                  margin:5px 40px 5px 0;
                }
                span {
                  display: block;
                  font-size:16px;
                  color:#666;
                  font-weight:400;
                  margin:5px 0;
                }
              }
            }
          }
          li {
            display: flex;
            align-items: flex-start;
            padding:30px 0;
            p {
              margin:0 0 10px;
              font-size:20px;
              font-family: Pretendard, sans-serif;
              font-weight:700;
              color:#111;
            }
            .info {
              display: flex;
              gap:40px;
              &.complex {
                flex-direction: column;
                gap:20px;
              }
              .row {
                display: flex;
                gap:20px;
                label {
                  color:#333;
                  font-weight:500;
                }
                span {
                  color:#888;
                  font-weight:400;
                }
              }
            }
          }
          li+li {
            border-top:1px #e2e4e7 solid;
          }
        }
      }
      .sticky-unit {
        position: sticky;
        top: 100px;
        flex: 1;

        h2 {
          font-size: 40px;
          margin: 30px 0 10px;
          font-weight:800;
          font-family: 'Pretendard', sans-serif;
        }

        p {
          margin: 0;
          font-size: 16px;
          letter-spacing: -0.02em;
          color: #666;
          font-family: 'Pretendard', sans-serif;
        }
      }
    }
  }
}
.para-layout {
  .para-block {
    border-bottom: 1px #e2e4e7 solid;
    padding: 60px 0;
    .container {
      display: flex;
      align-items: flex-start;
      height: auto;
      position: relative;
      .contents {
        padding-left:40px;
        flex:3.5;
        list-style-type: none;
        display: flex;
        flex-direction: column;
        p {
          margin:0 0 10px;
          font-size:18px;
          line-height:1.7;
          font-family: Pretendard, sans-serif;
          font-weight:400;
          text-align: justify;
          color:#333;
        }
        .write {
          text-align: right;
          color:#111;
          font-weight:600;
        }
      }
      .title {
        position: sticky;
        top: 100px;
        flex: 1;
        font-size: 24px;
        margin: 0;
        font-weight:800;
        font-family: 'Pretendard', sans-serif;
        word-break: keep-all;
      }
    }
  }
}
.photolist-layout {
  .photo-block {
    border-bottom: 1px #e2e4e7 solid;
    padding: 60px 0;
    display: flex;
    align-items: flex-start;
    position: relative;
    .thumb {
      width:300px;
      aspect-ratio: 4 / 3;
      margin-right:60px;
      border:1px #e2e4e7 solid;
      background: #f0f0f0;
      img {
        width:100%;
        height:100%;
        object-fit: cover;
      }
    }
    .contents {
      flex:1;
      display: flex;
      flex-direction: column;
      h4 {
        margin:0;
        font-size:26px;
        font-weight:700;
        font-family: Montserrat, sans-serif;
        span {
          font-size:16px;
          color:#999;
          padding-left:20px;
        }
      }
      .sub-t {
        font-size:20px;
        font-weight:700;
        color:#8a1e04;
        display: block;
        margin:20px 0;
      }
      p {
        margin:0 0 10px;
        font-size:18px;
        line-height:1.7;
        font-family: Pretendard, sans-serif;
        font-weight:400;
        text-align: justify;
        word-break: keep-all;
        color:#666;
      }
    }
  }
}