/* @font-face를 통해 Noto Sans KR ExtraBold 불러오기 */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('../fonts/NotoSansKR-SemiBold.ttf') format('woff2'),
       url('../fonts/NotoSansKR-SemiBold.ttf') format('woff');
  font-weight: 800;
  font-style: normal;
}


/* Pretendard ExtraBold 폰트 로드 */
@font-face {
  font-family: 'Pretendard ExtraBold';
  src: url('../fonts/Pretendard-ExtraBold.ttf') format('truetype');
  font-weight: 800; /* 필요에 따라 조정 */
  font-style: normal;
}


@font-face {
  font-family: 'Pretendard Regular';
  src: url('../fonts/Pretendard-Regular.ttf') format('truetype');
  font-weight: 800; /* 필요에 따라 조정 */
  font-style: normal;
}


/* Lato Black 폰트 로드 */
@font-face {
  font-family: 'Lato Black';
  src: url('../fonts/Lato-Black.ttf') format('truetype');
  font-weight: 900; /* 필요에 따라 조정 */
  font-style: normal;
}

/* 기본 스타일 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'Noto Sans KR', sans-serif;
  background-color: #000; /* 전체 배경 검은색 */
  color: #fff;           /* 텍스트 대비 흰색 */
  height: 100%;
  min-height: 150vh;

}

/* 헤더 스타일 */
header {
  background-color: #000;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.orange-text {
  color: #FF7524;
}


