.portfolio .title {
  font-size: 2.45vw;

  color: white;

  text-align: center;
  padding: 16% 0 8% 0;
  line-height: 160%;
}
.portfolio .title span {
  font-size: 1.57vw;
  color: white;
}
.owl-theme.slide-portfolio .owl-dots {
  padding: 2% 0 0 0;
}
.owl-theme.slide-portfolio .owl-nav {
  position: absolute;
  bottom: 5%;
  right: 0%;
  background-color: white;
}
.owl-theme.slide-portfolio .owl-nav .owl-prev,
.owl-theme.slide-portfolio .owl-nav .owl-next {
  margin: 0;
}
.port-prev i,
.port-next i {
  color: #5d5d5d;
  font-size: 1.5vw;
  background: white;
  width: 2.5vw;
  height: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portfolio .main .main-title {
  font-size: 3.1vw;
  font-weight: 500;
}
.portfolio .main {
  padding: 5% 0 0 0;
}
.portfolio .main .title {
  font-size: 1.05vw;
  font-weight: 400;
  color: black;
  padding: 0;
  text-align: start;
  padding: 0 0 2% 0;
}
.portfolio .main .detail {
  font-size: 1.05vw;
  font-weight: 400;
  color: #585858;
}
.portfolio .main .btn {
  font-size: 1.15vw;
  font-weight: 400;
  display: flex;
  justify-content: center;
  padding: 2% 0;
  border: 2px #bababa solid;
  border-radius: 0;
  width: 10.7vw;
}
.portfolio .main .btn:hover {
  background-color: #bababa;
  border: 2px black solid;
  transition: 0.3s ease-in-out;
}
.portfolio .main .button a {
  text-decoration: none;
  color: black;
}
.portfolio .main .btn .img {
  width: 17%;
  margin: 0 0 0 5%;
}
.portfolio .main .btn .img img {
  width: 100%;
}
.portfolio .main .show-img img {
  width: 100%;
  object-fit: cover;
}
.port-padding {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1% 0 4% 2%;
}
.portfolio-all {
  padding: 0 0 5% 0;
}
.portfolio-all .card:hover {
  transform: scale(1.05);
  transition: 0.3s ease-in-out;
}

.portfolio-all .card a {
  text-decoration: none;
  color: black;
}

/* DETAIL */
.portfolio-detail {
  padding: 6% 0 3% 0;
}
.portfolio-detail .title {
  font-size: 1.57vw;
  font-weight: 500;
  color: #353535;
  padding: 2% 0;
}
.portfolio-detail .bar {
  display: flex;
  justify-content: space-between;
  border-top: 1px #d9d9d9 solid;
  border-bottom: 1px #d9d9d9 solid;
  padding: 0.5rem 0;
}
.portfolio-detail .bar .date {
  font-size: 0.84vw;
  color: #353535;
}
.portfolio-detail .bar .date .icon {
  margin-right: 5%;
}
.portfolio-detail .bar a,
.portfolio-detail .bar i {
  text-decoration: none;
  font-size: 1.5vw;
  color: #353535;
}
.portfolio-detail .share {
  display: flex;
  justify-content: space-around;
}
.portfolio-detail .share a i:hover {
  color: #edc006;
  transition: 0.3s ease-in-out;
}
.portfolio-detail .detail {
  padding: 3% 0;
  border-bottom: 1px #d9d9d9 solid;
}
.portfolio-detail .other .portfolio-all {
  padding: 0 0 5% 0;
}
.portfolio-detail .other .portfolio-all .card a {
  text-decoration: none;
  color: black;
}
.portfolio-detail .other .portfolio-all .card:hover {
  transform: scale(1.05);
  transition: 0.3s ease-in-out;
}

@media (max-width: 991px) {
  .show-pc {
    display: none;
  }
  .show-mobile {
    display: block;
  }
  .portfolio .title {
    font-size: 36px;
    padding: 85px 0 30px 0;
    display: flex;
    flex-direction: column;
  }
  .portfolio .title span {
    font-size: 28px;
    text-align: center;
  }
  .portfolio .main .main-title {
    font-size: 45px;
    text-align: center;
  }
  .portfolio .main .title,
  .portfolio .main .detail,
  .portfolio .main .btn {
    font-size: 20px;
  }
  .portfolio .main .btn {
    width: 50%;
    margin: 5% 0 10% 0;
  }
  .portfolio .main .button a {
    display: flex;
    justify-content: center;
  }

  .port-prev i,
  .port-next i {
    font-size: 20px;
    width: 35px;
    height: 30px;
  }
  .owl-theme.slide-portfolio .owl-nav {
    position: absolute;
    bottom: 9%;
    right: 0%;
    background-color: white;
  }


  /* PORT DETAIL */
  .portfolio-detail {
    padding: 57px 0 33px 0;
  }
  .portfolio-detail .title {
    font-size: 20px;
  }
  .portfolio-detail .bar .date,
  .portfolio-detail .bar a,
  .portfolio-detail .bar i,
  .portfolio-detail .back a {
    font-size: 16px;
  }
  .portfolio-detail .other .portfolio-all .card-title {
    font-size: 20px;
  }
  .back a {
    font-size: 18px;
  }
}