: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}