@charset "utf-8";
.slide-bt {position: relative;width: 100%;height: auto;overflow: hidden;background-size: cover;background-position: center;top:0px;}
.video-container {
    width: 100%;
    height: 250px;       /* 높이를 고정 */
    position: relative;
    overflow: hidden;
}

.background-video,
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;        /* 컨테이너 높이에 맞추기 */
    object-fit: cover;   /* 영상 */
    background-size: cover; /* 이미지 */
    background-position: center;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
#media-overlay {position: absolute;bottom: 20%;left: 5%;color: #fff;z-index: -1;max-width: 90%;text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);}
#media-container {position: absolute;top: 50%;left: 50%;width: 100%; /* 너비 설정 */transform: translate(-50%, -50%);text-align: center;color: #fff;z-index: 0;}

@keyframes slide-in-top {0% {transform: translateX(100%);opacity: 0;}100% {transform: translateX(0);opacity: 1;}}

@keyframes slide-out {
    0% {
        transform: translateX(0); /* 현재 위치 */
    }
    100% {
        transform: translateX(-100%); /* 화면 밖 왼쪽 */
    }
}
#media-title, #media-content {animation: slide-in-top 2.5s forwards; }
#media-title {font-size: 1.4rem;color: #fff;z-index: -1;text-align: center;animation-delay: 2.5s; margin-top: 0px;margin-bottom: 0px;
    font-weight: bold;
    text-shadow: 
        -1px -1px 0 rgb(63, 63, 63),  
         1px -1px 0 rgb(63, 63, 63),  
        -1px  1px 0 rgb(63, 63, 63),  
         1px  1px 0 rgb(63, 63, 63);  /* 네 방향으로 검은색 그림자 효과 */
}
@keyframes grow-shrink-width {0%, 100% {transform: scaleX(1);}10% {transform: scaleX(0);}}
.separator {height: 2px;background-color: rgba(255, 255, 255, 0.5);margin: 20px 0;width: 100%;
    transform-origin: center; /* 중심에서 시작하도록 설정 */animation: grow-shrink-width 10s infinite;}


@keyframes fade-in-top {0% {opacity: 0;}100% {opacity: 1;}}
#media-content {animation: fade-in-top 3.5s forwards; opacity: 0; 
    animation-delay: 10s; font-size: 2.5em;color: #fff;z-index: -1;text-align: center;
    font-weight: bold;
    text-shadow: 
        -1px -1px 0 rgb(63, 63, 63),  
         1px -1px 0 rgb(63, 63, 63),  
        -1px  1px 0 rgb(63, 63, 63),  
         1px  1px 0 rgb(63, 63, 63);  /* 네 방향으로 검은색 그림자 효과 */
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999; 
  pointer-events: none; /* 클릭 방해 안 되게 */
}


@media only screen and (max-width: 768px) {
/* .video-container {height: 50vh;} */
.background-video,
.background-image {height: 100%;}
#link-container {flex-direction: column;align-items: center;bottom: 10px;width: 100%;}
/* .sns_info {display: none;} */
/* 모두가로 배치할때 .sns-list {gap: 10px;justify-content: center;}
.sns-item {max-width: 100%;}
.sns-title {font-size: 14px;}
.sns_info {font-size: 12px;} */
.sns-list {display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;}
.sns-item {width: calc(50% - 10px); max-width: 100%;text-align: center;}
.sns-item-url img {width: 40px;height: 40px;}

#media-container {width: 100%;left: 0;transform: translate(0, -50%);}
#media-title {text-align: center;font-size: 1.5em;}
#media-content {font-size: 1.5em;text-align: center;}
}
/* 상단 배너광고 종료 */
/* 경로 위치바 */
.bo_path_bar {width: 100%;max-width: 100%;margin: 0px auto; padding: 15px;background: rgba(109, 109, 109, 0.2);border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);text-align: center;margin-bottom:0px;color: #333333;
}
.path-bar a {color: #2e2e2e !important;text-decoration: none; /* 밑줄 제거 */}
.path-bar a:hover {color: #dddddd;}
/* 다크모드 적용 */
.dark-mode .bo_path_bar {
    background: rgba(50, 50, 50, 0.3); /* 다크모드 배경 */
    color: #eeeeee;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.dark-mode .path-bar a {
    color: #eeeeee !important; /* 링크 색상 */
}

.dark-mode .path-bar a:hover {
    color: #ff6b81; /* 다크모드 호버 색상 */
}
/* 기본 라이트 모드 */
.bo_path_bar {
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    font-weight: bold;
    padding: 10px 0;
}

.bo_path_bar a {
    color: var(--text-color);
    text-decoration: none; /* 밑줄 제거 */
}

.bo_path_bar a:hover {
    color: #3a8afd; /* 호버 색상 */
}

/* 다크모드 적용 */
.dark-mode .bo_path_bar {
    background: #121212; /* 다크 모드 배경 */
    color: var(--text-color);
}

.dark-mode .bo_path_bar a {
    color: var(--text-color);
}

.dark-mode .bo_path_bar a:hover {
    color: #1e90ff; /* 다크모드용 호버 색상 */
}

/* 필요하면 path-bar 안쪽 요소 스타일링 */
.bo_path_bar .path-bar {
    display: flex;
    align-items: center;
    gap: 5px; /* 아이콘과 텍스트 간격 */
}

.bo_path_bar .path-bar i {
    margin-right: 5px;
    color: #ff3061; /* 홈 아이콘 색상, 필요 시 다크모드 변경 */
}

.dark-mode .bo_path_bar .path-bar i {
    color: #ff6b81; /* 다크모드용 아이콘 색상 */
}
/* 2차하단 메뉴 */
.bottom-submenu {width: 100%; display: flex; justify-content: center; background-color: #ce2b2c;margin-bottom:20px;}
.bottom-submenu ul {display: flex; padding: 0; margin: 0 auto; list-style: none; width: 100%; max-width: 900px;}
.bottom-submenu ul li {flex: 1; text-align: center;}
.bottom-submenu ul li a {display: block; padding: 10px 0; color: #fff; text-decoration: none; transition: 0.3s;}
.bottom-submenu ul li a.active,
.bottom-submenu ul li a:hover {background-color: #ffffff; color: #001536;}
/* @media screen and (max-width: 768px) {.bottom-submenu {display: none;}} */

@media only screen and (max-width: 768px) {
.sns-list {display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;}
.sns-item {width: calc(50% - 10px); max-width: 100%;text-align: center;}
.sns-item-url img {width: 40px;height: 40px;}

/* #media-container {width: 100%;left: 0;transform: translate(0, -50%);top: 50%;}
#media-title {text-align: center;font-size: 1.4em;}
#media-content {font-size: 1.6em;text-align: center;} */
}
/* 상단 배너광고 종료 */