@charset "UTF-8";

/* 전역 스타일 */
body, html {
    margin: 0;
    padding: 0;
    background: black;
    color: white;
    height: 100vh;
    overflow: hidden;
    font-family: "ヒラギノ明朝 ProN","MS 明朝",serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
    cursor: none; /* 기본 커서 숨김 */
    scroll-behavior: smooth;
}


.styled-hr {
    text-align: center;
    border: none; /* 기본 테두리 제거 */
    height: 1px; /* 선의 두께 설정 */
    background-color: white; /* 선의 색상 설정 */
    margin: 20px 0; /* 위아래 여백 설정 */
    transform: scaleX(0);
    filter: blur(10px);
    transform-origin: left;
    transition: transform 1.2s ease-out, filter 1.2s ease-out;
  }


  .styled-hr.visible {
    transform: scaleX(1);
    filter: blur(0);
  }

  .blur-content {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1s ease-out, filter 1s ease-out;
  }

  .blur-content.visible {
    opacity: 1;
    filter: blur(0);
  }


  .blur-contentfast {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.6s ease-out, filter 0.6s ease-out;
  }


  .blur-contentfast.visible {
    opacity: 1;
    filter: blur(0);
  }







/* 모바일 및 태블릿 환경에서 커서 숨기기 */
@media (max-width: 768px) {
    body, html {
      cursor: default; /* 모바일과 태블릿에서는 기본 커서 사용 */
    }
  
    .cursor {
      display: none; /* 커서 효과 숨기기 */
    }





.l-mainvisual_scroll {
    text-decoration: none;
    position: absolute;
    z-index: 10;
    left: calc(50% - 48px);
    bottom: 0;
    display: block;
    height: 96px;
    -webkit-transition: opacity 1.2s cubic-bezier(0, 0.55, 0.45, 1) 2s,-webkit-transform 1.2s cubic-bezier(0, 0.55, 0.45, 1) 1.2s;
    transition: opacity 1.2s cubic-bezier(0, 0.55, 0.45, 1) 2s,-webkit-transform 1.2s cubic-bezier(0, 0.55, 0.45, 1) 1.2s;
    transition: opacity 1.2s cubic-bezier(0, 0.55, 0.45, 1) 2s,transform 1.2s cubic-bezier(0, 0.55, 0.45, 1) 1.2s;
    transition: opacity 1.2s cubic-bezier(0, 0.55, 0.45, 1) 2s,transform 1.2s cubic-bezier(0, 0.55, 0.45, 1) 1.2s,-webkit-transform 1.2s cubic-bezier(0, 0.55, 0.45, 1) 1.2s
}

.l-mainvisual_scroll_text {
    display: block;
    color: #fff;
    font-size: 12px
}

.l-mainvisual_scroll_bar {
    position: absolute;
    left: 50%;
    top: 32px;
    width: 1px;
    height: calc(100% - 32px);
    overflow: hidden
}

.l-mainvisual_scroll_bar::after,.l-mainvisual_scroll_bar::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 96px;
    z-index: 2
}

.l-mainvisual_scroll_bar::before {
    -webkit-animation: scroll 2.4s infinite normal;
    animation: scroll 2.4s infinite normal;
    background-color: #fff;
    z-index: 11
}

.l-mainvisual_scroll_bar::after {
    background-color: rgba(255,255,255,.2)
}

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    15% {
        -webkit-transform: translate3d(0, -98%, 0);
        transform: translate3d(0, -98%, 0)
    }

    85% {
        -webkit-transform: translate3d(0, 98%, 0);
        transform: translate3d(0, 98%, 0)
    }

    to {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    15% {
        -webkit-transform: translate3d(0, -98%, 0);
        transform: translate3d(0, -98%, 0)
    }

    85% {
        -webkit-transform: translate3d(0, 98%, 0);
        transform: translate3d(0, 98%, 0)
    }

    to {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.l-mainvisual_scroll:hover .l-mainvisual_scroll_bar::before {
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}








/* 공통 페이지 스타일 */
.page {
    display: none; /* 기본적으로 숨김 */
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0; /* 초기 상태에서 투명 */
    transition: opacity 0.5s ease; /* 부드러운 전환 효과 */
    
}


.page:not(.hidden) {
    display: flex; /* 활성화된 페이지만 보임 */
    opacity: 1; /* 투명도 변경으로 나타남 */
}

.hidden {
    opacity: 0; /* 숨겨질 때 투명도 */
}




/* 사운드 페이지 */
#sound-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 0.8rem;
    line-height:60%
}

#sound-page p{
}

