/* 나눔스퀘어 웹폰트 불러오기 */
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');

body {
  margin: 0 auto; /* 가운데 정렬을 위한 설정 */
  padding: 0; /* 좌우 여백 */
  overflow-x: hidden;

}

body::-webkit-scrollbar {display: none;}


.container-fluid {
  margin: 0 auto; /* 가운데 정렬을 위한 설정 */
  padding: 0; /* 좌우 여백 */
  max-width: 100%; /* 부모 요소의 최대 너비를 100%로 설정합니다. */
  overflow-x: hidden; /* 가로 스크롤을 숨깁니다. */
  
}

.scroll {
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
}



/* header */
header {
  max-width: 1400px;
  margin: 0 auto; /* 가운데 정렬을 위한 설정 */
  padding: 0; /* 좌우 여백 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-item {
  font-family: 'NanumSquare', sans-serif;
  font-size: 20px;
  font-weight: bold; /* bold 스타일 적용 */
  color: black;
  text-decoration: none;
  margin-right: 35px;
}

.logo-container {
  padding: 30px;
}

.menu-container {
  padding: 40px 0px;
}

.menu-container ul li a{
  text-decoration:none;
}


/* 화면이 759px 이하로 작아질 때 스타일 변경 */
@media screen and (max-width: 759px) {
  header {
    max-width: none;
  }
  .logo-container {
    padding: 20px 5px;
  }
  .logo-container img {
    height: 35px;
  }
  .menu-container {
    padding: 25px 0px;
    margin-right: -10px;
  }
  .menu-item {
    font-size: 14px;
    margin-right: 20px;
	text-decoration:none;
  }
}




/* slider */
.container {
	max-width: none;
	width: 100%;
	margin: 0 auto; /* 가운데 정렬을 위한 설정 */
    padding: 0; /* 좌우 여백 */
}


.carousel-caption {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
  padding-left: 40px;
  color: white;
  font-family: 'NanumSquare', sans-serif;  
  max-width: 1400px; /* 최대 너비를 1400px로 지정합니다. */
  width: 100%; /* 가운데 정렬을 위해 100%로 설정합니다. */
  margin-left: auto; /* 가운데 정렬을 위해 자동 마진을 추가합니다. */
  margin-right: auto; /* 가운데 정렬을 위해 자동 마진을 추가합니다. */
  opacity: 1 !important; /* caption이 사라지지 않도록 설정 */
}

.carousel-caption h1 {
  font-size: 32px;
  color: white;
  font-weight: 800;
}

.carousel-caption h2 {
  font-size: 45px;
  color: white;
  font-weight: 300;
}

.carousel-caption h3 {
  font-size: 60px;
  color: white;
  font-weight: 800; /* "extrabold"의 폰트 가중치는 800입니다. */
}

.carousel-caption img {
  height: 42px;
}


@media screen and (max-width: 759px) {
.carousel-caption {
  position: absolute;
  top: 30px;
  padding-left: 15px;
  max-width: 500px;
}

.carousel-caption h1 {
  font-size: 20px;
}

.carousel-caption h2 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -1px;
}

.carousel-caption h3 {
  font-size: 42px;
  letter-spacing: -1px;
}

.carousel-caption img {
  height: 38px;
}

}

