/* ********************* */
/* ******* 기본설정 ******* */
/* ********************* */

/* CSS Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* 패딩과 테두리를 요소의 총 너비와 높이에 포함시켜 레이아웃을 더 쉽게 관리할 수 있게 합니다.*/
}

/* 기본 폰트 및 레이아웃 설정 */
html {
	font-size: 100%; /* 16px 기준 (기본 브라우저 설정 기준) */
	box-sizing: border-box;
}

body {
    width: 100%;
    height: 100%;
	font-family: 'Noto Sans KR', sans-serif; /* 폰트 설정 */
	font-weight: 400; /* Regular */
	font-size: 1rem; /* 16px의 87.5%, 즉 14px로 설정 */
	line-height: 1.5; /* 1.5배 줄 간격 설정 */
	color: #333; /* 기본 텍스트 색상 */
	background: #fff;
}

/* 섹션 스타일 */
section {
    color: #333;
}

strong {
    font-weight: 600; /* 강조용 굵은 폰트 */
}

h1, h2, h3, h4, h5 {
    font-weight: 700; /* 제목 폰트 굵기 설정 */
    line-height: 1.2; /* 제목은 줄 간격을 약간 더 좁게 설정 */
}

/* 링크 스타일 초기화 및 설정 */
a {
	text-decoration: none;
	color: inherit;
}
a:hover, a:focus {
	text-decoration: underline;
}

/* 이미지 스케일링 */
img {
	max-width: 100%;
	height: auto;
}

/* 반응형 뷰포트 설정 */
*, *:before, *:after {
	box-sizing: inherit;
}


/* ********************* */
/* ******* header-banner-01 ******* */
/* ********************* */
.header-banner-01 {
    background-color: #fff;
    width: 100%; /* 화면 전체 폭 사용 */
    margin: auto;
}

.header-banner-01 .logo {
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto;
}

.header-banner-01 .icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #777;
}

.header-banner-01 .icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid #ddd;
    margin-right: 10px;
}

.header-banner-01 .icon-circle i {
    font-size: 25px;
}

@media (max-width: 992px) {

    .header-banner-01 .icon-link {
        justify-content: start;
    }
    .header-banner-01 .col-md-2 {
        display: none; /* 모바일 환경에서 아이콘 링크 컬럼을 숨깁니다 */
    }

    .header-banner-01 .col-md-4 {
        flex: 0 0 100%; /* 모바일 환경에서 로고 컬럼을 전체 너비로 확장 */
        max-width: 100%;
        display: flex; /* 플렉스 컨테이너로 설정 */
        justify-content: center; /* 로고를 중앙 정렬 */
    }

    .header-banner-01 .logo {
        max-width: 80%; /* 로고 크기를 조정 (필요에 따라 조정) */
    }
}



/* ####### 네비게이션 ####### */
.fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    background-color: #ed6359; /* 고정 상태에서 배경색 유지 */
    transition: top 0.3s; /* 스크롤 시 부드러운 이동 효과 */
}




.navbar-nav {
    width: 100%;
    justify-content: center;
}

.custom-navbar {
    background-color: #ed6359 !important; /* 전체 배경색 적용 */
    z-index: 1020; /* 충분히 높은 z-index를 설정해 상단에 고정 */
}

.navbar {
    font-size: 0.9rem; /* 메인 메뉴 폰트 사이즈 */
    background-color: #ed6359; /* 메뉴 전체 배경색 */
}

.nav-link {
    color: #ffffff !important; /* 메인 메뉴 글자색 */
}

.nav-link:hover, .nav-item:hover > .nav-link {
    color: #ffff00 !important; /* 마우스 오버 시 글자색 */
    background-color: #ed6359; /* 마우스 오버 시 배경색 */
}

.nav-item:hover .dropdown-menu,
.nav-item:hover .dropdown-menu .dropdown-item {
    background-color: #ed6359; /* 서브메뉴 및 전체 메뉴 마우스 오버 시 배경색 */
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #ed6359; /* 서브메뉴 기본 배경색 */
    box-shadow: 0 4px 8px rgba(0,0,0,.05);
}

