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

/* #media-container-1 {position: absolute;top: 10%;left: 50%;width: 1200px;transform: translate(-50%, -50%);text-align: center;color: #000000;z-index: 1;}
#media-container-2 {position: absolute;top: 10%;left: 50%;width: 1200px;transform: translate(-50%, -50%);text-align: center;color: #000000;z-index: 1;}
#media-container-3 {position: absolute;top: 10%;left: 50%;width: 1200px;transform: translate(-50%, -50%);text-align: center;color: #000000;z-index: 1;}
#media-container-4 {position: absolute;top: 10%;left: 50%;width: 1200px;transform: translate(-50%, -50%);text-align: center;color: #000000;z-index: 1;}
#media-container-5 {position: absolute;top: 10%;left: 50%;width: 1200px;transform: translate(-50%, -50%);text-align: center;color: #000000;z-index: 1;}
#media-container-6 {position: absolute;top: 10%;left: 50%;width: 1200px;transform: translate(-50%, -50%);text-align: center;color: #000000;z-index: 1;} */
#media-container-1,
#media-container-2,
#media-container-3,
#media-container-4,
#media-container-5,
#media-container-6,
#media-container-7 {
    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-content-1 {animation: slide-in 0.5s forwards; /* 제목 애니메이션 설정 */}
#media-title-1 {font-size: 2.4em;color: #000000;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 0px;}
#media-description-1, #media-content-1 {animation: slide-in 0.5s forwards; /* 파일제목 애니메이션 설정 */}
#media-description-1 {font-size: 1.5em;color: #000000;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 0px;}

#media-title-2, #media-content-2 {animation: slide-in 0.5s forwards; /* 애니메이션 설정 */}
#media-title-2 {font-size: 2.4em;color: #000000;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 0px;}
#media-description-2, #media-content-2 {animation: slide-in 0.5s forwards; /* 파일제목 애니메이션 설정 */}
#media-description-2 {font-size: 1.5em;color: #000000;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 0px;}

#media-title-3, #media-content-3 {animation: slide-in 0.5s forwards; /* 애니메이션 설정 */}
#media-title-3 {font-size: 2.4em;color: #000000;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 0px;}
#media-description-3, #media-content-3 {animation: slide-in 0.5s forwards; /* 파일제목 애니메이션 설정 */}
#media-description-3 {font-size: 1.5em;color: #000000;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 0px;}

#media-title-4, #media-content-4 {animation: slide-in 0.5s forwards; /* 애니메이션 설정 */}
#media-title-4 {font-size: 2.4em;color: #000000;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 15px;}
#media-description-4, #media-content-4 {animation: slide-in 0.5s forwards; /* 파일제목 애니메이션 설정 */}
#media-description-4 {font-size: 1.5em;color: #020202;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 15px;}

#media-title-5, #media-content-5 {animation: slide-in 0.5s forwards; /* 애니메이션 설정 */}
#media-title-5 {font-size: 2.4em;color: #000000;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 15px;}
#media-description-5, #media-content-5 {animation: slide-in 0.5s forwards; /* 파일제목 애니메이션 설정 */}
#media-description-5 {font-size: 1.5em;color: #020202;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 15px;}

#media-title-6, #media-content-6 {animation: slide-in 0.5s forwards; /* 애니메이션 설정 */}
#media-title-6 {font-size: 2.4em;color: #000000;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 15px;}
#media-description-6, #media-content-6 {animation: slide-in 0.5s forwards; /* 파일제목 애니메이션 설정 */}
#media-description-6 {font-size: 1.5em;color: #020202;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 15px;}

#media-title-7, #media-content-7 {animation: slide-in 0.5s forwards; /* 애니메이션 설정 */}
#media-title-7 {font-size: 2.4em;color: #000000;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 15px;}
#media-description-7, #media-content-7 {animation: slide-in 0.5s forwards; /* 파일제목 애니메이션 설정 */}
#media-description-7 {font-size: 1.5em;color: #020202;z-index: -1;text-align: center;animation-delay: 0.5s; /* 내용보다 빨리 */margin-top: 15px;}


@keyframes grow-shrink-width {0%, 100% {width: 100%;}10% {width: 10%;}}
.separator-line {height: 2px; /* 라인높이 */background-color: rgba(255, 255, 255, 0.5);margin: 0px 0;animation: grow-shrink-width 10s infinite;width: 100%;}
@keyframes fade-in {0% {opacity: 0;}100% {opacity: 1;}}
#media-content-1 {animation: fade-in 1.5s forwards; /* 페이드 인 애니메이션 설정 */opacity: 0; /* 처음에는 보이지 않게 설정 */
    animation-delay: 5s; /* 제목이 먼저 나타난 후 딜레이 */font-size: 2.5em;color: #000000;z-index: -1;text-align: center;}
#media-content-2 {animation: fade-in 1.5s forwards; /* 페이드 인 애니메이션 설정 */opacity: 0; /* 처음에는 보이지 않게 설정 */
    animation-delay: 5s; /* 제목이 먼저 나타난 후 딜레이 */font-size: 2.5em;color: #000000;z-index: -1;text-align: center;}