.carousel-caption h1,
.carousel-caption h2,
.carousel-caption h3,
.carousel-caption img {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.carousel-caption h1 {
  animation: fadeIn 1s ease forwards 0.3s; 
}

.carousel-caption h2 {
  animation: fadeIn 1s ease forwards 0.6s; 
}

.carousel-caption h3 {
  animation: fadeIn 1s ease forwards 0.9s; 
}

.carousel-caption img {
  animation: fadeIn 1s ease forwards 1.2s; /* 1.2초 딜레이 추가 */
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}



.carousel-item {
  position: relative;
  background-size: cover !important; /* 배경 이미지 크기를 화면에 맞게 조정 */
  background-position: center; /* 배경 이미지를 가운데 정렬 */
  height: 615px; /* 슬라이드의 높이를 고정 */
}


.carousel-item.active {
  display: block;
}


.carousel-control-prev {
  left: calc(50% - 900px);
}

.carousel-control-next {
  right: calc(50% - 900px);
}





/* 박스 요소들을 가로로 정렬하고 간격을 조정합니다. */
.col-md-6 {
	text-align: center; /* 박스들 가운데 정렬 설정 */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 박스들 가로 중앙 정렬 설정 */
	width: 100%;
    margin: 0 auto; /* 가운데 정렬을 위한 설정 */
	margin-top: 30px;
}

.col-md-6 br{
	display: none;
}

@media screen and (max-width: 759px) {
.col-md-6 br{
	display: block;
}	
}

.col-md-6 h4 {
	font-family: 'NanumSquare', sans-serif; 
	font-size: 40px;
	line-height: 44px;
	font-weight: 400;
	padding: 3px 0;
}

.col-md-6 h5 {
	font-family: 'NanumSquare', sans-serif; 
	font-size: 38px;
	line-height: 42px;
	font-weight: 800;
	padding: 0px 0;
	white-space: nowrap;
	letter-spacing:-1px;
}

.col-md-6 img {
	height: 42px;
}

@media screen and (max-width: 759px) {
.col-md-6 h4 {
	font-size: 20px;
	line-height: 23px;
	letter-spacing:-1px;
	font-weight: 400;
	padding: 3px 0;
}

.col-md-6 h5 {
	font-size: 30px;
	line-height: 34px;
	font-weight: 800;
	padding: 0px 0;
    letter-spacing:-1px;
}

.col-md-6 img {
	height: 38px;
}

}

.col-md-6 .md_text1 {
	font-family: 'NanumSquare', sans-serif; 
	font-size: 42px;
	line-height: 44px;
	font-weight: 800;
}

.col-md-6 .md_text2 {
	font-family: 'NanumSquare', sans-serif; 
	font-size: 30px;
	font-weight: 400;
	padding: 0px 0;
	white-space: nowrap;
	letter-spacing:-1px;
}

.col-md-6 img {
	height: 42px;
	margin-top: 10px;
}

@media screen and (max-width: 759px) {
.col-md-6 .md_text1  {
	font-size: 30px;
	line-height: 32px;
	letter-spacing:-1px;
	font-weight: 800;
	padding: 3px 0;
}

.col-md-6 .md_text2  {
	font-size: 20px;
	font-weight: 400;
	padding: 0px 0;
    letter-spacing:-1px;
}

.col-md-6 img {
	height: 38px;
}

}





/* 박스 컨테이너 설정 */
.container_box, .container_box2, .container_box3, .container_box4 {
    max-width: 1400px;
    margin: 0 auto; /* 가운데 정렬을 위한 설정 */
}

/* 박스 컨테이너 여백 설정 */
.container_box {
	margin-top:120px;
}

.container_box4 {
	margin-top:90px;
}

.container_box2 {
	margin-top:50px;
}

.container_box3 {
	margin-top:50px;	
}

.container_box5 {
	margin-top:160px;
	
}

.container_box7 {
	margin-top:180px;
    background-color: #f7f7f7;
	padding: 100px 0;
}

.container_box9 {
	margin-top:80px;
}

.container_box10 {
    max-width: 1400px;
    margin: 0 auto; /* 가운데 정렬을 위한 설정 */	
}


.container_box10 {
	margin-top: 70px;
}

.container_box11 {
	margin-top:160px;
}

/* 임시여백 */
.container_box12 {
	margin-top:130px;
}



@media screen and (max-width: 759px) {
.container_box {
	margin-top:60px;
}

.container_box4 {
	margin-top:40px;
}

.container_box2 {
	margin-top:-10px;
}

.container_box3 {
	margin-top:20px;
}

.container_box5 {
	margin-top:120px;
}

.container_box7 {
	margin-top:50px;
}

.container_box9 {
	margin-top:40px;
}

.container_box10 {
	margin-top:20px;
}

.container_box11 {
	margin-top:70px;
}

/* 임시여백 */
.container_box12 {
	margin-top:60px;
}


}




/* 박스 요소들을 가로로 정렬하고 간격을 조정합니다. */
.row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}

@media screen and (max-width: 759px) {
.row {
    padding: 0 20px;
}
}


/* .box 스타일 설정 */
.box {
    width: 200px; /* 박스의 폭을 192px로 설정하여 정사각형 모양으로 만듭니다. */
	max-width: 200px;
    height: 200px;
    margin: auto; /* 왼쪽, 오른쪽 간격 조정 */
    background-color: white; /* 배경색 설정 */
    border-radius: 25px; /* 모서리 둥글게 설정 */
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13); /* 그림자 추가 */
    padding: auto; /* 안쪽 여백 설정 */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
	opacity: 0; /* 초기 투명도 설정 */
    animation: fadeIn 0.5s ease forwards; /* 페이드인 애니메이션 적용 */
}

.box.hidden {
	display:none;
	width: 200px; /* 박스의 폭을 192px로 설정하여 정사각형 모양으로 만듭니다. */
	max-width: 200px;
    height: 200px;
    margin: auto; /* 왼쪽, 오른쪽 간격 조정 */
    background-color: white; /* 배경색 설정 */
    border-radius: 25px; /* 모서리 둥글게 설정 */
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13); /* 그림자 추가 */
    padding: auto; /* 안쪽 여백 설정 */
    text-align: center;
    flex-direction: column;
    justify-content: center;
	opacity: 0; /* 초기 투명도 설정 */
    animation: fadeIn 0.5s ease forwards; /* 페이드인 애니메이션 적용 */
}