#sound-page .sound-buttons button {
    font-family: "ヒラギノ明朝 ProN","MS 明朝",serif; /* 1 */
    margin: 10px 10px; /* 버튼 간격 조절 */
    padding: 10px 60px;
    font-size: 0.8rem;
    color: white;
    background: transparent;
    border: 0.5px solid white;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

#sound-page .sound-buttons button:hover {
    opacity: 0.5;
}

.logo img {
    width: 68%;
    height: auto;
    margin-bottom: 30px;
}


.intro-text{
    margin-bottom: 20px;
}






  
  /* 메인 페이지 */
  #main-page {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  


  .main-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: auto; /* 터치 이벤트를 허용 */
    touch-action: auto; /* 터치 동작을 허용 */
}

.main-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: auto; /* 터치 이벤트를 허용 */
    touch-action: auto; /* 터치 동작을 허용 */
}


  
/* 상단 콘텐츠 (fixed 대신 절대 위치로 변경) */
.overlay-content {
    position: absolute; /* fixed -> absolute로 변경 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1; /* 콘텐츠가 비디오 위에 오도록 */
    transition: opacity 0.5s ease, transform 0.5s ease; /* 페이드 아웃 및 슬라이드 아웃 애니메이션 */
  }
  
  /* 사라질 때 (스크롤을 내리면) */
  .overlay-content.hidden {
    opacity: 0; /* 투명하게 */
    transform: translate(-50%, -150%); /* 위로 슬라이드 */
  }
  
  

  
  .overlay-content .logo img {
    width: 16rem;
    margin-bottom: 30px;
  }
  
  .overlay-content h2 {
    font-size: 1rem;
  }

  /* 하단 스크롤 콘텐츠 */
  .scroll-content {
    width: 100%;
    padding: 120px 0px;
    background-color: black;
    color: white;
    text-align: center;
    line-height: 1.8;
    margin-top: 100vh; /* 스크롤을 내리기 전 콘텐츠가 보이지 않도록 */
    z-index: 10;
    min-height: 100vh; /* 최소 높이: 화면 높이 */
    height: fit-content; /* 콘텐츠 길이에 맞게 자동 조정 */
    box-sizing: border-box; /* 패딩 포함 높이 계산 */
  }
  .scroll-content h2 {
    font-size: 1rem;
    line-height: 100%;
  }
  
  .scroll-content p {
    font-size: 0.8rem;
    margin: 100 auto;
  }

  .scroll-content img {
    width: 60%;
   
  }


  .split-container {
    display: none;
  }

  .split-container_sp{
    justify-content: space-between;
    align-items: flex-start; /* 상단에 고정 */
    padding: 40px 5%;
    max-width: 1080px;
    margin: auto;
  }
  
  .left-section,
  .right-section {
  }
  
  .left-section_sp {
    text-align: left;
  }
  
  .right-section_sp {
    text-align: left; /* 필요하면 right로 변경 가능 */
    color: rgb(170, 170, 170);
    font-size: 0.6rem;
    margin-top: 30px;
  }
  
  
/* 비디오 스타일 */
  .tsvideo{
    width:90% ;
    /* min-width: 420px; */
    /* height:80%; */
    max-width: 1080px;
  }
/* 전체 페이지 스타일 */




#main-page .enter_button {
    font-family: "ヒラギノ明朝 ProN","MS 明朝",serif; /* 1 */
    margin-top: 50px;
    width: 160px;
    height: 48px;
    /* padding: 10px 60px; */
    font-size: 0.8rem;
    color: white;
    background: transparent;
    border: 0.5px solid white;
    cursor: pointer;
    transition: opacity 0.3s ease;
    pointer-events:all
}

#main-page .enter_button:hover {
    opacity: 0.5;
}



.bottom_enter_button {
    font-family: "ヒラギノ明朝 ProN","MS 明朝",serif; /* 1 */
    margin-top: 60px;
    width: 160px;
    height: 48px;
    /* padding: 10px 60px; */
    font-size: 0.8rem;
    color: white;
    background: transparent;
    border: 0.5px solid white;
    cursor: pointer;
    transition: opacity 0.3s ease;
    pointer-events:all
}




.bottom_enter_button:hover {
    opacity: 0.5;
}



/* 네비게이션 바 스타일 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
  }
  
  .navbar .logo {
  }
  
  .navbar .sound-container {
    margin-right: 24px; /* 우측 여백 */
    margin-top: 40px;   /* 상단 여백 */
  }


  /* 로고 스타일 */
  .nav_logo img {
    margin-left: 20px; /* 좌측 여백 */
    margin-top: 40px;  /* 상단 여백 */
    width: 92px;
    height: auto
  }



/* 사운드 버튼 컨테이너 */
.sound-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* width: 30px; */
    /* margin: 30px auto; */
    cursor: pointer;
  }
  
  /* 움직이는 바들 */
  .bars {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
  }
  
  .bar {
    width: 3px;
    height: 16px;
    background-color: white;
    animation: bounce 1s infinite ease-in-out;
  }
  
  /* 바 애니메이션 */
  @keyframes bounce {
    0%, 100% {
      transform: scaleY(0.3);
    }
    50% {
      transform: scaleY(1);
    }
  }
  
  .bar:nth-child(1) {
    animation-delay: 0s;
  }
  
  .bar:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .bar:nth-child(3) {
    animation-delay: 0.4s;
    
  }
  
  .bar:nth-child(4) {
    animation-delay: 0.6s;
  }
  
  .bar:nth-child(5) {
    animation-delay: 0.8s;
  }
  
  /* 텍스트 스타일 */
  .sound-text {
    font-size: 0.6rem;
    color: white;
    font-family: "YuMincho", serif;
  }
  
  /* OFF 상태 스타일 */
  .bars.off .bar {
    animation: none;
    background-color: gray;
  }
  
  .sound-text.off {
    color: gray;
  }
  

.sub_bgvideo{
    padding-top: 60px;
    width: 100%;
    max-width: 1080px;
    margin: auto;
}

.sub_bgvideo video{
    width: 100%;
}





.details_container{
    text-align: left;
    padding: 40px 5%;
}


.contact_container {
    margin: auto;
    max-width: 1080px;
    padding: 0 5%;
    display: flex;
    flex-direction: column;
}

.contact_area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    gap: 20px; /* 요소 간 간격 조정 */
    padding: 12px 0;
}





/* 공통 부모 요소에 호버 시 하위 요소에 스타일 적용 */
.contact_area:hover .arrow {
    transform: rotate(45deg) translate(10px, -10px); /* 화살표 이동 */
    opacity: 0; /* 화살표 투명화 */
  }
  
  .contact_area:hover .contact {
    opacity: 0.5; /* 텍스트 투명도 조절 */
  }
  
 
  
  
  .contact-link {
    text-decoration: none; /* 밑줄 제거 */
    color: inherit; /* 부모 요소의 색상 상속 */
    cursor: pointer; /* 클릭 가능한 커서 모양 */
    transition: opacity 0.3s ease; /* opacity 변화를 0.3초 동안 부드럽게 */
    display: flex;
  }
  
  .contact-link:hover {
    opacity: 0.5;
  }
  .contact-link img{
    margin-right: 30px;
    width: 180px;
    height: 60px;
  }
  .contact {
    text-align: left;
    /* font-size: 4rem; */
    color: white;
    transition: opacity 0.3s ease; /* 부드러운 전환 효과 */
  }
  
  /* 정사각형 컨테이너 */
  .square {
    margin-left: 0px;
    position: relative;
    width: 60px;  /* 원하는 크기로 설정 */
    height: 60px; /* 원하는 크기로 설정 */
    border: 1px solid rgb(255, 255, 255); /* 테두리 색상과 두께 */
    background-color: transparent; /* 배경 투명 */
    display: flex;
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center;     /* 세로 중앙 정렬 */
    overflow: hidden; /* 자식 요소가 넘치지 않도록 */
  }
  
  /* 화살표 */
  .arrow {
    width: 20px; /* 화살표 크기 */
    height: 20px; /* 화살표 크기 */
    border-top: 2px solid rgb(255, 255, 255); /* 윗변 테두리 */
    border-right: 2px solid rgb(255, 255, 255); /* 오른쪽 테두리 */
    transform: rotate(45deg); /* 45도 회전하여 우상향 화살표 모양 */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* 호버 시 애니메이션 */
  }
  


