:root{ --font-pri: "Inter", sans-serif; --header-index: 99; --header-height-desktop: 10.3rem; --header-height-mb: 10.5rem} @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, .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, .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, .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 video, .banner .banner-bg iframe, .banner .banner-bg 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, .p-home .banner-bg_img{ min-height: 57rem; padding-top: calc(570 / 1928 * 100%)}} @media screen and (max-width: 576px){ .p-home .banner-video, .p-home .banner-bg, .p-home .banner-bg_img{ padding-top: calc(941 / 828 * 100%)}} .banner-picture{ inset: 0; width: 100%; height: 100%; display: block; position: absolute; overflow: hidden} .banner-picture img{ inset: 0; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: none} .banner .banner-bg_placeholder{ background-color: #eef5fb; background-image: var(--banner-placeholder-mobile); background-position: center top; background-repeat: no-repeat; background-size: cover} @media screen and (min-width: 769px){ .banner .banner-bg_placeholder{ background-image: var(--banner-placeholder-desktop, var(--banner-placeholder-mobile)); background-position: center center}} .banner-home + .book, .banner + .book{ margin-top: 2.4rem} .m-team{ margin: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .m-team{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .m-team{ margin: 4rem 0rem}} @media screen and (max-width: 767px){ .m-team-box{ row-gap: 2.4rem}} .m-team-box> .m-team-content_action{ margin: 0 auto; width: fit-content} @media screen and (min-width: 768px){ .m-team-box> .m-team-content_action{ display: none}} @media screen and (max-width: 576px){ .m-team-inner{ row-gap: 6.6rem}} @media screen and (max-width: 1024px){ .m-team-col{ width: 100%}} .m-team-img{ overflow: hidden; user-select: none; border-radius: 2rem; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} @media screen and (max-width: 1024px){ .m-team-img{ margin: 0 auto; max-width: 35rem}} .m-team-img .img{ position: relative; padding-top: calc(514 / 405 * 100%); display: flex; align-items: center; justify-content: center} .m-team-img .img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%); object-fit: contain} .m-team-content .title-main{ text-align: left} .m-team-content_action{ gap: 1.2rem; display: flex; flex-wrap: wrap} .m-team-content_action .btn{ line-height: 150%; padding: 0.2rem 2.4rem} @media screen and (max-width: 767px){ .m-team-content> .m-team-content_action{ display: none}} .m-team-swiper{ position: relative; --letter-spacing: 0.6rem} @media screen and (max-width: 1024px){ .m-team-swiper{ --letter-spacing: 0.4rem}} .m-team-swiper .swiper{ margin: 0 calc(-1 * var(--letter-spacing))} .m-team-swiper .swiper-slide{ width: fit-content; padding: 0 var(--letter-spacing)} .m-team-swiper_img{ cursor: pointer; position: relative; padding-top: 0; display: flex; align-items: center; justify-content: center} .m-team-swiper_img picture{ display: flex; align-items: center; justify-content: center} .m-team-swiper_img img{ height: 20rem; width: auto; object-fit: contain} @media screen and (max-width: 575px){ .m-team-swiper_img img{ height: 16rem}} .calendar{ position: relative; padding: 8rem 0rem 8rem} @media screen and (max-width: 992px){ .calendar{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .calendar{ padding: 4rem 0rem}} .calendar-bg{ inset: 0; z-index: -1; position: absolute} @media screen and (max-width: 1024px){ .calendar-bg{ background-color: #025899}} .calendar-bg img{ width: 100%; height: 100%; object-fit: cover} @media screen and (max-width: 1024px){ .calendar-bg img{ display: none}} .calendar-position{ z-index: 5; position: relative} .calendar-content{ width: 100%; max-width: 59rem; margin-left: auto; text-align: center} @media screen and (min-width: 1025px){ .calendar-content{ margin-right: 16rem}} @media screen and (min-width: 1025px) and (max-width: 1200px){ .calendar-content{ margin-right: 12rem}} @media screen and (max-width: 1024px){ .calendar-content{ margin-right: auto}} .calendar-content .title-22{ font-size: 2.2rem; color: #025899} @media screen and (max-width: 1024px){ .calendar-content .title-22{ color: white; font-size: 1.8rem}} @media screen and (max-width: 400px){ .calendar-content .title-22{ margin: 0 auto; max-width: 26rem}} .calendar-content .title-35{ margin: 0 auto; font-size: 3.5rem; width: fit-content; background: linear-gradient(270deg, #bd0000 0%, #ff1f1f 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent} @media screen and (max-width: 1024px){ .calendar-content .title-35{ font-size: 2.4rem; background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent}} @media screen and (max-width: 576px){ .calendar-content .title-35{ margin: 0 auto; font-size: 2rem; max-width: 20rem}} .calendar-content .text-18{ color: #2b2b2b} @media screen and (max-width: 1024px){ .calendar-content .text-18{ color: #e4f4ff}} @media screen and (max-width: 1024px){ .calendar-content_title{ row-gap: 1.2rem}} .calendar-content_title> *{ line-height: 150%} .calendar-content form .form-wrap{ row-gap: 1.6rem} .calendar-content form .form-text{ display: none} .calendar-content form .form-action{ margin-top: 0.8rem} @media screen and (max-width: 1024px){ .calendar-content form .form-action .btn{ font-size: 1.6rem; padding: 0.4rem 2.4rem}} .calendar-content form input{ border-color: #025899} .commit{ padding: 3rem 0rem 3rem; background: linear-gradient(270deg, #eaf6ff 0%, rgba(255, 255, 255, 0.5) 52.8%, #e4f4ff 104.5%)} @media screen and (max-width: 992px){ .commit{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .commit{ padding: 4rem 0rem}} .commit-heading .text-18{ margin: 0 auto; max-width: 98rem; line-height: 1.5; text-align: left} @media screen and (min-width: 576px){ .commit-heading .text-18{ text-align: center}} .commit-wrap{ --letter-spacing: 1rem} @media screen and (max-width: 1200px){ .commit-wrap{ row-gap: 3.2rem; --letter-spacing: 0.6rem}} .commit-list{ row-gap: 2rem; display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--letter-spacing))} @media screen and (max-width: 1200px){ .commit-list{ row-gap: 1.2rem}} .commit-item{ width: calc(100% / 3); padding: 0 var(--letter-spacing)} @media screen and (max-width: 767px){ .commit-item{ width: calc(100% / 2)}} .commit-box{ height: 100%; padding: 2.4rem; border-radius: 2rem; background-color: white; border: 0.05rem solid #025899; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25); row-gap: 2.4rem; padding-top: 1rem} @media screen and (max-width: 1200px){ .commit-box{ padding: 2rem}} @media screen and (max-width: 767px){ .commit-box{ row-gap: 2rem}} @media screen and (max-width: 400px){ .commit-box{ padding: 1.2rem}} .commit-img{ margin: 0 auto; user-select: none; width: 7rem} .commit-img img{ width: 100%; height: auto; object-fit: cover} .commit-content .text-18{ line-height: 133%} @media screen and (max-width: 400px){ .commit-content .text-18{ font-size: 1.4rem}}