.main-wrap, .main-banner, .main-sec{
  position: relative;
  width: 100%;
}
.main-banner{
  height: 56.25vw;
  max-height: 100vh;
  background: #f1f1f1;
  overflow: hidden;
} 
.video-wrap{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  height: 0;
  overflow: hidden;
  transition: all 1.5s ease-in-out;
}
.video-wrap.active{
  width: 100%;
  height: 56.25vw;
}
.responsive-video {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 100%; /* 부모 요소의 너비에 맞춤 */
  padding-bottom: 56.25vw; /* 16:9 비율 */
  overflow: hidden;
  min-height: 56.25vw;
}
.responsive-video iframe,
.responsive-video img,
.responsive-video #ytplayer,
.responsive-video .bg
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  object-fit: cover;
  pointer-events: none;
  object-fit: cover;
}
.responsive-video .bg{
  background: #000;
}
.responsive-video.playing .bg{
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.responsive-video img{
  z-index: 2;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
.responsive-video.playing img{
  opacity: 0;
}
.main-bottom-con-wrapper{
  position: absolute;
  bottom: 60px;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 9;
}
.main-banner::after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background : linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  z-index: 8;
  position: absolute;
  top: 0;
  left: 0;
}
.main-bottom-con-wrapper .con-line{
  display: flex;
  gap: 70px;
  align-items: flex-end;
}
.main-bottom-con-wrapper .con-line > .left{
  width: calc(62% - 35px);
  position: relative;
  height: 1px;
  overflow: hidden; 
}
.main-bottom-con-wrapper .con-line > .right{
  width: calc(42% - 35px);
}
.main-bottom-con-wrapper .con-line > .left > .bar{
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  width: 0;
  height: 2px;
  transition: width 1s ease-in-out;
  transition-delay: 1.5s;
}
.main-bottom-con-wrapper .con-line > .right h2{
  font-size: 24px;
  font-weight: normal;
  letter-spacing: -0.8px;
  color: rgb(255, 255, 255);

  position: relative;
  top: 60px;
  opacity: 0;
  transition: opacity 1s ease-in-out, top 1s ease-in-out;
  transition-delay: 1.8s;
  padding-right: 60px;
}
.main-bottom-con-wrapper .con-line > .right h2 span{
  font-size: 100px;
  font-weight: bold;
  letter-spacing: -0.8px;
  line-height: 1;
  color: rgb(255, 255, 255);
  display: block; 
}
.main-bottom-con-wrapper .con-line.active .right > h2{
  opacity: 1;
  top: 0;
}
.main-bottom-con-wrapper .con-line.active > .left > .bar{
  width: 100%;
}
.main-bottom-con-wrapper .con-line > .right h2 b{
  font-weight: bold;
}
.header{
  opacity: 0;
}
.header.active{
  opacity: 1;
}

@media(max-width:2250px){
  .main-bottom-con-wrapper .con-line > .right h2{
    font-size: 18px;
  }
  .main-bottom-con-wrapper .con-line > .right h2 span{
    font-size: 90px;
  }

  .main-bottom-con-wrapper .con-line > .left{
    width: calc(100% - 920px);
  }
  .main-bottom-con-wrapper .con-line > .right{
    width: 850px;
  }
  .main-bottom-con-wrapper .con-line > .left > .bar{
    height: 1px;
  }
}

@media(max-width:1600px){
  /* .main-banner{
    height: auto;
  }
  .video-wrap{
    position: relative;
    top: 0;
    left: 10%;
    transform: initial;
    -webkit-transform: initial;
    height: auto;
    max-height: 100vh;
  }
  .video-wrap.active{
    left: 0;
    height: auto;
  }
  .responsive-video {
    position: relative;
    top: 0;
    transform: initial;
    -webkit-transform: initial;
  } */

  .main-bottom-con-wrapper .con-line{
    gap: 40px;
  }
  .main-bottom-con-wrapper .con-line > .left{
    width: calc(100% - 590px);
  }
  .main-bottom-con-wrapper .con-line > .right{
    width: 550px;
  }
  .main-bottom-con-wrapper .con-line > .right h2{
    font-size: 18px;
    padding-right: 20px;
  }
  .main-bottom-con-wrapper .con-line > .right h2 span{
    font-size: 60px;
  }
}

@media(max-width:1024px){
  .main-bottom-con-wrapper .con-line{
    gap: 20px;
  }
  .main-bottom-con-wrapper .con-line > .left{
    display: none;
  }
  .main-bottom-con-wrapper .con-line > .right{
    width: 100%;
    padding: 0 20px;
  }
  .main-bottom-con-wrapper .con-line > .right h2{
    font-size: 24px;
    padding-right: 0;
  }
  .main-bottom-con-wrapper .con-line > .left > .bar{
    display: none;
  }
  .main-bottom-con-wrapper .con-line > .right h2{
    transition-delay: 0s;
  }

  .header{
    opacity: 1 !important;
  }

  .main-bottom-con-wrapper .con-line.active .right > h2 br{
    display: none;
  }

}

@media(max-width:767px){
  .main-wrap{
    margin-top: 80px;
  }
  .main-banner{
    height: 420px;
  } 
  .video-wrap{
    width: 100%;
    height: 0px;
  }
  .video-wrap.active{
    height: 427px;
  }
  .responsive-video {
    width: 100%; 
    max-width: 500%;
    padding-bottom: 0; 
    min-height: initial;
    height: 100%;
  }
  .responsive-video iframe,
  .responsive-video img
  {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    width: 752px;
    height: 427px;
  }
  .responsive-video .bg{
  }
  .main-bottom-con-wrapper{
    bottom: 30px;
  }
  .main-bottom-con-wrapper .con-line > .right h2{
    font-size: 18px;
  }
  .main-bottom-con-wrapper .con-line > .right h2 span{
    font-size: 40px;
  }
}

@media(max-width:430px){
  .main-banner{
    height: 360px;
  } 
  .video-wrap.active{
    height: 370px;
  }
  .responsive-video iframe,
  .responsive-video img
  {
    width: 650px;
    height: 370px;
  }
}

@media(max-width:365px){
  .main-bottom-con-wrapper .con-line > .right h2{
    font-size: 15px;
  }
  .main-bottom-con-wrapper .con-line > .right h2 span{
    font-size: 32px;
  }
}

@media(max-width:350px){
  .main-banner{
    height: 320px;
  } 
  .video-wrap.active{
    height: 330px;
  }
  .responsive-video iframe,
  .responsive-video img
  {
    width: 580px;
    height: 330px;
  }
}