.copy{
    font-size: 0.6rem;
    padding: 0px 5%;
    max-width: 1080px;
    text-align: left;
    margin: auto;
    /* display: flex; */
    justify-content: space-between;
}


.insta img{
    width: 20px;
    /* margin-left: 10px; */
    margin-top: 12px;
    transition: opacity 0.3s ease; /* opacity 변화를 0.3초 동안 부드럽게 */
    
}

.insta:hover {
    opacity: 0.5;
    transition: opacity 0.3s ease; /* opacity 변화를 0.3초 동안 부드럽게 */
}









/* 사진 페이지 */
#photo-page {
    position: relative; /* 스크롤바 위치를 기준으로 설정 */
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: black;
    padding-top: 60px; /* 네비게이션과 사진 갤러리 간의 여백 */
    box-sizing: border-box;
}

.top_button{
    position: fixed;
    top: 18px;
    border: 0.5px solid white;
    padding: 10px 18px;
    font-size: 0.6rem;
  }


.photo-gallery-container {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden; /* 상하 스크롤 방지 */
    scroll-snap-type: x mandatory;
    display: flex;
    align-items: center;
    padding: 0 20px;
    scrollbar-width: none; /* Firefox 스크롤바 숨기기 */
}

.photo-gallery-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari 스크롤바 숨기기 */
}

.photo-gallery {
    display: flex;
    height: 100%;
    scroll-behavior: smooth;
}

.photo-item {
    margin-right: 24px; /* 사진 사이 간격 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 텍스트가 항상 보이게 */
    text-align: center;
    min-height: 180px; /* 사진과 텍스트 전체 높이 최소값 */
}

.photo-item img {
    width: auto; /* 가로 비율 유지 */
    max-height: calc(100vh - 280px); /* 네비게이션과 하단 여백 및 텍스트 공간 고려 */
    object-fit: contain; /* 사진이 왜곡되지 않도록 설정 */
    margin: 0 auto;
    border: none;
}

.photo-title {
    margin: 5px 0; /* 텍스트 간격 조정 */
    font-size: 0.9rem; /* 텍스트 크기 조정 */
    line-height: 1.2; /* 줄 간격 조정 */
    color: white; /* 텍스트 색상 */
}

.photo-name{
    font-size: 0.7rem; /* 텍스트 크기 조정 */
    color: rgb(202, 202, 202); /* 텍스트 색상 */
}

.scroll-bar-container {
    position: absolute;
    bottom: 20px; /* 페이지 하단에서 20px 위 */
    left: 50%;
    transform: translateX(-50%); /* 가로 중앙 정렬 */
    width: 90%; /* 스크롤바 전체 폭 */
    height: 1px; /* 스크롤바 두께 */
    background-color: #333; /* 전체 바 색상 */
    border-radius: 5px; /* 곡선 처리 */
    overflow: hidden; /* 내부 바가 영역을 넘지 않도록 */
}

.scroll-bar {
    position: absolute;
    height: 100%; /* 스크롤바 높이 (두께) */
    width: 10%; /* 현재 영역을 나타낼 바의 초기 너비 */
    background-color: gray; /* 현재 스크롤 영역 색상 */
    transform: translateX(0); /* 초기 위치: 왼쪽 */
    border-radius: 5px;
    transition: transform 0.1s ease-in-out; /* 부드럽게 이동 */
}

