@import url("./global.css");

/* Desktop */
header {
  position:fixed;
  position:relative;
  width: 100%;
  z-index:998;
  filter: drop-shadow(0 1mm 1mm rgba(0, 0, 0, .1));
  .modal-wrapper {
    display:none;
  }
}

.banner {
  display:flex;
  background-color: var(--color-black);

  .flex-wrap {
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 4px;
  }

  p {
    color:var(--color-white);
    text-align:center;
    font-size: var(--font-super-micro);
  }
  .right-wrap {
    display:flex;
    gap: 10px;
    a {
      display:flex;
      font-size:var(--super-micro);
      color:var(--color-white);
      font-size: var(--font-super-micro);
      
      img {
        margin-left: 5px;
      }

      img:nth-child(1) {
        width:16px;
        height:15px
      }
      img:nth-child(2) {
        width:12px;
        height:12px
      }
      img:nth-child(3) {
        width:25px;
        height:13px
      }
    }
  }
}

nav {
  font-size: var(--font-micro);
  background-color:var(--color-white);
  z-index:999;

  .navbar {
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap:65px;
    padding: 30px 70px;
  }
  a {
    letter-spacing: 0.0625rem;
    font-size: 0.8125rem;
    color:var(--color-grey9);
  }

  ul {
    display:flex;
    gap:40px;
  }
  .hambuger-icon-wrap {
    display:none;
  }
  .logo {
    width:59px;
    cursor:pointer;
  }
  
  .icon-wrap {
    display:flex;
    img {
      width: 16px;
      margin-right:2rem;
    }
  }
}
main {
  overflow:hidden;
}
.hero-section {
  margin: 0 auto;
  position:relative;
  overflow: hidden;
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:flex-start;
  max-height: 85vh;

  picture {
    img {
      max-height: 100vh;
      animation: moveUp 2s forwards;
    }
  }

  h1, h2, a {
    color: var(--color-white);
    font-weight: normal;
    text-align:center;
    margin:0;
    
  }

  .content {
    position:absolute;
    display:flex;
    top:0;
    left:50%;
    transform: translateX(-50%);
    width: 1000px;
    height:100%;
    justify-content:space-evenly;
    align-items:center;
    margin: 0 auto;
    
    .right {
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      max-width:500px;
    }
  }

  .btn-wrap {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:1rem;
    margin:3rem 0 0 auto;
    .btn {
      background-color:var(--color-white);
      color:var(--color-red);
      padding: 16px 30px;
      border-radius: 4px;
      width:162.55px;
    }
    .btn:nth-child(odd) {
      margin-left:auto;
    }
    .btn:hover {
      background-color: var(--color-red);
      color: var(--color-white);
    }
  }
  a {
    position: absolute;
    bottom: 32px;
    font-size: 12px;
    
  }
}

.container1 {
  padding: 76px 20px;

  h2 {
    font-size: 38px;
    padding: 0 120px 30px;
  }

  .slide-container {
    width: 90%;
    display:flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    
    .product-wrapper {
      flex-wrap:nowrap;
      overflow:hidden;
    }
    .arrow {
      display:flex;
      justify-content:center;
      align-items:center;
      border-radius: var(--size-border-radius);
      width:38px;
      height:38px;
      background: rgba(0, 0, 0, .4);
      margin:0;

      .left {
      transform: scale(-1, 1);
      filter: invert(100%);
      }

      .right {
        filter: invert(100%);
      }

    }
    .imgage-container {
      display:flex;
      gap: 30px;

      .box {
        width:320px;

        img {
          width: 100%;
        }

        .content {
          display:flex;

          span {
            display:inline-flex;
            padding: 2px 3px;
            font-size: 8px;
            border: .5px solid var(--color-grey8);
          }

          .column {
            display:flex;
            flex-direction:column;
          }

        }

        .img-wrap {
          position: relative;

          .quick-panel {
            opacity:0;
            display:flex;
            position: absolute;
            bottom:0;
            width: 100%;
            background: rgba(0,0,0,.7);
            z-index:999;
            transition: opacity 0.1s ease-in;

            div {
              width: 50%;
              display:flex;
              justify-content:center;
              padding: 30px 20px;
              color: white;
            }
          }
        }
        &:hover {
          .quick-panel {
            opacity: 1;
          }
        }
      }
    }
  }
}