.dropdown-item {
    font-size: 0.8rem; /* 서브 메뉴 폰트 사이즈 */
    color: #ffffff !important; /* 서브 메뉴 글자색 */
}

.dropdown-item:hover {
    color: #ffff00 !important; /* 서브메뉴 항목 마우스 오버 시 글자색 */
    background-color: #f39d60; /* 서브메뉴 항목 마우스 오버 시 배경색 */
}

.nav-item:hover .dropdown-menu {
    display: block;
}

.menu-text {
    color: #fff;
    padding-left: 10px;
    display: inline-block;
    vertical-align: middle;
}

/* 햄버거 메뉴 관련 스타일 */
.navbar-toggler {
    border: none !important; /* 햄버거 메뉴의 테두리 제거 */
    outline: none !important; /* 테두리 및 포커스 라인 제거 */
    box-shadow: none !important; /* 클릭 시 생기는 사각형 검정 테두리 제거 */
    background-color: transparent; /* 버튼 배경을 투명으로 설정 */
}

.navbar-toggler:focus {
    outline: none !important; /* 포커스 시 생기는 아웃라인 제거 */
    box-shadow: none !important; /* 클릭 시 검정색 테두리 제거 */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    /* 햄버거 메뉴 아이콘 색상을 흰색(#ffffff)으로 변경 */
}

@media (max-width: 992px) {
    .navbar-toggler {
        display: flex;
        align-items: center;
    }

    .navbar-collapse {
        display: none;
    }

    .navbar-collapse.collapsing,
    .navbar-collapse.show {
        display: block !important;
    }

    .nav-item {
        display: block;
    }

    .dropdown-menu {
        position: static;
    }
}

<!--
/* ********************* */
/* ******* 메인 상단배너-01 ******* */
/* ********************* */
-->
.main-top-banner-01 {
    width: 100%;
    position: relative;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

.main-top-banner-01 .parallax-section {
    background-image: url('../img/main_bg.jpg'); /* 배경 이미지 설정 */
    min-height: 500px; /* 최소 높이 설정 */
    background-attachment: fixed; /* 배경 고정 */
    background-position: 0 0; /* 배경 이미지 위치를 좌측 상단 (0, 0)으로 설정 */
    background-repeat: no-repeat; /* 배경 반복 없음 */
    background-size: cover; /* 배경 커버 */
    color: white; /* 텍스트 색상 */
}

@media (max-width: 768px) {
    .main-top-banner-01 .parallax-section {
        background-attachment: scroll; /* 모바일에서는 배경 고정 해제 */
    }
}



/* ********************* */
/* ******* 서브 상단배너-01 ******* */
/* ********************* */

.sub-top-banner-01 {
    width: 100%;
    position: relative;
    overflow-x: hidden; /* 가로 스크롤 방지 */
}

.sub-top-banner-01 .banner-image {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.sub-top-banner-01 .banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    max-width: 1000px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
    z-index: 10;
}

@media (max-width: 991px) {
    .sub-top-banner-01 .banner-image {
        height: 160px;
    }

    .sub-top-banner-01 .banner-text {
        width: 100%;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        border: none; /* 모바일에서는 테두리 제거 */
    }
}

/* ********************* */
/* ******* 공지-01 ******* */
/* ********************* */
.notice-01 {
    background-size: cover; /* 배경 이미지를 커버로 설정 */
    background-position: center; /* 배경 이미지를 중앙에 위치 */
    color: #333; /* 텍스트 색상 흰색으로 설정 */
}



@media (max-width: 768px) {
    .notice-01 .col-md-6 {
        text-align: center; /* 모바일에서 텍스트 중앙 정렬 */
    }
}

/* ********************* */
/* ******* 공지-02 ******* */
/* ********************* */
.notice-02 {
    background-color: #f7b731; /* 배경색 */
    color: white; /* 텍스트 색상 */
}

.notice-02 .icon-container {
    width: 70px;
    height: 70px;
    background-color: #eee; /* 원의 배경색 */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notice-02 .icon-container i {
    font-size: 35px; /* 아이콘 크기 */
    color: #666; /* 아이콘 색상 */
}

.notice-02 .text-container h2 {
    font-size: 1.5rem;
    margin: 20px 0;
}

.notice-02 .text-container p {
    color: #000;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .notice-02 .text-container h2, .notice-02 .text-container p {
        text-align: left;
    }
}