/* 박스 내부 요소들의 스타일 설정 */
.box img {
    width: 60px; /* 아이콘 이미지 크기 설정 */
    height: auto; /* 이미지의 가로세로 비율 유지 */
    margin-bottom: 10px; /* 아이콘과 텍스트 간격 조정 */
	text-align:center;
	display: block;
	margin: 0 auto;
}

.box .text {
    margin: 0; /* 텍스트의 마진 초기화 */
	font-family: 'NanumSquare', sans-serif; 
	font-size: 17px;
	margin-top:8px;
	font-weight: 600;
}


@media screen and (max-width: 759px) {
.box {
    width: 120px; /* 박스의 폭을 192px로 설정하여 정사각형 모양으로 만듭니다. */
	max-width: 120px;
    height: 120px;
    margin: 10px auto; /* 왼쪽, 오른쪽 간격 조정 */
}

.box.hidden {
	display: flex;
	width: 120px; /* 박스의 폭을 192px로 설정하여 정사각형 모양으로 만듭니다. */
	max-width: 120px;
    height: 120px;
    margin: 10px auto; /* 왼쪽, 오른쪽 간격 조정 */
	align-items: center; /* 내부 요소를 세로로 가운데 정렬 */
	flex-direction: column; /* 세로로 배치 */
	justify-content: center; /* 세로 가운데 정렬 */
}


/* 박스 내부 요소들의 스타일 설정 */
.box img {
    width: 40px; /* 아이콘 이미지 크기 설정 */
    height: auto; /* 이미지의 가로세로 비율 유지 */
    margin-bottom: 10px; /* 아이콘과 텍스트 간격 조정 */
	margin: 0 auto;
}

.box .text {
    margin: 0; /* 텍스트의 마진 초기화 */
	font-family: 'NanumSquare', sans-serif; 
	font-size: 14px;
	margin-top:8px;
	font-weight: 600;
}
}



/* .box2 스타일 설정 */
.box2 {
    width: 300px; /* 박스의 폭을 192px로 설정하여 정사각형 모양으로 만듭니다. */
	min-width: 300px;
    height: 300px;
    margin: auto; /* 왼쪽, 오른쪽 간격 조정 */
    background-color: white; /* 배경색 설정 */
    border-radius: 25px; /* 모서리 둥글게 설정 */
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13); /* 그림자 추가 */
    padding: auto; /* 안쪽 여백 설정 */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
	opacity: 0; /* 초기 투명도 설정 */
    animation: fadeIn 0.5s ease forwards; /* 페이드인 애니메이션 적용 */
}


/* 박스 내부 요소들의 스타일 설정 */
.box2 img {
    width: 82px; /* 아이콘 이미지 크기 설정 */
    height: auto; /* 이미지의 가로세로 비율 유지 */
    margin-bottom: 10px; /* 아이콘과 텍스트 간격 조정 */
	text-align:center;
	display: block;
	margin: 0 auto;
}

.box2 .text1 {
    margin: 0; /* 텍스트의 마진 초기화 */
	font-family: 'NanumSquare', sans-serif; 
	font-size: 16px;
	font-weight: 800;
	color: #dddede;
	margin-bottom: 10px; /* 아이콘과 텍스트 간격 조정 */
}

.box2 .text2 {
    margin: 0; /* 텍스트의 마진 초기화 */
	font-family: 'NanumSquare', sans-serif; 
	font-size: 26px;
	margin-top:10px;
	font-weight: 800;
	color: #1e1c1c;
}

.box2 .text3 {
    margin: 0; /* 텍스트의 마진 초기화 */
	font-family: 'NanumSquare', sans-serif; 
	font-size: 17px;
	letter-spacing:-1px;
	line-height: 20px;
	margin-top:5px;
	font-weight: 500;
	color: #1e1c1c;
}


/* 반응형 디자인: 가로크기 760px 이상 1024px 이하 태블릿용 */
@media screen and (min-width: 760px) and (max-width: 1024px) { 
.box2 {
    width: 232px; /* 박스의 폭을 192px로 설정하여 정사각형 모양으로 만듭니다. */
	min-width: 232px;
    height: 232px;
    margin: 10px auto; /* 왼쪽, 오른쪽 간격 조정 */
}

.box2 img {
    width: 55px; /* 아이콘 이미지 크기 설정 */
}

}



@media screen and (max-width: 759px) {
.box2 {
    width: 280px; /* 박스의 폭을 192px로 설정하여 정사각형 모양으로 만듭니다. */
    height: 240px;
    margin: 10px auto; /* 왼쪽, 오른쪽 간격 조정 */
}


/* 박스 내부 요소들의 스타일 설정 */
.box2 img {
    width: 60px; /* 아이콘 이미지 크기 설정 */
    height: auto; /* 이미지의 가로세로 비율 유지 */
    margin-bottom: 10px; /* 아이콘과 텍스트 간격 조정 */
	margin: 0 auto;
}

.box2 .text1 {
	font-size: 16px;
	margin-bottom: 10px; /* 아이콘과 텍스트 간격 조정 */
}

.box2 .text2 {
	font-size: 24px;
	margin-top:10px;
}

.box2 .text3 {
	font-size: 15px;
	letter-spacing:-1px;
	line-height: 18px;
	margin-top:5px;
}


}