/* 애니메이션 섹션 (전체화면) */
.animation-section {
  position: relative; /* 내부 절대 위치 요소 기준 */
  height: 90vh;       /* 이미지 영역 높이 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}

/* CSS 변수로 이미지 위치 조절 (필요시 값 변경) */
:root {
  --animation-image-offset-x: 95%;
  --animation-image-offset-y: 0px;
}

/* 스크롤 영역 내부 고정 요소 (이미지) */
.sticky img {
  max-width: 100%;
  height: auto;
  display: block;
  transform: translate(var(--animation-image-offset-x), var(--animation-image-offset-y));
}

/* 좌측 텍스트 영역 */
.animation-text {
  position: absolute;
  left: 20%;         /* 텍스트 전체의 좌측 위치 (필요시 조정) */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;     /* 이미지 위에 표시 */
  width: 80%;        /* 필요에 따라 텍스트 영역 넓이 조정 */
}

/* 현재 텍스트와 다음 텍스트는 겹쳐서 위치 */
.animation-text-current,
.animation-text-next {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

/*
.animation-text-current {
  z-index: 1;
}
.animation-text-next {
  z-index: 2;
}
더 높게
*/

/* 제목(H1) 스타일 */
.animation-title {
  font-size: 36px;
  margin-bottom: 10px;
  color: #fff;
  white-space: pre-line;
}

/* 제목(H1) 스타일 */
.animation-title_start {
  font-size: 46px;
  margin-bottom: 10px;
  color: #fff;
  white-space: pre-line;
}

/* 부제목(H2) 스타일 */
.animation-subtitle {
  font-size: 20px;
  color: #ccc;
  white-space: pre-line;
}

/* 문의하기 섹션 스타일 */
.inquiry-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 0; /* 위아래 여백 */
  height: 100vh; /* 한 화면 전체 높이 */


}

.inquiry-container {
  text-align: center;
}

.inquiry-button {
  background-color: #FF7524; /* 주황색 */
  color: #000;
  padding: 9px 90px;
  border: none;
  border-radius: 7px;
  font-size: 18px;
  font-weight : bold;
  cursor: pointer;

}

.inquiry-button:hover {
  background-color: #FA812D; /* 호버 시 약간 진한 주황 */
}

.inquiry-text {
  margin-top: 20px;
  color: #ccc;
  font-size: 16px;
}


/* 체브론 내비게이션 컨테이너 */
.arrow-nav {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 체브론 버튼 스타일 */
.arrow-btn {
  background-color: rgba(255, 117, 36, 0.85);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.3s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.arrow-btn:hover {
  background-color: rgba(255, 117, 36, 1);
  transform: translateY(-2px);
}

.arrow-btn svg {
  display: block;
}

.preview-section {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 100px 20px;
  font-family: 'Noto Sans KR', sans-serif;
}

.preview-title {
  font-size: 2.5em;
  margin-bottom: 30px;
  margin-top: 195px;

}

.preview-icons img {
  width: 48px;
  margin: 0 10px;
  vertical-align: middle;
}

.preview-description {
  margin: -12px 0 50px;
  font-size: 1.1em;
}

.preview-image img {
  width: 1100px;           /* 원하는 너비 */
  height: 550px;        /* 고정 높이 (예시: 300px) */
  object-fit: cover;    /* 비율 유지 대신 컨테이너를 꽉 채우고 필요시 크롭 */
  display: block;       /* block 요소로 변경 */
  margin: 0 auto;       /* 좌우 자동 마진 */
  border-radius: 20px;  /* 라운딩 효과 (원하는 값으로 조정 가능) */

}



/* data-image가 preview.png인 SVG 요소의 크기 조절 
svg[data-image="/img/preview.png"] {
  width: 64px;  
  height: 64px; 
}
*/
.preview-icons {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 40px;
}

/* SVG 아이콘 기본 상태: 얇은 선 */
.preview-icons svg {
  opacity: 0.5;
  transition: opacity 0.3s ease;
  stroke-width: 1;  /* 클릭하면 두꺼운 스트로크 */
}

/* 활성화된 아이콘은 밝게 */
.preview-icons svg.active {
  opacity: 1;
}

/* 활성화 상태(클릭된 상태) SVG 아이콘: 두꺼운 선 */
.preview-icons svg.active {
  stroke-width: 1.5;  /* 클릭하면 두꺼운 스트로크 */
}
.preview-icons svg:hover {
  opacity: 0.8;
}

/*서비스소개*/

/* 서비스 섹션 전체 레이아웃 */
.services-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
}

/* 각 서비스 항목: 아이콘과 텍스트가 좌우로 배치됨 */
.service-item {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

/* 아이콘 영역 */
.service-item .icon {
  flex-shrink: 0;
  margin-right: 20px; /* 아이콘과 텍스트 사이 간격 */
}

.service-item svg {
  width: 64px;
  height: 64px;
  fill: none;             /* 내부 채움 제거 */
  stroke: #F97316;        /* 주황색 스트로크 */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 텍스트 영역: 아이콘 오른쪽에 위치 */
.service-text h3 {
  color: #F97316;
  margin: 0;
  font-size: 1.5rem;
}

.service-text p {
  margin-top: 5px;
  font-size: 1rem;
  line-height: 1.6;
  color: #fff;
}

/* 반응형: 화면 폭이 좁아지면 아이콘과 텍스트를 수직으로 배치 */
@media (max-width: 768px) {
  .service-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .service-item .icon {
    margin-bottom: 10px;
    margin-right: 0;
  }
}


/* 레이아웃 설정: 검은 배경, 가운데 정렬 */
body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
}

/* 섹션 전체: 화면 폭에 맞춰 좌우 여백, 위아래 여백 */
.services-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
  display: flex;
  justify-content: space-around; /* 가로로 균등 분배 */
  align-items: flex-start;       /* 세로정렬(위쪽 기준) */
  flex-wrap: wrap;              /* 화면이 좁으면 줄바꿈 */
}

/* 각 서비스 아이템 박스 */
.service-item {
  text-align: center;
  max-width: 300px;        /* 아이템 너비 제한 */
  margin-bottom: 40px;     /* 줄바꿈 시 아래 간격 */
}

/* 아이콘 (SVG) 크기 */
.service-item svg {
  width: 64px;
  height: 64px;
  /* 이미 stroke="#F97316"이 HTML에 있으므로 fill:none이어야 아이콘 내부 채우기가 없음 */
  fill: none;
}

/* 서비스명 (제목) – 주황색 */
.service-item h3 {
  color: #F97316;
  margin: 20px 0 10px;
  font-size: 1.5rem;
}

/* 설명 (본문) – 흰색 */
.service-item p {
  font-size: 1rem;
  line-height: 1.6;
  color: #fff;
  margin: 0;
}

/* 반응형: 가로폭이 좁아지면 세로 배치 */
@media (max-width: 768px) {
  .services-section {
    flex-direction: column;
    align-items: center;
  }
  .service-item {
    margin-bottom: 50px;
  }
}


/* 섹션1: 사용자 정의 섹션 - 이미지(좌측)와 텍스트(우측) 레이아웃 */
.custom-section {
  background-color: #000; /* 배경 검은색 */
  color: #fff;            /* 글씨 흰색 */
  padding: 60px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-section-container {
  max-width: 1400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* 화면 크기가 작아지면 줄바꿈 */
  
}

.custom-section-image {
  flex: 1;
  text-align: center;
}

.custom-section-image img {
  width: 5/************************************************
   섹션: SERVICE (3개 컬러 박스) 스타일
************************************************/

/* 상단 작은 배지(“더여유와…” 문구) */


/* 각 박스 기본 스타일 */
.service-card {
  width: 270px;                  /* 고정 너비 (조정 가능) */
  padding: 30px 20px;
  border-radius: 15px;
  text-align: center;
  color: #fff;                   /* 박스 안 텍스트 흰색 */
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}

  /* 기본 너비보다 크게 설정, 필요에 따라 수치 조정 */
  height: auto; /* 비율 유지 */
  max-width: none; /* 기존 max-width 제한 해제 */
}

.service-top-badge {
  background-color: #000;       /* 진한 회색/검은색 배경 */
  padding: 10px 20px;           /* 내부 여백 */
  border-radius: 50px;          /* 더 둥글게 처리 */
  width: 15%;
  margin: 0 auto 20px auto;     /* 위쪽 0, 좌우 auto, 아래쪽 20px */
  font-size: 1rem;
  color: #FFF;
  border: 2px solid #fd9f28;    /* 주황색 테두리 추가 */
  margin-bottom : 60px;

  margin-top : -70px;
}



.custom-section-text {
  flex: 1;
  margin-left: -170px; /* -10px 대신 원하는 값으로 조정 */
  margin-bottom : 70px;

}

.custom-title {
  font-size: 2rem;
  margin-bottom: 5px;
  margin-top: 50px;
  color: #F97316;
}

.custom-description {
  font-size: 1.25rem;
  line-height: 1.6;custom-section-text
  color: #fff;
}




/* 고유 클래스별 추가 조정 예시 */
/* 퀵서비스 아이콘: 위로 10px 더 올리기 */
.icon-quick {
  margin-top: -50px;  /* 기본 -40px에서 10px 더 위로 */
}

/* 전국화물 아이콘: 기본 위치 유지 혹은 약간 아래로 */
.icon-freight {
  margin-top: -35px;  /* 기본보다는 조금 덜 위로 */
}

/* 연계배송 아이콘: 더 위로 올리기 */
.icon-link {
  margin-top: -60px;  /* 더 크게 올려서 강조 */
}

/************************************************
   섹션: SERVICE (3개 컬러 박스) 스타일
************************************************/
.service-section {
  background-color: #000;    /* 전체 배경 검은색 */
  color: #fff;               /* 기본 글씨색 흰색 */
  text-align: center;        /* 가운데 정렬 */
  padding: 80px 20px;        /* 상하/좌우 여백 */
  position: relative;
}



/* SERVICE 큰 제목 */
.service-main-title {
  font-size: 3rem;
  font-weight: 800;
  margin: 0 0 20px 0;

}

/* 소개 문구 */
.service-intro-text {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #ccc;
  margin-bottom : 200px;
}

/* 3개 박스 컨테이너 (가로 나열) */
.service-cards-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* 각 박스 기본 스타일 */
.service-card {
  width: 270px;
  padding: 30px 20px;
  border-radius: 15px;
  text-align: center;
  color: #fff;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;  /* 내부에 상대적 위치 요소 사용 */
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}

/* 박스 내부 이미지: 아이콘이 박스 상단과 겹치도록 */
.service-card img {
  display: block;
  width: 260px;
  height: auto;
  margin: 0px auto -100px auto; /* 위쪽 음수 마진을 주어 박스와 겹치게 함 */
  position: relative;
  z-index: 1;  /* 필요 시 아이콘이 글씨 위로 오도록 */
}

/* 박스 내부 제목, 본문 */
.service-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  font-weight: 700;
  color: #fff !important;

}

.service-card p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  color: #fff !important;

}

/* 주황색 카드의 이미지 조정 */
.service-card.orange img {
  margin-top: -170px;  /* 주황색 카드의 이미지가 기본보다 더 위로 */
  margin-bottom: -20px;  /* 주황색 카드의 이미지가 기본보다 더 위로 */
  height : 155%;
  width : 90%;


}

/* 빨간색 카드의 이미지 조정 */
.service-card.red img {
  margin-top: -180px;  /* 빨간색 카드의 경우 약간만 위로 */
  margin-bottom: -30px;  /* 주황색 카드의 이미지가 기본보다 더 위로 */
  width : 95%;
  height : 170%;
}

/* 빨간색 카드의 이미지 조정 */
.service-card.yellow img {
  margin-top: -165px;  /* 빨간색 카드의 경우 약간만 위로 */
  margin-left : -35px;
  height : 150%;
  width : 130%;
  margin-bottom: -20px;  /* 주황색 카드의 이미지가 기본보다 더 위로 */
}

/* 색상 지정: 주황, 빨강, 노랑 */
.service-card.orange {
  background-color: #ff6200;
}

.service-card.red {
  background-color: #fc5230;
}

.service-card.yellow {
  background-color: #ff8e00;
  color: #000;
}

/* 반응형: 모바일 화면에서는 박스가 세로 배치 */
@media (max-width: 768px) {
  .service-cards-container {
    flex-direction: column;
    align-items: center;
  }
  .service-card {
    width: 80%;
    margin-bottom: 20px;
  }
}

/******************************************
  섹션2: 타이틀, 버튼, 영상
******************************************/
.intro-section {
  background-color: #000; /* 배경 검정 */
  color: #fff;            /* 글씨 흰색 */
  text-align: center;     /* 모든 요소 중앙 정렬 */
  padding: 80px 20px;
}

/* 타이틀 스타일 */
.intro-section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: 800;
}

/* 주황색 포인트 텍스트 */
.orange-text {
  color: #FF7524; /* 주황색 */
}

/* 버튼 영역 */
.button-container {
  margin-bottom: 40px;
}

/* 문의하기 버튼 스타일 수정 */
.inquiry-button {
  background-color: #FF7524;            /* 검은색 배경 */
  color: #fff;                       /* 흰색 글씨 */
  border: 2px solid #FF7524;          /* 주황색 테두리 */
  border-radius: 20px;               /* 라운드 처리 */
  padding: 9px 30px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;             /* 링크 밑줄 제거 */
  margin: 0 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

/* 호버 시 살짝 색상 변화 */
.inquiry-button:hover {
  background-color: #FF7524;         /* 주황색 배경으로 변경 */
  color: #000;                       /* 글씨 검정으로 변경 */
}

/* 서비스 소개 보기 버튼은 다른 스타일을 사용하거나 동일하게 할 수 있음 */
.service-button {
  background-color: #FF7524;            /* 검은색 배경 */
  color: #fff;                       /* 흰색 글씨 */
  border: 2px solid #FF7524;          /* 주황색 테두리 */
  border-radius: 20px;               /* 라운드 처리 */
  padding: 9px 30px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;             /* 링크 밑줄 제거 */
  margin: 0 10px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

.service-button:hover {
  background-color: #e6671f;
}

/* 영상 컨테이너 – 중앙 정렬 */
.video-container {
  margin: 0 auto;  /* 가로 중앙 정렬 */
  width: 560px;    /* iframe 너비와 동일 */
  max-width: 100%;
  margin-top : 50px;
}

/* 반응형 처리: 모바일 화면 */
@media (max-width: 768px) {
  .intro-section h2 {
    font-size: 1.5rem;
  }
  
  .inquiry-button,
  .service-button {
    padding: 10px 20px;
    font-size: 16px;
    margin: 5px;
  }
  
  .video-container {
    width: 100%;
  }
  
  .video-container iframe {
    width: 100%;
    height: auto;
  }
}


/* 모바일 반응형: 화면 크기가 작을 때 텍스트 아래로 배치 */
@media (max-width: 768px) {
  .custom-section-container {
    flex-direction: column;
  }
  
  .custom-section-text {
    padding-left: 0;
    margin-top: 20px;
  }
}

/* footer 전체 스타일 */
.footer {
  background-color: #000; /* 검은색 배경 */
  color: #fff;            /* 흰색 텍스트 */
  padding: 40px 0;
  font-family: 'Noto Sans KR', sans-serif;
}

/* 내부 컨테이너: 최대 폭 및 가운데 정렬 */
.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 상단 영역: 회사 정보와 SNS 아이콘 배치 */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* 회사 정보는 왼쪽 정렬 */
.company-info p {
  margin: 5px 0;
  font-size: 17px;
  text-align: left;
}

/* address-contact 클래스 추가해서 별도 스타일 적용 가능 (필요 시) */
/*.address-contact {
  text-align: left;
}*/

.social-icons a {
  margin-left: 10px;
}

.social-icons img {
  width: 48px;
  height: 48px;
}

/* 하단 영역: 이용약관 등 링크와 저작권 문구 */
.footer-bottom {
  border-top: 1px solid #444;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.terms {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 15px;
}

.terms li a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  transition: color 0.3s ease;
}

.terms li a:hover {
  color: #FF7524;
}

.copyright {
  font-size: 12px;
  margin-top: 10px;
}

/* 반응형: 화면 폭 768px 이하에서는 모든 항목 가운데 정렬 */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .social-icons a {
    margin: 0 5px;
	
  }
}

}

.social-icons a {
  margin-left: 10px;
}

.social-icons img {
  width: 48px;
  height: 48px;
}

/* 하단 영역: 이용약관 등 링크와 저작권 문구 */
.footer-bottom {
  border-top: 1px solid #444;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.terms {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 15px;
}

.terms li a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  transition: color 0.3s ease;
}