@media (min-width: 769px) {
    .notice-02 .text-container h2, .notice-02 .text-container p {
        text-align: left;
    }
}




/* ********************* */
/* ******* 인트로-01 ******* */
/* ********************* */

/* 1번째 Row */
.intro-01 .golden {
  color: #FFD700; /* 황금색 설정 */
}
.intro-01 .content-heading h3 {
  color: #999; /* 색 설정 */
  font-weight: normal;
}

.intro-01 .content-heading h1.with-line {
  position: relative;
  display: inline-block; /* 텍스트는 본래 길이에 맞춤 */
  padding-bottom: 30px; /* 라인과 텍스트 사이의 간격 */
  margin-bottom: 30px; /* 라인과 텍스트 사이의 간격 */
  font-size: 48px; /* 글자 크기를 36px로 설정 */
}

.intro-01 .content-heading h1.with-line:after {
  content: '';
  position: absolute;
  left: 50%; /* 중앙에서 시작 */
  transform: translateX(-50%); /* 중앙 정렬을 위해 X축 이동 */
  bottom: 0;
  width: 100px; /* 라인의 길이 */
  height: 2px; /* 라인의 두께 */
  background-color: #FFD700; /* 라인의 색상 */
}


.intro-01 .content-heading,
.intro-01 .content-description {
  text-align: center; /* 제목과 설명 중앙 정렬 */
}

.intro-01 .content-description {
  width: 100%; /* 요소의 폭을 항상 100%로 설정 */
  max-width: 500px; /* 요소의 최대 폭을 500px로 제한 */
  margin: 0 auto; /* 요소를 수평 중앙에 배치 */
  text-align: center; /* 텍스트를 중앙에 정렬 */
  margin-bottom: 30px; /* 라인과 텍스트 사이의 간격 */
}

/* 2번째 Row */

.intro-01 .title-line, .intro-01 .section-line {
    height: 2px;
    background-color: #ffa500; /* 라인 색상 */
    margin: 5px auto 15px; /* 라인을 중앙에 배치하고 위 아래 마진 설정 */
}

.intro-01 .title-line {
    width: 20px; /* h2 아래 라인 폭 설정 */
}

.intro-01 .section-line {
    width: 100%; /* h3 아래 라인 풀 폭 설정 */
}

@media (max-width: 768px) {
   /* 1번째 Row */
	.intro-01 .content-heading h1.with-line {
	  font-size: 36px; /* 글자 크기를 36px로 설정 */
	}

	/* 2번째 Row */
	 .intro-01 .col-md-4 {
        margin-bottom: 20px; /* 모바일에서 아래 여백 */
    }
}


/* ********************* */
/* ******* 포토-01 ******* */
/* ********************* */

.photo-01 h1 {
    font-size: 48px; /* 원하는 크기로 조정 */
    font-weight: bold; /* 선택적으로 글자 굵기를 설정 */
}
@media (max-width: 768px) {
    .photo-01 h1 {
    font-size: 36px; /* 원하는 크기로 조정 */
     }
}

/* ********************* */
/* ******* 포토-02 ******* */
/* ********************* */

.photo-02 {
    background-color: #fafafa; /* 전체 배경색 설정 */
    width: 100%; /* 전체 너비 */
    padding: 50px 0; /* 상하단 패딩 추가 */
}

.photo-02 .title_section {
    text-align: center; /* 텍스트 중앙 정렬 */
}

.photo-02 h1 {
    font-size: 48px; /* 타이틀 크기 */
    font-weight: bold;
    color: #ffd700; /* 원하는 글자 색상으로 변경 */
}

.photo-02 p {
    font-size: 1.2rem; /* 부제목 크기 */
    color: #666; /* 부제목 색상 */
}

@media (max-width: 768px) {
    .photo-02 h1 {
        font-size: 36px; /* 모바일에서 타이틀 크기 조정 */
    }
}


/* ********************* */
/* ******* 포토-03 ******* */
/* ********************* */