/* .box3 스타일 설정 */
.box3 {
    width: 435px; /* 박스의 폭을 192px로 설정하여 정사각형 모양으로 만듭니다. */
	min-width: 435px;
    height: 300px;
    margin: auto; /* 왼쪽, 오른쪽 간격 조정 */
    background-color: white; /* 배경색 설정 */
    border-radius: 25px; /* 모서리 둥글게 설정 */
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13); /* 그림자 추가 */
    padding: auto; /* 안쪽 여백 설정 */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
	opacity: 0; /* 초기 투명도 설정 */
    animation: fadeIn 0.5s ease forwards; /* 페이드인 애니메이션 적용 */
}


/* 박스 내부 요소들의 스타일 설정 */
.box3 .text1 {
    margin: 0; /* 텍스트의 마진 초기화 */
	font-family: 'NanumSquare', sans-serif; 
	font-size: 82px;
	line-height: 82px;
	font-weight: 900;
	color: #ffffff;
	margin-bottom: 25px; /* 간격 조정 */
}

.box3 .text2 {
    margin: 0; /* 텍스트의 마진 초기화 */
	font-family: 'NanumSquare', sans-serif; 
	font-size: 26px;
	margin-bottom:10px;
	font-weight: 800;
	color: #1e1c1c;
}

.box3 .text3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 좌측 정렬로 수정 */
    margin: 0; /* 텍스트의 마진 초기화 */
    font-family: 'NanumSquare', sans-serif; 
    font-size: 17px;
    line-height: 22px;
    margin-top: 5px;
    font-weight: 500;
    color: #1e1c1c;
    padding: 0 22%;
}

.box3 .text3 div {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.box3 .text3 div img {
    margin-right: 5px;
	height: 20px;
}


/* 반응형 디자인: 가로크기 760px 이상 1024px 이하 태블릿용 */
@media screen and (min-width: 760px) and (max-width: 1024px) { 
.box3 {
    width: 323px; 
    height: 297px;
	min-width: 323px;
    margin: 10px auto; /* 왼쪽, 오른쪽 간격 조정 */
}

.box3 .text3 {
	padding: 0 10%;
}

}


@media screen and (max-width: 759px) {
.box3 {
    width: 290px; /* 박스의 폭을 192px로 설정하여 정사각형 모양으로 만듭니다. */
    height: 240px;
	min-width: 290px;
    margin: 10px auto; /* 왼쪽, 오른쪽 간격 조정 */
}


/* 박스 내부 요소들의 스타일 설정 */
.box3 .text1 {
	font-size: 50px;
	margin-bottom: 10px; /* 아이콘과 텍스트 간격 조정 */
}

.box3 .text2 {
	font-size: 24px;
	margin-top:10px;
	margin-bottom:7px;
}

.box3 .text3 {
	font-size: 15px;
	letter-spacing:-1px;
	line-height: 18px;
	margin-top:5px;
	padding: 0 15%;
}


}





/* .box4 스타일 설정 */
.box4 {
    width: 240px; /* 박스의 폭을 192px로 설정하여 정사각형 모양으로 만듭니다. */
	min-width: 240px;
    height: 105px;
    margin: auto; /* 왼쪽, 오른쪽 간격 조정 */
    background-color: white; /* 배경색 설정 */
    border-radius: 25px; /* 모서리 둥글게 설정 */
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13); /* 그림자 추가 */
    padding: auto; /* 안쪽 여백 설정 */
	margin-bottom:30px; /* 두줄 정렬을 위한 여백 */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
	opacity: 0; /* 초기 투명도 설정 */
    animation: fadeIn 0.5s ease forwards; /* 페이드인 애니메이션 적용 */
}


/* 박스 내부 요소들의 스타일 설정 */
.box4 img {
    width: auto; /* 아이콘 이미지 크기 설정 */
    height: 46px; /* 이미지의 가로세로 비율 유지 */
	text-align:center;
	display: block;
	margin: 0 auto;
}



/* 반응형 디자인: 가로크기 760px 이상 1024px 이하 태블릿용 */
@media screen and (min-width: 760px) and (max-width: 1024px) { 
.box4 {
    width: 195px; /* 박스의 폭을 192px로 설정하여 정사각형 모양으로 만듭니다. */
	min-width: 195px;
    height: 60px;
    margin: 10px auto; /* 왼쪽, 오른쪽 간격 조정 */
}

/* 박스 내부 요소들의 스타일 설정 */
.box4 img {
    width: auto; /* 아이콘 이미지 크기 설정 */
    height: 23px; /* 이미지의 가로세로 비율 유지 */
	margin: 0 auto;
}

}



