@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@500&display=swap');

/* 로딩 스피너 스타일 */
body.loading {
    overflow: hidden; /* 로딩 중일 때 스크롤 비활성화 */
}


/* 로딩 스피너 스타일 */
.loading-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* 반투명 배경 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 최상위 레이어 */
}

.spinner {
    border: 8px solid #f3f3f3; /* 경계색 */
    border-top: 8px solid #3498db; /* 스피너 색상 */
    border-radius: 50%;
    width: 60px; /* 스피너 크기 */
    height: 60px; /* 스피너 크기 */
    animation: spin 1s linear infinite; /* 회전 애니메이션 */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



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

body {
    font-family: "Gowun Dodum", sans-serif;
    /* font-family: "Noto Sans KR", sans-serif; */
    line-height: 1.6;
    background-color: #f4f4f4;
    /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);  */
    color: #333;
    font-weight: bold; 
}

.no-select {
    user-select: none; /* 텍스트 선택을 비활성화 */
    -webkit-user-select: none; /* Safari 브라우저 지원 */
    -moz-user-select: none; /* Firefox 브라우저 지원 */
}

button {
    font-family: "Gowun Dodum", sans-serif;
    /* font-family: "Noto Sans KR", sans-serif; */
    /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);  */
    /* font-weight: bold;  */
}

input::placeholder,
textarea::placeholder {
    /* font-family: "Gowun Dodum", sans-serif; */
    font-family: "Noto Sans KR", sans-serif;
    /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);  */
    /* font-weight: bold;  */
}

/* font-family: "Gowun Dodum", serif;
font-weight: 500; */



/* 노래재생 */

#music-control {
    position: fixed;
    left: -60px; /* 숨겨진 상태 */
    top: 50%;
    transform: translateY(-50%);
    width: 65px; /* 숨겨진 버튼 폭 */
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: left 0.7s ease, width 0.7s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    height: 100px; /* 버튼 높이 */
    animation: pulse 1.5s infinite; /* 반짝임 효과 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px; /* 아이콘 크기 */
}

@keyframes pulse {
    0% {
        transform: translateY(-50%) scale(1);
    }
    50% {
        transform: translateY(-50%) scale(1.1);
    }
    100% {
        transform: translateY(-50%) scale(1);
    }
}

#music-control:hover {
    left: 10px; /* 마우스 오버 시 버튼 위치 */
    width: 200px; /* 버튼 폭 */
}

#play-pause-icon {
    display: none; /* 기본적으로 숨김 */
}

#music-control.playing #play-pause-icon.play {
    display: none; /* 재생 중일 때 재생 아이콘 숨김 */
}

#music-control.playing #play-pause-icon.pause {
    display: inline; /* 재생 중일 때 정지 아이콘 표시 */
}

#music-control:not(.playing) #play-pause-icon.pause {
    display: none; /* 정지 중일 때 정지 아이콘 숨김 */
}

#music-control:not(.playing) #play-pause-icon.play {
    display: inline; /* 정지 중일 때 재생 아이콘 표시 */
}








/* main */

.conA {
    display: flex;
    height: 100vh;
    margin-top: 0;
    position: relative; /* 부모 요소를 상대 위치로 설정 */
    padding: 80px 20px; /* 메인 섹션 패딩 */
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(images/main.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
    align-items: center;
}

.conA .d-flex a {
    padding: 10px;
}

.conA > .container {
    display: inline-block;
    width: 85%;
    height: 450px;
    box-shadow: 0px 0px 20px black;
    text-shadow: 3px 3px 20px rgba(59, 59, 59, 0.8);
    background-color: rgba(0, 0, 0, 0.493);
    text-align: center;
    justify-content: center;
    animation: Line 2s infinite;
    margin-right: auto;
    margin-left: auto;
}



.conA > .container > h1 {
    padding: 5px 50px;
    color: #20273b;
    font-size: 10rem;

}

.conA > .container > p{
    padding: 5px 20px;
    color: #ffffff;
    font-size: 1.2rem;
    
}

.site-logo {
    position: relative; /* 로고에 상대 위치 설정 */
}

.video-popup {
    display: none; /* 기본적으로 숨김 */
    position: fixed; /* 화면에 고정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* 반투명 배경 */
    justify-content: center; /* 중앙 정렬 */
    align-items: center; /* 중앙 정렬 */
    z-index: 2000; /* 최상단에 위치 */
    opacity: 0; /* 초기 투명도 */
    transition: opacity 0.5s ease; /* 부드러운 전환 */
}

.video-popup.show {
    display: flex; /* 팝업 표시 */
    opacity: 1; /* 완전 불투명 */
}

.video-container {
    position: relative;
    width: 80%; /* 동영상 컨테이너 너비 */
    max-width: 1000px; /* 최대 너비 */
    height: auto; /* 비율 유지하면서 자동으로 높이 설정 */
    margin: 0; /* 마진 제거 */
    display: flex; /* flexbox로 설정 */
    justify-content: center; /* 내부 요소도 가로 중앙 정렬 */
    align-items: center; /* 내부 요소도 세로 중앙 정렬 */
}

.close {
    position: absolute; /* 절대 위치 */
    top: 5%; /* 상단에서 20px 아래로 위치 */
    left: 50%; /* 화면의 가로 중앙 */
    transform: translateX(-50%); /* X축 기준으로 정확하게 중앙 정렬 */
    
    color: white; /* 글씨 색상 */
    font-size: 40px; /* 글씨 크기 */
    cursor: pointer; /* 커서 변경 */
    z-index: 2001; /* 비디오보다 위에 위치 */
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
    padding: 0px 10px; /* 패딩 추가 */
    border-radius: 5px; /* 모서리 둥글게 */
    animation: attention-seek 1.5s infinite ease-in-out; /* 애니메이션 적용 */
}

@keyframes attention-seek {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1); /* 기본 크기, 중앙 정렬 */
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2); /* 약간 위로 이동하면서 크기 증가 */
    }
}