.photo-03 {
    background-color: #FFD700; /* 금색 배경 */
    color: #333; /* 흰색에서 검정색으로 텍스트 변경, 가독성 개선 */
    padding: 50px 0;
    text-align: center;
}

.photo-03 h1 {
    font-size: 48px; /* 타이틀 폰트 크기 */
    font-weight: bold;
}

.photo-03 .section-title {
    font-size: 2.5rem; /* 타이틀 크기를 조금 더 키움 */
    color: #000; /* 타이틀 색상 검정으로 변경 */
    margin-bottom: 40px;
}

.photo-03 .safety-item {
    margin-bottom: 30px; /* 아이템 간격 조정 */
}

.photo-03 .icon-wrapper {
    background-color: #fff;
    width: 120px; /* 아이콘 크기를 더 키움 */
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 아이콘에 약간의 그림자 추가 */
}

.photo-03 .safety-item i {
    color: #333; /* 아이콘 색상 */
    font-size: 2.5rem; /* 아이콘 크기를 조금 더 키움 */
}

.photo-03 .safety-item h3 {
    font-weight: bold;
    font-size: 1.6rem; /* 제목 크기 증가 */
    color: #000; /* 제목 색상 */
}

.photo-03 .safety-item p {
    font-size: 1rem;
    color: #333; /* 텍스트 색상 */
}

@media (max-width: 768px) {
    .photo-03 h1 {
        font-size: 36px;
    }

    .photo-03 .icon-wrapper {
        width: 100px; /* 작은 화면에서 아이콘 크기 조정 */
        height: 100px;
    }

    .photo-03 .safety-item i {
        font-size: 2rem;
    }
}


/* ********************* */
/* ******* 테이블-01 ******* */
/* ********************* */

.table-01 {
	background-image: url('../img/sub21.jpg'); /* 배경 이미지 경로 설정 */
	background-size: cover;
	background-position: center;
	position: relative;
	height: 100%;
	color: white; /* 텍스트 색상 */
}

.table-01 .table {
	background: rgba(255, 255, 255, 0); /* 테이블 배경 반투명 투명도 설정 */
	margin-top: 50px; /* 상단 여백 */
}

.table-01 .table th, .table-01 .table td {
	color: white;
	border-color: white; /* 테이블 선 색상 */
}

.table-01 .title {
	text-align: center; /* 제목 중앙 정렬 */
	margin-bottom: 20px; /* 제목 아래 마진 */
	font-size: 2rem; /* 제목 폰트 크기 */
}


/* ********************* */
/* ******* 타이틀-01 ******* */
/* ********************* */

.title-01 {
    background-image: url('../img/background.jpg'); /* 배경 이미지 경로 */
    background-size: cover; /* 배경 이미지가 전체를 덮도록 설정 */
    background-position: center; /* 배경 이미지가 중앙에 위치 */
    background-attachment: fixed; /* 스크롤 시 배경이 고정 */
    min-height: 200px; /* 최소 높이 설정 */
    color: white; /* 텍스트 색상 */
}

.title-01 .container {
    position: relative; /* 컨테이너가 배경 위에 위치 */
}

.title-01 .title {
    font-size: 2.5rem; /* 제목 크기 */
    font-weight: bold; /* 글자 두께 */
    color: #FFA500; /* 제목 색상 */
}

.title-01 .content h2 {
    font-size: 1.5rem; /* 제목 크기 */
    color: white; /* h2 텍스트 색상 */
}

.title-01 .content span {
    font-size: 1rem; /* 검색어 글자 크기 */
    color: white; /* 검색어 색상 */
}

@media (max-width: 768px) {
    .title-01 {
        background-attachment: scroll; /* 모바일에서 배경 고정 해제 */
    }
}


/* ********************* */
/* ******* 타이틀-21 ******* */
/* ********************* */
.title-21 {
	background-color: #FFA500; /* 배경색 */

}
.title-21 h2, .title-21 h5, .title-21 p {
	text-align: left; /* 텍스트 왼쪽 정렬 */
}
.title-21 h2 {
	position: relative; /* 위치 기준 설정 */
	padding-bottom: 10px; /* 제목 아래 패딩 */
	margin-left: -20px;
	color: #FFFFFF; /* 텍스트 색상 */
}
.title-21 h2:after {
	content: ""; /* 가상 요소 내용 */
	display: block;
	width: 10%; /* 라인 길이 */
	height: 2px; /* 라인 두께 */
	background-color: #FFFFFF; /* 라인 색상 */
	margin-top: 20px; /* 라인 위쪽 마진 */
	margin-bottom: 30px; /* 라인 위쪽 마진 */
	margin-left: 20px;
}