/* Back to Top Button Next to Copyright */
.back-to-top-button {
    display: inline-block;
    margin-left: 20px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.back-to-top-button img {
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
}


.back-to-top-button:hover {
    opacity: 0.5;
    transition: opacity 0.3s ease; /* opacity 변화를 0.3초 동안 부드럽게 */
}




}

















/* //////////////////////////////////////////////////////////////////////////////////////////// */

















  
  /* PC에서만 커서 효과 표시 */
  @media (min-width: 769px) {
    body, html {
      cursor: none; /* 기본 커서 숨기기 */
    }
  
    .cursor {
      display: block; /* 커서 효과 표시 */
    }



.l-mainvisual_scroll {
    text-decoration: none;
    position: absolute;
    z-index: 10;
    left: calc(50% - 48px);
    bottom: 0;
    display: block;
    height: 96px;
    -webkit-transition: opacity 1.2s cubic-bezier(0, 0.55, 0.45, 1) 2s,-webkit-transform 1.2s cubic-bezier(0, 0.55, 0.45, 1) 1.2s;
    transition: opacity 1.2s cubic-bezier(0, 0.55, 0.45, 1) 2s,-webkit-transform 1.2s cubic-bezier(0, 0.55, 0.45, 1) 1.2s;
    transition: opacity 1.2s cubic-bezier(0, 0.55, 0.45, 1) 2s,transform 1.2s cubic-bezier(0, 0.55, 0.45, 1) 1.2s;
    transition: opacity 1.2s cubic-bezier(0, 0.55, 0.45, 1) 2s,transform 1.2s cubic-bezier(0, 0.55, 0.45, 1) 1.2s,-webkit-transform 1.2s cubic-bezier(0, 0.55, 0.45, 1) 1.2s
}

.l-mainvisual_scroll_text {
    display: block;
    color: #fff;
    font-size: 12px
}

.l-mainvisual_scroll_bar {
    position: absolute;
    left: 50%;
    top: 32px;
    width: 1px;
    height: calc(100% - 32px);
    overflow: hidden
}

.l-mainvisual_scroll_bar::after,.l-mainvisual_scroll_bar::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 96px;
    z-index: 2
}

.l-mainvisual_scroll_bar::before {
    -webkit-animation: scroll 2.4s infinite normal;
    animation: scroll 2.4s infinite normal;
    background-color: #fff;
    z-index: 11
}

.l-mainvisual_scroll_bar::after {
    background-color: rgba(255,255,255,.2)
}

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    15% {
        -webkit-transform: translate3d(0, -98%, 0);
        transform: translate3d(0, -98%, 0)
    }

    85% {
        -webkit-transform: translate3d(0, 98%, 0);
        transform: translate3d(0, 98%, 0)
    }

    to {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    15% {
        -webkit-transform: translate3d(0, -98%, 0);
        transform: translate3d(0, -98%, 0)
    }

    85% {
        -webkit-transform: translate3d(0, 98%, 0);
        transform: translate3d(0, 98%, 0)
    }

    to {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.l-mainvisual_scroll:hover .l-mainvisual_scroll_bar::before {
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

/* 공통 페이지 스타일 */
.page {
    display: none; /* 기본적으로 숨김 */
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0; /* 초기 상태에서 투명 */
    transition: opacity 0.5s ease; /* 부드러운 전환 효과 */
    
}

.page:not(.hidden) {
    display: flex; /* 활성화된 페이지만 보임 */
    opacity: 1; /* 투명도 변경으로 나타남 */
}

.hidden {
    opacity: 0; /* 숨겨질 때 투명도 */
}




/* 사운드 페이지 */
#sound-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 0.8rem;
}

#sound-page .sound-buttons button {
    font-family: "ヒラギノ明朝 ProN","MS 明朝",serif; /* 1 */
    margin: 10px 10px; /* 버튼 간격 조절 */
    padding: 10px 60px;
    font-size: 0.8rem;
    color: white;
    background: transparent;
    border: 0.5px solid white;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

#sound-page .sound-buttons button:hover {
    opacity: 0.5;
}

.logo img {
    width: 380px;
    height: auto;
    margin-bottom: 30px;
}









  
  /* 메인 페이지 */
  #main-page {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  
  .main-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none; /* 기본값: 이벤트를 차단 */
    touch-action: none; /* 기본값: 터치 동작을 차단 */
}