@media screen and (max-width: 759px) {
.box4 {
    width: 165px; /* 박스의 폭을 192px로 설정하여 정사각형 모양으로 만듭니다. */
	min-width: 165px;
    height: 60px;
    margin: 10px auto; /* 왼쪽, 오른쪽 간격 조정 */
}


/* 박스 내부 요소들의 스타일 설정 */
.box4 img {
    width: auto; /* 아이콘 이미지 크기 설정 */
    height: 28px; /* 이미지의 가로세로 비율 유지 */
	margin: 0 auto;
}

}




    

/* 박스에 대한 호버 효과 설정 */
.box:hover {
    opacity: 1; /* 호버 시 투명도 설정 */
}

/* 하단 텍스트 애니메이션 스타일 */
.fade-in {
  opacity: 0; /* 초기 투명도 설정 */
  transform: translateY(150px); /* 초기 위치 설정 */
  transition: opacity 1s ease, transform 1s ease; /* 애니메이션 효과 설정 */
}

.animate {
  opacity: 1; /* 애니메이션 종료 후 투명도 설정 */
  transform: translateY(0); /* 애니메이션 종료 후 위치 설정 */
}


/* 텍스트 애니메이션을 위한 키 프레임 설정 */
@keyframes slideText {
    0% { transform: translateY(50px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}



@keyframes slideText {
  0% { bottom: 50px; opacity: 0; }
  20% { bottom: 100px; opacity: 1; }
  80% { bottom: 100px; opacity: 1; }
  100% { bottom: 50px; opacity: 0; }
}






/* container_box5 */
.container_box5 {
	position:relative;
    background-color: #f7f7f7;
    min-height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.box5_text1 {
    font-family: 'NanumSquare', sans-serif;
    font-size: 68px;
	line-height: 70px;
	letter-spacing: -1px;
    color: #1e1c1c;
    font-weight: 800;
}

.box5_text2 {
    font-family: 'NanumSquare', sans-serif;
    font-size: 96px;
	line-height: 98px;
	letter-spacing: -1px;
    color: #59b9e1;
    font-weight: 800;
}

.box5_text3 {
    font-family: 'NanumSquare', sans-serif;
    font-size: 33px;
	line-height: 35px;
	letter-spacing: -1px;
    color: #1e1c1c;
    font-weight: 800;
	margin-bottom:30px;
}

.box5_text4 {
    font-family: 'NanumSquare', sans-serif;
    font-size: 23px;
    color: #1e1c1c;
    font-weight: 400;
}

.box5_img {
	margin-top: 30px;
}

.box5_img img {
    height: 36px;
}


  .container_box6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	min-height: 700px;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Ensure .container_box6 is above .container_box5 */
  }

  .circle {
    width: 127px;
    height: 127px;
    background-color: #ffffff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13);
    opacity: 0;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 10px;
    top: 50%; /* 요소를 수직으로 정중앙으로 이동 */
    left: 50%; /* 요소를 수평으로 정중앙으로 이동 */
    transform: translate(-50%, -50%); /* 요소를 정중앙으로 정렬 */
  }
  
.circle_text1 {
  font-family: '돋움','Dotum','Arial','Helvetica','sans-serif';
  font-size: 36px;
  line-height:36px;
  color: #d5d5d5;
  font-weight: 900;
}

.circle_text2 {
  font-family: 'Nanum Square', sans-serif;
  font-size: 18px;
  line-height: 19px;
  color: #1e1c1c;
  font-weight: 900;
}

  .container_box62 {
	  display:none;
  }
  
  
  
  
@media screen and (max-width: 759px) {

.container_box5 {
    min-height: 600px;
}

.box5_text1 {
    font-size: 40px;
	line-height: 40px;
}

.box5_text2 {
    font-size: 60px;
	line-height: 62px;
}

.box5_text3 {
    font-size: 26px;
	line-height: 28px;
}

.box5_text4 {
    font-size: 18px;
	letter-spacing: -1px;
}

  .container_box6 {
	  display:none;
  }

  .container_box62 {
    position:absolute ;
    top: 0;
    left: 0;
    width: 100%;
	min-height: 725px;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Ensure .container_box6 is above .container_box5 */
  }

  .circle2 {
    width: 110px;
    height: 110px;
    background-color: #ffffff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13);
    opacity: 0;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 10px;
    top: 50%; /* 요소를 수직으로 정중앙으로 이동 */
    left: 50%; /* 요소를 수평으로 정중앙으로 이동 */
    transform: translate(-50%, -50%); /* 요소를 정중앙으로 정렬 */
  }
  
.circle_text1 {
  font-size: 30px;
  line-height:30px;
  color: #d5d5d5;
  font-weight: 600;
}

.circle_text2 {
  font-family: 'Nanum Square', sans-serif;
  font-size: 17px;
  line-height: 18px;
  color: #1e1c1c;
  font-weight: 700;
}
}





/* container_box5 */
.container_box11 {
        background-color: #056187;
        display: flex;
		min-height: 450px;
        justify-content: space-between;
        padding: 20px;
        color: white;
		width: 100%; /* 화면 폭에 맞추기 위해 추가 */
        box-sizing: border-box; /* 패딩과 보더를 요소의 크기에 포함 */
    }
	
.container_box11 .row {
    max-width: 1400px;
    margin: 0 auto;
	width:100%;
	justify-content: center; /* 세로 가운데 정렬 */
}

.left-content, .right-content {
    width: 50%; /* 좌우 컨텐츠를 동일한 너비로 설정 */
    padding: 0 20px; /* 좌우 여백 추가 */
    box-sizing: border-box; /* 패딩과 보더를 요소의 크기에 포함 */
	align-self: center; /* 세로 중앙 정렬 추가 */
}

    .left-content {
        display: flex;
        flex-direction: column;
		align-items: flex-start; /* 왼쪽 정렬 */
    }

    .first-line {
        font-family: 'NanumSquare';
        font-size: 18px;
        font-weight: 600;
    }

    .second-line {
        display: flex;
        align-items: baseline;
    }

    .second-line #counting {
        font-family: 'NanumSquare';
        font-size: 76px;
        font-weight: 900;
        color: white;
    }

    .second-line .currency {
        font-family: 'NanumSquare';
        font-size: 24px;
        font-weight: 600;
        color: white;
        margin-left: 5px;
    }

.right-content {
    font-family: 'NanumSquare';
    font-size: 28px;
	line-height: 28px;
    font-weight: 800;
    line-height: 1.5; /* 줄 간격 조정 */
    text-align: right; /* 가운데 정렬 */
    display: flex;
    flex-direction: column; /* 세로 정렬을 위해 컬럼 방향 설정 */
    align-items: flex-end; /* 오른쪽 정렬 */
	margin-bottom: 44px;
}

#customerCount {
    font-size: 32px;
    font-weight: 800;
    color: #ffea00;
}