/* ********************* */
/* ******* 타이틀-25 ******* */
/* ********************* */
.title-25 {
    background-color: #FFA500; /* 배경색 */
}

.title-25 h2, .title-25 h5, .title-25 p {
    text-align: left; /* 텍스트 왼쪽 정렬 */
}

.title-25 h2 {
    position: relative; /* 위치 기준 설정 */
    padding-bottom: 10px; /* 제목 아래 패딩 */
    color: #FFFFFF; /* 텍스트 색상 */
	margin-left: -20px;
}

.title-25 h2:after {
    content: ""; /* 가상 요소 내용 */
    display: block;
    width: 10%; /* 라인 길이 */
    height: 2px; /* 라인 두께 */
    background-color: #FFFFFF; /* 라인 색상 */
    margin-top: 20px; /* 라인 위쪽 마진 */
    margin-bottom: 30px; /* 라인 아래쪽 마진 */
	margin-left: 20px;
}

.title-25 img {
    max-width: 60%;
    height: auto;
    display: block;
}


/* ********************* */
/* ******* 내용-21 섹션 ******* */
/* ********************* */
.con-21 {
    width: 100%; /* 전체 폭 사용 */
    background-color: #f7f7f7; /* 예시 배경색, 실제 색상으로 조정 필요 */
}
.con-21 h1 {
    color: #ffc107; /* 제목 색상, 그림에서 참조된 색상으로 조정 */
    position: relative; /* 위치 기준 설정 */
    padding: 20px 0; /* 아래쪽 패딩 */
	margin-left: -20px; /* 왼쪽으로 20px 이동 */
}
.con-21 h1:after {
    content: ""; /* 가상 요소 내용 */
    position: absolute; /* 절대 위치 */
    bottom: 0; /* 하단 정렬 */
    left: 0; /* 좌측 정렬 */
    width: 10%; /* 선 길이 */
    height: 2px; /* 선 두께 */
    background-color: #ffc107;
	margin-left: 20px; /* 왼쪽으로 20px 이동 */
}

/* ********************* */
/* ******* 내용-22 섹션 ******* */
/* ********************* */
.con-22 {
    width: 100%; /* 전체 폭 사용 */
    background-color: #f7f7f7; /* 예시 배경색, 실제 색상으로 조정 필요 */
}
.con-22 h3 {
    color: #ffc107 !important; /* 노랑색 적용, 우선순위 높임 */
    position: relative;
    padding-bottom: 10px;
}

.con-22 h3:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10%;
    height: 2px;
    background-color: #ffc107;
}

.con-22 .small-text {
    font-size: 0.85rem; /* 조금 더 작게 설정 */
}

.con-22 .col-md-7 {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 내용을 세로로 균등 분배 */
}



/* ********************* */
/* ******* 내용-sub23-01 ******* */
/* ********************* */
.con-sub23-01 .golden {
  color: #FFD700; /* 황금색 설정 */
}

.con-sub23-01 .content-heading h1.with-line {
  position: relative;
  display: inline-block; /* 텍스트는 본래 길이에 맞춤 */
  padding-bottom: 30px; /* 라인과 텍스트 사이의 간격 */
  margin-bottom: 30px; /* 라인과 텍스트 사이의 간격 */
  font-size: 48px; /* 글자 크기를 36px로 설정 */
}

.con-sub23-01 .content-heading h1.with-line:after {
  content: '';
  position: absolute;
  left: 50%; /* 중앙에서 시작 */
  transform: translateX(-50%); /* 중앙 정렬을 위해 X축 이동 */
  bottom: 0;
  width: 100px; /* 라인의 길이 */
  height: 2px; /* 라인의 두께 */
  background-color: #FFD700; /* 라인의 색상 */
}


