@charset "utf-8";

/* 기본 공통 컬러 */
:root {
  --main-color:#0D4633;
  --sub-color01:#F7F1DB;
  --sub-color02: #262626;
  --pc-max-width: 1920px;
  --mx-width: 0 auto;
}

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

/* layout.css */

header {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  /* height: 110px; 하위 메뉴가 열리지 않았을 때 */
  height: 100px;
  transition: height 0.3s ease;
  overflow: hidden;
  z-index: 10;
}
.pc_search_position {
  position: absolute;
  left: 0;
  /* top: 0; */
  top: -80px; /* 처음에 숨기기 */
  width: 100%;
  background-color: #fff;
  z-index: 15;
}
.pc_search_position .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 636px;
  height: 80px;
}
.pc_search_position .wrap form {
  display: flex;
}
.pc_search_position .wrap input[type="search"] {
  width: 590px;
  height: 46px;
  font-size: 16px;
  text-indent: 10px;
  outline: none;
  border: 2px solid #FF9700;
  box-sizing: border-box;
}
.pc_search_position .wrap .btn_sbmit_search {
  width: 46px;
  height: 46px;
  background: #FF9700 url(../images/top_search_dark.png) no-repeat center / 20px 20px;
}
.pc_search_position .btn_close_search {
  position: absolute;
  right: 31px;
  top: 17px;
  display: block;
  padding: 0 20px;
  font-size: 32px;
  color: #222;
  line-height: 46px;
  box-sizing: border-box;
}
/* 검색영역에 마우스 호버 상태에서 검색영역만 보이도록 한다. */
header:has(.pc_search_position:hover) {
  height: 80px;
}
header:has(.btn_close_search:focus) .pc_search_position  {
  /* 클릭되면 사라지게 하기 */
  top: -80px;
}
input[id="btn_toggle_search"]:checked + .pc_search_position {
  /* 검색 토글 버튼 클릭 시(포커스) 나타나게 하기 */
  top: 0;
}
header.transparent {
  background-color: transparent;
}
header .wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
header h1 {
  margin-top: 24px;
  margin-left: 60px;
}
header h1 a {
  display: block;
  width: 192px;
  height: 56px;
  background: url(../images/top_logo_dark.png) no-repeat center / 192px 56px;
}
header input[id="btn_toggle_search"] {
  display: none;
}
header .btn_toggle_search {
  display: block;
  margin-top: 24px;
  margin-right: 35px;
  padding: 25px;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  background: url(../images/top_search_dark.png) no-repeat center / 24px 24px;
}
/* -- s --
scrolled => bg #fff, logo img, search btn img
menu hover => bg #fff, logo img, search btn img
*/
header.scrolled {
  background-color: #fff;
}
header.scrolled nav > ul > li > a .menu,
header:hover nav > ul > li > a .menu {
  color: #333;
}
header:has(nav:hover) {
  height: 400px;
}
header:has(nav:hover) .sub_menu_border {
  display: block;
}
header:has(nav:hover) .sub_wrap li a {
  color: #444;
}
header.scrolled h1 a,
header:hover h1 a {
  background: url(../images/top_logo_light.png) no-repeat center / 192px 56px;
}
header.scrolled .btn_toggle_search,
header:has(nav > ul > li > a:hover) .btn_toggle_search,
header:hover .btn_toggle_search {
  background: url(../images/top_search_light.png) no-repeat center / 24px 24px;
}
header:hover {
  background-color: #fff;
}
nav.pc .intro:hover > a .underline { display: block; }
nav.pc .brand:hover > a .underline { display: block; }
nav.pc .esg:hover > a .underline { display: block; }
nav.pc .news:hover > a .underline { display: block; }
nav.pc .recruit:hover > a .underline { display: block; }
nav.pc .support:hover > a .underline { display: block; }
/* -- e -- */

