/*------------------------------------------------------------
	Media
------------------------------------------------------------*/
/*------------------------------------------------------------
	Flex Box
------------------------------------------------------------*/
:root {
  --font-pri: "Inter", sans-serif;
  --header-index: 99;
  --header-height-mb: 10.3rem; }
  @media screen and (max-width: 800px) {
    :root {
      --header-height-mb: 10.5rem; } }

.banner {
  height: 100%;
  position: relative; }
  .banner .swiper {
    height: 100%; }
  .banner-home {
    height: 100%;
    position: relative; }
  @media screen and (max-width: 576px) {
    .banner-bg_img-pc {
      display: none; } }
  @media screen and (min-width: 577px) {
    .banner-bg_img-mb {
      display: none; } }
  .banner .banner-video,
  .banner .banner-bg_img {
    overflow: hidden;
    min-height: 45rem;
    position: relative;
    padding-top: calc(650 / 1928 * 100%); }
    @media screen and (max-width: 1200px) {
      .banner .banner-video,
      .banner .banner-bg_img {
        min-height: 30rem;
        padding-top: calc(400 / 1928 * 100%); } }
    @media screen and (max-width: 576px) {
      .banner .banner-video,
      .banner .banner-bg_img {
        padding-top: calc(372 / 390 * 100%); } }
    .banner .banner-video video,
    .banner .banner-video iframe,
    .banner .banner-video img,
    .banner .banner-bg_img video,
    .banner .banner-bg_img iframe,
    .banner .banner-bg_img img {
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      transform: translate(-50%, -50%); }

@media screen and (min-width: 1201px) {
  .p-home .banner-video,
  .p-home .banner-bg_img {
    min-height: 57rem;
    padding-top: calc(570 / 1928 * 100%); } }

.banner-picture {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; }
  .banner-picture img {
    width: 100%;
    height: auto; }

.banner-home + .book,
.banner + .book {
  margin-top: 2.4rem; }

.story {
  padding: 6rem 0rem 6rem; }
  @media screen and (max-width: 992px) {
    .story {
      padding: 6rem 0rem; } }
  @media screen and (max-width: 576px) {
    .story {
      padding: 4rem 0rem; } }
  .story-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 3.2rem;
    margin: 0 -1.6rem; }
    @media screen and (max-width: 1200px) {
      .story-list {
        row-gap: 1.6rem;
        margin: 0 -0.8rem; } }
  .story-item {
    padding: 0 1.6rem;
    width: calc(100% / 3); }
    @media screen and (max-width: 1200px) {
      .story-item {
        padding: 0 0.8rem; } }
    @media screen and (max-width: 1024px) {
      .story-item {
        width: calc(100% / 2); } }
    @media screen and (max-width: 576px) {
      .story-item {
        width: 100%; } }
  .story-box {
    height: 100%; }
    @media screen and (min-width: 1201px) {
      .story-box:hover .img img {
        transform: translate(-50%, -50%) scale(1.05); } }
  .story-img {
    position: relative; }
    .story-img .img {
      overflow: hidden;
      position: relative;
      border-radius: 1.6rem;
      padding-top: calc(278 / 358 * 100%); }
      .story-img .img img {
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        transform: translate(-50%, -50%);
        transition: 0.4s ease-in-out; }
  .story-content .cate {
    gap: 1.2rem;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .story-content .cate-link {
      color: #025899;
      border-radius: 2rem;
      padding: 0.5rem 1.5rem;
      background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%); }
      @media screen and (max-width: 576px) {
        .story-content .cate-link {
          font-size: 1.2rem; } }
    .story-content .cate-calendar {
      gap: 0.8rem;
      color: #025899;
      display: flex;
      align-items: center; }
      @media screen and (max-width: 576px) {
        .story-content .cate-calendar {
          font-size: 1.2rem; } }
      .story-content .cate-calendar img {
        flex-shrink: 0;
        user-select: none;
        object-fit: contain;
        width: 1.6rem;
        height: 1.6rem; }
  .story-content .content .title-22 {
    transition: 0.4s ease-in-out; }
    @media screen and (min-width: 1201px) {
      .story-content .content .title-22:hover {
        color: #025899; } }

.banner .banner-bg .banner-picture,.banner .banner-bg.banner-bg_img .banner-picture,.banner .banner-bg_img .banner-picture{inset:0;width:100%;height:100%;display:block;position:absolute;overflow:hidden}.banner .banner-bg .banner-picture img,.banner .banner-bg.banner-bg_img .banner-picture img,.banner .banner-bg_img .banner-picture img{inset:0;width:100%;height:100%;object-fit:cover;position:absolute;transform:none}