@charset "utf-8";
/* 피시용 메뉴 */
.menu_wp_p {
    display: block; /* 기본적으로 피시 메뉴는 표시됨 */
}

.menu_list_p {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* 1차 메뉴를 가로로 정렬하는 Flex 속성 추가 */
}

.menu_list_p li {
    padding: 10px;
    position: relative; /* 상대 위치 설정 */
    border-radius: 5px; /* 모서리를 약간 둥글게 설정 */
    background-color: #f5f5f5; /* 배경색 설정 */
}

.menu_list_p a {
    text-decoration: none;
    color: #333;
    display: block;
}

.menu_list_p li:hover {
    background-color: #ddd; /* 호버 시 배경색 변경 */
}

/* 2차 메뉴 스타일 */
.submenu_list_p {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute; /* 절대 위치 설정 */
    top: 100%; /* 부모 요소 아래에 위치하도록 설정 */
    left: 0;
    display: none; /* 기본적으로 하위 메뉴는 숨김 처리 */
    background-color: #f5f5f5; /* 배경색 설정 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 그림자 효과 추가 */
    border-radius: 5px; /* 모서리를 약간 둥글게 설정 */
    flex-direction: row; /* 2차 메뉴를 가로로 정렬하는 Flex 속성 추가 */
}

.menu_list_p li:hover .submenu_list_p {
    display: flex; /* 호버 시 2차 메뉴를 가로로 표시 */
}

.submenu_list_p li {
    padding: 10px;
}

.submenu_list_p a {
    text-decoration: none;
    color: #555;
    display: block;
}

.submenu_list_p li:hover {
    background-color: #ccc; /* 호버 시 배경색 변경 */
}


/* 상단백그라운드 시작 */
.media-section {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.bg-video,
.bg-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
    pointer-events: none;
}

.bg-video.ml-active,
.bg-image.ml-active {
    opacity: 1;
    z-index: 0;
}
.media-section-3 {position: relative;width: 100%;height: auto;overflow: hidden;}

.bg-video-3,
.bg-image-3 {position: absolute;top: 0px;left: 0;width: 100%;height: 100%;background-size: cover;
    background-position: center;object-fit: cover; /* 비율을 유지하면서 전체에 맞추기 */display: block !important;
    z-index: 0;
}

#media-container-1,
#media-container-2,
#media-container-3,
#media-container-4,
#media-container-5,
#media-container-6,
#media-container-7, #media-container-8 {width: 100%;left:50%;margin: 0 auto; text-align: center;color: #000000;z-index: 1;}
@keyframes slide-in { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } /* 섹션타이틀 */ 
#media-title-1, #media-title-2, #media-title-3, #media-title-4, #media-title-5, #media-title-6, #media-title-7, #media-title-8 { 
    animation: slide-in 0.5s forwards; font-size: 2.0em; color: #000000; z-index: -1; text-align: center; animation-delay: 0.5s; margin-top: 0px; 
}
@media (max-width: 768px) { #media-title-1, #media-title-2, #media-title-3, #media-title-4, #media-title-5, #media-title-6, #media-title-7, #media-title-8 { 
    font-size: 1.8em; } 
} 
/* @media (max-width: 480px) { #media-title-1, #media-title-2, #media-title-3, #media-title-4, #media-title-5, #media-title-6, #media-title-7 { 
    font-size: 1.8em; } 
} */

    .main-title {text-align: center;margin: 0px 0px;margin-bottom: 0px;}
    .main-title h1 {font-size: 36px;font-weight: bold;color: #333;margin-bottom: 10px;}
    .main-title .underline-main {width: 10%; height: 1px; /* 밑줄 */background-color: rgb(211, 211, 211);margin: 0px auto;z-index: -1;
    animation: grow-shrink-center 5s infinite;transform-origin: center; }
    @keyframes grow-shrink-center {0%, 100% {width: 10%;} 50% {width: 100%;}}
    .main-title p {font-size: 18px;color: #555;line-height: 1.6;margin: 0;}

@keyframes fade-in {0% {opacity: 0;}100% {opacity: 1;}}
#media-content-1, #media-content-2, #media-content-3, #media-content-4, #media-content-5, #media-content-6, #media-content-7, #media-content-8 { /* 섹션내용 */ 
    animation: fade-in 1.5s forwards; opacity: 0; font-size: 1.5em; color: #333; z-index: -1; text-align: center; 
}
@media (max-width: 768px) { #media-content-1, #media-content-2, #media-content-3, #media-content-4, #media-content-5, #media-content-6, #media-content-7, #media-content-8 { 
    font-size: 1.2em; } }
/* @media (max-width: 480px) { #media-content-1, #media-content-2, #media-content-3, #media-content-4, #media-content-5, #media-content-6, #media-content-7 { 
    font-size: 1em; } } */

#particles-js-1 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: none;z-index: -1 !important}
#particles-js-2 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: none;z-index: -1 !important}
#particles-js-3 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: none;z-index: -1;}

/* 상단배너 시작 */
.triple-arrow-btn {position: absolute;left: 50%;bottom: 30px; transform: translateX(-50%);cursor: pointer;z-index: 9;}
.arrow {display: block;width: 16px;height: 16px;border-left: 5px solid rgb(218, 218, 218);border-bottom: 5px solid rgb(218, 218, 218);transform: rotate(-45deg); margin: 0px auto;opacity: 0;animation: arrow-bounce 1.5s infinite;}
.arrow:nth-child(1) {animation-delay: 0s;}
.arrow:nth-child(2) {animation-delay: 0.2s;}
.arrow:nth-child(3) {animation-delay: 0.4s;}
@keyframes arrow-bounce {
0% {opacity: 0;transform: translateY(0) rotate(-45deg);}
50% {opacity: 1;transform: translateY(5px) rotate(-45deg);}
100% {opacity: 0;transform: translateY(10px) rotate(-45deg);}
}


.slide-bt {position: relative;width: 100%;height: auto;overflow: hidden;background-size: cover;background-position: center;top:0px;}
.video-container {position: relative;width: 100%;height: auto;overflow: hidden;background-size: cover;background-position: center;}
.background-video,
.background-image {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;
    background-position: center;object-fit: cover; /* 비율을 유지하면서 전체에 맞추기 */display: none;z-index: -1;
    transition: transform 0.1s ease-in-out;
}

#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: 30px;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% {width: 100%;}10% {width: 10%;}}
.separator {height: 2px; background-color: rgba(255, 255, 255, 0.500);margin: 20px 0;animation: grow-shrink-width 10s infinite;width: 100%;} */
@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%);top: 150px;}
#media-title {text-align: center;}
#media-content {font-size: 1.7em;text-align: center;}
}
/* 상단 배너광고 종료 */