.play-button {
    position: absolute; /* 절대 위치로 설정 */
    top: 30%; /* 로고 위쪽으로 이동 (조정 필요) */
    left: 50%; /* 중앙 정렬 */
    transform: translate(-50%, -50%); /* 중앙 정렬 */
    background-color: rgba(255, 255, 255, 0.8); /* 배경색 */
    border: none; /* 테두리 제거 */
    border-radius: 50%; /* 동그란 버튼 */
    width: 60px; /* 버튼 크기 */
    height: 60px; /* 버튼 크기 */
    cursor: pointer; /* 커서 변경 */
    display: flex; /* 중앙 정렬을 위해 flex 사용 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* 부드러운 전환 효과 */
    transform-origin: center; /* 크기 증가 기준을 중앙으로 설정 */
}

.play-button:hover {
    background-color: rgba(255, 255, 255, 1); /* 마우스 오버 시 배경색 변화 */
    transform: translate(-50%, -50%) scale(1.2); /* 마우스 오버 시 크기 증가 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* 그림자 효과 */
}



iframe {
    width: 100%; /* iframe 너비 100% */
    height: 100%; /* iframe 높이 100% */
    border: none; /* 테두리 제거 */
}

/* 기본 밑줄 제거 및 아이콘과 텍스트 간격 설정 */
.no-underline {
    text-decoration: none; /* 밑줄 제거 */
    margin-left: 10px; /* 아이콘과 텍스트 간격 */
}

.d-flex a i {
    margin-right: 10px; /* 아이콘과 텍스트 사이에 간격 추가 */
}

/* 상단 소셜 미디어 및 연락처 바 스타일 */

.site-navbar-wrap {
    position: absolute; /* 절대 위치 설정 */
    top: 0; /* 상단 고정 */
    left: 0; /* 왼쪽 고정 */
    width: 100%; /* 전체 너비 */
    padding: 0px 40px; /* 패딩을 10px로 줄이고 좌우 여백을 30px로 설정 */
    z-index: 1000; /* 다른 요소들 위에 표시 */
    background-color: #00515fbe; /* 배경색과 투명도 설정 */
}

.site-navbar-top {
    background-color: rgba(255, 255, 255, 0.767); /* 배경색과 투명도 설정 */
    position: absolute; /* 절대 위치 설정 */
    top: 0; /* 상단 고정 */
    left: 0; /* 왼쪽 고정 */
    width: 100%; /* 전체 너비 */
}

.container.py-3 {
    padding-top: 60px; /* 패딩을 추가하여 내용이 바 아래로 밀리도록 설정 */
}

/* 아이콘, 메일, 전화에 hover 시 크기와 그림자 효과 추가 */
.d-flex a:hover {
    transform: scale(1.05); /* 크기 10% 증가 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 부드러운 전환 */
}

/* 아이콘과 텍스트에 애니메이션 부드럽게 적용 */
.d-flex a {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 기본 상태에서 애니메이션 적용 */
}






/* 나머지 스타일 */
.d-flex {
    display: flex; /* Flexbox 사용 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

.justify-content-between {
    justify-content: space-between; /* 양쪽 끝으로 정렬 */
}

.align-items-center {
    align-items: center; /* 수직 중앙 정렬 */
}

.text-white {
    color: rgb(255, 255, 255); /* 텍스트 색상 흰색으로 설정 */
}

.p-2 {
    padding: 0.5rem; /* 패딩 설정 */
}

.pl-0 {
    padding-left: 0; /* 왼쪽 패딩 0 */
}

.mr-4 {
    margin-right: 1.5rem; /* 오른쪽 마진 설정 */
}





/* 기본 네비게이션 스타일 */
.site-navbar {
    position: fixed; /* 스크롤 시 고정 위치 */
    width: 100%;
    top: 3.5%;
    left: 0;
    z-index: 1000;
    padding: 8px 40px; /* 패딩을 10px로 줄이고 좌우 여백을 30px로 설정 */
    background-color: transparent; /* 처음에 배경색을 투명하게 */
    transition: background-color 0.3s ease; /* 배경색 변경 시 애니메이션 */
}
.site-navbar.scrolled {
    background-color: #00515fbe; /* 스크롤 시 배경색 변경 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 스크롤 시 그림자 추가 */
}

.site-navbar-wrap {
    z-index: 999; /* 네비게이션 바보다 아래에 위치 */
}

.site-menu {
    list-style: none; /* 리스트 스타일 제거 */
    padding: 10px; /* 링크 주변에 패딩 추가 */
    margin: 0; /* 마진 제거 */
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 수직 중앙 정렬 */
}

.site-menu li {
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 수직 중앙 정렬 */
    margin-left: 5px; /* 간격 설정 */

}

.site-menu a {
    color: white; /* 링크 색상 */
    text-decoration: none; /* 밑줄 제거 */
    line-height: 1.5; /* 줄 높이 설정 */
}


/* 메뉴 항목 스타일 */
.site-navbar .site-menu a {
    color: white;
    transition: color 0.3s;
}

.site-navbar.scrolled .site-menu a {
    color: white; /* 스크롤 시에도 텍스트 색상 유지 */
}


.site-navbar .site-logo img {
    display: block;
    width: 120px;
}

.site-navbar .site-menu {
    list-style: none;
    display: flex;
    justify-content: space-around;
    margin-right: 5px;
}

.site-navbar .site-menu li {
    padding: 0 20px;
}

.site-navbar .site-menu li a {
    color: white;
    margin: 10px;
    text-decoration: none;
    font-size: 1.5rem;
    transition: transform 0.3s ease, color 0.3s ease; /* 부드러운 전환 효과 */
}

.site-navbar .site-menu  a:hover {
    transform: scale(1.1); /* 확대 효과 */
    color: #ffd000;
}

.site-navbar .sub_btn {
    display: flex; /* Flexbox로 설정 */
    font-size: 18px; /* 글씨 크기 */
    text-decoration: none; /* 밑줄 제거 */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    background-color: #ff0000;
    padding: 10px; /* 패딩 조정 */
    border-radius: 5px;
    box-shadow: 1px 1px 3px 1px black;
    position: relative; /* 포지션 설정 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    overflow: hidden; /* 내용이 넘치지 않도록 설정 */
    transition: background-color 1.5s ease; /* 배경색 변화 애니메이션 */
    animation: backgroundChange 1.5s infinite alternate; /* 배경색 변화 애니메이션 */
}