.con-sub23-01 .content-heading,
.con-sub23-01 .content-description {
  text-align: center; /* 제목과 설명 중앙 정렬 */
}

.con-sub23-01 .content-description {
  width: 100%; /* 요소의 폭을 항상 100%로 설정 */
  max-width: 500px; /* 요소의 최대 폭을 500px로 제한 */
  margin: 0 auto; /* 요소를 수평 중앙에 배치 */
  text-align: center; /* 텍스트를 중앙에 정렬 */
  margin-bottom: 30px; /* 라인과 텍스트 사이의 간격 */
}

.con-sub23-01 .service-card {
  border: 1px solid #FFD700; /* 경계선 설정 */
  padding: 20px; /* 내부 여백 */
  margin-bottom: 20px; /* 하단 여백 */
  background-color: #fff; /* 배경색 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 그림자 효과 */
}

.con-sub23-01 .service-card:hover {
  background-color: #FFD700; /* 마우스 오버 시 배경색을 황금색으로 변경 */
  transition: background-color 0.3s ease; /* 배경색이 부드럽게 전환되도록 애니메이션 추가 */
}

.con-sub23-01 .service-header {
	font-size: 18px; /* 글씨 크기 */
	font-weight: bold; /* 글씨 굵기 */
	color: #333; /* 글씨 색상 */
	margin-bottom: 15px; /* 제목 아래 여백 */
	text-align: center;
}
.con-sub23-01 .service-desc {
	font-size: 14px; /* 설명 글씨 크기 */
	color: #666; /* 설명 글씨 색상 */
	text-align: center;
}

@media (max-width: 768px) {
	.con-sub23-01 .content-heading h1.with-line {
	  font-size: 36px; /* 글자 크기를 36px로 설정 */
	}
}

/* ********************* */
/* ******* 내용-sub23-02 ******* */
/* ********************* */
.con-sub23-02 {
  border-top: 1px solid #FFD700; /* 상단에 1px 황금색 라인 */
  border-bottom: 1px solid #FFD700; /* 하단에 1px 황금색 라인 */
}

.con-sub23-02 .golden {
  color: #FFD700; /* 황금색 설정 */
}

.con-sub23-02 .content-heading h1.with-line {
  position: relative;
  display: inline-block; /* 텍스트는 본래 길이에 맞춤 */
  padding-bottom: 30px; /* 라인과 텍스트 사이의 간격 */
  margin-bottom: 30px; /* 라인과 텍스트 사이의 간격 */
  font-size: 48px; /* 글자 크기를 36px로 설정 */
}

.con-sub23-02 .content-heading h1.with-line:after {
  content: '';
  position: absolute;
  left: 50%; /* 중앙에서 시작 */
  transform: translateX(-50%); /* 중앙 정렬을 위해 X축 이동 */
  bottom: 0;
  width: 100px; /* 라인의 길이 */
  height: 2px; /* 라인의 두께 */
  background-color: #FFD700; /* 라인의 색상 */
}


.con-sub23-02 .content-heading,
.con-sub23-02 .content-description {
  text-align: center; /* 제목과 설명 중앙 정렬 */
}

.con-sub23-02 .content-description {
  width: 100%; /* 요소의 폭을 항상 100%로 설정 */
  max-width: 500px; /* 요소의 최대 폭을 500px로 제한 */
  margin: 0 auto; /* 요소를 수평 중앙에 배치 */
  text-align: center; /* 텍스트를 중앙에 정렬 */
  margin-bottom: 30px; /* 라인과 텍스트 사이의 간격 */
}
@media (max-width: 768px) {
	.con-sub23-02 .content-heading h1.with-line {
	  font-size: 36px; /* 글자 크기를 36px로 설정 */
	}
}

/* ********************* */
/* ******* 내용-sub23-03 ******* */
/* ********************* */
.con-sub23-03 .golden {
  color: #FFD700; /* 황금색 설정 */
}

.con-sub23-03 .content-heading h1.with-line {
  position: relative;
  display: inline-block; /* 텍스트는 본래 길이에 맞춤 */
  padding-bottom: 30px; /* 라인과 텍스트 사이의 간격 */
  margin-bottom: 30px; /* 라인과 텍스트 사이의 간격 */
  font-size: 48px; /* 글자 크기를 36px로 설정 */
}

