/* ===========================
   리셋
   =========================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 500;
  color: #000;
  background: #fafafa;            /* 섹션 바깥 배경 (max-width 밖) */
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ===========================
   풀페이지 스크롤 컨테이너
   =========================== */
#fullpage {
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
  will-change: transform;
}

/* 공통 섹션: 데스크톱 1300px 중앙 정렬, 좌우 테두리 */
.section {
  height: 100vh;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  background: #fff;
}

/* ===========================
   홈 섹션
   =========================== */
.index {
  background: #fff;
}

/* CI 로고 (CSS 배경이미지로 SVG 표시) */
.ci {
  position: absolute;
  top: 60px;
  left: 30px;
  width: 185px;
  height: 35px;
  background: url('https://www.bsngroup.co.kr/_nuxt/img/ci.0027525.svg') no-repeat center / contain;
}

/* 중앙 타이틀 + 카테고리 네비게이션 */
.wrap-info {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding: 0 30px;
}

.title {
  font-size: 28px;
  font-weight: 500;
  color: #042473;
  line-height: 1.464;
  letter-spacing: -0.05em;
}

.wrap-categories {
  margin-top: 16px;
}

/* 카테고리 링크 가로 나열 + 구분선 */
.categories {
  display: flex;
}

.categories div {
  position: relative;
  padding: 0 10px;
}

.categories div:first-child {
  padding-left: 0;
}

/* 구분선 (두 번째 항목부터) */
.categories div + div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: #ccc;
}

.categories a {
  font-size: 14px;
  color: #aaa;
  line-height: 1.43;
  letter-spacing: -0.05em;
  transition: color 0.2s;
}

.categories a:hover {
  color: #042473;
}

/* 하단 소개 문구 */
.comment {
  position: absolute;
  bottom: 65px;
  left: 0;
  padding: 0 30px;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  line-height: 1.5;
  letter-spacing: -0.05em;
}

/* 푸터 (홈 하단 고정) */
.copyright {
  position: absolute;
  bottom: 30px;
  left: 0;
  padding: 0 30px;
  font-size: 13px;
  color: #ccc;
  line-height: 1.5;
  letter-spacing: -0.05em;
}

.copyright a {
  color: #ccc;
}

/* ===========================
   콘텐츠 섹션 (page1~6)
   데스크톱: 비디오 77vh + 하단 정보 23vh
   =========================== */

/* 비디오/이미지 배경 영역 */
.bg {
  width: 100%;
  height: 77vh;
  overflow: hidden;
  position: relative;
}