.terms li a:hover {
  color: #FF7524;
}

.copyright {
  font-size: 12px;
  margin-top: 10px;
}

/* 반응형: 화면 폭 768px 이하에서는 모든 항목 가운데 정렬 */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .social-icons a {
    margin: 0 5px;
  }
}





    /* 섹션 전체 스타일 - 배경색은 검은색(#000)보다 약간 밝은 #111 예시 */
    .section-logos {
      background-color: #111;  /* 검은색보다 아주 살짝 밝은 색 */
      color: #fff;
      padding: 40px 20px;
      text-align: center;
    }
    
    /* 섹션 제목 */
    .logos-title {
	  max-width: 1000px;          /* 로고 wrapper와 동일하게 지정 */
	  font-size: 1rem;
      margin-top: 100px;
      margin-bottom: 60px;
      margin-left : -720px;
    }

    /* 로고 wrapper - 컨테이너 사이즈 조절 및 페이드 효과 적용 */
    .logos-wrapper {
      position: relative;
      max-width: 1000px;      /* 원하는 컨테이너 사이즈 (조절 가능) */
      margin: 0 auto;
      overflow: hidden;
    }

	/* 좌우 페이드 효과: 로고 양 끝이 점차 투명해지는 효과 */
	.logos-wrapper::before,
	.logos-wrapper::after {
	  content: "";
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  width: 50px;        /* 페이드 범위 조절 */
	  pointer-events: none;
	  z-index: 2;
	}
	.logos-wrapper::before {
	  left: 0;
	  background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	}
	.logos-wrapper::after {
	  right: 0;
	  background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	}

	/* 실제 로고들을 담는 컨테이너: 로고들이 한 줄로 나열되고 애니메이션 적용 */
	.logos-container {
	  display: flex;

	  width: 1300%;  /* 로고 세트를 두 번 복제하여 자연스러운 순환 구현 */
	  animation: marquee 70s linear infinite;
	}

	/* 개별 로고 이미지 스타일 */
	.logos-container img {
	  display: block;
	  margin: 0 20px;
	  height: 40px;
	}


    /* 마퀴 애니메이션: 두 세트가 자연스럽게 이어지도록 50%만큼 translateX */
    @keyframes marquee {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }


	.logo-up {
		transform: translateY(-5px);
	}
	.logo-down {
		transform: translateY(10px);
	}


/**********************************
  후기(피드백) 섹션 스타일 (크게)
***********************************/

/* 섹션 타이틀: 가운데 정렬, 여백 조정 */
.feedback-section-title {
  text-align: center;
  margin-top: 140px; /* 제목과 피드백 박스 사이 간격 */
  margin-bottom: 40px; /* 제목과 피드백 박스 사이 간격 */
  font-size: 2rem;     /* 크기를 확대 */
  margin-left : -470px;

}

/* 후기 박스들을 배치하는 컨테이너 */
.feedback-container {
  display: flex;
  justify-content: center;
  gap: 30px;        /* 박스 간 간격 확대 (원하는 값으로 조절) */
  flex-wrap: wrap;  /* 화면이 줄어들면 아래로 배치 */
  max-width: 1200px;
  margin: 0 auto;
}

/* 개별 후기 박스 */
.feedback-box {
  margin-left : 10px;
  background-color: #3B1D0F;  /* 어두운 갈색 톤 */
  color: #fff;                /* 내부 글자 흰색 */
  border-radius: 18px;
  padding: 30px;              /* 패딩 확대 */
  width: 320px;               /* 박스 너비 증가 (예: 300px → 400px) */
  max-width: 90%;
  box-shadow: 0 6px 12px rgba(0,0,0,0.4); /* 그림자도 조금 강화 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;

}

.feedback-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* 후기 박스의 제목 */
.feedback-box h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.5rem;   /* 제목 폰트 크기 확대 */
  color: #F97316;      /* 강조 색상 (오렌지) */
}

/* 후기 박스의 본문 */
.feedback-box p {
  margin: 0;
  line-height: 1.8;   /* 줄간격 약간 확대 */
  font-size: 1rem; /* 본문 폰트 크기 확대 */
}

.feedback-box p strong {
  color: #fff;
}

/* 각 섹션에 최소 높이 설정 (한 화면 전체를 차지하도록) */
section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* footer 스타일 */
footer {
  background-color: #111;
  padding: 20px;
  text-align: center;
}



/*회사소개*/
/* ---------------------------------------
   미션(사명) 섹션 텍스트 전용 스타일
--------------------------------------- */

/* 기존 .image-section .image-content 가 있다면 그대로 두고,
   필요한 부분을 override 하거나 아래와 같이 클래스 추가 */
.mission-text-area {
  /* 이미지 영역 대신 텍스트만 크게 보이도록 설정 */
  width: 100%;
  max-width: 900px;       /* 한 줄 폭 제한 (가독성) */
  margin: 0 auto;         /* 수평 중앙 정렬 */
  text-align: center;     /* 텍스트 중앙 정렬 */
  padding: 60px 20px;     /* 위아래/양옆 여백 */
  /* 혹은 position 사용 시, 기존 스타일 확인 후 조정 */
}

/* 큰 제목 */
.mission-title {
  font-size: 2.2rem;      /* 필요 시 조정 */
  margin-bottom: 20px;
  font-weight: 800;       /* Extra Bold 느낌 (Noto Sans KR 800) */
}

/* 부제(슬로건) */
.mission-subtitle {
  font-size: 1.2rem;      /* 부제는 조금 작게 */
  margin-bottom: 40px;
  color: #ccc;            /* 살짝 연한 흰색 */
}

/* 본문 텍스트(사명 설명) */
.mission-description {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 20px;
  color: #fff;            /* 대비가 필요하다면 #fff 등 설정 */
}

/* 하위 항목 (고객중심적 사고, 새로운 경험 선사) */
.mission-point {
  margin-top: 40px;       /* 항목들 사이 여백 */
  margin-bottom: 20px;
}

.mission-point h5 {
  font-size: 1.1rem;
  color: #F97316;  /* 주황색 포인트 */
  margin-bottom: 10px;
}