.sub_btn a {
    padding: 0; /* 패딩 제거 */
    color: white;
    text-decoration: none;
    font-weight: bold;
}


.site-menu-toggle {
    display: none;
}

/* 팝업 창 스타일 */
.sliding-menu {
    position: fixed;
    top: 0;
    right: -300px; /* 처음에는 화면 밖에 위치 */
    width: 300px;
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 3); /* 스크롤 시 그림자 추가 */
    background-color: #222; /* 더 어두운 배경색으로 변경 */
    color: white;
    transition: right 0.5s ease, background-color 0.5s ease; /* 슬라이딩 및 배경색 변화 애니메이션 */
    z-index: 1100;
    display: flex;
    flex-direction: column;
    padding-top: 50px; /* 메뉴를 위쪽에 배치 */
    padding-left: 20px;
}

.sliding-menu.open {
    right: 0; /* 팝업 창이 화면 안으로 슬라이드 */
    background-color: #1c1c1c; /* 팝업이 열릴 때 배경색이 살짝 변함 */
}

/* 메뉴 스타일 */
.sliding-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sliding-menu li {
    margin: 15px 0;
}

.sliding-menu a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    position: relative;
    display: block;
    padding: 10px 0;
    transition: color 0.3s ease, transform 0.3s ease; /* 컬러와 변형 애니메이션 */
}

/* 메뉴 항목 호버 시 스타일 */
.sliding-menu a:hover {
    color: #ffd000; /* 텍스트 색상 변경 */
    transform: translateX(10px); /* 살짝 오른쪽으로 이동 */
}

/* 클릭 시 버튼 애니메이션 (간단한 클릭 피드백) */
.sliding-menu a:active {
    transform: scale(0.95); /* 클릭할 때 살짝 줄어듦 */
    background-color: rgba(255, 208, 0, 0.1); /* 배경에 살짝 색상 추가 */
}

/* 닫기 버튼 스타일 */
.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    background-color: transparent;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-btn:hover {
    color: #ffd000; /* 닫기 버튼 호버 시 색상 변경 */
}

/* 메뉴 클릭 시 심플한 효과 추가 */
.sliding-menu a:focus {
    outline: none; /* 기본 포커스 제거 */
    background-color: #3a3a3a; /* 포커스 시 배경색 살짝 변경 */
    padding-left: 20px; /* 왼쪽으로 패딩 추가 (살짝 넓어지는 느낌) */
    transition: padding-left 0.3s ease; /* 패딩 변화 애니메이션 */
}


/* 아이콘 스타일 */
.menu-icon {
    display: none; /* 기본적으로 아이콘을 숨김 */
    cursor: pointer;
}


@keyframes backgroundChange {
    0% {
        background-color: #b22222; /* 초기 색상 */
    }
    50% {
        background-color: #9c000d; /* 중간 색상 */
    }
    100% {
        background-color: #b22222; /* 원래 색상으로 돌아감 */
    }
}








/* 각 섹션 스타일 */
section {
    padding: 100px 20px;
    margin-bottom: 100px; /* 섹션 간의 하단 마진 설정 */
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
}

h2 {
    text-align: center;
    margin-bottom: 15px;
    font-size: 2.5rem;
    color: #2c3e50;
    text-transform: uppercase;
    font-weight: 700;
}









/* about 섹션 스타일 */
#about-section {
    background-color: #ffffff; /* 섹션 배경색을 흰색으로 설정 */
    display: flex; /* 플렉스 박스 레이아웃 사용 */
    flex-direction: column; /* 자식 요소를 세로 방향으로 정렬 */
    align-items: center; /* 자식 요소를 중앙 정렬 */
    padding: 20px; /* 섹션의 내부 여백 추가 */
}

.checklist {
    display: flex; /* 체크 표시와 텍스트를 가로로 배치 */
    margin-bottom: 1px; /* 각 항목 사이의 간격 설정 */
}

.check-icon {
    color: red; /* 체크 표시 색상 설정 */
    margin-right: 8px; /* 체크 표시와 텍스트 사이의 간격 설정 */
    font-size: 1.2rem; /* 체크 표시의 크기 조정 */
}

#about-section .about-p-red {
    padding-bottom: 10px; /* 아래쪽 여백 추가 */
    color: red; /* 텍스트 색상을 빨간색으로 설정 */
}

.about-p {
    padding-bottom: 50px; /* 아래쪽 여백 추가 */
    text-align: center; /* 텍스트 중앙 정렬 */
}

.about-content {
    display: flex; /* 비디오와 내용을 가로로 배치 */
    align-items: center; /* 🌟 중앙 정렬로 변경 */
    justify-content: space-between; /* 자식 요소 간의 공간을 균등하게 분배 */
    width: 100%; /* 전체 너비 사용 */
    max-width: 1300px; /* 최대 너비 설정 */
}


.video-container {
    display: flex;
    flex-direction: column;  /* 세로 배치 */
    align-items: center;  /* 가운데 정렬 */
    gap: 20px;  /* 동영상 사이 여백 */
    margin-right: 20px; /* 비디오와 텍스트 사이의 간격 설정 */
    justify-content: center; /* 비디오를 중앙 정렬 */
}

.video-container iframe {
    display: block; /* 인라인 블록 요소로 설정 */
    position: relative; /* 상대 위치로 설정 */
    width: 720px; /* 비디오 너비 설정 */
    height: 570px; /* 비디오 높이 설정 */
    border-radius: 5px; /* 모서리를 둥글게 설정 */
    box-shadow: 3px 3px 20px black; /* 그림자 효과 추가 */
    background-position: center; /* 배경 이미지 중앙 정렬 */
    background-size: cover; /* 배경 이미지가 요소를 꽉 채우도록 설정 */
}