.container2 {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;

  div {
    height:900px;
    background-repeat: no-repeat;
    background-size:cover;
    background-position: top;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top: 40px;

    p, h2, a {
      color: var(--color-white);
    }

    h2 {
      font-size: 2.5rem;
      margin-bottom: 26px;
    }

    p,a {
      font-size: 0.8rem;
    }

  }

  div:nth-child(1) {
    background-image: url("./img/hp-ft-01.jpg");
  }
  div:nth-child(2) {
    background-image: url("./img/hp-ft-02.jpg");
  }
  div:nth-child(3) {
    background-image: url("./img/hp-ft-03.jpg");
  }
  div:nth-child(4) {
    background-image: url("./img/hp-ft-04.jpg");
  }
}

.container3 {
  display:grid;
  grid-template-columns:1fr 1fr;

  .txt-wrap {
    display:flex;
    justify-content: center;
    align-items:center;
    background-color:var(--color-grey1);
    padding: 40px;

    .txt-center {
      width: 450px;
      display:flex;
      flex-direction:column;
      align-items:start;
    }

    button {
      width: 163px;
      height: 48px; 
      background-color: var(--color-grey8);
      padding: 5px 10px;
      color: var(--color-white);
      border-radius: 4px;
      margin-right: 20px;
    }
  }
  .img-wrap {
    background-image: url("./img/hp-ft-05.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center top;
    min-height: 612px;
  }
}
footer {
  h3 {
    font-size: .9375rem;
    margin-bottom:32px;
    color: var(--color-grey5);
  }

  .row {
    display: flex;
  }
  .column {
    display:flex;
    flex-direction:column;
  }
  a {
    color:var(--color-grey8);
  }
  a:hover {
    text-decoration: underline;
  }

  .news-letter {
    padding: 38px 20px 40px;
    margin-top: 50px;
    background-color: var(--color-grey8);
    color: var(--color-white);
    
    .news-container {
      display:grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
    }

    p {
      font-size: var(--font-super-micro);
    }

    h2 {
      color:var(--color-white);
      margin-top:0;
    }
    
    a {
      color: var(--color-white);
    }

    .news-wrapper {
      max-width:80%;
      display:flex;
      img {
        margin-right: 25px;
        margin-top: 10px;
      }
    }

    .flex-justify-center {
      justify-content:center;
    }

    .flex-align-top {
      align-items: flex-start;
    }

    .email-form{
      position: relative;
      max-width: 450px;
      
      input[type=text] {
        border:none;
        width: 100%;
        padding: 15px 25px;
        border-radius:var(--size-border-radius);
        background-color:var(--color-grey6);
        color:var(--color-white);
      }

      button {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        background-color:var(--color-grey2);
        padding: 10px;
        border-radius: var(--size-border-radius);
      }
    }

    .checkbox-wrap {
      display:flex;
      align-items: center;
      margin-bottom: 10px;
      font-size: 12px;
      
      input[type=checkbox] {
        margin-right: 10px;
      }
      label {
        margin-right: 20px;
      }
    }
  }
  .quick-nav {
    padding:35px 50px;
    h3 {
      display:none;
    }
    .box > a{
      display:flex;
      flex-direction:column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: var(--font-micro);

      &:hover {
        color: var(--color-green);
        text-decoration: underline;
      }
      
      img {
        width: 19px;
        height:20px;
      }
    }
    .accordion-wrap {
      width: 100%;
      display:flex;
      justify-content:space-between;
    }
  }
  hr {
    border: 1px solid var(--color-grey2);
  }
  .quick-bottom-nav {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap: 20px;
    width: 100%;
    padding:0 20px;
    
    .footer-column {
      border-right: 1px solid var(--color-grey2);

      &:last-child {
        border-right: none;
      }
      .footer-box {
        padding: 30px 0;
        font-size: .75rem;

        a{
          margin-bottom: 16px;
          letter-spacing:.1rem;
        }
      }
      .sns {
        justify-content:space-between;
      }
    }
  }
  .copyright-container {
    display:flex;
    justify-content: space-between;
    font-size: var(--font-super-micro);
    padding: 44px 0 80px;
    color: var(--color-grey6);
    a {
      font-size: .8rem;
      color: var(--color-grey6);
    }
  }
  .accordion-check {
    display:none;
  }
}

.story-banner {
  display:flex;
  flex-direction:column;
  align-items: center;
  margin: 70px auto 100px;
  overflow:hidden;

  h2{
    max-width:475px;
    font-size:1rem;
    font-weight:700;
    text-align:center;
    margin: 20px 0 50px;
  }
  .page-nav {
    display:flex;
    gap: 40px;
    cursor:pointer;
    max-width:100%;
    overflow:hidden;
    justify-content: center;
    .page-items {
      font-size: 1rem;
      padding: 0.5rem 2rem;
      border: 0.5px solid var(--color-black);
      border-radius: 25px;
      width:fit-content;
      white-space:nowrap;
      &.active {
        background-color: var(--color-black);
        color: var(--color-white);
      }
    }
  }
  img {
    width:66%;
    max-width: 300px;
  }
}

.album {
  display:flex;
  flex-wrap:wrap;
  width: 100%;
  gap: 50px;
  justify-content:center;

  .album-card {
    max-width:360px;
    img {
      width: 360px;
      height:449px;
      margin-bottom: 22px;
    }
    .story-badge {
      font-size: 0.9rem;
      padding: 2px 28px;
      border: 0.5px solid var(--color-black);
      border-radius: 25px;
      width:fit-content;
      margin-bottom:28px;
    }
    h3 {
      font-size:2.25rem;
      line-height:1;
      font-weight:700;
      color:var(--color-grey8);
    }
    span {
      color: var(--color-grey4);
      font-size: 0.8rem;
    }
    a {
      display:block;
      font-weight:500;
    }
  }
}
#faq {
  .faq-header {
    display:flex;
    flex-direction:column;
    align-items: center;
    padding: 70px 20px 100px;
    background-color:var(--color-green);
    color:var(--color-white);

    h2 {
        color:var(--color-white);
    }
  }

  .faq-main {
    display:flex;
    flex-direction:column;
    align-items:center;
    padding: 40px 0;

    h2 {
      color:var(--color-green);
    }

    .accordion-check {
      display:none;
      /* not check */
      & + label {
        background-image: url('./img/icon/icon-down.svg');
        background-repeat:no-repeat;
      }
      /* checked */
      &:checked + label {
        background-image: url('./img/icon/icon-up.svg');
  
        background-repeat:no-repeat;
      }
    }

    .accordion {
      display:flex;
      flex-direction:column;
      margin-top: 50px;
      width: 70vw;

      input[type="checkbox"] {
        display: none;
      }
      .accordion-header {
        display:flex;
        justify-content: space-between;
        align-items:center;
        border-bottom: 1px solid var(--color-grey2);
        padding-bottom:50px;
        font-weight: 500;

        label {
          display:block;
          width: 15px;
          height:15px;
          cursor:pointer;
        }
      }
      .accordion-header:has(span > input[type=checkbox]:checked) ~ .accordion-wrapper {
        display:flex;
        flex-direction: column;
        overflow:scroll;
        max-height:50vh;
        height:auto;
        h3 {
          display:block;
        }
      }
      .accordion-wrapper {
        display:none;
        background-color:var(--color-grey1);
        padding: 20px 50px;
        flex-wrap: wrap;
        p {
          white-space: normal; /* 자동 줄 바꿈 */
          word-wrap: break-word; /* 긴 단어 줄 바꿈 */
          overflow-wrap: break-word; /* 긴 단어 줄 바꿈 */
          text-align: left; /* 왼쪽 정렬로 공백 문제 완화 */
          
        }
      }
    }
  }
}

