@charset "utf-8";

.wrap-commu {
  margin-bottom: 50px;
}

.wrap-commu-banner {
  padding-bottom: 80px;
  position: relative; 
  right: 0; 
  opacity: 0;
  /* display: none */
}

.wrap-commu-banner .slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 300px;
}

.wrap-commu-banner .swiper-wrapper {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  animation: rolling 500s linear infinite;
  width: max-content; 
}

.wrap-commu-banner .swiper-wrapper li {
  flex: none;
  margin: 0 15px;
  width: 500px;
  height: 100%;
  padding: 1px;
}

.wrap-commu-banner .swiper-wrapper li > a {
  display: block;
  width: 100%;
  height: 100%;
}

.wrap-commu-banner .swiper-wrapper li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.wrap-commu-banner .slider.paused .swiper-wrapper {
  animation-play-state: paused !important;
}

.wrap-commu-banner .slider:hover .swiper-wrapper {
  animation-play-state: paused !important;
}



/* 롤링 애니메이션 */
@keyframes rolling {
  0% {transform: translateX(0);} 
  100% {transform: translateX(-100%);}
}

@media screen and (max-width: 1450px) {
  .wrap-commu-banner .slider  {
    height: 18vw;
  }

  .wrap-commu-banner .swiper-wrapper li {
    margin-right: 15px; 
    width: 30vw;
  }
}

@media screen and (max-width: 1100px) {
  .wrap-commu-banner .slider  {
    height: 25vw;
  }

  .wrap-commu-banner .swiper-wrapper li {
    width: 42vw;
  }
  .wrap-commu-banner {
    padding-bottom: 70px;
  } 
}

@media screen and (max-width: 650px) {
  .wrap-commu-banner .slider  {
    height: 40vw;
  }

  .wrap-commu-banner .swiper-wrapper li {
    width: 60vw;
  }
  .wrap-commu {
    margin-bottom: 30px;
  } 
  .wrap-commu-banner {
    padding-bottom: 35px;
  }
}