.content {
    padding: 20px;
    display: grid; /* 그리드 레이아웃 사용 */
    width: 100%; /* 내용의 너비를 100%로 설정 */
    max-width: 600px; /* 최대 너비 설정 */
    height: auto; /* 높이를 자동으로 설정 */
    align-items: center; /* 수직 중앙 정렬 */
    grid-template-columns: repeat(1, 1fr); /* 1열로 그리드 설정 */
}

.content p {
    font-size: 1.1rem; /* 텍스트 크기 설정 */
    margin-bottom: 20px; /* 아래쪽 여백 추가 */
}

.content button {
    padding: 12px 25px; /* 버튼 내부 여백 설정 */
    background-color: #3498db; /* 버튼 배경색 설정 */
    color: white; /* 버튼 글자 색상 설정 */
    border: none; /* 버튼 테두리 제거 */
    border-radius: 5px; /* 버튼 모서리 둥글게 설정 */
    cursor: pointer; /* 마우스 커서를 포인터로 변경 */
    font-size: 1.3rem; /* 버튼 글자 크기 설정 */
    transition: background-color 0.3s; /* 배경색 변화에 애니메이션 추가 */
}

.nav-link {
    text-decoration: none; /* 링크의 밑줄 제거 */
    color: inherit; /* 부모 요소의 글자 색상 상속 */
}

.content button:hover {
    background-color: #2980b9; /* 마우스를 올렸을 때 버튼 배경색 변경 */
}



.btn {
    display: inline-block; /* 버튼처럼 보이게 설정 */
    padding: 10px 20px; /* 원하는 패딩 설정 */
    background-color: #007bff; /* 버튼 배경 색상 */
    border: none; /* 기본 테두리 제거 */
    border-radius: 5px; /* 모서리 둥글게 */
    cursor: pointer; /* 마우스 커서 변경 */
    text-align: center; /* 텍스트 중앙 정렬 */
}

.btn a {
    color: white; /* 텍스트 색상 */
    text-decoration: none; /* 밑줄 제거 */
    display: block; /* 블록 요소로 설정하여 전체 버튼 영역 클릭 가능 */
    height: 100%; /* 버튼 높이 맞추기 */
    width: 100%; /* 버튼 너비 맞추기 */
}







/* member 섹션 스타일 */
#our-team-section {
    background-color: #ffffff;
    padding: 80px 0;
    text-align: center;
}

#our-team-section .member-p-red {
    padding-bottom: 10px;
    color: red;
    font-size: 1.5rem;
}

.member-p {
    padding-bottom: 10px;
    text-align: center; /* 텍스트 중앙 정렬 */
}



@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.member-p .member-connection {
    margin: 15px auto; /* 중앙 정렬을 위해 좌우 마진을 auto로 설정 */
    padding: 10px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    max-width: 420px; /* 최대 너비 설정 */
    width: 100%; /* 너비를 100%로 설정 */
    animation: shake 2s infinite; /* 진동 애니메이션 적용 */
}






.member-card-container {
    display: flex;
    flex-wrap: wrap; /* 여러 줄로 나눠서 배치 */
    justify-content: center; /* 중앙 정렬 */
    overflow: visible; /* 스크롤을 없애고 모든 콘텐츠 보여주기 */
    max-width: 100%; /* 최대 너비를 100%로 설정 */
}

.member-wrapper {
    width: 300px; /* 기본 카드 너비 */
    margin: 10px; /* 카드 간격 */
    text-align: center; /* 텍스트 중앙 정렬 */
    opacity: 0; /* 기본 상태에서 투명하게 */


    transition: opacity 0.5s ease; /* 부드러운 전환 효과 */
    display: none; /* 기본적으로 숨김 */
}

.member-wrapper.show {
    opacity: 1; /* 보이게 설정 */
    transition: opacity 1.8s ease; /* 부드러운 전환 효과 */
    display: block; /* 보이게 설정 */
}



.member-card {
    width: 300px; /* 카드 너비를 100%로 설정 */
    height: 400px; /* 카드 높이 조정 */
    justify-content: center; /* 중앙 정렬 */
    position: relative;
    box-shadow: 0 0px 12px rgba(0, 0, 0, 0.8);
    border-radius: 5px; /* 모서리 둥글게 */
    overflow: hidden;
    transition: transform 0.3s ease; /* 카드 확대 효과 추가 */
}

.member-card img {
    width: 300px; /* 원하는 고정 너비 설정 */
    height: 400px; /* 원하는 고정 높이 설정 */
    object-fit: cover; /* 중앙에 배치되고 비율 유지 */
    transition: transform 0.3s ease; /* 이미지 확대 효과 추가 */
}

.member-card:hover img {
    transform: scale(1.06); /* 마우스를 올리면 이미지 확대 */
}

.info {
    position: absolute;
    bottom: 5px;
    height: 150px; /* 카드 높이 조정 */
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    width: 100%;
    transform: translateY(100%); /* 기본 상태에서 아래쪽으로 위치 */
    transition: transform 0.3s ease-in-out; /* 올라오는 애니메이션 */
    text-align: center;
    padding: 10px 0;
}

.member-card:hover .info {
    transform: translateY(50%); /* 마우스를 올리면 info 올라오기 */
}

.info p {
    margin: 5px 0;
    padding: 0px 10px;
    text-align: left;
}

.member-description {
    margin-top: 10px; /* 카드와 설명 사이의 간격 */
    
    text-align: left;
}

.member-description h3 {
    padding: 0px 5px;
    margin: 10px 0 15px; /* 제목과 설명 간격 조정 */
}

.member-description p {
    margin: 3px; /* 설명 텍스트 마진 초기화 */
    color: #757575;
}


.member-description .description-red {
    color: rgb(255, 0, 0);
    font-weight: bold; /* 또는 숫자 값(예: 700) */
}




.member-description a {
    color: rgb(255, 0, 0); /* 링크 색상 */
    text-decoration: none; /* 밑줄 제거 */
}


.button-wrapper {
    display: flex; /* 중앙 정렬을 위한 flexbox */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    height: 100px; /* 박스 높이 설정 */
    margin: 50px auto; /* 상하 여백 및 자동 중앙 정렬 */
    border-radius: 10px; /* 박스 모서리 둥글게 */
    background-color: #f8f8f8; /* 박스 배경색 */
    width: 300px; /* 박스 너비 설정 */
}

