/* mixin */
/* media-query */
.section01 {
  padding: 7.5rem 0 10rem;
}
.section01 .item-wrap {
  margin: 3.5rem auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  -moz-column-gap: 2.3rem;
       column-gap: 2.3rem;
  row-gap: 3.4rem;
}
.section01 .item-wrap .item {
  overflow: hidden;
}
.section01 .item-wrap .item .inner {
  transform: translateY(100%);
  transition: all 1.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.section01 .item-wrap .item .inner .figure {
  position: relative;
  overflow: hidden;
}
.section01 .item-wrap .item .inner .figure .hover-bg {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background-color: rgba(0, 0, 0, 0.78);
  opacity: 0;
  transform: scale(0.2);
  transform-origin: center center;
  transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.35s ease-out;
}
.section01 .item-wrap .item .inner .figure .hover-bg img {
  opacity: 0;
  transform: scale(0.6);
  transition: transform 0.45s 0.05s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s 0.05s ease-out;
}
.section01 .item-wrap .item .inner .txt {
  font-weight: 800;
  margin: 2.5rem 0 0;
  text-align: center;
}
.section01 .item-wrap .item:hover .inner .figure .hover-bg {
  opacity: 1;
  transform: scale(1);
}
.section01 .item-wrap .item:hover .inner .figure .hover-bg img {
  opacity: 1;
  transform: scale(1);
}
.section01 .item-wrap.animate .item .inner {
  transform: translateY(0%);
}

@media (max-width: 1279px) {
  .section01 .item-wrap {
    -moz-column-gap: 10px;
         column-gap: 10px;
    row-gap: 15px;
  }
  .section01 .item-wrap .item .inner .figure .hover-bg img {
    width: 30px;
  }
}
@media (max-width: 767px) {
  .section01 {
    padding: 6rem 0 7.5rem;
  }
  .section01 .item-wrap {
    -moz-column-gap: 7.5px;
         column-gap: 7.5px;
    grid-template-columns: 1fr 1fr;
  }
  .section01 .item-wrap .item .inner .figure .hover-bg img {
    width: 20px;
  }
}
.section02 {
  padding: 6.5rem 0 7.5rem;
}
.section02 .title {
  text-align: center;
  font-weight: 800;
  font-size: 2.2rem;
}
.section02 .box-wrap {
  padding: 4.5rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
}
.section02 .box-wrap .box {
  padding: 6rem 0;
  text-align: center;
  background-color: #000;
}
.section02 .box-wrap .box p {
  padding: 1.7rem 20px 0;
  color: #fff;
}
.section02 .notice {
  text-align: center;
}
.section02 .plus {
  margin: 4.7rem auto 5rem;
}

@media (max-width: 767px) {
  .section02 {
    padding: 6rem 0 6rem;
  }
  .section02 .box-wrap {
    padding: 4.5rem 0 5.5rem;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .section02 .box-wrap .box {
    padding: 4rem 0;
  }
  .section02 .box-wrap .box .icon img {
    width: 21px;
  }
  .section02 .box-wrap .box p br {
    display: none;
  }
  .section02 .notice br {
    display: none;
  }
}
.section03 {
  padding: 6rem 0 7.5rem;
}
.section03 .posting-wrap {
  display: flex;
  justify-content: center;
  gap: 2.3rem;
}
.section03 .posting-wrap .posting {
  text-align: center;
}
.section03 .posting-wrap .posting h3 {
  font-weight: 800;
  font-size: 2.2rem;
}
.section03 .posting-wrap .posting p {
  padding: 1.7rem 0 2.5rem;
}
.section03 .info {
  padding: 6rem 0 4rem;
}
@media (max-width: 1279px) {
  .section03 .posting-wrap {
    gap: 1.5rem;
  }
  .section03 .posting-wrap .posting p br {
    display: none;
  }
}
@media (max-width: 767px) {
  .section03 .posting-wrap {
    flex-direction: column;
    gap: 4.2rem;
  }
}
.section04 {
  padding: 6rem 0 8rem;
}
.section04 .info.info02 p {
  padding: 3.2rem 0 0;
}
.section04 .cmn-notice {
  margin: 3.5rem 0 6.4rem;
  padding: 4.4rem 4rem;
}

@media (max-width: 767px) {
  .section04 .cmn-notice {
    padding: 2.5rem 3rem;
  }
}/*# sourceMappingURL=online_marketing07.css.map */