header nav.pc {
  position: relative;
  width: 100%;
  max-width: 900px;
}
header .mobile_nav_wrap {
  display: none;
}
header nav.pc > ul {
  display: flex;
  justify-content: space-around;
}
header nav.pc > ul > li {
  position: relative;
}
header nav.pc > ul > li > a {
  position: relative;
  display: block;
  padding: 0 10px;
  height: 100px;
  font-size: 16px;
  color: #fff;
  line-height: 100px;
  text-align: center;
  font-weight: bold;
}
header nav.pc li > a .underline {
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 5px;
  border-radius: 2px;
  background: #FF9700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.09);
}
header .sub_menu_border {
  display: none;
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #D9D9D9;
}
header nav .sub_wrap {
  display: block;
  margin-top: 10px;
  padding: 0 10px;
}
header nav .sub_wrap li a {
  display: block;
  font-size: 14px;
  line-height: 32px;
  color: transparent;
}
header nav .sub_wrap li a:hover span {
  color: #222;
  border-bottom: 1px solid #FF9700;
}
/* 슬라이더 내부에 다시 배치하고 싶을 때 */
main .auto_slide .swiper-pagination-auto-slide {
  position: absolute;
  bottom: 10px; /* 밑에서부터의 거리 (원하는 만큼 조절) */
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10; /* 슬라이드 이미지에 묻히지 않도록 정렬 */
}

/* 내부 동그라미 불릿들의 간격이나 정렬 유지 */
main .auto_slide .swiper-pagination-auto-slide .swiper-pagination-bullet {
  margin: 0 4px; /* 불릿 간의 좌우 간격 */
  display: inline-block;
}
main .auto_slide .swiper-pagination-auto-slide {
  /* 활성화된 불릿의 색상 (예: 주황색) */
  --swiper-pagination-color: #FF9700; 
  
  /* 비활성화된 기본 불릿의 색상 (예: 회색) */
  --swiper-pagination-bullet-inactive-color: #cccccc; 
  
  /* 비활성화된 불릿의 투명도 (0 ~ 1) */
  --swiper-pagination-bullet-inactive-opacity: 0.7; 
}
main .auto_slide .swiper-pagination-bullet {
  width: 50px;
  height: 25px;
  border-radius: 5px;
}
main .auto_slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 50px;
}
main .auto_slide .swiper-slide {
  /* position: relative;  슬라이드 text-line 위치 잡기 위해 relative. 여기에 relative 를 걸면 swiper bullet ui 가 깨지는 거 같다. */
  width: 100%;
  height: 670px;
  overflow: hidden;
}
main .slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}
main .auto_slide .bg_slide_01 {
  width: 100%;
  background: url(../images/pc_main_slide_01.jpg) no-repeat center / cover;
}
main .auto_slide .bg_slide_02 {
  width: 100%;
  background: url(../images/pc_main_slide_02.jpg) no-repeat center / cover;
}
main .auto_slide .bg_slide_03 {
  width: 100%;
  background: url(../images/pc_main_slide_03.jpg) no-repeat center / cover;
}
/* 2026.10.07 수요일 메모 떠오르는 텍스트 애니메이션 만들기 */
/* 
슬라이드가 활성화 되었을 때 자동으로 올라오도록 설정
.swiper-slide-active .text-line {
  transform: translateY(0);
  opacity: 1;
}
애니메이션 큐는 swiperjs 에서 active 클래스가 들어갔을 때가 큐이다.
그러니까
요소.active {
  transform 하거나 translate, 또는 keyframe 등 찾아보자
}

/* 참고 내용
CSS에서 3줄의 텍스트를 한 줄씩 순차적으로 올라오게 만들려면 transition-delay 속성을 사용합니다. 이 속성은 애니메이션이 몇 초 후에 시작할지 지연 시간을 설정해 주는 역할을 합니다.
가장 깔끔하고 효율적인 구현 방법과 상세한 원리 설명을 정리해 드립니다.

🛠️ 추천 CSS 코드 (nth-child 활용)

HTML 구조가 차례대로 생성된 3개의 wrapper를 가지고 있다면, CSS의 :nth-child() 선택자를 이용해 각각 다른 지연 시간을 주는 것이 가장 좋습니다.
css
/* [공통] 텍스트의 기본 상태와 애니메이션 속도 설정 
.text-line {
  transform: translateY(100%);
  opacity: 0;
  /* 0.8초 동안 애니메이션이 일어남 (기본 속도) 
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
}

/* [활성화] active가 붙으면 원래 위치로 이동 및 선명하게 
.slide-container.active .text-line {
  transform: translateY(0);
  opacity: 1;
}

/* ⭐ [핵심] 한 줄씩 시차(Delay) 주기 

/* 1번째 줄: active가 붙자마자 바로(0초 대기) 올라오기 시작 
.slide-container.active .text-line-wrapper:nth-child(1) .text-line {
  transition-delay: 0s; 
}

/* 2번째 줄: 1번째 줄이 올라오기 시작한 후 0.2초 기다렸다가 시작 
.slide-container.active .text-line-wrapper:nth-child(2) .text-line {
  transition-delay: 0.2s;
}

/* 3번째 줄: 2번째 줄보다 0.2초 더 기다렸다가(총 0.4초 대기) 시작 
.slide-container.active .text-line-wrapper:nth-child(3) .text-line {
  transition-delay: 0.4s;
}

*/
.auto_slide .swiper-slide .text_animation {
  position: relative;
  width: 100%;
  height: 100%;
}
.auto_slide .swiper-slide .text_animation .wrap {
  position: absolute;
  left: 4.2969%;
  bottom: 44px;
}
.auto_slide .swiper-slide .txt_line {
  display: block;
  /* height: 32px; */
  overflow: hidden;
}
.auto_slide .swiper-slide .txt_line .inner {
  display: block;
  font-size: 38px;
  color: #fff;
  line-height: 52px;
  font-weight: bold;
  transition: 
    transform 600ms cubic-bezier(0.25, 1, 0.5, 1), 
    opacity 600ms ease;
  transform: translateY(100%);
  opacity: 0;
}
.auto_slide .swiper-slide-active .txt_line:nth-child(1) .inner {
  transition-delay: 200ms;
  transform: translateY(0);
  opacity: 1;
}
.auto_slide .swiper-slide-active .txt_line:nth-child(2) .inner {
  transition-delay: 800ms;
  transform: translateY(0);
  opacity: 1;
}
.auto_slide .swiper-slide-active .txt_line:nth-child(3) .inner {
  transition-delay: 1400ms;
  transform: translateY(0);
  opacity: 1;
}