.con-sub23-03 .content-heading h1.with-line:after {
  content: '';
  position: absolute;
  left: 50%; /* 중앙에서 시작 */
  transform: translateX(-50%); /* 중앙 정렬을 위해 X축 이동 */
  bottom: 0;
  width: 100px; /* 라인의 길이 */
  height: 2px; /* 라인의 두께 */
  background-color: #FFD700; /* 라인의 색상 */
}


.con-sub23-03 .content-heading,
.con-sub23-03 .content-description {
  text-align: center; /* 제목과 설명 중앙 정렬 */
}


.con-sub23-03 .service-card {
  border: 1px solid #FFD700; /* 경계선 설정 */
  padding: 20px; /* 내부 여백 */
  margin-bottom: 20px; /* 하단 여백 */
  background-color: #fff; /* 배경색 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 그림자 효과 */
}

.con-sub23-03 .service-card:hover {
  background-color: #FFD700; /* 마우스 오버 시 배경색을 황금색으로 변경 */
  transition: background-color 0.3s ease; /* 배경색이 부드럽게 전환되도록 애니메이션 추가 */
}

.con-sub23-03 .service-header {
	font-size: 18px; /* 글씨 크기 */
	font-weight: bold; /* 글씨 굵기 */
	color: #333; /* 글씨 색상 */
	margin-bottom: 15px; /* 제목 아래 여백 */
	text-align: center;
}
.con-sub23-03 .service-desc {
	font-size: 14px; /* 설명 글씨 크기 */
	color: #666; /* 설명 글씨 색상 */
	text-align: center;
}

@media (max-width: 768px) {
	.con-sub23-03 .content-heading h1.with-line {
	  font-size: 36px; /* 글자 크기를 36px로 설정 */
	}
}
/* ********************* */
/* ******* 인포-01 ******* */
/* ********************* */
.info-01 .carousel {
	width: 100%;
	max-width: 600px;
	height: 460px;
	margin: auto; /* Center the carousel */
}

.info-01 .carousel-inner {
	width: 100%;
	height: 400px; /* Height for the main images */
	overflow: hidden;
}

.info-01 .carousel-inner img {
	width: 100%;
	max-width: 600px;
	height: 100%;
	object-fit: cover; /* Ensure images cover the div without distorting aspect ratio */
}

.info-01 .carousel-indicators {
	display: flex;
	justify-content: center;
	flex-wrap: wrap; /* Allows thumbnails to wrap to the next line */
	padding: 0;
	list-style: none;
	width: 100%;
	margin: 0 auto;
}

.info-01 .carousel-indicators li {
	flex: 1 1 calc(100% / 6); /* Each thumbnail takes 1/6th of the width */
	max-width: calc(100% / 6); /* Ensures no thumbnail is larger than 1/6th */
	height: 60px; /* Height for thumbnails */
	padding: 0px;
}

.info-01 .carousel-indicators img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
	border: 0px solid transparent; /* Border for unselected thumbnails */
}

.info-01 .carousel-indicators .active img {
	border-color: #007bff; /* Highlight active thumbnail */
}

 /* 오른쪽 시설 안내 */
.info-01 .table-custom {
            margin-top: 20px;
            border: 1px solid #ddd;
        }

.info-01 .table-custom th, .table-custom td {
            padding: 10px;
        }

.info-01 .facility-title {
    background-color: #ed6359; /* 배경색 설정 */
    color: white; /* 글자색 흰색 */
    text-align: center; /* 텍스트 중앙 정렬 */
    padding: 10px; /* 패딩 추가 */
    margin-top: 0; /* 상단 마진 제거 */
    margin-bottom: 0; /* 테이블과의 간격 제거 */
    border-radius: 50px; /* 양쪽 둥근 사각형 */
}

.info-01 .table-custom {
    margin-top: 0; /* 테이블 위쪽 마진 제거 */
    border: 1px solid #ddd;
    border-radius: 0 0 20px 20px; /* 테이블 하단 둥글게 */
}


 /* 탭 관련 CSS */