.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 모바일 대체 이미지 (데스크톱에서는 숨김) */
.bg-img-mobile {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CI-BI 로고 오버레이 (비디오 위 좌상단) */
.ci-bi {
  position: absolute;
  top: 30px;
  left: 30px;
  height: 25px;
  width: 245px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  z-index: 2;
}

/* 각 사업부 CI-BI 이미지 */
.ci-bi1 { background-image: url('https://www.bsngroup.co.kr/_nuxt/img/ci-bi1.dc4acf8.svg'); }
.ci-bi2 { background-image: url('https://www.bsngroup.co.kr/_nuxt/img/ci-bi2.9bf9d83.svg'); }
.ci-bi3 { background-image: url('https://www.bsngroup.co.kr/_nuxt/img/ci-bi3.a53007f.svg'); }
.ci-bi4 { background-image: url('https://www.bsngroup.co.kr/_nuxt/img/ci-bi4.84b1b46.svg'); }
.ci-bi5 { background-image: url('https://www.bsngroup.co.kr/_nuxt/img/ci-bi5.3c66638.svg'); }
.ci-bi6 { background-image: url('https://www.bsngroup.co.kr/_nuxt/img/ci-bi6.36bb60d.svg'); }

/* 하단 콘텐츠 영역 (설명 텍스트 + 버튼) */
.wrap-contents {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 23vh;
  background: #fff;
  display: flex;
  align-items: stretch;
}

/* 데스크톱: 설명 텍스트 3줄 세로 배치 */
.descriptions {
  flex: 1;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.desc {
  font-size: 17.6px;
  font-weight: 500;
  color: #000;
  line-height: 1.5;
  letter-spacing: -0.05em;
}

.desc + .desc {
  margin-top: 10px;
}

/* 모바일 슬라이드: 데스크톱에서 숨김 */
.descriptions-mobile {
  display: none;
}

/* SNS/앱 버튼 2x2 그리드 (데스크톱 우측) */
.wrap-btn {
  display: grid;
  grid-template-columns: 60px 60px;
  gap: 10px;
  align-content: center;
  padding: 0 30px 0 0;
  flex-shrink: 0;
}

.wrap-btn a {
  display: block;
  width: 60px;
  height: 60px;
}

.wrap-btn img {
  width: 100%;
  height: 100%;
}

/* ===========================
   문의하기 섹션 (모바일 전용)
   데스크톱에서는 숨김
   =========================== */
.section-contact {
  display: none;
}

/* 상단 남색 배경 */
.contact-bg {
  height: 40vh;
  background: #042473;
}

/* 하단 콘텐츠 (타이틀, 설명, 버튼) */
.contact-content {
  padding: 30px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.contact-title {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  letter-spacing: -0.05em;
}

.contact-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  letter-spacing: -0.05em;
}

/* 세로 풀폭 버튼 목록 */
.contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
  padding: 0 10px;
}

.btn-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  background: #042473;
  color: #fff;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.05em;
}

/* 문의하기 섹션 전용 카피라이트 */
.contact-copyright {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: #999;
  line-height: 1.5;
  padding: 0 20px;
}

/* ===========================
   반응형: 태블릿 (800px 이하)
   =========================== */
@media (max-width: 800px) {
  .title { font-size: 22px; }
  .comment { font-size: 15px; }
  .desc { font-size: 15px; }
  .wrap-btn a { width: 50px; height: 50px; }
  .wrap-btn { grid-template-columns: 50px 50px; }
}

/* ===========================
   반응형: 모바일 (576px 이하)
   풀페이지 스크롤 유지, 비디오→정적 이미지,
   설명 텍스트 수평 슬라이드, 문의하기 섹션 표시
   =========================== */
@media (max-width: 576px) {
  .section {
    height: 100vh;
    max-width: 100%;
    border-left: none;
    border-right: none;
    background: #eee;
  }

  /* 홈 섹션 */
  .index { background: #fff; }
  .title { font-size: 28px; }
  .comment { bottom: 115px; font-size: 17px; }
  .copyright { font-size: 11px; }

  /* 콘텐츠 섹션: 비디오 숨기고 정적 이미지 표시 */
  .video { display: none; }
  .bg-img-mobile { display: block; }

  /* 이미지 75vh + 텍스트 25vh 분할 */
  .bg { height: 75vh; }
  .wrap-contents {
    height: 25vh;
    flex-direction: column;
  }

  /* 데스크톱 설명 숨기고 모바일 슬라이드 표시 */
  .descriptions { display: none; }
  .descriptions-mobile {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 25vh;
  }

  /* 슬라이드 컨테이너 (translateX로 수평 이동) */
  .slides-container {
    display: flex;
    height: 100%;
    transition: transform 0.3s ease;
  }

  /* 개별 슬라이드 */
  .slide {
    flex: 0 0 100%;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.05em;
    color: #000;
    padding: 22px 30px 30px;
    display: flex;
    align-items: flex-start;
  }

  /* 슬라이드 인디케이터 도트 */
  .slide-dots-mobile {
    position: absolute;
    bottom: 17px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 3;
  }

  .slide-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bbb;
    border: none;
    cursor: pointer;
  }

  .slide-dot.active {
    background: #333;
  }

  /* 2x2 버튼 그리드 숨김 */
  .wrap-btn { display: none; }

  /* 문의하기 섹션 표시 */
  .section-contact { display: block; }
}