#media-content-3 {animation: fade-in 1.5s forwards; /* 페이드 인 애니메이션 설정 */opacity: 0; /* 처음에는 보이지 않게 설정 */
    animation-delay: 5s; /* 제목이 먼저 나타난 후 딜레이 */font-size: 2.5em;color: #000000;z-index: -1;text-align: center;}
#media-content-4 {animation: fade-in 1.5s forwards; /* 페이드 인 애니메이션 설정 */opacity: 0; /* 처음에는 보이지 않게 설정 */
    animation-delay: 5s; /* 제목이 먼저 나타난 후 딜레이 */font-size: 1.8em;color: #000000;z-index: -1;text-align: center;}
#media-content-5 {animation: fade-in 1.5s forwards; /* 페이드 인 애니메이션 설정 */opacity: 0; /* 처음에는 보이지 않게 설정 */
    animation-delay: 5s; /* 제목이 먼저 나타난 후 딜레이 */font-size: 1.8em;color: #000000;z-index: -1;text-align: center;}
#media-content-6 {animation: fade-in 1.5s forwards; /* 페이드 인 애니메이션 설정 */opacity: 0; /* 처음에는 보이지 않게 설정 */
    animation-delay: 5s; /* 제목이 먼저 나타난 후 딜레이 */font-size: 1.8em;color: #000000;z-index: -1;text-align: center;}
#media-content-7 {animation: fade-in 1.5s forwards; /* 페이드 인 애니메이션 설정 */opacity: 0; /* 처음에는 보이지 않게 설정 */
    animation-delay: 5s; /* 제목이 먼저 나타난 후 딜레이 */font-size: 1.8em;color: #000000;z-index: -1;text-align: center;}
