@charset "utf-8";
.video-container {position: relative;width: 100%;overflow: hidden;display: flex;justify-content: center;align-items: center;cursor: pointer;}
.background-video,
.background-image {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;background-size: cover;background-position: center;display: none;cursor: pointer;z-index: -1;}

/* #media-content {
    font-size: 2rem;
    animation: fade-in 3s forwards;
} */

@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;}}

#media-title, #media-content {animation: slide-in-top 2.5s forwards; }
#media-title {font-size: 1.4rem;color: #fff;text-align: center;animation-delay: 2.5s; margin-top: 10px;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: 10px 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.0em;color: #fff;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);  /* 네 방향으로 검은색 그림자 효과 */
}
@media (max-width: 768px) { .separator {margin: 0px !important; } h2, p { margin: 0px; }#media-title {font-size: 1rem !important;}#media-content {font-size: 1.4em !important;}}

/* 경로 위치바 */
.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;}
          
/* 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;} */
}
/* 상단 배너광고 종료 */