#page-404 {
  background-color:var(--color-grey1);
  h1 {
    color: var(--color-green);
  }
  p {
    font-size: 1.2rem;
  }
  a {
    color: var(--color-green);
    font-weight: var(--weight-semi-bold);
    &:hover {
      color: var(--color-black);
    }
  }
  .container {
      height: 62vh;
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
}
/* Tablet, Mobile */
@media screen and (max-width:992px) {
  header {
    .modal-wrapper {
      position:absolute;
      top:0;
      left:-100vw;
      background-color: var(--color-beige);
      width: 100vw;
      height: 100vh;
      z-index:999;
      transition: left 0.5s ease-in;

      .modal-header {
        width:90%;
        margin: 80px auto 20px;
        input {
          width:100%;
          border:none;
          padding: 16px 16px 16px 27px;
        }
      }
      .modal-body {
        width:100%;
        margin: 0 auto;
        font-size: 0.95rem;
        background-color: var(--color-lightbeige);
        ul > a >li {
          display:flex;
          justify-content:space-between;
          align-items:center;
          padding: 18px 5%;
          border-bottom: 1px solid var(--color-beige);

        }
      }
      .modal-bottom {
        background-color:var(--color-white);
        margin:0 0 auto 0;
        ul > a >li {
          display:flex;
          align-items:center;
          padding: 18px 5%;
          border-bottom: 1px solid var(--color-beige);
          img {
            height:20px;
            margin-right: 10px;
          }
        }
      }
    }
    .hambuger-icon-wrap {
      display:block;
      z-index:1000;
      width: 100px;

      input[type=checkbox] {
        display:none;
      }
      label {
        display:inline-block;
        width: 24px;
        height: 24px;
        cursor:pointer;
        background-image: url('../img/icon/icon-hamburger.svg');
        background-size: cover;
      }
    }
  }

  .banner {
    .right-wrap {
      display:none;
    }
  }
  nav {
    .navbar {
      padding: 25px 15px;
    }
    .nav-list {
      display:none;
    }

    .icon-wrap{
      img{
        margin-right: 1.2rem;
      }
      p {
        display:none;
      }
    }
  }

  body:has(#hambuger-toggle[type=checkbox]:checked) {
    overflow: hidden;
    height:100vh;
    header {
      .modal-wrapper {
        display:block;
        left:0;
      }
      .hambuger-icon-wrap {
        input + label {
          position:absolute;
          top:20%;
          right:5%;
          background-image: url('../img/icon/icon-close.svg');
          &:before {
            position:absolute;
            content:'close';
            left: -50px;
            font-size: 1.1rem;
          }
        }
      }
    }

  }
  .hero-section {
    height:auto;
    bottom:0;
    h1 {
      font-size: 3.5rem;
      margin: 0 2rem;
    }
    .content {
      .left {
        display:none;
      }
    }
  }
  .container1 {
    .slide-container {
      padding: 0 10px;
      justify-content:flex-start;
      overflow-x:scroll;
      .arrow {
        display:none;
      }
    }
  }
  .container2 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;

    div {
      height: 60vh;
      background-position: center center;
      justify-content:center;
      transition: background-size .3s ease;

      &:hover {
        background-position: center center;
        background-size: 120%;
      }

      h2 {
        font-size: 1.5rem;
        margin-bottom: 13px;
      }
  
      p,a {
        font-size: 0.6rem;
        margin: 0;
      }
    }
  }
  .container3 {
    grid-template-columns: 1fr;

    .img-wrap {
      order: 1;
      min-height:40vh;
    }
    .txt-wrap {
      order:2;
      .txt-center {
        width: auto;
      }
    }
  }
  footer {
    hr {
      display:none;
    }
    .news-letter {
      p {
        text-align: center;
      }
      .news-container {
        grid-template-columns: 1fr;
        justify-items:center;
        gap: 1rem;
      }
      .news-wrapper {
        flex-direction: column;
      }
      .flex-justify-sm-center {
        justify-content: center;
        align-items:center;
      }
      .news-txt {
        display:flex;
        flex-direction:column;
        align-items:center;
      }
      .checkbox-wrap {
        flex-wrap:wrap;
      }
    }

    .accordion-check {
      display:none;
      /* not check */
      & + label {
        background-image: url('./img/icon/icon-down.svg');
        background-repeat:no-repeat;
      }
      /* checked */
      &:checked + label {
        background-image: url('./img/icon/icon-up.svg');

        background-repeat:no-repeat;
      }
    }
    /* accodion event */
    .quick-title:has(span input[type=checkbox]:checked) ~ .accordion-wrap {
      display:flex;
      flex-direction: column;
      overflow:wrap;
      height:auto;
    }
    label {
      display:block;
      width: 15px;
      height:15px;
      cursor:pointer;
    }
    .accordion-wrap {
      display:flex;
      flex-direction: column;
      height: 0px;
      overflow:hidden;
    }
    .quick-title {
      width:100%;
      display:flex;
      justify-content: space-between;
      align-items:center;
    }
    .quick-nav {
      flex-direction: column;
      padding:4rem 0;
      align-items: flex-start;
      border-bottom: 1px solid var(--color-grey2);
      width:90vw;

      h3 {
        display:block;
      }
      .box {
        padding: 1rem 10px;
      }
      .box > a {
        flex-direction:row;
        justify-content: flex-start;
      }
    }
    .quick-bottom-nav {
      grid-template-columns: 1fr;

      .footer-column {
        border-right:none;

        .footer-box {
          border-bottom: 1px solid var(--color-grey2);
        }
      }
      .sns {
        padding: 40px 30px 0;
        gap: 2px;
      }
    }
    .copyright-container {
      flex-direction: column;
      align-items: center;
    }
    
  }
  .story-banner {
    .page-nav {
      justify-content:flex-start;
      gap:10px;
      overflow:scroll;
      .page-items {
        font-size: 0.7rem;
      }
    }
  }
  #faq {
    .faq-header {
      text-align:center;
    }
    .faq-main {
      padding: 0 10px;
      text-align: center;
      margin:4rem 0 2rem;
      .accordion {
        width: 100%;
        .accordion-wrapper {
          padding: 2rem;
        }
      }
    }
  }
}