.main-banner {width:100%;  max-width: 100%; height: 100vh; position: relative; overflow: hidden; background: url(../img/index.jpg) no-repeat center top / cover;}
.main-banner video {  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;}
.main-banner::after { content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(1, 1, 1, 0.25) ;pointer-events: none; /* 영상 클릭 방해하지 않도록 설정 */z-index: 1;}


/* 타이틀 */
.main-banner .title {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index: 2; width:100%;  max-width: 80rem; align-items: center;}
.main-banner .title .logo-wrap {flex-shrink: 0; filter: brightness(100) saturate(0);}
.main-banner .title p { text-align: center; margin: 2rem 0 4rem; color: #ffffffcb;}
.main-banner .title .enter-button {width: 100%; margin-top:2rem; max-width: 25rem; display: flex; justify-content: center; align-items: center; background-color:#fff; padding:0.8rem; border-radius:100rem; border:1px solid #123086 ; position: relative; overflow: hidden; transition: all 0.4s;}
.main-banner .title .enter-button::before{display: block; content: ""; position: absolute; top: -1px; left: 0; width: 0%; height: 120%; background-color:#123086 ; transition: all 0.4s; z-index: 1;}
.main-banner .title .enter-button:hover::before{ width: 100%; }
.main-banner .title .enter-button span{color:#123086 ;  z-index: 4; position: relative;}
.main-banner .title .enter-button:hover span{color: #fff; z-index: 4;}



/* 카피라이트 */
.main-banner .copy-right {position: absolute; top:95%; left:50%; transform: translate(-50%,-50%); z-index: 2; color:rgba(255,255,255,0.7); width: 100%;}
.main-banner .copy-right p {text-align: center; color: #ffffff7e;}



@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px); /* 아래쪽 40px 위치에서 시작 */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 원래 위치로 이동 */
    }
}

/* 2. 애니메이션 적용 대상 공통 설정 */
.logo-wrap,
.ft-20,
.enter-button {
    opacity: 0; /* 로딩 직후 깜빡임 방지를 위해 투명하게 시작 */
    animation: fadeInUp 1s ease-out forwards; /* 1초 동안 부드럽게 실행 후 상태 유지 */
}

/* 3. 순차적으로 나타나도록 딜레이(Delay) 설정 */
.logo-wrap {
    animation-delay: 0.2s; /* 0.2초 뒤 시작 */
}

.ft-20 {
    animation-delay: 0.5s; /* 로고보다 늦게 시작 */
}

.enter-button {
    animation-delay: 0.8s; /* 가장 마지막에 시작 */
}



@media screen and (max-width:1280px) { 
  html,body {font-size: 50% !important;}
  .main-banner .title{flex-wrap: wrap;}
}


@media screen and (max-width:768px){
    .main-banner video{display: none;}
        .main-banner .title{padding: 0 3rem;}
                .main-banner  .logo-wrap{
                    width: 30rem;
                }
                   .main-banner  .logo-wrap img{width: 100%;}
.br_none{display: none;}
}


@media screen and (max-width:500px){
    .main-banner { background: url(../img/index.jpg) no-repeat center top / contain #19274D;}

    .main-banner .title { top:auto; bottom:10rem; left:50%; transform: translate(-50%);}

    .main-banner .copy-right {
    top: auto;
    bottom:1rem;
    transform: translate(-50%);
}

.main-banner .title .enter-button {
   margin-top: 0rem;}
}