main.page-top {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0;
  width: 100%;
}

.hero-swiper {
  box-sizing: border-box;
}

.hero-swiper .swiper-wrapper {
  padding: 0;
}

.hero-swiper .swiper-slide img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Banner */
.banner-swiper {
  width: 100%;
  overflow: hidden;
}

.banner-swiper .swiper-slide {
  width: 100%;
  height: 100%;

}

.banner-swiper .swiper-slide img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .hero-swiper {
    height: auto;
  }
}

.banners {
  padding: 60px 0 40px;
  margin-bottom: 60px;
  background: #F8F8F8;
}

.banner-swiper {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 48px;
}

.banner-swiper .swiper-pagination {
  bottom: 0;
  padding: 12px 0;
}

/* Section Common */
.section {
  padding: 80px 4em;
}

.section-header h2 {
  text-align: center;
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 400;
}

.section-header::after {
  content: '';
  border-bottom: 1px solid #000;
  width: 80px;
  display: block;
  margin: 8px auto;
  margin-bottom: 36px;
}

.section-content {
  display: flex;
  margin-bottom: 36px;
}

.section-more {
  text-align: center;
}

/* .section-more .btn-more {
  display: inline-block;
  padding: 8px 20px;
  min-width: 200px;
  border: 1px solid;
  text-align: center;
  text-transform: uppercase;
  border-image: linear-gradient(to right top, #ecdf31, #a9ea72, #78ebae, #74e4d7, #9bd9e4);
  border-image-slice: 1;
} */

.nothumb img {
  opacity: 0.3;
}

@media screen and (max-width: 767px) {
  .section {
    padding: 80px 16px;
  }
}

/* Section Common end */

/* What's News */
.news {
  margin: 0 auto;
}

.news .section-content {
  width: 800px;
  margin: 0 auto 24px;
}

.news .section-content ul {
  width: 100%;
}

.news .section-content ul li {
  padding: 32px 16px;
  border-bottom: 1px solid rgb(207, 217, 222);
}

.news .section-content ul li:first-child {
  border-top: 1px solid rgb(207, 217, 222);
}

.news .post-type-date {
  display: flex;
  column-gap: 12px;
  margin-bottom: 4px;
  align-items: center;
}

.news .post-type-date span.post-type {
  display: flex;
  align-items: center;
  border-radius: 20px;
  font-size: 12px;
  padding: 0 12px;
  background: #000;
  min-width: 80px;
  text-align: center;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  justify-content: center;
  letter-spacing: 1.1;
}

.news .post-type-date span.post-type.fc-news {
  background-image: linear-gradient(to right top, #ecdf31, #a9ea72, #78ebae, #74e4d7, #9bd9e4);
}

.news .post-type-date span.post-date {
  /* color: rgb(83, 100, 113); */
  color: #000;
  font-weight: 300;
}

@media screen and (max-width: 767px) {
  .news .section-content {
    width: 100%;
  }
}

/* What's News end */

/* Contents */
.section.contents {
  background-color: #F8F8F8;
  /* padding: 80px 4em; */
}

.contents .section-content ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.contents .section-content ul li {
  width: 49%;
}

.contents .contents-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.contents .contents-thumb img {
  object-fit: cover;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .contents .section-content ul {
    flex-direction: column;
    row-gap: 24px;
  }

  .contents .section-content ul li {
    width: 100%;
  }
}

/* Content end */

/* Gallery */

.gallery .section-content {
  width: 800px;
  margin: 0 auto;
}

.gallery .section-content ul {
  display: flex;
  flex-wrap: wrap;
}

.gallery .section-content ul li {
  width: calc(100%/3);
}

.gallery .gallery-thumb img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

@media screen and (max-width: 767px) {
  .gallery .section-content {
    width: 100%;
  }

  .gallery .section-content ul li {
    width: calc(100%/2);
  }
}

/* Gallery end */

/* Twitter */
.section.twitter {
  background-color: #F8F8F8;
}

.twitter .section-header h2 img {
  margin: 0 auto;
}

.twitter .section-content {
  width: 800px;
  margin: 0 auto;
  height: 400px;
}

.twitter .section-content .twitter-timeline {
  width: 100%;
  background-color: #efefef;
  border-radius: 12px;
}

@media screen and (max-width: 767px) {
  .twitter .section-content {
    width: 100%;
  }
}

/* Twitter end */