@charset "UTF-8";
/*!
 * Bootstrap v5.1.1 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

* ul,
* li {
  padding: 0 !important;
  margin: 0;
  list-style: none;
}

.categories {
  background-color: #fff;
  padding: 30px;
  border-radius: 30px;
}
.categories p {
  padding-top: 20px;
  font-size: 2;
  line-height: 1.5rem;
}
@media (max-width: 576px) {
  .categories {
    margin-top: 27%;
  }
}

.categoriesIntroduce {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 40px;
}
@media (max-width: 768px) {
  .categoriesIntroduce {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
}

/*介紹標題*/
.intrTitle {
  font-size: 1.75rem;
}

/*介紹內文*/
.intrText {
  grid-column: 1/5;
  margin-bottom: 20px;
}

/*介紹圖片*/
.intrImg {
  display: flex;
  grid-column: 5/5;
  position: relative;
}
.intrImg span {
  /*依照介紹主題所替換圖片*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  height: 360px;
  width: 360px;
  border-radius: 50%;
  z-index: 20;
}
.intrImg span.popcorn_pageImg {
  background-image: url(../image/popcorn_pageImg.png);
}
.intrImg span.singDance_pageImg {
  background-image: url(../image/singDance_pageImg.png);
}
.intrImg span.theatrics_pageImg {
  background-image: url(../image/theatrics_pageImg.png);
}
.intrImg span.uncleJohn_pageImg {
  background-image: url(../image/uncleJohn_pageImg.png);
}
.intrImg span.explore_pageImg {
  background-image: url(../image/explore_pageImg.png);
}
@media (max-width: 576px) {
  .intrImg span {
    height: 180px;
    width: 180px;
  }
}
.intrImg::before {
  content: "";
  display: inline-block;
  background-image: url(../image/intrImg_Bg1.png);
  width: 100px !important;
  height: 100px !important;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 0;
}
.intrImg::after {
  content: "";
  display: inline-block;
  background-image: url(../image/intrImg_Bg2.png);
  width: 90px !important;
  height: 90px !important;
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  position: absolute;
  top: 66%;
  right: 0;
  z-index: 30;
}
@media (max-width: 768px) {
  .intrImg::after {
    top: 70%;
    right: -20px;
    z-index: 0;
  }
}

.categoriesListBtn {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 0;
  margin-top: 20px;
}
.categoriesListBtn li {
  margin-bottom: 16px;
}
.categoriesListBtn + li {
  margin-right: 16px;
}
.categoriesListBtn a {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #495057;
}
.categoriesListBtn span {
  display: inline-block;
  height: 180px;
  width: 180px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 8px solid rgba(255, 255, 255, 0);
  margin-bottom: 10px;
  opacity: 0.5;
}
.categoriesListBtn .popcornPage span {
  background-image: url(../image/popcorn.png);
}
.categoriesListBtn .popcornPage span:focus, .categoriesListBtn .popcornPage span:hover {
  opacity: 1;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background-color: #00DB16;
  border: 8px solid #00DB16;
}
@media (prefers-reduced-motion: reduce) {
  .categoriesListBtn .popcornPage span:focus, .categoriesListBtn .popcornPage span:hover {
    transition: none;
  }
}
.categoriesListBtn .singDancePage span {
  background-image: url(../image/singDance.png);
}
.categoriesListBtn .singDancePage span:focus, .categoriesListBtn .singDancePage span:hover {
  opacity: 1;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background-color: #00A0FE;
  border: 8px solid #00A0FE;
}
@media (prefers-reduced-motion: reduce) {
  .categoriesListBtn .singDancePage span:focus, .categoriesListBtn .singDancePage span:hover {
    transition: none;
  }
}
.categoriesListBtn .theaterPage span {
  background-image: url(../image/theater.png);
}
.categoriesListBtn .theaterPage span:focus, .categoriesListBtn .theaterPage span:hover {
  opacity: 1;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background-color: #FF00FE;
  border: 8px solid #FF00FE;
}
@media (prefers-reduced-motion: reduce) {
  .categoriesListBtn .theaterPage span:focus, .categoriesListBtn .theaterPage span:hover {
    transition: none;
  }
}
.categoriesListBtn .explorePage span {
  background-image: url(../image/explore.png);
}
.categoriesListBtn .explorePage span:focus, .categoriesListBtn .explorePage span:hover {
  opacity: 1;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  border: 8px solid #7A9128;
  background-color: #7A9128;
}
@media (prefers-reduced-motion: reduce) {
  .categoriesListBtn .explorePage span:focus, .categoriesListBtn .explorePage span:hover {
    transition: none;
  }
}
.categoriesListBtn .uncleJohnPage span {
  background-image: url(../image/uncleJohn.png);
}
.categoriesListBtn .uncleJohnPage span:focus, .categoriesListBtn .uncleJohnPage span:hover {
  opacity: 1;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  border: 8px solid #EAFF16;
  background-color: #EAFF16;
}
@media (prefers-reduced-motion: reduce) {
  .categoriesListBtn .uncleJohnPage span:focus, .categoriesListBtn .uncleJohnPage span:hover {
    transition: none;
  }
}

.videoList {
  margin-top: 30px;
}

.videoListCard {
  grid-gap: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .videoListCard {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 576px) {
  .videoListCard {
    display: block;
  }
}

.listCard {
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 5px 5px 10px #dee2e6;
}
@media (max-width: 576px) {
  .listCard {
    margin-bottom: 20px;
  }
}
.listCard:hover {
  box-shadow: 5px 5px 10px #71777c;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
}

.listCardTitle {
  padding: 10px 20px 20px;
  display: block;
  color: #2d2d2d;
}

.videoContainer {
  border-radius: 20px 20px 0 0;
}
.videoContainer iframe {
  border-radius: 20px 20px 0 0;
}
.listCard img {
  border-radius: 20px 20px 0 0;
  width: 100%;
  height: 200px;
  object-fit:  cover;
}

.btnfocus {
  opacity: 1 !important;
}

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}