@charset "utf-8";

/* 배너 */
.mainbanner{ position:relative; overflow:hidden; width:100%; height:100vh; min-height:350px; margin:0 auto; background-color: #878787; }

.mainbanner::after{display:block;visibility:hidden;clear:both;content:""}
.mainbanner .bnn-wrap{ position:relative; width:100%; height:100vh; min-height:350px; margin:0 auto; }
.mainbanner .topDim{width:100%; height:300px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); position:absolute; top:0; left:0;}
.mainbanner .bottomDim{width:100%; height:300px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); position:absolute; bottom:0; left:0;}
.mainbanner .bnnVideo{position: absolute; top: 50%; left: 50%;  width: 100%; height: 100%; object-fit: cover; transform: translate(-50%,-50%);}

  @media (max-width: 1024px){
    .mainbanner .topDim{ height:200px;}
    .mainbanner .bottomDim{ height:200px;}
  }
  @media (max-width: 768px){
    .mainbanner {height:60vh; }
    .mainbanner .bnn-wrap{ height:60vh; min-height:350px; margin:0 auto; }
    .mainbanner .bnnVideo{width:110vh; height:auto; object-fit: contain;}
  }
  



/* scroll-down */
.scroll-down{ z-index:1; position:absolute; bottom:0; left:50%; transform:translateX(-50%); text-align: center; display: flex; flex-wrap: wrap;}
.scroll-down .scroll-txt,
.scroll-down .scroll-line{ display:inline-block; width:100%;}
.scroll-down .scroll-txt{ color:#fff; font-size:1.5rem; margin-bottom:10px;}
  .scroll-down .scroll-txt .floating-txt{ display:inline-block; position:relative; animation:floating 1.5s infinite linear;}
.scroll-down .scroll-line{ position:relative; }
  .scroll-down .scroll-line .standard{ width:2px; height:55px; display:inline-block; position:relative; background-color:rgba(255,255,255,.3)}
  .scroll-down .scroll-line .standard::after{ position:absolute; top:0; left:0; width:100%; height:0%; animation:progress 2.5s infinite linear; background-color:#fff; content:''; }


@media (max-width: 768px){
  .scroll-down {display:none;}
}

  @keyframes floating{
    0%,100%{
      transform:translateY(0);
    }
    50%{
      transform:translateY(-7px);
    }
  }

  @keyframes progress{
    0%{
      height:0%;
    }
    100%{
      height:100%;
    }
  }