@media screen and (max-width: 759px) {
    .container_box11 {
        flex-direction: column; /* 세로 배치 */
        align-items: center; /* 가운데 정렬 */
		padding: 110px 0px 0px 0px;
    }

    .left-content, .right-content {
        width: 100%; /* 전체 폭 */
        margin-bottom: 20px; /* 위 아래 여백 */
		padding: 0 10px;
    }

    .right-content {
        text-align: left; /* 왼쪽 정렬 */
    }

    .second-line #counting {
        font-size: 54px;
		letter-spacing: -1px;
    }	
	
.right-content {
    font-size: 18px;
	line-height: 20px;
    line-height: 1.5; /* 줄 간격 조정 */
    text-align: left; /* 가운데 정렬 */
    display: flex;
    align-items: flex-start;
}
	
	#customerCount {
    font-size: 28px;
}

}




.footer {
    background-color: #f7f7f7;
	margin-top: 180px;
    min-height: 310px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 36px 0;
}

.footer img {
    margin-bottom: 36px;
	height: 46px;
}

.footer .text p {
    font-family: 'NanumSquare', sans-serif;
    font-size: 13px;
	transform: skew(-0.1deg); /* 나눔스퀘어 깨짐현상 처리 */
    color: #939393;
    font-weight: 500;
    margin-bottom: 10px;
}

.footer .text p:last-child {
    font-size: 10px;
    font-weight: 600;
	transform: skew(-0.1deg); /* 나눔스퀘어 깨짐현상 처리 */
}



@media screen and (max-width: 759px) {
.footer .text p {
    padding: 0 58px;
}

.footer img {
	margin-top:15px;
    margin-bottom: 36px;
	height: 36px;
}

.footer {
	margin-top: 130px;
}


}


/* how page container_box21 */
.container_box21 {
	position:relative;
    background-color: #59b9e1;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
	padding: 0px 0px 30px 0px;
}

/* how page container_box212 */
.container_box212 {
	position:relative;
    background-color: #8559ff;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
	padding: 0px 0px 30px 0px;
}

.col-md-6 .md_text3 {
	font-family: 'NanumSquare', sans-serif; 
	font-size: 39px;
	font-weight: 800;
	color: #ffffff;
	margin: 0; /* 텍스트의 마진을 제거하여 정확한 세로 중앙 정렬을 유지합니다. */
	margin-bottom: 30px;
}

.col-md-6 .md_text4 {
	font-family: 'NanumSquare', sans-serif; 
	font-size: 23px;
	font-weight: 400;
	padding: 0px 0;
	white-space: nowrap;
	letter-spacing:-1px;
	color: #ffffff;
	margin: 0; /* 텍스트의 마진을 제거하여 정확한 세로 중앙 정렬을 유지합니다. */
}