.mission-point p {
  font-size: 1rem;
  line-height: 1.6;
  color: #fff;
}



/************************************
   섹션2: 미션 – 좌우 컬럼 레이아웃
************************************/
.mission-section {
  background-color: #000;     /* 검정 배경 */
  color: #fff;                /* 흰색 텍스트 */
  padding: 80px 20px;         /* 상하, 좌우 여백 */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 두 컬럼 배치를 위한 컨테이너 */
.mission-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;            /* 화면이 좁아지면 아래로 내려감 */
  gap: 40px;
}

/* 왼쪽 컬럼: 제목 및 설명 텍스트 */
.mission-left {
  flex: 1 1 500px;            /* 최소 500px 이상으로 확장 */
  text-align: left;
}

/* 오른쪽 컬럼: 미션 항목들 */
.mission-right {
  flex: 1 1 300px;            /* 최소 300px 이상, 필요 시 확장 */
}

/* 제목 및 부제 스타일 */
.mission-title {
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 800;
}

.mission-subtitle {
  font-size: 1.3rem;
  color: #ccc;
  margin-bottom: 20px;
}

/* 설명 문단 스타일 */
.mission-description {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* 미션 항목 박스 스타일 (오른쪽 컬럼 내부) */
.mission-point {
  background-color: #111;     /* 약간 밝은 검은색 (다크 그레이) */
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: transform 0.3s;
}

.mission-point:hover {
  transform: translateY(-5px);
}

.mission-point h5 {
  font-size: 1.1rem;
  color: #F97316;             /* 주황색 포인트 */
  margin-bottom: 10px;
}

.mission-point p {
  font-size: 1rem;
  line-height: 1.6;
}

/**************************************************
   섹션3: 미션 – 3개의 항목을 가로 배치하는 레이아웃
**************************************************/
.three-column-mission {
  background-color: #000;   /* 검은 배경 */
  color: #fff;              /* 흰색 글씨 */
  text-align: center;       /* 가운데 정렬 */
  padding: 80px 20px;       /* 섹션 위아래, 좌우 여백 */
}

.three-column-mission .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 제목, 부제 스타일 */
.three-column-mission .title {
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 800;
}

.three-column-mission .subtitle {
  font-size: 1.3rem;
  color: #ccc;        /* 살짝 연한 흰색 */
  margin-bottom: 40px;
}

/* 설명 단락 스타일 */
.three-column-mission .description {
  font-size: 1.1rem;
  line-height: 1.8;
  max-width: 800px;   /* 단락 너비 제한 (가독성) */
  margin: 0 auto 20px;
}

/* 3개의 항목(포인트)을 가로로 배치 */
.three-column-mission .three-points {
  display: flex;
  justify-content: space-between; 
  flex-wrap: wrap;    /* 화면이 좁아지면 아래로 줄바꿈 */
  gap: 110px;          /* 항목 간격 */
  margin-top: 140px;
}

/* 각 항목 스타일 */
.three-column-mission .point {
  flex: 1 1 250px;    /* 최소 250px, 필요시 자동 확장 */
  background-color: #111;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: transform 0.3s;
}

/* 호버 시 살짝 위로 */
.three-column-mission .point:hover {
  transform: translateY(-5px);
}

/* 항목 제목(번호 + 제목) */
.three-column-mission .point h5 {
  font-size: 1.1rem;
  color: #FFF;     /* F97316 주황 포인트 컬러 */
  margin-bottom: 10px;
}

/* 항목 본문 텍스트 */
.three-column-mission .point p {
  font-size: 1rem;
  line-height: 1.6;
  color: #fff;
}
/*******************************************
  섹션4: HISTORY (연도, 월, 상세 내용 좌측→우측 배치)
********************************************/
.history-section {
  background-color: #000;       /* 검정 배경 */
  color: #fff;                  /* 흰색 텍스트 */
  padding: 80px 20px;           /* 섹션 상하좌우 여백 */
  text-align: center;           /* 타이틀 중앙 정렬 */
}

.history-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 타이틀 영역 */
.history-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 60px;
}

/* 각 연혁 항목 블록: 연도, 월, 상세 내용을 좌측→우측으로 배치 */
.history-block {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;                  /* 요소 간 간격 */
  margin-bottom: 40px;        /* 항목 간 간격 */
  text-align: left;           /* 상세 내용 왼쪽 정렬 */
}


.history-block.no-year .year-info.placeholder {
  visibility: hidden;
}
/* 연도와 footprint 텍스트를 함께 포함하는 영역 */
.year-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 150px;           /* 충분한 너비 확보 */


}

/* 연도 크게 표현 (더 크게 변경) */
.history-block .year {
  font-size: 4rem;            /* 기존보다 크게 */
  font-weight: 1000;
  color: #fff;
  margin-bottom: 5px;
  margin-left : 40px;
  margin-right : 40px;
}

/* footprint 텍스트 (연도 밑에 위치) */
.history-block .footprint {
  font-size: 0.8rem;
  color: #ccc;
  margin-left : 43px;
}

/* 월 스타일 (연도 오른쪽에 배치) */
.history-block .month {
  font-size: 2rem;
  color: #ff7524;             /* 주황 포인트 ff7524*/
  min-width: 60px;

}

