/* ============================================================== common */
/* ============================================================== pagesKv */
.pagesKv__bg--innerImg {
  background-image: url(/community/_assets/img/kv.jpg);
}

@media only screen and (max-width: 767px) {
  .pagesKv__title {
    height: 15vw;
  }
}

/* ============================================================== community */
.communitySection {
  margin-bottom: 6.2225475842vw;
}

/* --------------------------------------- community list */
.communityList {
  width: 100%;

  & .Community__banner {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0;

    &.is--mostRecent {
      width: 100%;
    }
  }

  & .Community__banner--title {
    font-size: 17px;
    font-size: 1.2445095168vw;

    & > span {
      background-image: linear-gradient(90deg, #00a19a, #00a19a);
    }
  }

  & .Community__banner--thum {
    padding-top: 59.8130841121%;

    &::after {
      color: #fff;
    }
  }
}

@media only screen and (max-width: 767px) {
  /* ============================================================== community */
  .communitySection {
    margin-bottom: 14.6666666667vw;
  }

  /* --------------------------------------- community list */
  .communityDetail .communityList {
    position: relative;
    width: calc(100% + 2.6666666667vw + 2.6666666667vw);
    left: -2.6666666667vw;
    overflow: hidden;

    & .navigation-wrapper {
      position: relative;
      width: calc(100% - 2.6666666667vw - 2.6666666667vw);
      left: 2.6666666667vw;
    }

    & .Community__banner--title {
      font-size: 13px;
      font-size: 3.4666666667vw;
    }

    & .keen-slider:not([data-keen-slider-disabled]) {
      overflow: inherit;
      width: calc(100% - 2.6666666667vw);
    }

    & .Community__banner {
      width: calc(100% - 2.6666666667vw);
    }
  }
}

/* ============================================================== mostRecent */
.Community__banner.is--mostRecent {
  margin-bottom: 1.6vw;

  &::after {
    background-color: #f2f1e7;
    color: #00a19a;
  }

  & .Community__banner--link {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  & .Community__banner--thum {
    width: calc((100% - 4.2vw) / 3 * 2 + 1.5vw);
    padding-top: 0;
    margin-bottom: 0;

    & > span {
      position: relative;
      padding-top: 44.9142857143%;
    }
  }

  & .Community__banner--title {
    font-size: 20px;
    font-size: 1.4641288433vw;
  }

  & .Community__banner--info {
    align-self: center;
    width: calc((100% - 4.2vw) / 3);
  }
}

@media only screen and (max-width: 767px) {
  /* ============================================================== mostRecent */
  .Community__banner.is--mostRecent {
    margin-bottom: 4.5vw;

    & .Community__banner--link {
      display: block;
    }

    & .Community__banner--thum {
      width: 100%;
      padding-top: 44.9142857143%;
      margin-bottom: 3vw;

      & > span {
        position: absolute;
        padding-top: 0;
      }
    }

    & .Community__banner--title {
      font-size: 13px;
      font-size: 3.4666666667vw;
    }

    & .Community__banner--info {
      width: 100%;
    }
  }
}

/* ============================================================== communityTop */
.communityTop {
  & .communityList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: calc(100% + 1.4vw);

    & .Community__banner {
      width: calc((100% - 4.2vw) / 3);
      margin-right: 1.4vw;
      margin-bottom: 2.3vw;

      &.is--mostRecent {
        width: 100%;
      }
    }

    & .Community__banner--title {
      font-size: 17px;
      font-size: 1.2445095168vw;

      & > span {
        background-image: linear-gradient(90deg, #00a19a, #00a19a);
      }
    }

    & .Community__banner--thum {
      padding-top: 59.8130841121%;

      &::after {
        color: #fff;
      }
    }
  }

  & .Community__banner.is--mostRecent {
    margin-bottom: 1.6vw;

    &::after {
      background-color: #f2f1e7;
      color: #00a19a;
    }

    & .Community__banner--link {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
    }

    & .Community__banner--thum {
      width: calc((100% - 4.2vw) / 3 * 2 + 1.5vw);
      padding-top: 0;
      margin-bottom: 0;

      & > span {
        position: relative;
        padding-top: 44.9142857143%;
      }
    }

    & .Community__banner--title {
      font-size: 20px;
      font-size: 1.4641288433vw;
    }

    & .Community__banner--info {
      align-self: center;
      width: calc((100% - 4.2vw) / 3);
    }
  }
}

@media only screen and (max-width: 767px) {
  /* ============================================================== communityTop */
  .communityTop {
    & .communityList {
      width: calc(100% + 2.6666666667vw);

      & .Community__banner {
        width: calc(50% - 2.6666666667vw);
        margin-right: 2.6666666667vw;
        margin-bottom: 8vw;

        &.is--mostRecent {
          width: calc(100% - 2.6666666667vw);
          margin-right: 0;
        }
      }

      & .Community__banner--title {
        font-size: 13px;
        font-size: 3.4666666667vw;
      }

      & .Community__banner--thum {
        padding-top: 59.8130841121%;
      }
    }

    & .Community__banner.is--mostRecent {
      margin-bottom: 4.5vw;

      & .Community__banner--link {
        display: block;
      }

      & .Community__banner--thum {
        width: 100%;
        padding-top: 44.9142857143%;
        margin-bottom: 3vw;

        & > span {
          position: absolute;
          padding-top: 0;
        }
      }

      & .Community__banner--title {
        font-size: 15px;
        font-size: 4vw;
      }

      & .Community__banner--info {
        width: 100%;
      }
    }
  }
}

/* ============================================================== mostRecent */
.paging {
  display: flex;
  justify-content: center;
  margin-top: 2.5622254758vw;
}

.pagingBtn {
  width: 3.074670571vw;
  height: 3.074670571vw;
  border-radius: 8px;
  font-size: 15px;
  font-size: 1.0980966325vw;
  text-align: center;
  margin-left: 0.5124450952vw;
  margin-right: 0.5124450952vw;
  border-width: 2px;
  border-style: solid;
  transition-property: border-color, background-color, color;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  border-color: #00a19a;
  background-color: #00a19a;
  color: #fff;

  & a {
    line-height: 2.9282576867vw;
    transition: color 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    color: #fff;
  }

  &.selected {
    border-color: white;
    background-color: white;
    color: #00a19a;

    & a {
      color: #00a19a;
    }
  }
}

@media only screen and (max-width: 767px) {
  /* ============================================================== mostRecent */
  .paging {
    margin-top: 0;
  }

  .pagingBtn {
    width: 9.3333333333vw;
    height: 9.3333333333vw;
    border-radius: 4px;
    font-size: 12px;
    font-size: 3.2vw;
    margin-left: 1.3333333333vw;
    margin-right: 1.3333333333vw;
    border-width: 1px;

    & a {
      line-height: 8.5333333333vw;
    }
  }
}

/* ============================================================== hover pc */
@media (hover: hover) and (pointer: fine) {
  .pagingBtn {
    &:hover,
    &:active {
      color: #00a19a;
      background-color: #fff;

      & a {
        color: #00a19a;
      }
    }
  }
}

/* ==================================================================================== community Detail */
/* --------------------------------------- date weather */
.communityDetail {
  & .header::after {
    content: " ";
    position: absolute;
    top: auto;
    left: 0;
    width: 100%;
    height: 1px;
    bottom: 0;
    background-color: rgba(0, 161, 154, 0.2);
  }

  & .wrapper {
    padding-top: 60px;
  }

  & .kv__dateBlock,
  & .kv__weatherBlock {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  /* ==================================================================================== community Detail */
  /* --------------------------------------- date weather */
  .communityDetail {
    & .wrapper {
      padding-top: 45px;
    }
  }
}

/* ============================================================== article */
.communityDetail__article {
  position: relative;
  max-width: 64.055636896vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8.78477306vw;
  padding-top: 1.4641288433vw;

  & .btnBack {
    margin-bottom: 1.4641288433vw;
  }
}

.communityDetail__section {
  font-size: 16px;
  font-size: 1.1713030747vw;
  font-weight: 400;

  & .Community__banner--mostRecent--schedule {
    display: block;
    margin-top: 2.196193265vw;
    margin-bottom: 1.317715959vw;
  }

  & .Community__banner--title {
    font-size: 20px;
    font-size: 1.4641288433vw;
    font-weight: 700;
    line-height: 1.7;
    margin-bottom: 3.6603221083vw;
  }
}

@media only screen and (max-width: 767px) {
  /* ============================================================== article */
  .communityDetail__article {
    max-width: inherit;
    margin-bottom: 21.3333333333vw;
    padding-top: 5.3333333333vw;

    & .btnBack {
      margin-bottom: 5.3333333333vw;
    }
  }

  .communityDetail__section {
    font-size: 13px;
    font-size: 3.4666666667vw;

    & .Community__banner--mostRecent--schedule {
      transform: scale(0.85);
      transform-origin: left top;
      margin-top: 5.3333333333vw;
      margin-bottom: 2.6666666667vw;
    }

    & .Community__banner--title {
      font-size: 15px;
      font-size: 4vw;
      margin-bottom: 5.3333333333vw;
    }
  }
}

/* ============================================================== community is--report */
.communityDetail__section .Community__banner--title.is--report {
  font-size: 2vw;
  margin-top: 2.196193265vw;
  margin-bottom: 1.4vw;
}

.Community__banner--date {
  color: rgba(0, 161, 154, 0.7333333333);
}

.Community__banner--date.is--report {
  font-size: 13px;
  font-size: 0.9516837482vw;
  margin-bottom: 3.2942898975vw;
}

@media only screen and (max-width: 767px) {
  /* ============================================================== community is--report */
  .communityDetail__section .Community__banner--title.is--report {
    font-size: 16px;
    font-size: 4.2666666667vw;
    margin-top: 4vw;
    margin-bottom: 2.6666666667vw;
  }

  .Community__banner--date.is--report {
    font-size: 11px;
    font-size: 2.9333333333vw;
    margin-bottom: 8vw;
  }
}