.button-container {
    display: grid; /* 버튼들을 그리드로 배치 */
    grid-template-columns: repeat(2, 1fr); /* 2열 배치 */
    gap: 10px; /* 버튼 간격 */
    width: 100%; /* 부모 요소 너비에 맞춤 */
    padding: 10px; /* 내부 여백 */
}

.button-container button {
    margin: 0; /* 버튼 간 외부 여백 제거 */
    padding: 12px 15px; /* 버튼 내부 여백 */
    font-size: 1.2rem; /* 글자 크기 */
    cursor: pointer; /* 커서 변경 */
    border: none; /* 테두리 제거 */
    border-radius: 10px; /* 모서리 둥글게 */
    background-color: #4e4e4e; /* 기본 버튼 색상 */
    color: white; /* 글자 색상 */
    position: relative; /* 애니메이션 효과를 위해 position 설정 */
    transition: transform 0.7s, background-color 0.7s, box-shadow 0.7s, opacity 0.7s; /* 애니메이션 추가 */
}

.button-container button.active {
    transform: scale(1.1); /* 활성화 시 크기 증가 */
    background-color: #3498db; /* 활성화된 색상 */
    box-shadow: 0 0px 10px rgba(0, 0, 0, 1);
    text-shadow: 0 0px 5px rgba(0, 0, 0, 0.5); /* 텍스트 그림자 추가 */
    animation: sparkleEffect 1s ease-in-out infinite; /* 반짝이는 애니메이션 */
}

.button-container button.inactive {
    background-color: #A9A9A9; /* 비활성화된 버튼 색상 */
    color: #fff; /* 글자 색상 */
    opacity: 0.3; /* 불투명도 감소 */
    cursor: not-allowed; /* 커서 변경 */
}

@keyframes sparkleEffect {
    0% {
        background-color: #3498db; /* 시작 색상 */
    }
    50% {
        background-color: #1f89cf; /* 중간 색상 (반짝이는 효과) */
    }
    100% {
        background-color: #3498db; /* 끝 색상 */
    }
}

@keyframes waveAnimation {
    0% {
        background-color: #0056b3; /* 시작 색상 */
        background-image: linear-gradient(45deg, #0056b3, #007BFF);
        background-size: 200% 200%; /* 배경 크기 설정 */
        background-position: 0% 50%; /* 초기 배경 위치 */
    }
    10% {
        background-position: 10% 50%;
    }
    20% {
        background-position: 20% 50%;
    }
    30% {
        background-position: 30% 50%;
    }
    40% {
        background-position: 40% 50%;
    }
    50% {
        background-color: #007BFF; /* 중간 색상 */
        background-image: linear-gradient(45deg, #007BFF, #0056b3);
        background-position: 50% 50%;
    }
    60% {
        background-position: 60% 50%;
    }
    70% {
        background-position: 70% 50%;
    }
    80% {
        background-position: 80% 50%;
    }
    90% {
        background-position: 90% 50%;
    }
    100% {
        background-color: #0056b3; /* 끝 색상 */
        background-image: linear-gradient(45deg, #0056b3, #007BFF);
        background-position: 100% 50%;
    }
}











/* 구성인원 섹션 스타일 */
#group-section {
    background-color: #ffffff; /* 배경색 */
    padding: 80px 0; /* 상하 여백 */
    text-align: center; /* 텍스트 중앙 정렬 */
}

.group-p-red {
    color: red; /* 텍스트 색상 */
}

.group-item img {
    max-width: 80%; /* 이미지 너비를 100%로 설정하여 반응형으로 만듦 */
    height: auto; /* 비율에 맞춰 높이 자동 조정 */
    border-radius: 10px; /* 모서리 둥글게 설정 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 2); /* 기본 그림자 효과 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 변환 효과 */
}

/* 마우스 오버 시 효과 */
.group-item img:hover {
    transform: scale(1.02); /* 이미지 크기 증가 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* 그림자 강화 */
}














/* faq 섹션 스타일 */
#faq-section {
    background-color: #ffffff; /* 섹션 배경색을 흰색으로 설정 */
    display: flex; /* 플렉스 박스 레이아웃 사용 */
    flex-direction: column; /* 자식 요소를 세로 방향으로 배치 */
    align-items: center; /* 자식 요소를 중앙 정렬 */
    padding: 20px; /* 내부 여백 설정 */
}

#faq-section .faq-p-red {
    padding-bottom: 10px; /* 아래쪽 여백 설정 */
    color: red; /* 글자 색상을 빨간색으로 설정 */
}

.faq-p {
    padding-bottom: 50px; /* 아래쪽 여백 설정 */
}

.faq-container {
    display: flex; /* 플렉스 박스 레이아웃 사용 */
    flex-direction: column; /* 자식 요소를 세로 방향으로 배치 */
    align-items: center; /* 자식 요소를 중앙 정렬 */
    justify-content: center; /* 자식 요소를 수직 중앙 정렬 */
    width: 100%; /* 전체 너비 사용 */
    max-width: 1300px; /* 최대 너비 설정 */
}

.faq-item {
    display: flex; /* 플렉스 박스 레이아웃 사용 */
    align-items: flex-start; /* 자식 요소를 상단 정렬 */
    margin-bottom: 20px; /* 아래쪽 여백 설정 */
    background-color: #f8f9fa; /* 배경색 설정 */
    padding: 20px; /* 내부 여백 설정 */
    border-radius: 10px; /* 모서리 둥글게 설정 */
}

.faq-item img {
    max-width: 450px; /* 이미지 최대 너비 설정 */
    border-radius: 10px; /* 이미지 모서리 둥글게 설정 */
    margin-right: 20px; /* 오른쪽 여백 설정 */
    box-shadow: 0 0px 8px rgba(0, 0, 0, 2); /* 이미지에 그림자 효과 추가 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 크기 및 그림자 애니메이션 효과 */
}

.faq-item img:hover {
    transform: scale(1.05); /* 마우스 오버 시 이미지 크기 증가 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 마우스 오버 시 그림자 강화 */
}