/* 상세 내용 영역 */
.history-block .details {
  margin-top : 90px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.history-block .details p {
  margin: 6px 0;
  line-height: 1.6;
  font-size: 1.25rem;

}


.history-block .details_four {
  margin-top : 1px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.history-block .details_four p {
  margin: 6px 0;
  line-height: 1.6;
  font-size: 1.25rem;

}


.history-block .details_three {
  margin-top : 80px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.history-block .details_three p {
  margin: 6px 0;
  line-height: 1.6;
  font-size: 1.25rem;

}


.history-block .details_second {
  margin-top : 50px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.history-block .details_second p {
  margin: 6px 0;
  line-height: 1.6;
  font-size: 1.25rem;

}


.history-block .details_one {
  margin-top : 5px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.history-block .details_one p {
  margin: 6px 0;
  line-height: 1.6;
  font-size: 1.25rem;

}



/* 구분선 */
.history-separator {
  width: 150%;
  height: 1px;
  background-color: #FFF;
  margin: 90px auto;
  margin-left: -25%;     /* 150%의 경우 컨테이너 양쪽에 25%씩 넘치게 함 */
}



/* =================================================================
   문의 섹션(커스텀) - 업데이트된 디자인
   ================================================================= */
.custom-inquiry-section {
  background-color: #000;       /* 검정 배경 */
  padding: 80px 20px;           /* 섹션 여백 */
  text-align: left;             /* 내부 텍스트 왼쪽 정렬 */
}

.custom-inquiry-container {
  max-width: 400px;             /* 최대 폭 지정 */
  margin: 0 auto;               /* 중앙 정렬 */
}

/* 타이틀: 왼쪽 정렬, 큰 폰트 */
.inquiry-title {
  color: #fff;                  
  font-size: 2.8rem;            /* 적당히 크게 */
  font-weight: 800;
  margin-bottom: 40px;
  line-height: 1.4;
  text-align: left;             /* 왼쪽 정렬 */
}

/* 버튼: 전체 폭, 그라데이션 배경, 검은색 글씨, 크고 굵은 텍스트 */
.inquiry-button-with-icon {
  position: relative; /* 자식 아이콘의 절대 위치 기준 */
  display: inline-flex;
  align-items: center;
  justify-content: center; /* 버튼 텍스트는 가운데 정렬 */
  width: 400px;
  padding: 10px 40px;
  border: none;
  border-radius: 50px;
  font-size: 2.5rem;
  font-weight: 900;
  color: #000;
  background: linear-gradient(45deg, #FF4C33, #FFAA00);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;

}


.button-text {
  display: inline-block;
  margin-right: 30px; /* 값을 조정해서 원하는 위치로 이동시킵니다 */
}

.inquiry-button-with-icon:hover {
  background: linear-gradient(45deg, #e6671f, #FF9F00);
  transform: translateY(-2px);
}

/* 버튼 내부 아이콘: 텍스트와 간격 */
.inquiry-button-icon {
  position: absolute;
  right: 50px; /* 버튼 내부 오른쪽 여백, 필요에 따라 조절 */
  width: 40px;  /* 아이콘 크기 증가 */
  height: 40px;
}

/* 안내 문구 스타일 */
.inquiry-text {
  margin-top: 10px;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight : bold;
}


/***************************************************
  미션 섹션 - OHSUNG's mission (커스텀 디자인)
***************************************************/
.mission-section-custom {
  background-color: #000;
  padding: 80px 20px;
  text-align: center;
  color: #fff;
}

.mission-container-custom {
  max-width: 1200px;
  margin: 0 auto;
}

.mission-title-custom {
  font-size: 7rem;
  color: #FF7524; /* 강렬한 붉은색 */
  font-weight: 900;
  margin-bottom: 30px;
  font-family: 'Pretendard ExtraBold', sans-serif;
}

.mission-subtitle-custom {
  position: relative; /* 가상요소의 절대 위치 지정을 위해 */
  font-size: 2rem;
  color: #fff;
  /* 기존 border-bottom 제거 */
  border: none;
  padding: 35px 25px;
  margin-bottom: 0;
  font-weight: bold;
  line-height: 1.6;
  text-align: left;
  font-family: 'Pretendard ExtraBold', sans-serif;
}

.mission-subtitle-custom::after {
  content: "";
  position: absolute;
  left: -40px;   /* 음수 값을 주어 왼쪽 확장 */
  right: -50px;  /* 음수 값을 주어 오른쪽 확장 */
  bottom: 0;
  height: 1px; /* 기본 높이 */
  background-color: #FF7524;
  transform: scaleY(0.5); /* 세로 크기 축소 (약 0.5px 효과) */
  transform-origin: bottom;
}

/* 가상요소를 이용한 얇은 상단 경계선 */
.mission-subtitle-custom::before {
  content: "";
  position: absolute;
  left: -40px;   /* 음수 값을 주어 왼쪽 확장 */
  right: -50px;  /* 음수 값을 주어 오른쪽 확장 */
  top: 0;
  height: 1px; /* 기본 높이 */
  background-color: #FF7524;
  transform: scaleY(0.5); /* 세로 크기를 줄여서 약 0.5px 효과 */
  transform-origin: top;
}

/* 여기에 약간의 공간을 확보하기 위해 mission-three-columns에 상단 마진 추가 */
.mission-three-columns {
  margin-top: -2px;  /* 서브타이틀 하단 테두리와 딱 맞닿도록 */
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}

/* 공통 항목 스타일 */
.mission-col {
  flex: 1 1 300px;
  max-width: 330px;
  text-align: left;
  padding: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: transparent;

}

/* 왼쪽 및 중앙 항목은 기본 스타일 유지 */
.mission-col.left,
.mission-col.center {
  /* 추가 스타일 없으면 그대로 유지 */
}

.mission-col.right {
  position: relative; /* ::after의 절대 위치 지정을 위해 */
  /* 기존 border-right 제거 */
  border: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-top: 0px;  /* 서브타이틀과 바로 연결될 수 있도록 */
  margin-right: -32px;  /* 필요시 음수 margin으로 테두리 위치 미세 조정 */
}

/* 오른쪽 얇은 테두리 효과 */
.mission-col.right::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: -50px;
  right: 0;
  width: 1px; /* 기본 두께 */
  background-color: #FF7524;
  transform: scaleX(0.5); /* 가로 크기를 줄여서 약 0.5px 효과 */
  transform-origin: right;
}

/* 항목 제목 (소제목) */
.mission-col-title {
  font-size: 1.8rem;
  color: #FF7524;
  margin-bottom: 16px;
  font-weight: 700;
  margin-top: 20px;
  font-family: 'Pretendard ExtraBold', sans-serif;  
}

/* 항목 본문 텍스트 */
.mission-col-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #fff;
  font-family: 'Pretendard Regular', sans-serif;  
}
.vertical-ohsung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;  /* 원과 나머지 글자 사이 간격 */
}

/* "O"를 감싸는 원: 검은 배경, 글씨색은 붉은색, 크기는 동일하게 */
.o-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #000;       /* 검은색 배경 */
  color: #FF7524;              /* 글씨는 붉은색 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5rem;             /* 글자 크기 조정 (필요에 따라 조정) */
  font-weight: 900;
  margin: 5px; /* 기본 마진 제거 */
  font-family: 'Lato Black', sans-serif;
}

/* 나머지 글자들을 쌓는 영역 */
.hsung-stack {
  display: flex;
  flex-direction: column;
  align-items: center;


}

/* 개별 글자 스타일 (세로배치 후 회전 적용) */
.char {
  font-size: 9.5rem;  /* "O"와 같은 크기 */
  font-weight: 880;
  color: #fff;      /* 기본 흰색 */
  display: block;
  margin: -35px;    /* 기본 마진 제거 */
  font-family: 'Lato Black', sans-serif;
}

/* 회전 효과를 적용하여 일반 가로 텍스트처럼 보이도록 (90도 회전) */
.rotated {
  transform: rotate(90deg);
}



/*******************************************
  섹션3: 통계/수치 표시 (OHSUNG + 2x2 Grid)
********************************************/
.stats-section {
  background-color: #000; /* 검정 배경 */
  color: #fff;            /* 흰색 텍스트 */
  padding: 80px 20px;
  min-height: 100vh;      /* 섹션 높이 (필요시 조정) */
  display: flex;          /* 가로로 배치 (왼쪽 문구 + 오른쪽 그리드) */
  justify-content: center;
  align-items: center;
}

.stats-container {
  max-width: 1100px;
  width: 100%;
  display: flex;        /* 왼쪽 세로문구 + 오른쪽 그리드 */
  align-items: center;
  justify-content: center;
  gap: 40px;            /* 좌우 간격 */
  position: relative;
  margin-top:100px;
}

/* 왼쪽 세로 문구 (OHSUNG) */
.stats-left {
  flex-shrink: 0;      /* 크기가 줄어들지 않음 */
  position: relative;  /* 자식 요소 위치 기준 */
}

/* 세로 텍스트: 회전, 크게 표시 */
.vertical-text {
  font-size: 3rem;
  font-weight: 800;
  color: #FF7524;        /* 붉은색 */
  display: inline-block;
  transform: rotate(-90deg);  /* 세로 회전 (시계 반대) */
  transform-origin: left top; /* 회전 기준점 */
  /* 필요 시 위치 조정 */
  margin-top: 100px;     /* 아래로 내리기 */
  margin-left: -25px;    /* 왼쪽으로 땡기기 */
}

/* 오른쪽 영역 */
.stats-right {

  flex: 1; /* 나머지 공간 차지 */
  margin-left: 50px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  border: 1px solid #FF7524;  /* 기본 테두리 (모든 면 1px) */
  border-left: none;          /* 왼쪽 테두리는 제거 */
  width: 100%;                /* 부모 컨테이너의 전체 너비 사용 */
  height: 780px;
  position: relative;
}

/* 왼쪽 테두리를 가상 요소로 재구현 (1px 대신 0.5px 효과) */
.stats-grid::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;               /* 기본 두께 */
  background-color: #FF7524;
  transform: scaleX(0.5);   /* 가로 방향으로 50% 축소 → 약 0.5px 효과 */
  transform-origin: left center;
  pointer-events: none;
}


/* 개별 박스(셀) - 기존 스타일 */
.stat-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;  /* 왼쪽 정렬 */
  text-align: left;         /* 내부 텍스트도 왼쪽 정렬 */

  position: relative;       /* 가상요소를 위한 위치 설정 */
}

/* 기존 그리드 관련 설정 (필요한 부분만) */
.stats-grid {
  border-top: none;
  border-bottom: none;
  border-right: none;
}

/* 오른쪽 테두리: 첫 번째와 세 번째 셀에 적용 */
.stat-box:nth-child(1)::after,
.stat-box:nth-child(3)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;               /* 원래 1px 두께 */
  background-color: #FF7524;
  transform: scaleX(0.5);   /* 가로 방향으로 50% 축소 → 약 0.5px 효과 */
  transform-origin: right center;
}

