@charset "utf-8";

/* --- 헤더 --- */
.gnbArea {
  background: transparent;
}
.gnbArea:hover {
    background: #fff;
}
.depth1 {
  color: #fff;
}
.gnbArea:hover .depth1 {
    color: #000;
}



/* --- 히어로 섹션 래퍼 --- */
    .hero {
      position: relative;
      width: 100%;
      height: 100vh;          /* 필요에 따라 고정값으로 변경 가능 */
      min-height: 600px;
      overflow: hidden;
    }

    /* --- 배경 이미지 레이어 (3장) --- */
    .hero__bg {
      position: absolute;
      inset: 0;               /* top/right/bottom/left: 0 */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0;
      transition: opacity 1s ease;  /* 부드러운 페이드 전환 */
      z-index: 0;
    }

    /* 기본 표시 배경 */
    .hero__bg--01 { background-image: url('/html/images/main/01_01.jpg'); opacity: 1; }
    .hero__bg--02 { background-image: url('/html/images/main/01_02.jpg'); }
    .hero__bg--03 { background-image: url('/html/images/main/01_03.jpg'); }
    .hero__bg--04 { background-image: url('/html/images/main/01_04.jpg'); }
    .hero__bg--05 { background-image: url('/html/images/main/01_05.jpg'); }
    .hero__bg--06 { background-image: url('/html/images/main/01_06.jpg'); }


    /* 어두운 오버레이 (텍스트 가독성) */
    .hero__overlay {
      position: absolute;
      inset: 0;
      background: rgba(10, 25, 50, 0.45);
      z-index: 1;
    }

    /* --- 콘텐츠 영역 --- */
    .hero__content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      text-align: center;
      padding: 0 20px;
    }

    /* --- 메인 타이틀 --- */
    .hero__title {
      color: #ffffff;
      font-size: clamp(30px, 5vw, 66px);
      font-weight: 700;
      line-height: 1.4;
      margin: 70px 0 67px;
      letter-spacing: 0.05em;
      text-shadow: 0 2px 16px rgba(0,0,0,0.3);
    }

    /* --- 서브 텍스트 --- */
    /* .hero__sub {
      color: rgba(255, 255, 255, 0.88);
      font-size: clamp(12px, 2vw, 27px);
      margin: 0 0 100px;
      font-weight: 400;
      letter-spacing: 0.01em;
    } */
    
    /* --- 판매몰 바로가기 --- */
    

     /* --- 원형 카테고리 버튼 그룹 --- */
    .hero__circles {
      display: flex;
      gap: 24px;
      justify-content: center;
      flex-wrap: nowrap;   /* PC에서는 무조건 한 줄 */
      margin-top: 87px;
    }

    /* --- 개별 원형 아이템 --- */
    .hero__circle-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      cursor: pointer;
      transition: all 1.5s ease-in-out;
    }
    @media (min-width: 769px) {
      /* .hero__circle-item:first-of-type {
        transform: translateX(275%);
        opacity: 0;
      }
      .hero__circle-item:first-of-type.active {
        transform: translateX(0);
        opacity: 1;
      }
      .hero__circle-item:nth-of-type(2) {
        transform: translateX(163%);
        opacity: 0;
      }
      .hero__circle-item:nth-of-type(2).active {
        transform: translateX(0);
        opacity: 1;
      }
      .hero__circle-item:nth-of-type(3) {
        transform: translateX(53%);
        opacity: 0;
      }
      .hero__circle-item:nth-of-type(3).active {
        transform: translateX(0);
        opacity: 1;
      }
      

      .hero__circle-item:nth-of-type(4) {
        transform: translateX(-53%);
        opacity: 0;
      }
      .hero__circle-item:nth-of-type(4).active {
        transform: translateX(0);
        opacity: 1;
      }
      .hero__circle-item:nth-of-type(5) {
        transform: translateX(-163%);
        opacity: 0;
      }
      .hero__circle-item:nth-of-type(5).active {
        transform: translateX(0);
        opacity: 1;
      }
      .hero__circle-item:nth-of-type(6) {
        transform: translateX(-275%);
        opacity: 0;
      }
      .hero__circle-item:nth-of-type(6).active {
        transform: translateX(0);
        opacity: 1;
      } */
    }

    /* 원 테두리 */
    .hero__circle {
      width: 12.8vw;
      height: 12.8vw;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.75);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(2px);
      transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
    }

    .hero__circle-item:hover .hero__circle {
      border-color: #ffffff;
      background: rgba(0, 0, 0, 0.18);
      transform: scale(1.06);
    }

    .hero__circle img{
      width: 60px;
      transition: transform 0.35s ease;
    }

    .hero__circle-label {
      color: #ffffff;
      font-size: clamp(13px, 1.4vw, 20px);
      font-weight: 500;
      letter-spacing: 0.04em;
      text-align: center;
      line-height: 1.5;
    }

    /* ---- 반응형: PC 폭이 줄어들수록 원 크기 축소 (6개가 계속 한 줄에 들어가도록) ---- */
    @media (max-width: 1400px) {
      .hero__circles { gap: 16px; }
      /* .hero__circle  { width: 140px; height: 140px; } */
      .hero__circle img { width: 48px; }
    }

    @media (max-width: 1100px) {
      .hero__circles { gap: 10px; }
      /* .hero__circle  { width: 110px; height: 110px; } */
      .hero__circle img { width: 38px; }
    }

    /* ---- 768px 이하: 3x2 grid로 전환 ---- */
    @media (max-width: 768px) {
      .hero {
        height: 100vh;
        min-height: 300px;
        margin-top: -50px;
      }
      .hero__title {
        margin-bottom: 44px;
      }
      
      .hero__bg--01 { background-image: url('/html/images/main/m/01_01.jpg'); opacity: 1; }
      .hero__bg--02 { background-image: url('/html/images/main/m/01_02.jpg'); }
      .hero__bg--03 { background-image: url('/html/images/main/m/01_03.jpg'); }
      .hero__bg--04 { background-image: url('/html/images/main/m/01_04.jpg'); }
      .hero__bg--05 { background-image: url('/html/images/main/m/01_05.jpg'); }
      .hero__bg--06 { background-image: url('/html/images/main/m/01_06.jpg'); }

      .hero__circles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px 12px;
        justify-items: center;
        margin-top: 80px;
      }
      .hero__circle  { 
        width: 29vw;
        height: 29vw; 
        max-width: 150px;
        max-height: 150px;
      }
      .hero__circle img { width: 34px; }
    }

    @media (max-width: 380px) {
      .hero__circle  { width: 80px; height: 80px; }
      .hero__circle img { width: 28px; }
    }