.question-answer {
    display: flex; /* 플렉스 박스 레이아웃 사용 */
    flex-direction: column; /* 자식 요소를 세로 방향으로 배치 */
    width: 100%; /* 전체 너비 사용 */
}

.question {
    display: flex; /* 플렉스 박스 레이아웃 사용 */
    align-items: center; /* 아이콘과 텍스트를 수직 중앙 정렬 */
    cursor: pointer; /* 마우스 커서를 포인터로 변경 */
    padding: 10px; /* 내부 여백 설정 */
    margin-bottom: 0px; /* 질문과 질문 사이의 간격 설정 */
    border-bottom: none; /* 검정색 실선 제거 */
}

.answer {
    max-height: 0; /* 초기 높이 설정 (숨김 상태) */
    color: #7c7c7c;
    overflow: hidden; /* 넘치는 내용을 숨김 */
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out; /* 부드러운 전환 효과 */
    opacity: 0; /* 기본적으로 투명하게 설정 */
    padding: 0px 50px; /* 답변 내 좌우 여백 추가 */
    margin-top: 0px; /* 질문과 답변 사이의 간격 설정 */
}

.answer.show {
    max-height: 200px; /* 최대 높이를 설정 (답변 내용에 맞게 조정 필요) */
    opacity: 1; /* 불투명하게 변경 */
}

.icon {
    width: 20px; /* 아이콘 너비 설정 */
    height: 20px; /* 아이콘 높이 설정 */
    margin-right: 10px; /* 텍스트와의 간격 설정 */
    transition: transform 0.4s ease; /* 클릭 시 회전 애니메이션 효과 */
}

.rotate {
    transform: rotate(360deg); /* 360도 회전 */
}
























/* gallery 섹션 */
#projects-section {
    background-color: #ffffff;
    display: flex;
    flex-direction: column; /* 세로 방향 정렬 */
    align-items: center; /* 중앙 정렬 */
    padding: 20px; /* 패딩 추가 */
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  /* 이미지들을 중앙에 정렬 */
    gap: 10px;
    margin-top: 20px;
}

#projects-section .gallery-p-red {
    padding-bottom: 10px;
    color: red;
}

.gallery-p {
    padding-bottom: 50px;
    text-align: center; /* 텍스트 중앙 정렬 */
}

/* 각 이미지의 부모 요소 스타일 */
.gallery-grid div {
    width: calc(25% - 10px);  /* 한 줄에 4개의 이미지 */
    height: 300px;            /* 모든 이미지의 고정 높이 */
    overflow: hidden;        /* 내용이 넘치지 않도록 설정 */
    position: relative;      /* 자식 요소의 위치를 기준으로 설정 */
}

/* 이미지 스타일 */
.gallery-grid img {
    width: 100%;            /* 부모 요소의 너비를 100%로 설정 */
    height: 100%;           /* 부모 요소의 높이를 100%로 설정 */
    object-fit: cover;      /* 이미지가 왜곡되지 않도록 함 */
    cursor: pointer;
    transition: transform 0.3s ease;  /* 마우스 올릴 때 애니메이션 */
}

/* 마우스를 올렸을 때 이미지 확대 효과 */
.gallery-grid img:hover {
    transform: scale(1.1);  /* 이미지가 살짝 확대됨, 부모 요소에서 제한됨 */
}

/* 팝업 컨테이너 */
.popup {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 팝업 내부 넘침 방지 */
}

/* 팝업 내용 */
.popup-content {
    max-width: 90%;
    max-height: 80%;
    opacity: 0;
    transform: scale(0.5);  /* 작게 시작 */
    transition: opacity 0.5s ease, transform 0.5s ease;  /* 확대 애니메이션 */
    position: relative;
    z-index: 1;
}

/* 팝업 활성화 시 확대 효과 */
.popup-content.active {
    opacity: 1;
    transform: scale(1);  /* 확대 */
}





/* 좌우 화살표 */
.prev, .next {
    position: absolute;
    top: 50%;
    color: white;
    padding: 5px;
    font-size: 50px;
    cursor: pointer;
    background-color: #00000086;
    transform: translateY(-50%);
    user-select: none;
    z-index: 2;
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

/* 이미지 전환 시 슬라이딩 효과 */
.popup-content.slide-left {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.popup-content.slide-right {
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}













/* 참석 메일보내기 섹션 스타일 */
#contact-section {
    background-color: #ffffff; /* 배경색을 흰색으로 설정 */
    display: flex; /* 플렉스 박스 레이아웃 사용 */
    flex-direction: column; /* 세로 방향 정렬 */
    align-items: center; /* 중앙 정렬 */
    padding: 20px; /* 섹션의 내부 여백 추가 */
}

#contact-section .contact-p-red {
    padding-bottom: 10px; /* 아래쪽 여백 추가 */
    color: red; /* 글자 색상을 빨간색으로 설정 */
}

.contact-p {
    padding-bottom: 50px; /* 아래쪽 여백 추가 */
    text-align: center; /* 텍스트 중앙 정렬 */
}

#contact-form {
    display: flex; /* 플렉스 레이아웃 사용 */
    flex-direction: column; /* 세로 방향 정렬 */
    align-items: center; /* 중앙 정렬 */
    width: 100%; /* 너비를 100%로 설정하여 부모 요소에 맞춤 */
    max-width: 800px; /* 최대 너비를 600px로 설정 */
}

#contact-form input, #contact-form textarea {
    width: 100%; /* 너비를 100%로 설정하여 부모 요소에 맞춤 */
    padding: 15px; /* 내부 여백 추가 */
    margin: 10px 0; /* 위아래 여백 추가 */
    border-radius: 5px; /* 모서리를 둥글게 설정 */
    border: 1px solid #ddd; /* 테두리 색상 설정 */
    box-sizing: border-box; /* 패딩과 테두리를 포함하여 너비 계산 */
}

#contact-form textarea {
    resize: vertical; /* 세로로만 크기 조절 가능하도록 설정 */
    min-height: 100px; /* 최소 높이 설정 */
}

