/* style.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    overflow-x: hidden;
}
header {
    background: url('배경이미지.jpg') no-repeat center center/cover;
    color: #fff;
    padding: 3rem 0;
    text-align: center;
    position: relative;
    width: 100%;
}
header h1 {
    position: relative;
    z-index: 1;
    font-size: 2rem;
}
header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
}
nav {
    background: #555;
    color: #fff;
    padding: 0.5rem 0;
    text-align: center;
    width: 100%;
}
nav a {
    color: #fff;
    margin: 0 1rem;
    text-decoration: none;
}
/*Project VTOL nav*/
.nav_VTOL{
    background: #320358;
    color: #fff;
    padding: 0.5rem 0;
    text-align: center;
    width: 100%;
}
.nav_VTOL a{
    color: #fff;
    margin: 0 1rem;
    text-decoration: none;
}

.container {
    margin: 2rem auto;
    background: #fff;
    padding: 2rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    max-width: 1200px;
    width: 90%;
    /*white-space: nowrap; /*줄바꿈제어*/
}
.container_off_grid_template_columns {
    margin: 2rem auto;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: grid;
    /*grid-template-columns: repeat(2, 1fr); 내용 가운데 나누기*/
    grid-gap: 1rem;
    max-width: 1200px;
    width: 90%;
    /*white-space: nowrap; /*줄바꿈제어*/
}
.container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1rem;
}
.container_off_grid_template_columns img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1rem;
}

.post {
margin-bottom: 2rem;
}
.post h2 {
color: #333;
}
.post p {
line-height: 1.6;
}

.posting {
margin-bottom: 2rem;
cursor: pointer;
}
.posting h2 {
color: #333;
}
.posting p {
line-height: 1.6;
}

.project-box {
    background: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    border: 2px solid #555;
    position: relative; /* 텍스트와 이미지가 겹치도록 하기 위해 position 설정 */
    width: 100%;
    overflow: hidden; /* 박스를 넘는 이미지를 숨기기 */
    cursor: pointer; /* 마우스 포인터를 손가락 형태로 변경 */
    transition: background-color 0.3s ease; /* 배경색 변화에 애니메이션 추가 */
}
.project-box:hover {
    background-color: #555; /* 호버 상태에서 배경색 변경 */
}



.project-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지 비율을 유지하며 박스에 딱 맞게 */
    opacity: 0.4; /* 투명도 설정 */
    transition: opacity 0.3s; /* hover 효과의 부드러운 전환 */
    position: absolute; /* 텍스트와 이미지가 겹치도록 하기 위해 position 설정 */
    top: 0;
    left: 0;
}

.project-box img:hover {
    opacity: 0.2; /* hover 시 투명도 증가 */
}

.project-box .text {
    position: absolute; /* 텍스트와 이미지가 겹치도록 하기 위해 position 설정 */
    top: 50%; /* 텍스트를 박스의 중앙에 위치 */
    left: 50%;
    transform: translate(-50%, -50%); /* 중앙 정렬 */
    font-size: 20px; /*텍스트 크기*/
    color: white; /* 텍스트 색상 */
    z-index: 1; /* 텍스트가 이미지 위에 보이도록 설정 */
}



footer {
    text-align: center;
    padding: 1rem 0;
    background: #333;
    color: #fff;
    width: 100%;
}

/*사이드바 관련 CSS*/
.sidebar {
    position: fixed;
    top: 0;
    left: -500px;
    width: 250px;
    height: 100%;
    background: #333;
    color: #fff;
    padding: 1rem;
    transition: left 0.3s ease;
    z-index: 2;
    overflow-y: auto; /* 스크롤이 필요한 경우에만 스크롤바 표시 */

}
.sidebar h2 {
    text-align: center;
    margin-bottom: 1rem;
}
.sidebar ul {
    list-style-type: none;
    padding: 0;
}
.sidebar ul li {
    margin-bottom: 0.5rem;
}
.sidebar ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0.5rem;
    transition: background-color 0.3s;
}
.sidebar ul li a:hover {
    background-color: #777;
}
.dropdown-menu {
    display: none;
    background-color: #777;
    padding: 0.5rem;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.sidebar a {
    color: #fff;
    text-decoration: none;
    display: block;
    margin: 1rem 0;
}
.toggle-btn {
    position: fixed;
    top: 10px;
    left: 10px;
    background: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    z-index: 3;
}
.sidebar.open {
    left: 0;
}
.main-content {
    transition: transform 0.3s ease;
    width: 100%;
}
.main-content.shift {
    transform: translateX(250px);
}