@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');

html {
  scroll-behavior: smooth;
}

.container {
  margin: 0 auto;
}

.body {
  font-size: 15px;
  /* //.글자폰트 크기 수정 */
  font-family: "Noto Sans KR";
}

.container {
  width: 66.67%;
  height: 100%;
}

/* ---------------------------------------------------------------- */
/* 서브페이지 공통 타이틀 */
.w_sub_tit_section {
  width: 100%;
  height: 280px;
}

.w_sub_tit_con {
  display: flex;
  justify-content: center;
  align-items: center;
}

.w_mian_sub_tit {
  width: 100%;
  height: 100px;
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.w_mian_tit>span {
  color: #333;
  text-align: center;
  font-family: "Roboto";
  font-size: 40px;
  font-weight: 700;
  line-height: 150%; /* 60px */
  letter-spacing: -0.44px;
}

.w_sub_tit>p {
  color: #555;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 20px;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: -0.22px;
}

/* ---------------------------------------------------------------- */
/* 회사개요 */
.comp_overview {
  width: 100%;
  height: 2256px;
}

.web_wwa_tit {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #51A0D0;
}

.web_wwa_tit>span {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 35px;
  font-weight: 700;
  line-height: 150%; /* 52.5px */
  letter-spacing: -0.385px;
}

.comp_overview_main_tit {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.comp_overview_main_tit>span {
  color: #555;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 35px;
  font-weight: 700;
  line-height: 150%; /* 52.5px */
  letter-spacing: -0.385px;
}

.comp_overview_graph {
  width: 100%;
  height: 800px;
  overflow: hidden;
  position: relative;
}

.comp_overview_graph>img {
  width: 100%;
  height: 100%;
}

.comp_overview_graph_content {
  width: 1070px;
  height: 683px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.comp_overview_graph_content>span {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 35px;
  font-weight: 700;
  line-height: 150%; /* 52.5px */
  letter-spacing: -0.385px;
}

.comp_ov_con {
  height: 957px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.comp_ov_information {
  width: 100%;
  height: 717px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.comp_ov_information_tit {
  width: 100%;
  height: 40px;
}

.comp_ov_information_tit>span {
  color: #777;
  font-family: "Noto Sans KR";
  font-size: 25px;
  font-weight: 700;
  line-height: 150%; /* 37.5px */
  letter-spacing: -0.275px;
}

.comp_ov_information_icons {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.comp_ov_information_icons>ul {
  width: 100%;
  height: 280px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comp_ov_information_icons>ul>li {
  width: 414px;
  height: 100%;
  background: #fff;
}

.comp_ov_infor_icon_txt {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.comp_ov_infor_icon_txt>img {
  width: 150px;
  height: 150px;
  overflow: hidden;
}

.comp_ov_infor_txt {
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.comp_ov_infor_txt>p {
  color: #555;
  font-family: "Noto Sans KR";
  font-size: 20px;
  font-weight: 500;
  line-height: 150%; /* 30px */
  letter-spacing: -0.22px;
}

.comp_ov_infor_txt>span {
  color: #555;
  font-family: "Noto Sans KR";
  font-size: 30px;
  font-weight: 700;
  line-height: 150%; /* 45px */
  letter-spacing: -0.33px;
}

/* 사업영역 */
.business_area {
  width: 100%;
  height: 3740px;
}

.busi_area_cards {
  width: 100%;
  height: 3300px;
  margin-top: 120px;
  display: flex;
  justify-content: space-between;
}

.busi_area_cards>ul {
  width: 600px;
  height: 2900px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

ul.busi_area_card_rt {
  align-self: flex-end;
}

.busi_area_cards>ul>li {
  width: 100%;
  height: 800px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.busi_area_cards>ul>li>img {
  width: 600px;
  height: 800px;
}

ul.ba_card_icon_txt {
  width: 100%;
  height: 380px;
  position: absolute;
  left: 50%; bottom: 60px;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.ba_card_icon>i {
  color: #fff;
  font-size: 50px;
  animation: bounceIcon 1.5s ease-in-out infinite;
}

@keyframes bounceIcon {
  0%, 100% {
    transform: translateY(0); /* 원래 위치 */
  }
  50% {
    transform: translateY(10px); /* 아래로 살짝 이동 */
  }
}

.ba_card_txt>span {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 40px;
  font-weight: 700;
  line-height: 150%; /* 60px */
  letter-spacing: -0.44px;
}

.ba_card_overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 반투명 검정 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  border-radius: 50px;
}

.ba_card_overlay_tit {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 110px;
}

.ba_card_overlay_tit>span {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 40px;
  font-weight: 700;
  line-height: 150%; /* 60px */
  letter-spacing: -0.44px;
}

/* 텍스트 리스트 스타일 */
.overlay_text_list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.overlay_text_list>li {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 30px;
  font-weight: 500;
  line-height: 150%; /* 45px */
  letter-spacing: -0.33px;
  margin-top: 30px;
}

.overlay_text_list>li:first-child {
  margin-top: 0;
}

/* 마우스 오버 시 오버레이 보이기 */
.ba_card:hover .ba_card_overlay {
  opacity: 1;
}

.ba_card_icon_txt {
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 3; /* 오버레이보다 위에 있도록 설정 */
}

/* 마우스 오버 시 사라지게 */
.ba_card:hover .ba_card_icon_txt {
  opacity: 0;
}

/* 조직도 */
.organization_chart {
  width: 100%;
  height: 1060px;
}

.organization_chart_section {
  width: 100%;
  height: 860px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.organization_chart_section>img {
  margin-left: 35px;
}

/* 경영이념 */
.mng_philosophy {
  width: 100%;
  height: 1800px;
}

.mng_philosophy_main_tit {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.mng_philosophy_main_tit>span {
  color: #555;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 35px;
  font-weight: 700;
  line-height: 150%; /* 52.5px */
  letter-spacing: -0.385px;
}

.mng_philosophy_goal {
  width: 100%;
  height: 1300px;
  overflow: hidden;
  position: relative;
}

.mng_philosophy_goal>img {
  width: 100%;
  height: 1300px;
}

.mng_phi_main_sub_tit_img {
  width: 880px;
  height: 954px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.mng_phi_main_sub_tit {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mng_phi_main_sub_tit>p {
  color: #CCC;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 23px;
  font-weight: 500;
  line-height: 180%; /* 41.4px */
  letter-spacing: -0.253px;
}

.mng_phi_main_sub_tit>p>span {
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 28px;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: -0.308px;
}

.mng_phi_main_sub_tit_img>img {
  width: 880px;
  height: 780px;
}

/* 비젼 */
.vision {
  width: 100%;
  height: 1700px;
  background: red;
}

.vision_main_tit {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.vision_main_tit>span {
  color: #555;
  text-align: center;
  font-family: "Noto Sans KR";
  font-size: 35px;
  font-weight: 700;
  line-height: 150%; /* 52.5px */
  letter-spacing: -0.385px;
}

.vision_img>img {
  width: 100%;
  height: 1200px;
}

.vision_img {
  width: 100%;
  height: 1200px;
  position: relative;
}

.vision_tit_img_txt {
  width: 1280px;
  height: 962px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.vision_tit_slogan {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vision_tit_slogan>span {
  color: #FFF;
  text-align: center;
  font-family: "Roboto";
  font-size: 45px;
  font-weight: 700;
  line-height: 150%; /* 67.5px */
  letter-spacing: -0.495px;
}

.vision_tit_si {
  width: 100%;
  height: 155px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vision_tit_si>span {
  color: #FFF;
  font-family: "Noto Sans KR";
  font-size: 35px;
  font-weight: 700;
  line-height: 150%; /* 52.5px */
  letter-spacing: -0.385px;
}

.vision_tit_si>p {
  color: #AAA;
  font-family: "Noto Sans KR";
  font-size: 25px;
  font-weight: 500;
  line-height: 150%; /* 37.5px */
  letter-spacing: -0.275px;
}

/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */