@charset "utf-8";

/* 상단백그라운드 시작 */
.media-section {position: relative;width: 100%;height: 100%;overflow: hidden;}
.bg-video,
.bg-image {position: absolute;top: 0; left: 0;width: 100%;height: 100vh;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: 100vh;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;
}

/* 공통 컨테이너 */
[id^="media-container-"] {
  width: 100%;
  margin: 30px auto 0;
  text-align: center;
  color: #000;
  z-index: 1;
}

/* 공통 애니메이션 */
@keyframes slide-in {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* 제목 공통 */
[id^="media-title-"] {
  font-size: 2.0em;
  color: #000;
  text-align: center;
  margin-top: 15px;
  animation: slide-in 0.5s forwards;
  animation-delay: 0.5s;
  z-index: -1;
}

/* 설명 공통 */
[id^="media-description-"] {
  font-size: 1.5em;
  color: #020202;
  text-align: center;
  margin-top: 15px;
  animation: slide-in 0.5s forwards;
  animation-delay: 0.5s;
  z-index: -1;
}

/* 내용 공통 */
[id^="media-content-"] {
  font-size: 1.8em;
  color: #333;
  text-align: center;
  opacity: 0;
  animation: fade-in 1.5s forwards;
  animation-delay: 5s;
  z-index: -1;
}

/* 메인 타이틀 */
.main-title {text-align: center;margin: 0;}
.main-title h1 {font-size: 36px;font-weight: bold;color: #333;margin-bottom: 10px;}
.main-title .underline-main {width: 10%;height: 1px;background-color: #d3d3d3;margin: 0 auto;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;}

/* 메인섹션제목 첫 번째 제목만 margin-top 0) */
#media-title-1 { margin-top: 0; }
#media-description-1 { margin-top: 0; }

/* 다크 모드 컨테이너 */
.dark-mode [id^="media-container-"] {color: #f1f5f9;}
/* 제목 */
.dark-mode [id^="media-title-"] {color: #e2e8f0; }
/* 설명 */
.dark-mode [id^="media-description-"] {color: #cbd5e1; }
/* 내용 */
.dark-mode [id^="media-content-"] {color: #f8fafc; }
/* 메인 타이틀 */
.dark-mode .main-title h1 {color: #f1f5f9;}
.dark-mode .main-title .underline-main {background-color: #475569; }
.dark-mode .main-title p {color: #cbd5e1;}

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

/* 상단배너 시작 */
.t-a-m-t {position: absolute;left: 50%;bottom: 50px; transform: translateX(-50%);cursor: pointer;z-index: 999;}
.triple-arrow-btn {display:none;position: absolute;left: 50%;bottom: 10px; transform: translateX(-50%);cursor: pointer;z-index: 999;}
.arrow {display: none;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;}
#slide-ct {width: 100%;margin-top:0px ;display: flex;justify-content: center;align-items: center;z-index: -1 !important;}
.slide-container {margin: 0 auto;width: 100%;display: flex;justify-content: center;border-radius: 0px;}
@media screen and (max-width: 1024px) {
    /* .slide-container {margin-top: 0px !important;}*/
    /* 모바일일 때 전체 배너 숨김 */
    /* #slide-ct {display: none !important;} */
}

.video-container {position: relative;width: 100%;height: 100%;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: 1200px; /* 너비 설정 */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; /* 클릭 방해 안 되게 */
}

/* 배너하단 sns 링크처리영역 */
#link-container {display: flex;justify-content: space-between;position: absolute;bottom: 0px;left: 50%;transform: translateX(-50%);
width: 1200px;background-color: none;align-items: center;z-index: 99999 !important;}

.icon-bar {background: #000000;display: flex;justify-content: center;}
.icon-bar a {flex: 1;display: flex;align-items: center;justify-content: center;
  gap: 0px;padding: 12px;color: #ffffff;font-size: 1.0rem;transition: background-color 0.3s, transform 0.3s;text-decoration: none;}
.icon-bar a:first-child {border-left: none;}
.icon-bar a:hover {background-color: #ADFF2F;color: #000000;transform: scale(1.1);}
.icon-bar a img {width: 20px;height: 20px;display: inline-block;}
.icon-bar a span {display: inline-block;}


@media (max-width: 768px) {#full-menu-container {display: 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;}
}
/* 상단 배너광고 종료 */