/* BASIC css start */
/* 기본 스타일 */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
}

/* 이미지 컨테이너 설정 */
.intro-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;  /* 상하 여백 추가 */
}

/* 배경 이미지 스타일 */
.background-image {
    max-width: 80%;  /* 최대 너비 80%로 조정 */
    height: auto;   /* 비율 유지 */
    display: block; /* 여백 제거 */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    border-radius: 10px; /* 모서리를 둥글게 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 그림자 효과 추가 */
    margin-top: 50px; /* 상단에서 50px 띄우기 */
}

/* 반응형 설정 (모바일용) */
@media (max-width: 768px) {
    .background-image {
        max-width: 95%;  /* 모바일에서는 더 크게 표시 */
        margin-top: 30px; /* 모바일에서는 여백 조정 */
    }
}

/* 애니메이션 효과 */
.fade-in.visible {
    opacity: 1;
}

/* BASIC css end */