.main-video video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none; /* 기본값: 이벤트를 차단 */
    touch-action: none; /* 기본값: 터치 동작을 차단 */
}
  
  /* 상단 콘텐츠 */
.overlay-content {
    position: absolute; /* fixed -> absolute로 변경 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1; /* 콘텐츠가 비디오 위에 오도록 */
    transition: opacity 0.5s ease, transform 0.5s ease; /* 페이드 아웃 및 슬라이드 아웃 애니메이션 */
  }
  
  /* 사라질 때 (스크롤을 내리면) */
  .overlay-content.hidden {
    opacity: 0; /* 투명하게 */
    transform: translate(-50%, -150%); /* 위로 슬라이드 */
  }
  
  

  
  .overlay-content .logo img {
    width: 24rem;
    margin-bottom: 30px;
  }
  
  .overlay-content h2 {
    font-size: 0.8rem;
  }

  /* 하단 스크롤 콘텐츠 */
  .scroll-content {
    width: 100%;
    padding: 100px 30px;
    background-color: black;
    color: white;
    text-align: center;
    line-height: 1.8;
    margin-top: 100vh; /* 스크롤을 내리기 전 콘텐츠가 보이지 않도록 */
    z-index: 10;
    min-height: 100vh; /* 최소 높이: 화면 높이 */
    height: fit-content; /* 콘텐츠 길이에 맞게 자동 조정 */
    box-sizing: border-box; /* 패딩 포함 높이 계산 */
  }
  .scroll-content h2 {
    font-size: 1.2rem;
    line-height: 100%;
  }
  
  .scroll-content p {
    font-size: 0.8rem;
    margin: 100 auto;
  }

  .split-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 상단에 고정 */
    padding: 40px 5%;
    max-width: 1080px;
    margin: auto;
  }
  
  .left-section,
  .right-section {
    width: 45%; /* 좌우 각각 45% 너비 */
    line-height: 1.8; /* 줄 간격 */
  }
  
  .left-section {
    text-align: left;
  }
  
  .right-section {
    text-align: left; /* 필요하면 right로 변경 가능 */
    color: rgb(170, 170, 170);
    font-size: 0.7rem;
    margin-top: 14px;
  }
  
  .scroll-content img {
    width: 60%;
    max-width: 480px;
   
  }
  
/* 비디오 스타일 */
  .tsvideo{
    width:40% ;
    /* min-width: 420px; */
    /* height:80%; */
    max-width: 1080px;
  }
/* 전체 페이지 스타일 */
.split-container_sp{
    display: none;
}



#main-page .enter_button {
    font-family: "ヒラギノ明朝 ProN","MS 明朝",serif; /* 1 */
    margin-top: 50px;
    padding: 10px 60px;
    font-size: 0.8rem;
    color: white;
    background: transparent;
    border: 0.5px solid white;
    cursor: pointer;
    transition: opacity 0.3s ease;
    pointer-events:all
}

#main-page .enter_button:hover {
    opacity: 0.5;
}


/* 네비게이션 바 스타일 */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
  }
  
  .navbar .logo {
  }
  
  .navbar .sound-container {
    margin-right: 60px; /* 우측 여백 */
    margin-top: 60px;   /* 상단 여백 */
  }


  /* 로고 스타일 */
  .nav_logo img {
    margin-left: 40px; /* 좌측 여백 */
    margin-top: 60px;  /* 상단 여백 */
    width: 120px;
    height: auto
  }



