.swiper { 
  width: 300px; 
  height:300px;
}

.swiper [class^="swiper-button-"]::after{
  content: "";
}

.swiper-button-next {
  width: 0; 
  height: 0; 
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 16px solid #4CC4EF;
}

.swiper-button-prev {
  width: 0; 
  height: 0; 
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent; 
  border-right:16px solid #4CC4EF; 
}

@media only screen and (min-width: 640px) {
  .swiper { 
    width: 400px; 
    height:300px;
  }

  .swiper-button-next {
    width: 0; 
    height: 0; 
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    border-left: 24px solid #4CC4EF;
  }
  
  .swiper-button-prev {
    width: 0; 
    height: 0; 
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent; 
    border-right:24px solid #4CC4EF; 
  }
}
@media only screen and (min-width: 768px) {
  .swiper { 
    width: 500px; 
    height:300px;
  }
}
@media only screen and (min-width: 1024px) {
  .swiper { 
    width: 800px; 
    height:300px;
  }
}
@media only screen and (min-width: 1280px) {
  
}
@media only screen and (min-width: 1536px) {
  
}