.service-title{
  margin-top: 8px;
}
.servise-desc{
  font-size: 14px;
  @media screen and (max-width: 767px){
    font-size: 12px;
  }
}
.service{
  .contents-wrap{
    margin-bottom: 100px;
  }
  .col-3{
    display: flex;
    flex-wrap: wrap;
    gap: 48px 30px;
    @media screen and (max-width: 767px){
      gap: 30px
    }
  }
}

.col-item{
  a{
    display: block;
    position: relative;
    .service-name{
      position: absolute;
      top: 4px;
      left: 8px;
      font-size: 10px;
      color: #666;
      font-weight: bold;
      z-index: 2;
      transition: color .4s;
    }
    img{
      display: block;
      transition: all .4s;
    }
    &:hover{
      .service-name{
        color: #fff;
      }
      img{
        opacity: .7;
        border-radius: 16px;
        transform: scale(.8);
        @media screen and (max-width: 767px){
          opacity: 1;
          border-radius: 0;
          transform: scale(1);
        }
      }
    }
  }
}
.service-img{
  background-size: cover;
  &.service-img-default{
    background: url(/_assets/common/images/service-img-default-bg.png) no-repeat 50% 50%;
  }
  &.service-img-sitest{
    background: url(/_assets/common/images/service-img-sitest-bg.png) no-repeat 50% 50%;
  }
  &.service-img-fastest{
    background: url(/_assets/common/images/service-img-fastest-bg.png) no-repeat 50% 50%;
  }
  &.service-img-swipage{
    background: url(/_assets/common/images/service-img-swipage-bg.png) no-repeat 50% 50%;
  }
  &.service-img-llmoa{
    background: url(/_assets/common/images/service-img-llmoa-bg.png) no-repeat 50% 50%;
  }
  &.service-img-dravis{
    background: url(/_assets/common/images/service-img-dravis-bg.png) no-repeat 50% 50%;
  }
  &.service-img-risnavi{
    background: url(/_assets/common/images/service-img-risnavi-bg.png) no-repeat 50% 50%;
  }
  &.service-img-avatwin{
    background: url(/_assets/common/images/service-img-avatwin-bg.png) no-repeat 50% 50%;
  }
  &.service-img-spaia{
    background: url(/_assets/common/images/service-img-spaia-bg.png) no-repeat 50% 50%;
  }
  &.service-img-spaiakeiba{
    background: url(/_assets/common/images/service-img-spaiakeiba-bg.png) no-repeat 50% 50%;
  }
  &.service-img-dragon{
    background: url(/_assets/common/images/service-img-dragon-bg.png) no-repeat 50% 50%;
  }
}