/* 기본 탭 스타일 커스터마이징 */
.nav-tabs .nav-link {
	border: 1px solid #ddd; /* 기본 테두리 */
	color: #333; /* 기본 텍스트 색상 */
	background-color: #fcaaa4; /* 비활성화된 탭 배경색 */
}

/* 활성화된 탭에 적용할 스타일 */
.nav-tabs .nav-link.active {
	background-color: #ed6359; /* 활성화된 탭 배경색 */
	color: white; /* 활성화된 탭 텍스트 색상 */
	border-color: #ed6359 #ed6359 #fff; /* 테두리 색상 */
}

.nav-tabs .nav-link:hover {
	background-color: #fcaaa4; /* 비활성화된 탭 호버 효과 */
}

/* ********************* */
/* ******* 정보-03 ******* */
/* ********************* */

.info-03 .info-section {
	background-color: #006064; /* 배경 색상 설정 */
	color: white; /* 글자색 흰색으로 설정 */
	padding: 40px; /* 패딩 설정 */
	font-family: 'Arial', sans-serif; /* 폰트 설정 */
}

.info-03 .contact-block {
	border-right: 2px solid white; /* 오른쪽 테두리 설정 */
}

.info-03 .contact-details, .info-03 .online-services {
	padding: 20px;
}

.info-03 .contact-details h3, .info-03 .online-services h3 {
	margin-top: 0;
}

.info-03 .contact-details .phone-number, .info-03 .online-services .email-address {
	font-size: 1.0em; /* 폰트 크기 설정 */
}

.info-03 .contact-details p, .info-03 .online-services p {
	font-size: 1.0em; /* 폰트 크기 설정 */
	margin-bottom: 0.5em; /* 하단 마진 설정 */
}

.info-03 .btn {
	background-color: #00ACC1; /* 버튼 배경색 */
	border: none; /* 버튼 테두리 없애기 */
	color: white; /* 버튼 글자색 흰색 */
	padding: 10px 20px; /* 버튼 패딩 */
	margin-top: 10px; /* 버튼 상단 마진 */
	cursor: pointer; /* 마우스 포인터 모양 변경 */
}

.info-03 .btn:hover {
	background-color: #0097A7; /* 버튼 호버 색상 */
}

/* ********************* */
/* ******* 푸터-01 ******* */
/* ********************* */
.footer-01 {
	background-color: #333; /* 다크 배경 색상 설정 */
	color: #eee; /* 텍스트 색상 설정 */
}

.footer-01 .footer-left {
	line-height: 0.7; /*  1.5;는 텍스트의 가독성을 높입니다.*/
}
.footer-01 .footer-left .label {
	color: #ccc; /* 좌측 컬럼 값 색상 설정 */
}
.footer-01 .footer-left .value {
	color: #eee; /* 좌측 컬럼 값 색상 설정 */
}
.footer-01 .footer-left .value a {
	color: #eee; /* 관련 사이트 링크 색상 설정 */
}

.footer-01 .footer-right p {
	color: #eee; /* 우측 컬럼 텍스트 색상 설정 */
	font-size: 16px;
	line-height: 1.5; /*  1.5;는 텍스트의 가독성을 높입니다.*/
}

.footer-01 .footer-right ul li a {
	color: #ccc; /* 관련 사이트 링크 색상 설정 */
	line-height: 1.5; /*  1.5;는 텍스트의 가독성을 높입니다.*/
}
.footer-01 .footer-right ul {
    list-style: none; /* 기본 스타일을 제거합니다. */
	padding-left: 0px; /* 텍스트 왼쪽에 공간을 추가 */
}

.footer-01 .footer-right ul li {
    position: relative; /* 상대적 위치 설정 */
	padding-left: 0px; /* 텍스트 왼쪽에 공간을 추가 */
}

.footer-01 .footer-right ul li::before {
    content: "•"; /* 사용자 정의 기호 */
    color: #777; /* 기호 색상 설정 */
    padding: 0 5px 0 0; /* 기호와 텍스트 사이의 간격 설정 */
}
@media (max-width: 768px) {
.footer-01 .footer-right {
        padding-top: 30px;
    }
}