/* contents layout */
.c_products {
  text-align: center;
}
.c_products h2 {
  margin-top: 117px;
  font-size: 44px;
  line-height: 90px;
  font-weight: bold;
}
.c_products p {
  font-size: 24px;
  line-height: 34px;
}
.c_products .wrap {
  margin: 77px auto 0 auto;
  display: grid;
  width: 100%;
  max-width: 1920px;
  grid-template-rows: repeat(2, auto); /* 행, 줄 */
  grid-template-columns: repeat(4, 1fr); /* 열, 칸 */
  gap: 0;
}
.c_products .wrap a {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.c_products .wrap figure {
  height: 100%;
  vertical-align: top;
}
.c_products .wrap a figcaption {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  width: 100%;
  height: 100%;
  /* background-color: #FF9700; */
  background-color: #ED7701;
  transition: top 0.5s ease;
}
.c_products .wrap a figcaption h3 {
  font-size: 16px;
  color: #fff;
  line-height: 26px;
}
.c_products .wrap a figcaption p {
  font-size: 24px;
  color: #fff;
  line-height: 42px;
  font-weight: bold;
}
.c_products .wrap a:hover figcaption {
  top: 0;
}
.c_products .wrap a img {
  /* 이미지에 100% 를 줘야 브라우저 크기에 반응한다. figure, figcaption 모두 블록요소이고 이미지는 width 값이 설정되어있지 않기 때문이다.*/
  display: block; /* inline 속성을 block으로 바꿔 하단 여백 제거 */
  width: 100%;
  height: auto;
}
.bibigo_banner {
  position: relative;
  max-width: 1255px;
  margin: 134px auto 0 auto;
}
.bibigo_banner .mobile_banner {
  display: none;
}
.bibigo_banner img {
  display: block;
  width: 100%;
  max-width: 1255px;
}
.bibigo_banner h3 {
  position: absolute;
  top: 56.88%;
  left: 21.35%;
  font-size: 38px;
  color: #fff;
  line-height: 51px;
  font-weight: bold;
}
.bibigo_banner a {
  position: absolute;
  top: 78.61%;
  left: 21.35%;
  display: block;
  padding: 0 22px;
  height: 50px;
  font-size: 14px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
  background-color: #197819;
}
.bibigo_banner a:hover {
  background-color: #008314;
}
.bibigo_banner a:hover .arr {
  display: inline-block;
  width: 16px;
  height: 16px;
  animation: arr_loop 0.6s ease-in-out infinite alternate;
}
.about_vision {
  margin-top: 158px;
  padding: 60px 0 105px 0;
  width: 100%;
  /* max-width: 1255px; */
  background-color: #FFFAF2;
}
.about_vision h2 {
  font-size: 32px;
  line-height: 48px;
  font-weight: bold;
  text-align: center;
}
.about_vision article:first-child {
  margin-top: 120px;
}
.about_vision article {
  display: flex;
  justify-content: space-between;
  gap: 64px;
  margin: 84px auto 0 auto;
  max-width: 1255px;
  height: 500px;
}
.about_vision article .pc_layout img {
  border-radius: 10px;
}
.about_vision article .mobile_layout {
  display: none;
}
.about_vision article .mobile_layout img {
  display: none;
}
.about_vision article dt {
  font-size: 28px;
  color: #444;
  line-height: 38px;
  font-weight: bold;
}
.about_vision article dd {
  margin-top: 15px;
  font-size: 22px;
  color: #444;
  line-height: 36px;
}
.about_vision article .txt {
  display: flex;
  align-items: center;
}
.about_vision article .txt a {
  display: inline-block;
  margin-top: 56px;
  padding: 0 54px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  /* background-color: #F49101; */
  background-color: #A86400;
}
.about_vision article .txt a:hover {
  /* background-color: #ED7701; */
  background-color: #F49101;
}
.about_vision article .txt a:hover .arr {
  display: inline-block;
  width: 16px;
  height: 16px;
  animation: arr_loop 0.6s ease-in-out infinite alternate;
}
.c_newsroom {
  margin: 142px auto 0 auto;
  padding: 0 10px;
  width: 100%;
  max-width: 1260px;
  box-sizing: border-box;
}
.c_newsroom h2 {
  font-size: 34px;
  font-weight: bold;
}
.c_newsroom > p {
  margin-top: 20px;
  font-size: 20px;
}
.c_newsroom .swiper {
  overflow: visible; /* swiperjs 스타일에서 overflow hidden 을 줘서 그림자가 짤려보이는 현상 고침*/
}
.c_newsroom .swiper.max_width1024 {
  display: none;
}
.c_newsroom .card_wrap.min_width1024 {
  margin-top: 90px;
}
.c_newsroom .card_wrap {
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}
.c_newsroom .card_wrap .article {
  padding: 0 30px 60px 30px;
  width: 31.03%;
  border-radius: 47px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.5s ease;
}
.c_newsroom .card_wrap .article:hover {
  transform: translateY(-20px);
}
.c_newsroom .card_wrap .badge {
  margin-top: 40px;
  display: block;
  font-size: 16px;
}
.c_newsroom .card_wrap .card_tit {
  margin-top: 24px;
  font-size: 22px;
  line-height: 32px;
  font-weight: bold;
  /* 말줄임표 처리 (두 줄 이상일 때) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c_newsroom .card_wrap .card_date {
  margin-top: 24px;
  display: block;
  font-size: 16px;
}
.c_newsroom .card_wrap .card_image {
  margin-top: 24px;
  width: 100%;
  max-width: 330px;
}
.c_newsroom .card_wrap .card_image img {
  display: block;
  width: 100%;
}
.c_newsroom .btn_wrap {
  text-align: center;
}
.c_newsroom .btn_more {
  display: inline-block;
  margin-top: 86px;
  padding: 0 54px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  line-height: 40px;
  text-align: center;
  border-radius: 20px;
  /* background-color: #F49101; */
  background-color: #A86400;
}
.c_newsroom .btn_more:hover {
  background-color: #ED7701;
}
.c_newsroom .btn_more:hover .arr {
  display: inline-block;
  width: 16px;
  height: 16px;
  animation: arr_loop 0.6s ease-in-out infinite alternate;
}
@keyframes arr_loop {
  0% {transform: translateX(0)}
  100% {transform: translateX(5px)}
}
#btn_top {
  /* display: none;  */
  position: fixed;
  right: 12px;
  bottom: 50px;
  z-index: 20;
  width: 50px;
}
#btn_top img {
  display: block;
  width: 100%;
}
footer {
  margin-top: 158px;
  padding: 64px 0 84px 0;
  color: #fff;
  background-color: #222;
}
footer .wrap {
  margin: 0 auto;
  width: 100%;
  max-width: 1340px;
}
footer .footer_top {
  display: flex;
  justify-content: space-between;
}
footer nav.pc {
  display: flex;
  justify-content: space-between;
  gap: 120px;
  width: 675px;
}
footer nav.pc .row1_last {
  display: none;
}
footer nav.pc ul li a {
  display: block;
  font-size: 14px;
  line-height: 31px;
}
footer nav.pc ul li a:hover span {
  border-bottom: 1px solid #fff;
}
footer .footer_social .family_site {
  position: relative;
}
/* 
2026.10.02 금요일 메모
여기서부터 작업 다시 시작하자
*/
footer .footer_social .family_site .faily_toggle_layer {
  position: absolute;
  /* right: -28px; */
  right: 0;
  top: -215px;
  display: none;
  width: 130px;
  padding: 25px 25px 16px 25px;
  border: 2px solid #ccc;
  border-radius: 15px;
  background-color: #F7F7F7;
}
footer .faily_toggle_layer strong.title {
  font-size: 16px;
  color: #333;
}
footer .faily_toggle_layer li:first-child {
  margin-top: 8px;
}
footer .faily_toggle_layer li a {
  font-size: 18px;
  color: #333;
  line-height: 40px;
}
footer:has(.family_site button:focus) .family_site .faily_toggle_layer {
  display: block;
}
footer .footer_social .family_site button {
  padding: 0 16px;
  height: 34px;
  border-radius: 17px;
  font-size: 14px;
  color: #222;
  background-color: #fff;
}
footer .footer_social .sns ul {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
footer .footer_social .sns a i {
  font-size: 28px;
}
footer .footer_bottom {
  margin-top: 44px;
  display: flex;
  justify-content: space-between;
}
footer .footer_bottom address {
  /* margin-left: calc(174px + 16.34%); */
  /* padding-left: 4.93%; */
  font-size: 13px;
  /* color: #7C7F81; */
  color: #ccc;
  line-height: 24px;
}

/* 
2026.10.02 금요일 메모
1340
왼쪽고정값 174px 왼쪽 오토 여백 address 영역
왼쪽 오토 여백을 알기 위해서는 
왼쪽 고정값 174px 오른쪽 고정값 126px 그리고 나머지 가운데 602px 
이 고정 값을 뺀 나머지 에서 반
1340-174-126-602 = 값 나누기 2 해서 1340에 몇퍼
답은 맞았다. 근데 이러면 부모 고정 크기 1340 에서만 왼쪽 정렬이 맞고 
1340이하에서는 부모 크기가 줄어들기 때문에 다시 안 맞아진다.
결국에는
결론적으로는
footer_top(flex, content: space-between) 요소1(고정값)(왼쪽여백)+요소2(고정값)+(오른쪽여백)(고정값)요소3
이 값이 
footer_bottom 요소1+요소2+요소3 맞아야 브라우저 크기가 부모 max-width 1340보다 줄어들었을 때도 윗줄 div wrap 과 아랫줄 div wrap 안에 요소가 정렬된 상태로 줄어들려면 고정값이 맞아야 하기 때문에 space_left, space_right를 준 것이다.

이걸 왜 css grid로 안하냐면 반응형에서 아래로 줄바꿈 시키고 한줄에 요소 하나만 두거나 할 때 grid 보다는 flex가 훨씬 간편하기 때문이다.
내가 grid에 대한 반응형 이해도가 낮아서 그런 것 일수도 있다.


space_left 와 space_right 그리고 footer_nav 에 width 값을 준 것은
브라우저 크기에 레이아웃이 반응할 때 .footer_top 과 .footer_bottom 에 레이아웃이 정렬되어 보이기 위함이다.
*/
.footer_bottom .space_left {
  width: 174px;
} 
.footer_bottom .space_right {
  position: relative;
  width: 126px;
  height: 62px;
}
.footer_bottom .space_right .footer_sub {
  position: absolute;
  /* top: 22px; */
  top: 66px;
  right: 0;
  width: 260px;
  text-align: right;
}
.footer_bottom .space_right .footer_sub ul {
  display: inline-flex;
  justify-content: space-between;
  gap: 3px;
  max-width: 193px;
}
.footer_bottom .space_right .footer_sub li a {
  display: block;
  width: 46px;
  height: 32px;
}
.footer_bottom .space_right .footer_sub li a img {
  display: block;
  width: 100%;
}
footer .copylight {
  display: block;
  font-size: 10px;
  /* color: #5A5C5D; */
  color: #ccc;
  line-height: 28px;
  text-align: right;
}

/* 
20261006 화요일 메모
우선 태블릿, 모바일 만들고나서
그 후에 
1. pc 화면에 슬라이드, 
2. 그리고 내비게이션 로고와 겹쳐지기 전에 폰트사이즈 작게 조절해서 레이아웃이 겹쳐지지 않고 유지 되도록 하고 2depth, 3depth 메뉴를 2줄이 아닌 1줄로 변경.
3. vision content에 이미지가 나타나고 텍스트가 움직이는 인터렉티브한 영역 만들기.

*/