/* 사운드 버튼 컨테이너 */
.sound-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* width: 30px; */
    /* margin: 30px auto; */
    cursor: pointer;
  }
  
  /* 움직이는 바들 */
  .bars {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
  }
  
  .bar {
    width: 3px;
    height: 16px;
    background-color: white;
    animation: bounce 1s infinite ease-in-out;
  }
  
  /* 바 애니메이션 */
  @keyframes bounce {
    0%, 100% {
      transform: scaleY(0.3);
    }
    50% {
      transform: scaleY(1);
    }
  }
  
  .bar:nth-child(1) {
    animation-delay: 0s;
  }
  
  .bar:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .bar:nth-child(3) {
    animation-delay: 0.4s;
    
  }
  
  .bar:nth-child(4) {
    animation-delay: 0.6s;
  }
  
  .bar:nth-child(5) {
    animation-delay: 0.8s;
  }
  
  /* 텍스트 스타일 */
  .sound-text {
    font-size: 0.6rem;
    color: white;
    font-family: "YuMincho", serif;
  }
  
  /* OFF 상태 스타일 */
  .bars.off .bar {
    animation: none;
    background-color: gray;
  }
  
  .sound-text.off {
    color: gray;
  }
  

.sub_bgvideo{
    padding-top: 60px;
    width: 100%;
    max-width: 1080px;
    margin: auto;
}

.sub_bgvideo video{
    width: 100%;
}




.bottom_enter_button {
    font-family: "ヒラギノ明朝 ProN","MS 明朝",serif; /* 1 */
    margin-top: 120px;
    padding: 10px 60px;
    font-size: 0.8rem;
    color: white;
    background: transparent;
    border: 0.5px solid white;
    cursor: pointer;
    transition: opacity 0.3s ease;
    pointer-events:all
}

.bottom_enter_button:hover {
    opacity: 0.5;
}




.details_container{
    text-align: left;
    padding: 40px 5%;
}


.contact_container {
    margin: auto;
    max-width: 1080px;
    padding: 0 5%;
    display: flex;
    flex-direction: column;
}

.contact_area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    gap: 20px; /* 요소 간 간격 조정 */
    padding: 12px 0;
}





/* 공통 부모 요소에 호버 시 하위 요소에 스타일 적용 */
.contact_area:hover .arrow {
    transform: rotate(45deg) translate(10px, -10px); /* 화살표 이동 */
    opacity: 0; /* 화살표 투명화 */
  }
  
  .contact_area:hover .contact {
    opacity: 0.5; /* 텍스트 투명도 조절 */
  }
  
 
  
  .custom-hr {
    text-align: center;
    border: none; /* 기본 테두리 제거 */
    height: 1px; /* 선의 두께 설정 */
    background-color: white; /* 선의 색상 설정 */
    margin: 20px 0; /* 위아래 여백 설정 */
  }
  
  .contact-link {
    text-decoration: none; /* 밑줄 제거 */
    color: inherit; /* 부모 요소의 색상 상속 */
    cursor: pointer; /* 클릭 가능한 커서 모양 */
    transition: opacity 0.3s ease; /* opacity 변화를 0.3초 동안 부드럽게 */
    display: flex;
  }
  
  .contact-link:hover {
    opacity: 0.5;
  }
  .contact-link img{
    margin-right: 30px;
    width: 200px;
  }
  .contact {
    text-align: left;
    /* font-size: 4rem; */
    color: white;
    transition: opacity 0.3s ease; /* 부드러운 전환 효과 */
  }
  
  /* 정사각형 컨테이너 */
  .square {
    margin-left: 0px;
    position: relative;
    width: 60px;  /* 원하는 크기로 설정 */
    height: 60px; /* 원하는 크기로 설정 */
    border: 1px solid rgb(255, 255, 255); /* 테두리 색상과 두께 */
    background-color: transparent; /* 배경 투명 */
    display: flex;
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center;     /* 세로 중앙 정렬 */
    overflow: hidden; /* 자식 요소가 넘치지 않도록 */
  }
  
  /* 화살표 */
  .arrow {
    width: 20px; /* 화살표 크기 */
    height: 20px; /* 화살표 크기 */
    border-top: 2px solid rgb(255, 255, 255); /* 윗변 테두리 */
    border-right: 2px solid rgb(255, 255, 255); /* 오른쪽 테두리 */
    transform: rotate(45deg); /* 45도 회전하여 우상향 화살표 모양 */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* 호버 시 애니메이션 */
  }
  