#contact-form button {
    width: 100%; /* 버튼 너비를 100%로 설정하여 부모 요소에 맞춤 */
    padding: 12px 30px; /* 내부 여백 추가 */
    background-color: #3498db; /* 버튼 배경색 설정 */
    color: white; /* 글자 색상을 흰색으로 설정 */
    border: none; /* 테두리 없음 */
    border-radius: 5px; /* 모서리를 둥글게 설정 */
    cursor: pointer; /* 커서를 포인터로 변경 */
    font-size: 1.3rem; /* 글자 크기 설정 */
    transition: background-color 0.3s; /* 배경색 변화에 애니메이션 추가 */
}

#contact-form button:hover {
    background-color: #2980b9; /* 마우스 오버 시 배경색 변경 */
}

#contact-section {
    background-color: #f9f9f9; /* 배경색을 밝은 회색으로 설정 */
    display: flex; /* 플렉스 박스 레이아웃 사용 */
    flex-direction: column; /* 세로 방향 정렬 */
    align-items: center; /* 중앙 정렬 */
    padding: 40px; /* 섹션의 내부 여백 추가 */
    border-radius: 10px; /* 모서리를 둥글게 설정 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 그림자 효과 추가 */
}

#contact-section .contact-p-red {
    padding-bottom: 10px; /* 아래쪽 여백 추가 */
    color: red; /* 글자 색상을 빨간색으로 설정 */
    font-weight: bold; /* 글자 두껍게 */
    font-size: 1.5rem; /* 글자 크기 증가 */
}

.contact-p, .contact-p-768 {
    margin: 70px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.1rem;
    color: #333;
    transition: transform 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease;
    position: relative; /* 애니메이션 위치를 위한 설정 */
    overflow: hidden; /* 안에 있는 요소가 튀어나가지 않게 설정 */
}

.contact-p:before, .contact-p-768:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    transition: left 0.5s ease;
}

.contact-p:hover:before, .contact-p-768:hover:before {
    left: 100%; /* 마우스 오버 시 오른쪽으로 이동 */
}

.contact-p:hover, .contact-p-768:hover {
    transform: translateY(-8px); /* 마우스 오버 시 더 부드럽고 큰 이동 효과 */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); /* 그림자 깊이 증가 */
    background-color: #f1f1f1; /* 배경 색상 변경 */
}

.contact-button-container {
    display: flex; /* 플렉스 레이아웃 사용 */
    justify-content: space-between; /* 버튼 사이 간격 설정 */
    width: 100%; /* 전체 너비 사용 */
    max-width: 400px; /* 최대 너비 설정 */
}

.contact-contact-button {
    flex: 1; /* 버튼들을 동일한 너비로 설정 */
    margin: 0 10px; /* 버튼 간의 간격 설정 */
    padding: 15px; /* 내부 여백 추가 */
    background-color: #3498db; /* 버튼 배경색 설정 */
    color: white; /* 글자 색상을 흰색으로 설정 */
    border: none; /* 테두리 없음 */
    border-radius: 5px; /* 모서리를 둥글게 설정 */
    text-align: center; /* 텍스트 중앙 정렬 */
    text-decoration: none; /* 링크 밑줄 제거 */
    font-size: 1.2rem; /* 글자 크기 설정 */
    transition: background-color 0.3s, transform 0.2s; /* 배경색 변화와 크기 변화 애니메이션 추가 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 버튼 그림자 추가 */
}

.contact-contact-button:hover {
    background-color: #2980b9; /* 마우스 오버 시 배경색 변경 */
    transform: translateY(-2px); /* 마우스 오버 시 살짝 위로 이동 */
}

.contact-p {
    display: block; /* 화면이 작아지면 이 p 태그 보이기 */
}
.contact-p-768 {
    display: none; /* 화면이 작아지면 이 p 태그 숨기기 */
}















/* 하단 푸터 스타일 */
.site-footer {
    background-color: #181b1f; /* 배경색 */
    padding: 40px 20px; /* 상하 좌우 패딩 */
    color: white; /* 텍스트 색상 */
}

.site-footer .container {
    max-width: 1000px; /* 최대 너비 설정 */
    margin: 0 auto; /* 중앙 정렬 */
}

.site-footer .container .row {
    display: flex; /* 체크 표시와 텍스트를 가로로 배치 */
    justify-content: space-between; /* 열 사이의 간격을 균등하게 배치 */
}

.site-footer .row {
    margin-bottom: 20px; /* 각 섹션 간 간격 */
}

.site-footer .col-lg-4 {
    flex: 1; /* 각 열의 넓이를 동일하게 설정 */
    text-align: center; /* 중앙 정렬 */
}

.site-footer .col-lg-4 p {
    margin: 0px 0; /* 위아래 여백 */
    padding: 30px;
}

.site-footer .col-lg-4 p a {
    margin: 0 10px; /* 아이콘 간 간격 추가 */
}

.site-footer h3 {
    margin-bottom: 10px; /* 제목과 내용 간 간격 */
    width: 100%; /* 넓이를 100%로 설정하여 동일하게 맞춤 */
}


/* 연락처 및 저작권 정보 정렬 */
.row.text-center.mt-4 {
    display: flex; /* Flexbox 사용 */
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
}

.contact-link {
    color: white; /* 흰색 텍스트 */
    text-decoration: none; /* 밑줄 제거 */
    transition: color 0.3s ease; /* 부드러운 색상 변경 */
}

/* 마우스 오버 시 색상 변경 */
.contact-link:hover {
    color: white; /* 마우스를 올리면 흰색으로 변경 */
}

.site-footer .col-md-12 i {
    margin: 10px; /* 아이콘 간 간격 */
}

.footer-heading {
    font-size: 1.5rem; /* 제목 크기 조정 */
    font-weight: bold; /* 제목 두껍게 */
}

.site-footer p {
    font-size: 1rem; /* 본문 글자 크기 */
    color: #7c7c7c;
    text-align: center; /* 본문 텍스트 중앙 정렬 */
}
.site-footer a {
    font-size: 1rem; /* 본문 글자 크기 */
    color: #7c7c7c;
    text-align: center; /* 본문 텍스트 중앙 정렬 */
}