/* ---------------------------------- */
/* ABOUT section                      */
/* ---------------------------------- */
.about-section {
    background: #ebebeb;
    padding: 130px 310px;
    text-align: left;
    line-height: 1.2;
}

.about-section__label {
    color: var(--main-green);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 30px;
}

.about-section__title {
    font-size: 50px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 30px;
}

.about-section__desc p {
    font-size: 23px;
    line-height: 1.7;
}

/* ---------------------------------- */
/* RECOMMEND section                  */
/* ---------------------------------- */
.recommend-section {
    position: relative;
    height: 44.6875vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.recommend-section__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.recommend-section__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
}

.recommend-section__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.recommend-section__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    padding: 60px 20px;
}

.recommend-section__label {
    color: var(--main-green);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
}

.recommend-section__desc p {
    font-size: 23px;
    line-height: 1.7;
    color: #fff;
}

.recommend-section__desc {
    margin-bottom: 100px;
}

.recommend-section .common-move-btn {
    width: 388px;
    margin: 0 auto;
    background-color: transparent;
    border: 1px solid #557861;
}
.recommend-section .circle-arrow-box {
    background-color: var(--main-green);
}
.recommend-section .common-move-btn:hover {
  background-color: var(--main-green);
}
.recommend-section .common-move-btn:hover .circle-arrow-box {
    transform: translateX(22px);
    background-color: #fff;
}
.recommend-section .common-move-btn:hover .btn-arrow-white {
    display: none;
}
.recommend-section .common-move-btn:hover .btn-arrow-green {
    display: inline;
}

@media (max-width:1400px) {
  .about-section {
    padding: 130px 9vw;
  }
}

/* ---------------------------------- */
/* mobile (768px 이하)                */
/* ---------------------------------- */
@media (max-width: 768px) {
    .about-section {
        padding: 40px 10vw;
    }

    .about-section__label {
      font-size: 10px;
      margin-bottom: 10px;
    }
    .about-section__title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .about-section__desc p {
        font-size: 12px;
        word-break: keep-all;
    }

    .recommend-section {
        height: 106vw;
    }

    .recommend-section__inner {
        padding: 40px 20px;
    }

    .recommend-section__label {
      font-size: 10px;
      margin-bottom: 10px;
    }
    .recommend-section__desc {
      margin-bottom: 40px;
    }
    .recommend-section__desc p {
        font-size: 12px;
        word-break: keep-all;
    }

    .recommend-section .common-move-btn {
      width: 207px;
      gap: 10px;
      padding: 8px 0;
    }
    .recommend-section .common-move-btn span {
      font-size: 17px;
    }
    .recommend-section .circle-arrow-box {
        width: 33px;
        height: 33px;
    }
    .recommend-section .circle-arrow-box img {
      width: 19px;
    }
}