: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} .share{ margin: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .share{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .share{ margin: 4rem 0rem}} @media screen and (max-width: 576px){ .share-heading .title-main{ margin: 0 auto}} .share-heading .text-18{ line-height: 1.33} @media screen and (min-width: 577px){ .share-heading .text-18{ margin: 0 auto; max-width: 85.6rem; text-align: center}} @media screen and (max-width: 576px){ .share-heading .text-18{ text-align: justify}} .share-swiper{ position: relative} @media screen and (min-width: 1025px){ .share-swiper{ display: none}} .share-swiper .swiper{ margin: 0 -0.8rem} .share-swiper .swiper-slide{ padding: 0 0.8rem; width: calc(100% / 2)} @media screen and (max-width: 576px){ .share-swiper .swiper-slide{ width: 100%}} .share-swiper .swiper-navigation> *{ top: calc(50% - 3rem)} .share-swiper_box{ gap: 2rem; display: flex} .share-swiper_img{ width: 100%; height: 100%; cursor: pointer; position: relative} @media screen and (min-width: 1201px){ .share-swiper_img:hover .img img{ transform: translate(-50%, -50%) scale(1.05)}} .share-swiper_img .img{ height: 100%; overflow: hidden; position: relative; border-radius: 1rem; padding-top: calc(410 / 670 * 100%)} @media screen and (max-width: 1200px){ .share-swiper_img .img{ padding-top: calc(214 / 380 * 100%)}} .share-swiper_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} .share-swiper_content> *{ line-height: 150%} .share-swiper_content .text-16{ color: #025899} .share .icon{ width: 4rem; height: 4rem; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%)} .share .icon img{ width: 100%; height: 100%; object-fit: contain} .share-row{ --rg: 1.6rem; --cg: 1.6rem} @media screen and (max-width: 1024px){ .share-row{ display: none}} .share-list{ max-height: 39rem; padding-right: 3rem; overflow: hidden auto} .share-list .share-swiper_img{ flex-shrink: 0; max-width: 19.4rem} .share-list .share-swiper_img .icon{ width: 2rem; height: 2rem} .count{ --padding: 4.8rem; padding-top: var(--padding); background-color: #025899} @media screen and (max-width: 1200px){ .count{ --padding: 4rem}} .count-wrap{ --letter-spacing: 2.4rem} @media screen and (max-width: 1280px){ .count-wrap{ --letter-spacing: 1.2rem}} @media screen and (max-width: 767px){ .count-wrap{ --letter-spacing: 1rem}} .count-wrap .title-main{ width: 100%; color: white; margin: 0 auto; max-width: 110rem} .count-inner{ row-gap: 0} .count-list{ display: flex; flex-wrap: wrap; row-gap: 2.4rem; padding-bottom: var(--padding); margin: 0 calc(-1 * var(--letter-spacing))} .count-item{ width: calc(100% / 4); padding: 0 var(--letter-spacing)} @media screen and (max-width: 1024px){ .count-item{ width: calc(100% / 2)}} .count-number{ display: flex; margin: 0 auto; font-weight: 700; font-size: 6.4rem; user-select: none; text-align: center; width: fit-content; align-items: flex-start; background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text} @media screen and (max-width: 1200px){ .count-number{ font-size: 4.8rem}} @media screen and (max-width: 1024px){ .count-number{ font-size: 4rem}} @media screen and (max-width: 767px){ .count-number{ font-size: 3.6rem}} .count-number .suffix{ font-size: 4rem; line-height: normal} @media only screen and (max-width: 1200px){ .count-number .suffix{ font-size: 3.5rem}} @media only screen and (max-width: 800px){ .count-number .suffix{ font-size: 2.7rem}} .count-content{ margin: 0 auto; text-align: center; max-width: 20.2rem} .count-content .text-18{ color: white; line-height: 133%} .count-desc{ padding: 2.4rem 0; isolation: isolate; position: relative} @media screen and (max-width: 1024px){ .count-desc{ padding: 1.6rem 0}} .count-desc::before{ content: ""; top: 0; left: 50%; z-index: -1; height: 100%; width: 100vw; position: absolute; transform: translateX(-50%); background-color: #e4f4ff} .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}} .m-share{ margin: 6rem 0} .m-share-title{ width: 100%; margin: 0 auto; max-width: 88.8rem} .m-share-title .text-18{ margin: 0 auto; line-height: 1.33; max-width: 49.8rem; text-align: left} @media screen and (min-width: 576px){ .m-share-title .text-18{ text-align: center}} .m-share-list{ --letter-spacing: 1rem; display: flex; flex-wrap: wrap; row-gap: 2rem; margin: 0 calc(-1 * var(--letter-spacing))} .m-share-item{ width: calc(100% / 2); padding: 0 var(--letter-spacing)} @media screen and (max-width: 767px){ .m-share-item{ width: 100%}} .m-share-img{ position: relative} @media screen and (min-width: 1201px){ .m-share-img:hover .img img{ transform: translate(-50%, -50%) scale(1.05)}} .m-share-img .img{ overflow: hidden; position: relative; border-radius: 2rem; padding-top: calc(326 / 612 * 100%)} .m-share-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} .m-share-img .icon{ cursor: pointer; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); border-radius: 50%; width: 4.6rem; height: 4.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center} @media screen and (max-width: 991px){ .m-share-img .icon{ width: 3.2rem; height: 3.2rem}} @media screen and (max-width: 767px){ .m-share-img .icon{ width: 2.8rem; height: 2.8rem}} .m-share-img .icon img{ width: 100%; height: 100%; object-fit: cover} @media screen and (min-width: 768px){ .m-share-extra .m-share-list{ display: grid; row-gap: 0.8rem; overflow: hidden; margin: 0 -0.4rem; grid-template-columns: 75% 25%; grid-template-rows: repeat(2, 1fr)} .m-share-extra .m-share-item{ width: 100%; padding: 0 0.8rem} .m-share-extra .m-share-item:first-child{ grid-column: span 1; grid-row: 1 / span 3} .m-share-extra .m-share-item:nth-child(2){ grid-column: 2 / span 1; grid-row: 3 / span 1}} .m-share-extra .m-share-slider{ --letter-spacing: 1rem} @media screen and (max-width: 767.98px){ .m-share-extra .m-share-slider{ margin-left: calc(-1 * var(--letter-spacing)); margin-right: calc(-1 * var(--letter-spacing))}} .m-share-extra .m-share-list{ margin: 0} @media screen and (max-width: 767.98px){ .m-share-extra .m-share-list{ flex-wrap: nowrap}} .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} .feedback{ margin: 3rem 0rem 3rem} @media screen and (max-width: 992px){ .feedback{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .feedback{ margin: 4rem 0rem}} .feedback-wrap{ row-gap: 2.4rem} .feedback-swiper{ width: 100%; margin: 0 auto; max-width: 102rem; position: relative; --letter-spacing: 1rem} @media screen and (max-width: 1200px){ .feedback-swiper{ --letter-spacing: 0.5rem}} .feedback-swiper .swiper{ padding-block: 4rem; margin: -4rem calc(-1 * var(--letter-spacing))} .feedback-swiper .swiper-wrapper{ row-gap: 2rem; flex-direction: row !important} @media screen and (max-width: 1200px){ .feedback-swiper .swiper-wrapper{ row-gap: 1rem}} .feedback-swiper .swiper-slide{ width: calc(100% / 2); padding: 0 var(--letter-spacing)} @media screen and (max-width: 576px){ .feedback-swiper .swiper-slide{ width: 100%}} .feedback-box{ row-gap: 1.6rem; padding: 1.2rem; overflow: hidden; border-radius: 2rem; background-color: white; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} @media screen and (min-width: 1201px){ .feedback-box:hover .img img{ transform: translate(-50%, -50%) scale(1.05)}} @media screen and (max-width: 767px){ .feedback-box{ padding: 1.2rem}} .feedback-img_img{ height: 100%} .feedback-img_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; object-fit: inherit} .feedback-img_img .img:not(:has(picture)){ overflow: hidden; position: relative; border-radius: 2rem; padding-top: calc(385 / 660 * 100%); display: block} .feedback-img_img .img:has(picture) picture{ display: block; overflow: hidden; position: relative; border-radius: 2rem; padding-top: calc(385 / 660 * 100%)} .feedback-content{ gap: 1.2rem; position: relative} .feedback-content_title{ row-gap: 0.8rem} @media screen and (max-width: 1200px){ .feedback-content_title{ row-gap: 0.4rem}} .feedback-content_title> *{ line-height: 150%} .feedback-content_title .text-20{ color: #025899; margin-right: 11rem} @media screen and (min-width: 1200px){ .feedback-content_title .text-20{ margin-right: 12rem}} .feedback-content_title .box{ gap: 0.6rem; display: flex} .feedback-content_title .box img{ flex-shrink: 0; margin-top: 0.3rem; object-fit: contain; width: 1.6rem; height: 1.6rem} .feedback-content .text-18{ color: #535353} .feedback-content> .text-18{ position: absolute; right: 0; top: 0; min-width: 11rem; text-align: right} @media screen and (min-width: 1200px){ .feedback-content> .text-18{ min-width: 12rem}} .feedback-content.d-none{ display: none} .m-feedback{ padding: 3rem 0rem 3rem} @media screen and (max-width: 992px){ .m-feedback{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .m-feedback{ padding: 4rem 0rem}} .m-feedback-swiper{ position: relative; --letter-spacing: 1rem} @media screen and (max-width: 576px){ .m-feedback-swiper{ row-gap: 2.4rem}} .m-feedback-swiper .btn{ margin-top: 4rem} @media screen and (max-width: 576px){ .m-feedback-swiper .btn{ margin-top: 2.4rem}} .m-feedback-swiper .swiper{ margin: 0 calc(-1 * var(--letter-spacing))} .m-feedback-swiper .swiper-slide{ width: calc(100% / 3); padding: 0 var(--letter-spacing)} @media screen and (max-width: 991px){ .m-feedback-swiper .swiper-slide{ width: calc(100% / 2)}} @media screen and (max-width: 576px){ .m-feedback-swiper .swiper-slide{ width: 100%}} @media screen and (min-width: 1201px){ .m-feedback-swiper .swiper-navigation{ display: none}} .m-feedback-img{ cursor: pointer; padding: 0.8rem; overflow: hidden; position: relative; border-radius: 2rem; background-color: white; border: 0.1rem solid #979797} .m-feedback-img .img{ overflow: hidden; position: relative; padding-top: calc(426 / 356 * 100%)} @media screen and (min-width: 1201px){ .m-feedback-img .img:hover img{ transform: translate(-50%, -50%) scale(1.05)}} .m-feedback-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} .certificate{ padding: 4rem 0} .certificate .m-feedback-img{ border: 0; padding: 0} .certificate .m-feedback-img .img{ padding-top: calc(268 / 402 * 100%)} .newspapper{ margin: 3rem 0rem 3rem} @media screen and (max-width: 992px){ .newspapper{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .newspapper{ margin: 4rem 0rem}} @media screen and (max-width: 576px){ .newspapper-wrap{ row-gap: 2.4rem}} .newspapper-swiper{ position: relative; --letter-spacing: 1.5rem} @media screen and (max-width: 1200px){ .newspapper-swiper{ --letter-spacing: 0.8rem}} .newspapper-swiper .swiper{ max-width: 114rem; margin: -4rem auto; padding-block: 4rem} @media screen and (max-width: 1201px){ .newspapper-swiper .swiper{ margin: -4rem calc(-1 * var(--letter-spacing))}} .newspapper-swiper .swiper-slide{ width: calc(100% / 3); padding: 0 var(--letter-spacing)} @media screen and (max-width: 1024px){ .newspapper-swiper .swiper-slide{ width: calc(100% / 2)}} @media screen and (max-width: 576px){ .newspapper-swiper .swiper-slide{ width: 100%}} .newspapper-swiper_box{ overflow: hidden; border-radius: 2rem; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} .newspapper-swiper_action{ padding: 2.4rem} .newspapper-swiper_img{ overflow: hidden; position: relative; border-radius: 2rem; padding-top: calc(708 / 425 * 100%)} .newspapper-swiper_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} .doctor{ margin: 6rem 0} @media screen and (max-width: 1024px){ .doctor-col{ width: 100%}} @media screen and (max-width: 1024px){ .doctor-inner{ row-gap: 3rem}} .doctor-img{ overflow: hidden; user-select: none; border-radius: 2rem; background-color: white; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} @media screen and (max-width: 1024px){ .doctor-img{ margin: 0 auto; max-width: 35.6rem}} .doctor-img .img{ position: relative; padding-top: calc(512 / 410 * 100%)} .doctor-img .img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%)} .doctor-img .content{ text-align: center; padding: 1.6rem 2.4rem; text-transform: uppercase; background-color: #025899} .doctor-img .content-desc> *{ color: white} .doctor-img .content .text-18{ line-height: 133%} .doctor-img .content .title-22{ line-height: 150%} .doctor-img .content .btn{ font-size: 1.8rem; line-height: 150%; padding: 0.2rem 1.6rem} @media only screen and (max-width: 1200px){ .doctor-img .content .btn{ font-size: 1.6rem}} .spec{ margin: 6rem 0} .spec-row{ align-items: center} @media screen and (max-width: 1024px){ .spec-col{ width: 100%}} .spec-heading .text-18{ line-height: 1.33; text-align: left} @media screen and (min-width: 576px){ .spec-heading .text-18{ text-align: center}} @media screen and (max-width: 1024px){ .spec-list{ row-gap: 1.5rem}} .spec-box{ gap: 2rem; display: flex} @media screen and (max-width: 1024px){ .spec-box{ gap: 1.2rem}} .spec-box img{ flex-shrink: 0; width: 3rem; height: 3rem; object-fit: contain} @media screen and (max-width: 1024px){ .spec-box img{ width: 2.4rem; height: 2.4rem}} .spec-box .text-18{ color: #025899; line-height: 150%} .spec-img{ overflow: hidden; user-select: none; position: relative; border-radius: 1rem; padding-top: calc(278 / 485 * 100%)} .spec-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} .process{ margin: 6rem 0} .process-row{ row-gap: 0} @media screen and (min-width: 1201px){ .process-row{ --rg: 8rem; --cg: 8rem}} .process-group{ position: relative} @media screen and (max-width: 1024px){ .process-group{ row-gap: 4rem; padding-left: 1.6rem}} .process-group::before{ content: ""; top: 0; left: 50%; height: 100%; width: 0.1rem; position: absolute; background-color: #025899} @media screen and (min-width: 1025px){ .process-group::before{ transform: translateX(-50%)}} @media screen and (max-width: 1024px){ .process-group::before{ left: 0}} .process-box{ --position: 4.8rem} @media screen and (max-width: 1200px){ .process-box{ --position: 2rem}} @media screen and (max-width: 1024px){ .process-box{ --position: 2.3rem}} .process-box:nth-child(even) .process-row{ flex-direction: row-reverse} @media screen and (min-width: 1025px){ .process-box:nth-child(even) .process-content::before{ right: calc(-1 * var(--position))}} @media screen and (min-width: 1025px){ .process-box:nth-child(even) .process-content .mona-content p:has(strong){ text-align: right}} .process-box:nth-child(odd) .process-content::before{ left: calc(-1 * var(--position))} @media screen and (max-width: 1024px){ .process-col{ width: 100%}} .process-img{ overflow: hidden; user-select: none; position: relative; border-radius: 1rem; padding-top: calc(370 / 576 * 100%)} @media screen and (min-width: 1201px){ .process-img:hover img{ transform: translate(-50%, -50%) scale(1.05)}} .process-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} .process-content{ position: relative} @media screen and (min-width: 1025px){ .process-content{ margin-top: 3rem}} .process-content::before{ content: ""; top: 0; position: absolute; border-radius: 50%; width: 1.6rem; height: 1.6rem; background-color: #025899} @media screen and (max-width: 1024px){ .process-content::before{ left: calc(-1 * var(--position))}} .undertake{ margin: 6rem 0} .undertake .title-main{ width: 100%; margin: 0 auto; max-width: 100rem} .undertake-row{ align-items: center} @media screen and (max-width: 1024px){ .undertake-col{ width: 100%}} .undertake-swiper{ position: relative} .undertake-swiper .swiper{ margin: 0 -0.4rem} .undertake-swiper .swiper-slide{ padding: 0 0.4rem} .undertake-img{ overflow: hidden; position: relative; border-radius: 1rem; padding-top: calc(336 / 518 * 100%)} @media screen and (min-width: 1201px){ .undertake-img:hover img{ transform: translate(-50%, -50%) scale(1.05)}} .undertake-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} .wel{ padding: 4rem 0; isolation: isolate; position: relative} .wel::before{ content: ""; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; position: absolute; background-size: cover; background-repeat: no-repeat; background-position: top; background-image: url("/wp-content/themes/i-dent/assets-v2/images/doctor/wel-bn.png")} .wel-content .desc .text-18{ line-height: 150%} .wel-content .notice> img{ height: 2rem; width: 2.8rem; flex-shrink: 0; object-fit: contain} .wel-content .notice> img:last-of-type{ margin-left: auto} .wel-content .notice .text-18{ color: #025899} .wel-content .notice .name{ margin-top: 2rem; text-align: right} .expert{ padding: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .expert{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .expert{ padding: 4rem 0rem}} @media screen and (max-width: 1024px){ .expert-row{ flex-direction: column-reverse}} @media screen and (max-width: 1024px){ .expert-col{ width: 100%}} .expert-img{ height: 100%} .expert-img .img{ height: 100%; overflow: hidden; position: relative; padding-top: calc(390 / 606 * 100%)} .expert-img .img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%)} .expert-content .text-20{ line-height: 150%; color: #025899} .expert-content .mona-content{ padding: 1.2rem; background-color: #e4f4ff} @media screen and (min-width: 992px){ .expert-box:nth-child(even) .expert-row{ flex-direction: row-reverse}} .expert-list{ display: flex; flex-wrap: wrap; row-gap: 2.4rem; margin: 0 -0.4rem; justify-content: center} .expert-item{ padding: 0 0.4rem; width: calc(100% / 3)} @media screen and (max-width: 991px){ .expert-item{ width: calc(100% / 2)}} @media screen and (max-width: 576px){ .expert-item{ width: 100%}} .expert-item_img .img{ position: relative; padding-top: calc(258 / 412 * 100%)} .expert-item_img .img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%)} .expert-item_content{ text-align: center; padding: 1.2rem 2.4rem} .expert-item_content .text-18{ color: #025899} .perform{ position: relative; padding: 6rem 0rem 6rem; background: linear-gradient(179deg, #fff 40.55%, #a4daff 99.13%)} @media screen and (max-width: 992px){ .perform{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .perform{ padding: 4rem 0rem}} .perform-inner figcaption.text-18{ text-align: center; color: #025899; margin-top: 1.6rem} .perform-extra{ background: transparent} .perform-list{ display: flex; flex-wrap: wrap; row-gap: 0.8rem; margin: 0 -0.4rem} .perform-item{ padding: 0 0.4rem; width: calc(100% / 2)} @media screen and (max-width: 576px){ .perform-item{ width: 100%}} .perform-img .img{ position: relative; padding-top: calc(366 / 620 * 100%)} .perform-img .img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%)} .perform-inner> .text-18{ color: #025899; line-height: 133%; text-align: center} .treatment{ padding: 4rem 0; overflow: hidden; position: relative; isolation: isolate} .treatment::before{ content: ""; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; position: absolute; background-size: cover; background-repeat: no-repeat; background-position: top; background-image: url("/wp-content/themes/i-dent/assets-v2/images/doctor/wel-bn.png")} .treatment-swiper{ position: relative} .treatment-swiper .swiper{ margin: 0 -0.4rem} @media screen and (min-width: 1201px){ .treatment-swiper .swiper{ overflow: visible}} .treatment-swiper .swiper-slide{ padding: 0 0.4rem; width: calc(100% / 5)} @media screen and (max-width: 1024px){ .treatment-swiper .swiper-slide{ width: calc(100% / 4)}} @media screen and (max-width: 767px){ .treatment-swiper .swiper-slide{ width: calc(100% / 3)}} @media screen and (max-width: 576px){ .treatment-swiper .swiper-slide{ width: 100%}} @media screen and (min-width: 1201px){ .treatment-swiper .swiper-navigation{ display: none}} .p-doctor .feedback{ margin: 5rem 0} .p-doctor--remaining .calendar-bg img{ object-fit: inherit}