.col-md-6 .md_text5 {
	font-family: 'NanumSquare', sans-serif; 
	font-size: 16px;
	font-weight: 900;
	padding: 0px 0;
	white-space: nowrap;
	letter-spacing:1px;
	color: rgba(255, 255, 255, 0.5);
	margin: 0; /* 텍스트의 마진을 제거하여 정확한 세로 중앙 정렬을 유지합니다. */
}


@media screen and (max-width: 759px) {
.col-md-6 .md_text3  {
	font-size: 30px;
	letter-spacing:-1px;
	padding: 3px 0;
}

.col-md-6 .md_text4  {
	font-size: 18px;

}

.col-md-6 .md_text5  {
	font-size: 12px;

}

}






/* page container_box22 */
.container_box22 {
	margin-top: 60px;
	position:relative;
    min-height: 200px;
	width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
	padding: 0px 0px 30px 0px;
}

.md_text6 {
	font-family: 'NanumSquare', sans-serif; 
	font-size: 38px;
	font-weight: 800;
	letter-spacing:-1px;
	margin-bottom: 15px;
}

.md_text6 br {
	display: none;
}

.md_text7 {
	font-family: 'NanumSquare', sans-serif; 
	font-size: 26px;
	font-weight: 400;
	padding: 0px 0;
	white-space: nowrap;
	color: #9d9d9d;
}

.md_text7 br {
	display:none;
}



@media screen and (max-width: 759px) {
.container_box22 {
	margin-top: 0px;
}

.md_text6  {
	font-size: 30px;
	line-height: 32px;
	font-weight: 800;
	padding: 3px 0;
	line-height: 37px;
}

.md_text6 br {
	display: block;
}

.md_text7  {
	font-size: 20px;
	font-weight: 400;
	padding: 0px 0;
    letter-spacing:-1px;
}

.md_text7 br {
	display:block;
}

}



/* page container_box23 */
.container_box23 {
    max-width: 1400px;
	margin: 130px auto 0px; /* 위쪽 여백 180px, 아래쪽 여백 1000px 설정 */
}


@media (max-width: 759px) {
    .container_box23 {
        flex-direction: column; /* 화면이 좁아질 때 요소들을 세로로 배치 */
        align-items: center; /* 가운데 정렬 */
		margin: 20px auto 0px; /* 위쪽 여백 180px, 아래쪽 여백 1000px 설정 */
	}
}


/* page container_box24 */
.container_box24 {
    max-width: 1400px;
	margin: 80px auto 0px; /* 위쪽 여백 180px, 아래쪽 여백 1000px 설정 */
}


@media (max-width: 759px) {
    .container_box24 {
        flex-direction: column; /* 화면이 좁아질 때 요소들을 세로로 배치 */
        align-items: center; /* 가운데 정렬 */
		margin: 40px auto 0px; /* 위쪽 여백 180px, 아래쪽 여백 1000px 설정 */
	}
}


/* page container_box25 */
.container_box25 {
    max-width: 1400px;
	margin: 80px auto 0px; /* 위쪽 여백 180px, 아래쪽 여백 1000px 설정 */
}


@media (max-width: 759px) {
    .container_box25 {
        flex-direction: column; /* 화면이 좁아질 때 요소들을 세로로 배치 */
        align-items: center; /* 가운데 정렬 */
		margin: 40px auto 0px; /* 위쪽 여백 180px, 아래쪽 여백 1000px 설정 */
	}
}


/* page container_box26 */
.container_box26 {
    max-width: 1400px;
	margin: 80px auto 0px; /* 위쪽 여백 180px, 아래쪽 여백 1000px 설정 */
}


@media (max-width: 759px) {
    .container_box26 {
        flex-direction: column; /* 화면이 좁아질 때 요소들을 세로로 배치 */
        align-items: center; /* 가운데 정렬 */
		margin: 40px auto 0px; /* 위쪽 여백 180px, 아래쪽 여백 1000px 설정 */
	}
}





/* 왼쪽 이미지 div */
.left-image {
    width: 50%;
    max-width: 500px;
    float: left;
}

.left-image img {
    max-width: 400px;
}

/* 오른쪽 텍스트 div */
.right-text {
    width: calc(50% - 50px); /* 전체 너비에서 왼쪽 이미지와 여백을 제외한 값으로 설정 */
    float: left;
    padding: 0px 0px 0px 50px;
    text-align: left; /* 텍스트를 좌측 정렬 */
}

/* 텍스트 스타일 */
.step-text {
    font-family: 'NanumSquare', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #d9d9d9;
}

.description {
    font-family: 'NanumSquare', sans-serif;
    font-size: 46px;
    font-weight: 900;
    color: #1e1c1c;
    line-height: 1.2;
	margin-bottom: 30px;
}