/* 하단 테두리: 첫 번째와 두 번째 셀에 적용 */
.stat-box:nth-child(1)::before,
.stat-box:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;              /* 원래 1px 두께 */
  background-color: #FF7524;
  transform: scaleY(0.5);   /* 세로 방향으로 50% 축소 → 약 0.5px 효과 */
  transform-origin: bottom;
}


/* 큰 수치 */
.stat-number {
  font-size: 7rem;
  font-weight: 1200;
  color: #FF7524;   /* 붉은색 포인트 */
  margin-bottom: 10px;
  margin-left : 40px;

}

/* 소제목 */
.stat-title {
  font-family: 'Pretendard Regular', sans-serif;
  font-size: 3.2rem;
  margin-bottom: 10px;
  font-weight: 700;
  margin-left : 50px;


}



/* 설명 (본문) */
.stat-desc {
  font-size: 1.3rem;
  font-weight : 900;
  line-height: 2;
  color: #ccc;
  text-align: center;
  margin-left : 50px;
  margin-bottom: 0px;
  font-family: 'Pretendard Regular', sans-serif;
}


.big-text {
  font-size: 2.8em; /* 원하시는 폰트 크기로 조정 */
  /* 추가 스타일 (예: font-weight, color 등) 도 설정 가능 */
}


/* === section4: 숫자로 보는 오성 배차 서비스 === */
.numbers-section {
  background-color: #000;
  color: #fff;
  padding: 100px 20px;
}
.numbers-container {
  max-width: 2000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 160px;
}
/* 왼쪽 원형 통계 */
.numbers-left {
  flex: 1 1 400px;
}
.numbers-title {
  margin-left : 90px;
  margin-top : 50px;
  font-size: 2.4rem;
  margin-bottom: 140px;
  font-weight: 800;
  line-height: 1.6;
}
.numbers-circles {
  display: flex;
  align-items: flex-start;

  gap: 70px;
  flex-wrap: wrap;
}
.circle-item {
  text-align: center;
  flex: 1 1 140px;

}
.circle {

  width: 140px;
  height: 140px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #FF7524;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 900;
  color: #000;
  transform: scale(1.3);
  transform-origin: center center;
}
.circle-unit {
  font-size: 1rem;
  margin-left: 2px;
}
.circle-label {
  margin-top: 12px;
  font-size: 1.1rem;
  font-weight: 700;
}
.circle-desc {

  margin-top: 6px;
  font-size: 0.9rem;
  color: #ccc;
  line-height: 1.4;
}

/* 오른쪽 막대 그래프 */
.numbers-right {
  flex: 1 1 100px;
  display: flex;
  justify-content: center;
}
.bar-chart-wrapper {
  /* 밑줄+레이블 포함 전체 래퍼 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 1) 값+막대 영역 */
.bar-chart {
  margin-top : 330px;
  margin-left : 50px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 260px;   /* 60px×3 + 70px×2 간격 */
  height: 300px;
  overflow: visible;    /* 추가 */

}
/* 기준선 (밑줄) */

.bar-chart::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 80vw;  /* 선 길이 */
  /* 원래 translateX(-50%) 에 더해 -10vw 를 추가 */
  transform: translateX(calc(-70% - 5vw))
    scaleY(0.5);            /* 세로 50% 축소 */

  height: 1px;
  background-color: #FF7524;
}


/* 막대+값 아이템 */
.bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;

}
.bar-value {
  margin-bottom: 8px;
  font-size: 1rem;
  font-weight: 700;
}
.bar {
  width: 60px;
  background-color: #fd9f28; /* 막대 색상 */
  border-radius: 10px 10px 0 0;

}
/* 높이는 비율대로 */
.bar-1 { height:  40px;}  /* 1200 */
.bar-2 { height: 100px;}  /* 2800 */
.bar-3 { height: 350px;}  /* 9800 */

/* 2) 레이블 영역 (밑줄 아래) */
.bar-labels {
  display: flex;
  justify-content: space-between;
  width: 280px;
  margin-top: 12px;
  margin-left : 45px;

  


}
.bar-labels span {
  font-size: 0.9rem;
  color: #ccc;
}


/* ●● circle 내부 레이블/값 스타일 ●● */
.circle {

  width: 120px;
  height: 120px;
  left : 80px;
  margin: 0 20px;
  border-radius: 50%;
  background-color: #FF7524;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

/* 원 안의 흰색 레이블 */
.circle-label-inside {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  line-height: 0.9;
  margin-bottom: 6px;
  font-family: 'Pretendard ExtraBold';
}

/* 원 안의 값(숫자) */
.circle-value {
  font-size: 2.0rem;
  font-weight: 900;
  color: #000;
  line-height: 1;
  font-family: 'Pretendard ExtraBold';
  letter-spacing: -0.07em; /* 자간을 0.05em만큼 좁힙니다 */
}

/* 원 안의 값(숫자) */
.circle-value_a {
  font-size: 2.0rem;
  font-weight: 900;
  color: #000;
  margin-top : -8px;
  line-height: 1;
  font-family: 'Pretendard ExtraBold';
  letter-spacing: -0.07em; /* 자간을 0.05em만큼 좁힙니다 */
}





/* 단위(%, s) 보정 */
.circle-unit {
  font-size: 1.5rem;
  margin-left: 1px;
}

/* .circle-item 아래 설명과의 간격 조정 (필요시) */
.circle-desc {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 6px;

  font-family: 'Pretendard Regular';

  /* 추가 */
  top : 30px;
  position: relative;
  left: 77px; /* 값을 늘리면 더 많이 왼쪽으로 당겨집니다 */

}

/* 반응형 */
@media (max-width: 768px) {
  .numbers-container {
    flex-direction: column;
    align-items: center;
  }
  .numbers-left,
  .numbers-right {
    flex: 1 1 100%;
  }
  .bar-chart {
    height: 200px;
    width: 180px;
  }
  .bar-chart::before {
    height: 3px;
  }
  .bar-1 { height:  50px; }
  .bar-2 { height: 110px; }
  .bar-3 { height: 180px; }
  .bar-labels {
    width: 180px;
  }
}



/* 반응형: 모바일에서는 세로 배치 (2행x2열 → 4행x1열) */
@media (max-width: 768px) {
  .stats-section {
    flex-direction: column;  /* 세로 배치 */
    min-height: auto;
  }
  .vertical-text {
    transform: rotate(0deg);
    margin: 0;
    font-size: 2rem;
  }
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    height: auto;
    border: none; /* 혹은 유지할 수도 있음 */
  }
  /* 모바일에서 내부 테두리도 조정 필요 */
  .stat-box {
    border: none;
    border-bottom: 2px solid #FF4C33;
  }
  .stat-box:last-child {
    border-bottom: none;
  }
}



/* 반응형 */
@media (max-width: 768px) {
  .mission-three-columns {
    flex-direction: column;
    align-items: center;
    margin-top: 0;
  }
  .mission-col {
    max-width: 90%;
    margin-bottom: 20px;
  }
  .mission-title-custom {
    font-size: 2rem;
  }
  .mission-subtitle-custom {
    font-size: 1rem;
  }
}



/* 모바일 반응형: 화면 축소 시 조정 */
@media (max-width: 768px) {
  .inquiry-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }
  .inquiry-button-with-icon {
    font-size: 1.6rem;
    padding: 16px 32px;
    border-radius: 40px;
  }
  .inquiry-button-icon {
    width: 20px;
    height: 20px;
  }
  .inquiry-text {
    font-size: 1rem;
  }
}



/* 반응형: 화면 너비 768px 이하에서는 각 항목을 세로로 재배치 */
@media (max-width: 768px) {
  .history-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .year-info,
  .history-block .month {
    min-width: auto;
  }
}


/* 모바일 화면 적용 */
@media only screen and (max-width: 768px) {
  header {
    padding: 15px;
    font-size: 18px;
  }
  
  .animation-section {
    height: 80vh;
    background-color: #000;
  }
  
  .sticky img {
    max-width: 90%;
  }
  
  .animation-title {
    font-size: 28px;
  }
  
  .animation-subtitle {
    font-size: 16px;
  }


}