@charset "utf-8";

.season-select {
  margin-left: 80px;
}


/* program-list */
.program-list {
  position: relative;
  z-index: 2;
  padding: 50px 0 20px 0;
}
.program-list .list-data {
  flex-wrap: wrap;
  padding: 0 calc(80px - 1%) 0 80px;
}
.program-list .item {
  position: relative;
  width: 16.6%;
  height: calc(10.5vw + 40px) !important;
  margin-bottom: 4.2vw;
}
.program-list .item .inner {
  left: 48%;
  width: 96%;
  padding-top: 54.25%;
}
.program-list .item.on .inner {
  left: 48%;
  padding-top: 214px;
}
    @media all and (min-width: 1600px) {
      .program-list .item:nth-child(6n) .inner {
        left: auto;
        right: 4%;
        transform: translateX(0);
      }
      .program-list .item:nth-child(6n-5).on .inner {
        left: 0;
        transform: translateX(0);
      }
      .program-list .item:nth-child(6n).on .inner {
        left: auto;
        right: 4%;
        transform: translateX(0);
      }
    }
    @media all and (min-width: 1400px) and (max-width: 1600px) {
      .program-list .item:nth-child(5n) .inner {
        left: auto;
        right: 4%;
        transform: translateX(0);
      }
      .program-list .item:nth-child(5n-4).on .inner {
        left: 0;
        transform: translateX(0);
      }
      .program-list .item:nth-child(5n).on .inner {
        left: auto;
        right: 4%;
        transform: translateX(0);
      }
    }
    @media all and (min-width: 1100px) and (max-width: 1400px) {
      .program-list .item:nth-child(4n) .inner {
        left: auto;
        right: 4%;
        transform: translateX(0);
      }
      .program-list .item:nth-child(4n-3).on .inner {
        left: 0;
        transform: translateX(0);
      }
      .program-list .item:nth-child(4n).on .inner {
        left: auto;
        right: 4%;
        transform: translateX(0);
      }
    }
    @media all and (min-width: 1024px) and (max-width: 1100px) {
      .program-list .item:nth-child(3n) .inner {
        left: auto;
        right: 4%;
        transform: translateX(0);
      }
      .program-list .item:nth-child(3n-2).on .inner {
        left: 0;
        transform: translateX(0);
      }
      .program-list .item:nth-child(3n).on .inner {
        left: auto;
        right: 4%;
        transform: translateX(0);
      }
    }
    @media all and (min-width: 568px) and (max-width: 1024px) {
      .program-list .item:nth-child(3n) .inner {
        left: auto;
        right: 4%;
        transform: translateX(0);
      }
      .program-list .item:nth-child(3n-2).on .inner {
        left: 0;
        transform: translateX(0);
      }
      .program-list .item:nth-child(3n).on .inner {
        left: auto;
        right: 4%;
        transform: translateX(0);
      }
    }
    @media all and (max-width: 568px) {
      .program-list .item:nth-child(2n) .inner {
        left: auto;
        right: 4%;
        transform: translateX(0);
      }
      .program-list .item:nth-child(2n-1).on .inner {
        left: 0;
        transform: translateX(0);
      }
      .program-list .item:nth-child(2n).on .inner {
        left: auto;
        right: 4%;
        transform: translateX(0);
      }
    }


@media all and (max-width: 1600px) {
  .program-list .item {
    width: 20%;
  }
}


@media all and (max-width: 1400px) {
  .program-list .item {
    width: 25%;
    height: calc(13vw + 40px) !important;
  }
}


@media all and (max-width: 1100px) {
  .program-list .item {
    width: 33.3%;
    height: calc(17vw + 40px) !important;
  }
}


@media all and (max-width: 1024px) {
  .season-select {
    margin-left: 6vw;
  }
  
  
  /* program-list */
  .program-list .list-data {
    padding: 0 calc(6vw - 1%) 0 6vw;
  }
  .program-list .item.on .inner {
    padding-top: 19.5vw;
  }
  .program-list .item {
    width: 33.3%;
    height: calc(18vw + 40px) !important;
  }
}


@media all and (max-width: 812px) {
  .season-select {
    margin-left: 3vw;
  }
  
  
  /* program-list */
  .program-list .list-data {
    padding: 0 calc(3vw - 1%) 0 3vw;
  }
  .program-list .item {
    height: calc(19vw + 40px) !important;
  }
  .program-list .item.on .inner {
    padding-top: 21vw;
  }
}


@media all and (max-width: 568px) {
  .season-select {
    margin-left: 15px;
  }
  
  
  /* program-list */
  .program-list {
    padding: 30px 0 20px 0;
  }
  .program-list .list-data {
    padding: 0 calc(15px - 1%) 0 15px;
  }
  .program-list .item {
    width: 50%;
    height: calc(27vw + 40px) !important;
  }
  .program-list .item.on .inner {
    padding-top: 30.5vw;
  }
  .program-list .item.on .thumb-play span:after {
    width: 15vw;
    height: 15vw;
  }
}