.copy{
    font-size: 0.6rem;
    padding: 0px 5%;
    max-width: 1080px;
    text-align: left;
    margin: auto;
    display: flex;
    justify-content: space-between;
}


.insta img{
    width: 24px;
    /* margin-left: 10px; */
    /* margin-top: 20px; */
    transition: opacity 0.3s ease; /* opacity 변화를 0.3초 동안 부드럽게 */
    
}

.insta:hover {
    opacity: 0.5;
    transition: opacity 0.3s ease; /* opacity 변화를 0.3초 동안 부드럽게 */
}









/* 사진 페이지 */
#photo-page {
    position: relative; /* 스크롤바 위치를 기준으로 설정 */
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: black;
    padding-top: 60px; /* 네비게이션과 사진 갤러리 간의 여백 */
    box-sizing: border-box;
}


.top_button{
    position: fixed;
    top: 32px;
    border: 0.5px solid white;
    padding: 10px 32px;
    font-size: 0.8rem;
  }


.photo-gallery-container {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden; /* 상하 스크롤 방지 */
    scroll-snap-type: x mandatory;
    display: flex;
    align-items: center;
    padding: 0 20px;
    scrollbar-width: none; /* Firefox 스크롤바 숨기기 */
}

.photo-gallery-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari 스크롤바 숨기기 */
}

.photo-gallery {
    display: flex;
    height: 100%;
    scroll-behavior: smooth;
}

.photo-item {
    margin-right: 24px; /* 사진 사이 간격 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 텍스트가 항상 보이게 */
    text-align: center;
    min-height: 180px; /* 사진과 텍스트 전체 높이 최소값 */
}

.photo-item img {
    width: auto; /* 가로 비율 유지 */
    max-height: calc(100vh - 280px); /* 네비게이션과 하단 여백 및 텍스트 공간 고려 */
    object-fit: contain; /* 사진이 왜곡되지 않도록 설정 */
    margin: 0 auto;
    border: none;
}

.photo-title {
    margin: 5px 0; /* 텍스트 간격 조정 */
    font-size: 0.9rem; /* 텍스트 크기 조정 */
    line-height: 1.2; /* 줄 간격 조정 */
    color: white; /* 텍스트 색상 */
}

.photo-name{
    font-size: 0.7rem; /* 텍스트 크기 조정 */
    color: rgb(202, 202, 202); /* 텍스트 색상 */
}

.scroll-bar-container {
    position: absolute;
    bottom: 20px; /* 페이지 하단에서 20px 위 */
    left: 50%;
    transform: translateX(-50%); /* 가로 중앙 정렬 */
    width: 90%; /* 스크롤바 전체 폭 */
    height: 1px; /* 스크롤바 두께 */
    background-color: #333; /* 전체 바 색상 */
    border-radius: 5px; /* 곡선 처리 */
    overflow: hidden; /* 내부 바가 영역을 넘지 않도록 */
}

.scroll-bar {
    position: absolute;
    height: 100%; /* 스크롤바 높이 (두께) */
    width: 10%; /* 현재 영역을 나타낼 바의 초기 너비 */
    background-color: gray; /* 현재 스크롤 영역 색상 */
    transform: translateX(0); /* 초기 위치: 왼쪽 */
    border-radius: 5px;
    transition: transform 0.1s ease-in-out; /* 부드럽게 이동 */
}

/* Back to Top Button Next to Copyright */
.back-to-top-button {
    display: inline-block;
    margin-left: 20px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.back-to-top-button img {
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
}


.back-to-top-button:hover {
    opacity: 0.5;
    transition: opacity 0.3s ease; /* opacity 변화를 0.3초 동안 부드럽게 */
}


  }
  

/* html{
    scroll-behavior: smooth;
} */
  
/* 커서 기본 스타일 */
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid white;
    background-color: transparent;
    pointer-events: none;
    transition: width 0.3s ease-out, height 0.3s ease-out; /* 크기 변화를 부드럽게 */
    z-index: 9999;
  }
  
  /* 커서 확대 스타일 */
  .cursor--hover {
    width: 60px; /* 원하는 크기로 확대 */
    height: 60px; /* 원하는 크기로 확대 */
  }