.site-footer strong {
    color: #ffffff;
}

.large-screen {
    display: block; /* 화면이 커지면 이 p 태그 보이기 */
}
.small-screen {
    display: none; /* 화면이 커지면 이 p 태그 숨기기 */
}


.site-footer .map_max {
    display: block; 
}
.site-footer .row .map_768 {
    display: none; 
}

.site-footer .map_768, .map_max {
    display: flex; /* Flexbox를 사용 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    margin: 20px auto; /* 상하 간격과 중앙 정렬 */
    width: 700px; 
    height: 500px;
}


.site-footer iframe {
    border-radius: 10px; /* 지도 테두리에 둥근 모서리(optional) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 효과(optional) */
}












/* 미디어 쿼리: 화면이 1024px 이하로 줄어들 때 */



@media (max-width: 1024px) {
    .email-text,
    .phone-text {
        display: none; /* 텍스트 숨김 */
    }

    .site-navbar-wrap .justify-content-end a {
        justify-content: flex-end; /* 오른쪽 정렬 */
        padding: 0px;
    }

    
    .site-navbar .site-logo img {
        width: 100px;
    }
   

    .sliding-menu.open {
        right: 0; /* 팝업 창이 화면 안으로 슬라이드 */
    }

    .menu-icon {
        display: inline-block; /* 아이콘 보이기 */
    }

    .site-menu {
        display: none; /* 원래 메뉴 항목 숨기기 */
    }


    /* 팝업이 열렸을 때 */
    .sliding-menu.open {
        right: 0; /* 팝업 창이 화면 안으로 슬라이드 */
    }





    .menu-item {
        display: none; /* 기본적으로 숨김 */
    }


    .site-navbar .sub_btn {
        padding: 5px 7px;

    }


    .conA > .container > p{
        padding: 5px 50px;
        color: #ffffff;
        font-size: 16px;
    }

    .about-content {
        flex-direction: column; /* 세로 방향으로 변경 */
        align-items: center; /* 중앙 정렬 */
    }




    

}

/* 미디어 쿼리: 화면이 768px 이하로 줄어들 때 */
@media (max-width: 768px) {
    .content button {
        padding: 10px 20px; /* 버튼 내부 여백 설정 */
        font-size: 1rem; /* 버튼 글자 크기 설정 */
    }

    .conA > .container {
        height: 420px;
    }



    .conA > .container > p{
        padding: 5px 10px;
        color: #ffffff;
        font-size: 13px;
    }

    .video-container {
        max-width: 500px; /* 최대 너비 */
        max-height: 700px; /* 최대 높이 */
    }



    .about-content {
        flex-direction: column; /* 세로 방향으로 변경 */
        align-items: center; /* 중앙 정렬 */
    }

    .video-container {
        margin-right: 0; /* 오른쪽 여백 제거 */
        margin-bottom: 100px; /* 아래쪽 여백 추가 */
        width: 100%; /* 비디오 너비를 100%로 설정 */
    }

    .content {
        width: 100%; /* 내용의 너비를 100%로 설정 */
    }

    .video-container iframe {
        width: 100%; /* 너비를 100%로 설정하여 반응형으로 만듦 */
        height: 300px /* 비율에 맞춰 높이 자동 조정 */
    }

    .site-navbar {
        top: 6%;
        padding: 6px 10px;
    }
    

 


    .site-navbar .site-logo img {
        width: 70px;
    }






    







    .gallery-grid div {
        width: 100%;  /* 한 줄에 1개의 이미지 */
    }

    


    .faq-item {
        flex-direction: column; /* 세로 방향으로 배치 */
        align-items: center; /* 중앙 정렬 */
        font-size: 15px;
    }
    

    .faq-item img {
        margin-right: 0; /* 오른쪽 여백 제거 */
        max-width: 100%; /* 이미지 너비를 100%로 설정 */
    }

    .faq-item img {
        margin-right: 13px; /* 오른쪽 여백 설정 */
    }

    .contact-info {
        display: block; /* 화면이 줄어들면 블록으로 설정하여 세로로 나열 */
        margin: 5px 0; /* 간격 조정 */
    }


    /* 버튼을 세로로 배치코드 */
    /* .button-container {
        display: inline-flex;
        flex-direction: column; 
    }

    .button-container button {
        margin: 5px; 
        padding: 12px 15px; 
        font-size: 1.5rem; 
    } */


    .contact-contact-button {
        font-size: 1rem; /* 글자 크기 설정 */
    }

    .contact-p {
        display: none; /* 화면이 작아지면 이 p 태그 숨기기 */
    }
    .contact-p-768 {
        display: block; /* 화면이 작아지면 이 p 태그 보이기 */
    }



    .member-wrapper {
        width: 150px; /* 기본 카드 너비 */
    
    }
    
    .member-card {
        width: 150px; /* 카드 너비를 100%로 설정 */
        height: 250px;
    
    }
    
    .member-card img {
        width: 150px; /* 원하는 고정 너비 설정 */
        height: 250px;
    }
    

    .member-card:hover .info {
        transform: translateY(35%); /* 마우스를 올리면 info 올라오기 */
    }





    .site-footer .container .row {
        display: inline; /* 체크 표시와 텍스트를 가로로 배치 */
        justify-content: space-between; /* 열 사이의 간격을 균등하게 배치 */
    }

    footer .col-ma-12 p{
        max-width: 50px; /* 원하는 최대 너비 설정 */
    }

    .large-screen {
        display: none; /* 화면이 작아지면 이 p 태그 숨기기 */
    }
    .small-screen {
        display: block; /* 화면이 작아지면 이 p 태그 보이기 */
    }


    .close {
        top: 15%; /* 상단에서 20px 아래로 위치 */
    }


    

    .site-footer .map_768 {
        width: 100%; 
        height: 350px;
        margin-bottom: 40px;
    }

    .site-footer .map_max {
        display: none; /* 화면이 작아지면 이 p 태그 숨기기 */
    }
    .site-footer .row .map_768 {
        display: block; /* 화면이 작아지면 이 p 태그 보이기 */
    }
}