/* ===== VMSLIDER CSS (복사해서 교체) ===== */

.volmain .vmslider{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.volmain .vmslider-wrapper{
  position: relative;

  /* 오른쪽 넘치는 슬라이드 보이게 */
  overflow: visible;
  clip-path: inset(0 -2000px 0 0);
}

.volmain .vmslider-track{
  display: flex;

  /* transition은 JS에서만 제어(겹침/중복 방지) */
  transition: none;

  will-change: transform;
}

.volmain .vmslide{
  /* ✅ 폭을 "확정" (JS 이동 단위가 흔들리지 않게) */
  flex: 0 0 400px;
  width: 400px;

  height: 350px;
  margin-right: 30px;
  flex-shrink: 0;
}

/* ✅ 내부 고정폭 제거: 슬라이드 폭을 따라가게 */
.volmain .vmslide a.vsibox{
  display:block;
  position:relative;
  width:100%;
  height:220px;
  overflow:hidden;
}

.volmain .vmslide a.vsibox img{
  width:100%;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:100;
}

.volmain .vmslide a.vsibox::before{
  content:"";
  display:block;
  width:100%;
  height:220px;
  background:url(../img/main/vsiboxbg.png) center bottom no-repeat;
  position:absolute;
  left:0;
  bottom:0;
  z-index:101;
  transition:all 0.2s;
  -webkit-transition:all 0.2s;
}

.volmain .vmslide a.vsibox h5{
  position:absolute;
  left:15px;
  bottom:15px;
  z-index:102;
  font-size:18px;
  color:#fff;
  font-weight:700;
  width:calc(100% - 30px);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.volmain .vmslide a.vsibox:hover::before{
  background:url(../img/main/vsiboxbg_h.png) center bottom no-repeat;
   background-size:cover;
}

.volmain .vmslide p.vatxt{
  width: calc(100% - 30px);
  font-size:16px;
  color:#4d4d4d;
  font-weight:400;
  line-height:1.5em;
  margin:10px auto 20px ;
}
.volmain .vmslide p.vatag{
  width: calc(100% - 30px);
  margin:0 auto;
  font-size:12px;
  color:#8d8d8d;
  font-weight:400;
}


/* 컨트롤 */
.volmain .vmslider-controls{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  position:relative;
}

.volmain .vmslider-controls button{
  padding: 30px;
  margin-right:10px;
  border-radius:40px;
  cursor: pointer;
  background:#f2f2f2;
}
.volmain .vmslider-controls button.prev{
	background:#d8d8d8 url(../img/main/vmprev.png) center no-repeat;
}
.volmain .vmslider-controls button.next{
	background:#d8d8d8 url(../img/main/vmnext.png) center no-repeat;
}
.volmain .vmslider-controls button.vmplay{
	background:#d8d8d8 url(../img/main/vmplay.png) center no-repeat;
}
.volmain .vmslider-controls button.vmpause{
	background:#d8d8d8 url(../img/main/vmpause.png) center no-repeat;
}
.volmain .vmslider-controls button.prev:hover{
	background:#d8905b url(../img/main/vmprev.png) center no-repeat;
}
.volmain .vmslider-controls button.next:hover{
	background:#d85b90 url(../img/main/vmnext.png) center no-repeat;
}
.volmain .vmslider-controls button.vmplay:hover{
	background:#d8905b url(../img/main/vmplay.png) center no-repeat;
}
.volmain .vmslider-controls button.vmpause:hover{
	background:#d85b90 url(../img/main/vmpause.png) center no-repeat;
}

/* ✅ 반응형: 1024 아래 2개, 768 아래 1개 (JS 기준과 동일하게 맞춤) */
@media (max-width: 1024px){
  .volmain .vmslide{
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
  }
  .volmain .vmslide a.vsibox img{
	width:100% !important;
  }
  .volmain .vmslide a.vsibox::before{
	background-size:cover;
  }
}

@media (max-width: 768px){
  .volmain .vmslide{
    flex: 0 0 100%;
    width: 100%;
	height:300px;
    margin-right: 0;
  }
  .volmain .vmslider-controls button{
  	padding:20px;
	margin-right:5px;
  }
}