#particles-js {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}
#particles-js-3 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}
#particles-js-4 {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: 9999;}
.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: 4px 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;}
.video-container {position: relative;width: 100%;height: 70vh;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 {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 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 {0% {opacity: 0;}100% {opacity: 1;}}
#media-content {animation: fade-in 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;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}

/* 배너하단 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;}

.sns_main {width: 100%;display: flex;justify-content: center;padding: 0px;background-color: none;}
.sns-list {width: 100%;max-width: 100%;display: flex;justify-content: space-between;gap: 20px;}
.sns-item {
    display: flex;align-items: center;padding: 10px 20px;background-color: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.5);border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);width: 100%; max-width: 250px;box-sizing: border-box;
}
.sns-item-title {display: flex;flex-direction: column;align-items: flex-start;flex: 1;padding-right: 10px;}
.sns-title {font-size: 14px;font-weight: bold;color: #333;margin: 0;}
.sns_info {font-size: 12px;color: #333;margin: 5px 0 0;}
.sns-item-url {text-align: center;}
.sns-item-url img {width:30px;height: 30px;border-radius: 50%;background-color: #fff;}
.sns-item-url img:hover {transform: scale(1.1);}
.icon-bar {background: #000000;display: flex;justify-content: center;}
.icon-bar a {flex: 1;display: flex;align-items: center;justify-content: center;
  gap: 3px;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;}

    /* 전체 서브 메뉴 컨테이너 */
    #full-menu-container {width: 100%;background-color: rgba(0, 21, 54, 0.8);top:0px;
        border-bottom: 2px solid #54b432 !important;transition: height 0.4s ease;height: 80px;position: relative;z-index: 1;margin: 0px 0;}
    /* 메뉴바 전체영역 */
    #full-menu {width: 100%;margin: 0px 0;background-color: rgba(0, 21, 54, 0.8);color:#fff;height: 80px;
        border-bottom: 2px solid rgba(0, 21, 54, 0.3)}
    #full-1200 {width: 1200px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;padding: 0px;}
    @media (max-width: 1024px) {
        #full-1200 {
            width: auto !important;
        }
    }

    #logo3 {flex: 0 0 auto;text-align: center;margin: 0px 0px 0px 0px !important; /* 상 10px, 우 0px, 하 10px, 좌 20px */
        background-color: none;height: auto;align-items: center !important}
        
    .sns-logo-top {display: flex;align-items: center;justify-content: center;text-align:center;gap: 0px;}
    /* 링크 */
    .sns-link {display: flex;align-items: center;text-decoration: none;color: inherit;}
    /* 로고 컨테이너 */
    .sns-logo {width: 40px;height: 40px; margin-right: 5px;}
    /* 로고 이미지 */
    .sns-logo-image {width: 100%;height: 100%;object-fit: cover; /* 이미지 왜곡 방지 */}
    /* 텍스트 영역 */
    .sns_title-right {display: flex;flex-direction: column;justify-content: center;}
    /* 로로상단 타이틀  */
    .title-logo {
      font-size: 22px;
      line-height: 1.1;
      font-family: 'Noto Sans KR', sans-serif;
      font-weight: 900;
      color:#fff;
      /* font-family: 'S-CoreDream-9Black', sans-serif !important; */
      margin-bottom: 0px;
      white-space: nowrap;
      overflow: hidden;       /* 넘치는 텍스트 숨김 */
      display: inline-block;  /* inline 요소 */
      animation: typing 4s steps(20, end);}
    
    /* @keyframes typing {
      from { width: 0; } 
      to { width: 100%; } 
    }
    
    @keyframes blink {
      from, to { border-color: transparent; }
      50% { border-color: black; } 
    }
    @keyframes colorChange {
      0% { color: red; }
      33% { color: rgb(238, 255, 0); }
      66% { color: green; }
      100% { color: rgb(255, 0, 200); }
    } */
    /* 로고하단 타이틀 */
    .sns-title-log {width: 100%;display: flex;justify-content: space-between;margin-top: 0px;}
    .title-char {flex: 1;text-align: left;font-size: 12px !important;
        font-family: 'Noto Sans KR', sans-serif;
        font-weight: 500;
        animation: colorChange 3s infinite; /* 색상 변화 애니메이션 */
      }
        
    @media only screen and (max-width: 1024px) {
    .title-logo {color:#fff;}
    /* .title-char {color:#f0f0f0 !important;} */
    /* @keyframes colorChange {
      0% { color: rgb(255, 220, 220); }
      33% { color: rgb(224, 224, 255); }
      66% { color: rgb(212, 255, 212); }
      100% { color: rgb(214, 254, 255); }
    } */
    }    
    /* 배너 */
    .advertisement img {max-width: 200px; /* 이미지의 최대 너비 설정 */height: auto !important;}
    .advertisement {display: none;position: absolute;top: 80px;left: 15%;transform: translateX(-50%);text-align: center;margin: 10px 0;}
    
    #full-menu-container:hover .advertisement {display: block; /* 메뉴에 마우스 오버 시 광고 이미지 표시 */}
    /* 탑 메뉴 틀 */
    #full-menu-list {flex-grow: 1;transition: all 0.3s ease;display: flex;justify-content: center;
        background-color: transparent;width: auto;}

    /* 1차 메뉴 */
    #full_1dul {list-style: none;padding: 0;margin: 0;display: flex;justify-content: flex-end;width: auto;}
    /* 1차 메뉴 항목 */
    #full_1dul li {position: relative;}
    /* 1차 메뉴 링크*/
    #full_1dul li a {text-decoration: none;color: #fff;padding: 10px 0px;display: block;
         font-weight: 600;font-size: 1.3em;width: 160px;text-align: center;}
    #full_1dul li.active a {color: #54b432;background-color: rgba(68, 255, 68, 0.1); /* 배경색 유지 */}
    /* 1차 메뉴 호버 */
    #full_1dul li a:hover {background-color: rgba(218, 149, 149, 0.1);color: #54b432;}


    .full_1dli {
        position: relative;margin-top: 12px;
        /* border-bottom: 2px solid #d13737 !important; */
        padding-bottom: 21px;  
        z-index: 1  !important;
    }
    
    .full_2dli {
        border-top: 2px solid #54b432; 
        /* margin-top: 20px;  */
        padding-top: 20px;
    }

    /* 서브메뉴 */
    .full_2dli {display: none;position: absolute;top: 100%;left: 50%;transform: translateX(-50%);
        background-color: none;
        z-index: 1;width: auto; /* 자동으로 1차 메뉴에 맞춤 */
        /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
    }
    /* 1차 메뉴에서 서브메뉴 표시 */
    #full_1dul li:hover .full_2dli {display: block; /* 부모 메뉴 호버 시 서브메뉴 표시 */}
    .full_2dli li {margin: 0;white-space: nowrap; /* 줄바꿈을 방지*/}
    .full_2dli li a {padding: 5px 15px !important;color: #fff !important;display: block; font-size: 1.2em !important; }
    /* 2차 메뉴 호버 */
    .full_2dli li a:hover {background-color: rgba(218, 149, 149, 0.1);color: #54b432 !important;}
    .full_2dli li.active a {
        background-color: rgba(255, 255, 255, 0.1);
        color: #54b432 !important;
    }

@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;}
}
/* 상단 배너광고 종료 */

/* 반응형sns로고 */
#logo2 {text-align: center;margin: 10px auto; }
#logo2 img {max-width: 200px !important;height: 40px !important;display: block;margin: 0 auto;}
/* sns로고 */

/* 모바일 반응형 설정 */
@media only screen and (max-width: 768px) {
    #logo2 {text-align: center !important;}
    #logo2 img {max-width: 150px !important;margin: 0 auto !important;display: block !important;}
    .scroll-section-container {max-height: 100vh;margin: 0;padding: 0px;width: 100vw;}
}
.sns-title-log {font-size: 20px;font-weight: 400;color: #01a101 !important }

.sns-logo-top {width: 100%;display: flex;justify-content: center;}
.sns-title-log span {width: 100%;text-align: center;font-size: 16px;white-space: nowrap; /* 텍스트 줄 바꿈 방지 */
    overflow: hidden; /* 넘치는 텍스트 숨기기 */
    text-overflow: ellipsis; /* 넘치는 텍스트에 말줄임표 표시 */
    font-stretch: condensed; /* 텍스트 넓이 줄이기 */
    color:#fff
}

/* 상단 sns로고 종료 */