.description span {
    color: #59b9e1;
}

.additional-text {
    font-family: 'NanumSquare', sans-serif;
    font-size: 18px;
	letter-spacing: -1px;
    font-weight: 400;
    color: #1e1c1c;
}

/* 반응형 디자인: 가로크기 759px 이하 */
@media (max-width: 759px) {
	
    .left-image,
    .right-text {
        width: 100%; /* 가로 크기 100%로 설정 */
        max-width: none; /* 최대 너비 제거 */
		text-align: center;
    }
	
	.left-image img {
		max-width: 220px;
	}

    .right-text {
		padding: 0 30px;
        margin-top: 20px; /* 위쪽 여백 추가 */
    }
	
	
/* 텍스트 스타일 */
.step-text {
    font-size: 26px;
}

.description {
    font-size: 32px;
	margin-bottom: 30px;
}


.additional-text {
    font-size: 16px;
	padding: 0px 0px;
}

}

.container_box31_magin {
	width: 100%;
	height: 30px;
}


/* page container_box31 */
.container_box31 {
    width: 100%;
    max-width: 1400px;
    margin: 15px auto; /* 수정된 부분: 위쪽 여백 20px */
    padding: 10px;
    border-radius: 20px;
    background-color: #ffffff;
	border: 1px solid #d9d9d9;
	transition: max-height 0.5s ease, margin 0.5s ease; /* 트랜지션 추가 */
}

.faq-box {
    width: 100%;
    background-color: #ffffff;
    border-radius: 20px;
    text-align: center;
    padding: 20px;
    margin: 20px auto;
    cursor: pointer;
}

.circle3 {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #59b9e1;
    color: #ffffff;
    font-family: 'NanumSquare', sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 40px;
    margin-right: 0px;
}


.circle4 {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #056187;
    color: #ffffff;
    font-family: 'NanumSquare', sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 30px;
    margin-right: 0px;
}

.question-text {
    display: inline-block;
    font-family: 'NanumSquare', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #1e1c1c;
    vertical-align: middle;
	margin-left:0px;
}

.answer-text {
    display: inline-block;
    font-family: 'NanumSquare', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #5f5f5f;
    vertical-align: middle;
}


.answer {
    display: none;
	max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease; /* 토글 액션의 부드러운 애니메이션 */
	display: block;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.faq-box.active .answer {
    display: block;
	max-height: 200px; /* 답변 최대 높이 지정 */
}

.answer div {
    margin: 10px 0;
	display: inline-block; 
}

.answer-text {
    margin-top: 10px;
	margin-top: 20px; /* 답변 부분의 간격 늘리기 */
}

.question-text {
    cursor: pointer;
}

.faq-box.active {
    animation: expandAnswer 0.5s ease forwards;
}

.divider {
    border-top: 1px solid #e1e1e1; /* 수정된 부분: 질문과 답변 사이 가로선 추가 */
    margin: 20px 0; /* 수정된 부분: 간격 조정 */
	display: none;
}

.faq-box.active .divider {
    display: block;
}


@keyframes expandAnswer {
    0% {
        height: auto;
        overflow: hidden;
    }
    100% {
        height: auto;
    }
}


/* 반응형 디자인: 가로크기 760px 이상 1024px 이하 태블릿용 */
@media screen and (min-width: 760px) and (max-width: 1024px) { 
.container_box31 {
	width: 90%;
}	
}



/* 반응형 디자인: 가로크기 759px 이하 */
@media (max-width: 759px) {
.container_box31 {
    margin: 15px auto; /* 수정된 부분: 위쪽 여백 20px */
	width: 90%;
}	

.circle3 {
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
	margin-bottom: 10px;
}


.circle4 {
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
}

.question-text {
    font-size: 18px;
}

.answer-text {
    font-size: 15px;
}

}






/* page 텍스트 애니메이션 */
.col-md-6 .md_text3,
.col-md-6 .md_text4,
.col-md-6 .md_text5,
.md_text6,
.md_text7,
.step-text,
.description,
.additional-text {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.col-md-6 .md_text5 {
  animation: fadeIn 1s ease forwards 0.2s; 
}

.col-md-6 .md_text3 {
  animation: fadeIn 1s ease forwards 0.4s; 
}

.col-md-6 .md_text4 {
  animation: fadeIn 1s ease forwards 0.6s; 
}

.md_text6 {
  animation: fadeIn 1s ease forwards 0.2s; 
}

.md_text7 {
  animation: fadeIn 1s ease forwards 0.4s; 
}

.step-text {
  animation: fadeIn 1s ease forwards 0.2s; 
}

.description {
  animation: fadeIn 1s ease forwards 0.4s; 
}

.additional-text {
  animation: fadeIn 1s ease forwards 0.6s; 
}