.gctop-swiper {
  position: relative;
  overflow:hidden;
  max-width: 1380px;
  margin: 0 auto 30px;
}

@media (min-width:769px) {
.gctop-swiper {
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%, 
    black 90%, 
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );

  }

  }

@media (max-width:768px) {
  .gctop-swiper {
  margin: 20px auto 10px;
  width: calc(100% + 15vw);
  margin-left: -7.5vw;
}
  }

@media (max-width:430px) {
    .gctop-swiper {
  margin: 30px auto 10px;
  width: calc(100% + 15vw);
  margin-left: -7.5vw;
}
}

.swiper-wrapper {
  height: auto;
}

.gctop-swiper .swiper-slide {
  width: 31%;
  height: auto;
}

.gctop-swiper .swiper-slide a img{
  width: 100%;
}



/* navigation */
.gctop-swiper .gctop-swiper-button-prev,
.gctop-swiper .gctop-swiper-button-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
}

@media (max-width:768px) {
  .gctop-swiper .gctop-swiper-button-prev,
.gctop-swiper .gctop-swiper-button-next {
  top: 45%;
}
}

@media (max-width:430px) {
  .gctop-swiper .gctop-swiper-button-prev,
.gctop-swiper .gctop-swiper-button-next {
  top: 40%;
}
}

.gctop-swiper .gctop-swiper-button-prev::after,
.gctop-swiper .gctop-swiper-button-next::after {
content: none;
}

.gctop-swiper .gctop-swiper-button-prev {
  left: 150px;
  background-image: url("swiper-arrow-l.png");
}

.gctop-swiper .gctop-swiper-button-next {
  right: 150px;
  background-image: url("swiper-arrow-r.png");
}

@media (max-width:768px) {
.gctop-swiper .gctop-swiper-button-prev {
  left: 5vw;
}

.gctop-swiper .gctop-swiper-button-next {
  right: 5vw;

}

}

@media (max-width:321px) {
.gctop-swiper .gctop-swiper-button-prev,
.gctop-swiper .gctop-swiper-button-next {
  background-size: 30px 30px;
}
}

/* pagination */
.gctop-swiper .gctop-swiper-pagination {
  position: relative;
  margin:15px auto 0 auto;
  text-align: center;
}

@media (max-width:768px) {
.gctop-swiper .gctop-swiper-pagination {
  margin:10px auto 0 auto;
}
}

.swiper-pagination-bullet {
  width: 6.5px !important;
  height: 6.5px !important;
  margin: 0 0 0 14px !important;
  background: #5f401f !important;
}

.swiper-pagination-bullet:first-child {
  margin-left: 0 !important;
}