:root {
    --point-color: #003f88ee;
    --header-color: #003f88ee;
    --footer-color: #003f88ee;

    --header-text-color: #fff;
    --header-text-point-color: #fdc500;
    --footer-text-color: #c9c9c9;;
}

/* 글꼴 정의 */
@font-face {
    font-family: 'NanumSquare'; /* 글꼴에 부여할 이름 */
    src: url('fonts/NanumSquareR.ttf') format('truetype'); /* TTF 파일의 경우 */
    /* 또는 OTF 파일의 경우 */
    /* src: url('fonts/your-font.otf') format('opentype'); */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 글꼴 로딩 최적화 */
}

@font-face {
    font-family: 'NanumSquareB'; /* 글꼴에 부여할 이름 */
    src: url('fonts/NanumSquareB.ttf') format('truetype'); /* TTF 파일의 경우 */
    /* 또는 OTF 파일의 경우 */
    /* src: url('fonts/your-font.otf') format('opentype'); */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 글꼴 로딩 최적화 */
}

@font-face {
    font-family: 'NanumSquareEB'; /* 글꼴에 부여할 이름 */
    src: url('fonts/NanumSquareEB.ttf') format('truetype'); /* TTF 파일의 경우 */
    /* 또는 OTF 파일의 경우 */
    /* src: url('fonts/your-font.otf') format('opentype'); */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 글꼴 로딩 최적화 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-break: keep-all;
    font-family: 'NanumSquare', Arial, sans-serif;
}

html {
    width: 100vw !important; /* 뷰포트 너비의 100%를 강제 적용 */
    min-width: 100vw !important;
    overflow-x: hidden;
}
  
body {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
}


.image-home {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
}

.container {
    font-size: 0; /* 이미지 하단 공백 제거 */
}

.home-image-container {
    position: relative;
    z-index: 1;
}

.home-image-container::after {
    content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.3); /* 투명도 조절 */
   z-index: 1;
} 

.point-color {
    color: var(--point-color);
}


@media (max-width: 1024px) {
    .home-image-container {
        position: relative;
    }

    #image-home {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: right center;
    }
}