: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} .prize{ margin: 3rem 0rem 3rem} @media screen and (max-width: 992px){ .prize{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .prize{ margin: 4rem 0rem}} .prize-swiper{ position: relative; --letter-spacing: 2.5rem} .prize-swiper .swiper{ padding-block: 4rem; margin: -4rem -1.2rem} .prize-swiper .swiper-slide{ width: 100%; padding: 0 1.2rem} .prize-swiper + .prize-box_content{ width: 100%} .prize-box{ padding: 4rem; display: flex; flex-wrap: wrap; overflow: hidden; gap: 2.4rem 4.8rem; isolation: isolate; position: relative; border-radius: 2.5rem; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} @media screen and (max-width: 1200px){ .prize-box{ gap: 2.4rem; padding: 2rem}} .prize-box::before{ content: ""; top: 0; left: 0; width: 100%; z-index: -1; height: 100%; position: absolute; pointer-events: none; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("/wp-content/themes/i-dent/assets-v2/images/home/quality-bg.png")} @media screen and (max-width: 991px){ .prize-box{ flex-direction: column}} .prize-box_logo{ gap: 3rem; width: 100%; display: flex; align-items: center} @media screen and (max-width: 991px){ .prize-box_logo{ gap: 1.2rem}} .prize-box_logo img{ flex-shrink: 0; object-fit: contain; width: 5.9rem; height: 5.9rem} .prize-box_logo .title-22{ line-height: 150%; color: #025899; letter-spacing: 0.022rem} @media screen and (max-width: 991px){ .prize-box_logo .title-22{ text-align: center}} .prize-box_img{ width: 18%; flex-shrink: 0; user-select: none} @media screen and (max-width: 991px){ .prize-box_img{ width: 50%; margin: 0 auto}} @media screen and (max-width: 576px){ .prize-box_img{ width: 75%}} .prize-box_img .img{ display: block; position: relative; padding-top: calc(274 / 192 * 100%)} .prize-box_img .img img{ top: 50%; left: 50%; width: 100%; height: 100%; position: absolute; object-fit: contain; transform: translate(-50%, -50%); transition: 0.4s ease-in-out} @media screen and (min-width: 992px){ .prize-box_content{ width: calc(100% - 26rem)}} @media screen and (min-width: 992px) and (max-width: 1200px){ .prize-box_content{ width: calc(100% - 23rem)}} .prize-box_content .content-title{ gap: 0.8rem; display: flex; align-items: center} .prize-box_content .content-title .title-30{ line-height: 100%; color: #025899} @media screen and (max-width: 576px){ .prize-box_content .content-title .title-30{ font-size: 2rem}} .prize-box_content .content-title img{ user-select: none; object-fit: contain; width: 6.7rem; height: 6.7rem} @media screen and (max-width: 576px){ .prize-box_content .content-title img{ width: 4rem; height: 4rem}} .prize-box_content .title-22{ font-size: 2.2rem; line-height: 160%; text-align: justify} @media only screen and (max-width: 1200px){ .prize-box_content .title-22{ font-size: 2rem}} @media only screen and (max-width: 800px){ .prize-box_content .title-22{ font-size: 2rem}} @media screen and (max-width: 576px){ .prize-box_content .title-22{ font-size: 1.2rem}} .equip{ position: relative; isolation: isolate; padding: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .equip{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .equip{ padding: 4rem 0rem}} @media screen and (max-width: 576px){ .equip{ overflow: hidden}} .equip::before{ content: ""; top: 0; left: 0; width: 100%; z-index: -1; height: 100%; position: absolute; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("/wp-content/themes/i-dent/assets-v2/images/home/tech-bg.png")} @media screen and (max-width: 576px){ .equip-heading{ row-gap: 2rem}} .equip-heading .text-18{ line-height: 1.33; text-align: center} @media screen and (max-width: 575px){ .equip-heading .text-18{ text-align: left}} .equip-swiper{ position: relative; --letter-spacing: 2.5rem} @media screen and (max-width: 1200px){ .equip-swiper{ --letter-spacing: 0.8rem}} .equip-swiper .swiper{ margin: 0 calc(-1 * var(--letter-spacing))} .equip-swiper .swiper-slide{ width: calc(100% / 3); padding: 0 var(--letter-spacing)} @media screen and (max-width: 1024px){ .equip-swiper .swiper-slide{ width: calc(100% / 2)}} @media screen and (max-width: 576px){ .equip-swiper .swiper-slide{ width: 100%}} .equip-swiper .swiper-navigation> *{ top: 35%} .equip-box{ height: 100%} @media screen and (max-width: 767px){ .equip-box{ row-gap: 1.2rem}} .equip-box_img{ overflow: hidden; position: relative; border-radius: 2rem} .equip-box_img .img{ display: block; position: relative; padding-top: calc(302 / 362 * 100%)} .equip-box_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} .equip-box_img .content{ background-color: #025899; padding: 0.8rem 2.4rem 2rem 2.4rem} .equip-box_img .content *> *{ line-height: 150%} .equip-box_img .content .text-20{ color: white; text-align: center} .equip-box_img .content .text-14{ margin: 0 auto; color: #025899; width: fit-content; border-radius: 2rem; padding: 0.4rem 2.4rem; background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 49.52%, #dfaa23 100%)} .equip-box_content .text-18{ font-size: 1.8rem; line-height: 133%; text-align: center} .veneer-equip{ padding-top: 0} .veneer-equip::before{ display: none} .veneer-equip .equip-swiper{ --letter-spacing: 3.2rem} @media screen and (max-width: 1199.98px){ .veneer-equip .equip-swiper{ --letter-spacing: 2rem}} .veneer-equip .equip-box{ row-gap: 0} .veneer-equip .equip-box_img .img{ padding-top: calc(320 / 335 * 100%); border-radius: 2rem} .veneer-equip .equip-box_img .content{ background: transparent; padding: 2rem} .veneer-equip .equip-box_img .content .btn{ margin-right: auto; margin-left: auto} .veneer-equip .equip-box_content{ font-size: 1.8rem; color: #000; line-height: 1.5} @media only screen and (max-width: 1200px){ .veneer-equip .equip-box_content{ font-size: 1.6rem}} .veneer-equip .equip-box_content ul li{ position: relative; padding-left: 3.2rem} .veneer-equip .equip-box_content ul li::before{ background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; content: ""; width: 2.4rem; height: 2.4rem; top: 0; left: 0; background-image: url("../images/veneer/check.svg")} .system-wrap{ padding: 4rem 0; isolation: isolate; position: relative} @media screen and (max-width: 576px){ .system-wrap{ padding: 1.6rem 0}} .system-wrap::before{ content: ""; top: 0; left: 50%; z-index: -1; width: 100vw; height: 100%; position: absolute; transform: translateX(-50%); background: linear-gradient(270deg, #eaf6ff 0%, rgba(255, 255, 255, 0.5) 52.8%, #e4f4ff 104.5%)} .system-title{ row-gap: 0} .system-title> *{ color: #025899; line-height: 150%} .system-title .title-main br{ display: none} .system-title .title-main span{ display: block; line-height: 130%} .system-title .text-18{ font-size: 1.8rem} .system-row{ align-items: center} .system-logo{ --row-gap: 1.2rem; --letter-spacing: 0.6rem} .system-logo_list{ display: flex; flex-wrap: wrap; justify-content: center; row-gap: var(--row-gap); margin: 0 calc(-1 * var(--letter-spacing))} .system-logo_item{ padding: 0 var(--letter-spacing)} @media screen and (max-width: 767px){ .system-logo_item{ width: calc(100% / 3)}} @media screen and (min-width: 768px){ .system-logo_img{ width: 13rem; height: 13rem}} @media screen and (min-width: 768px) and (max-width: 1200px){ .system-logo_img{ width: 6rem; height: 6rem}} @media screen and (max-width: 767px){ .system-logo_img{ position: relative; padding-top: calc(1 / 1 * 100%)}} .system-logo_img img{ width: 100%; height: 100%; object-fit: contain} @media screen and (max-width: 767px){ .system-logo_img img{ top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%)}} @media screen and (max-width: 1200px){ .system-content{ row-gap: 1.6rem}} .system-content .text-18{ line-height: 150%; text-align: justify} @media screen and (max-width: 576px){ .system-row{ --rg: 1.6rem; --cg: 1.6rem}} @media screen and (max-width: 767px){ .system-col{ width: 100%}} .service{ margin: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .service{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .service{ margin: 4rem 0rem}} .service-swiper{ position: relative; --letter-spacing: 1.2rem} .service-swiper .swiper{ margin: 0 calc(-1 * var(--letter-spacing))} .service-swiper .swiper-slide{ width: calc(100% / 4); padding: 0 var(--letter-spacing)} @media screen and (max-width: 1200px){ .service-swiper .swiper-slide{ width: calc(100% / 3)}} @media screen and (max-width: 991px){ .service-swiper .swiper-slide{ width: calc(100% / 2)}} @media screen and (max-width: 576px){ .service-swiper .swiper-slide{ width: 100%}} @media screen and (min-width: 577px){ .service-swiper .swiper-navigation{ display: none}} .service-box{ overflow: hidden; border-radius: 2rem; background: linear-gradient(270deg, #eaf6ff 0%, rgba(255, 255, 255, 0.5) 52.8%, #e4f4ff 104.5%)} @media screen and (min-width: 1201px){ .service-box:hover .img img{ transform: translate(-50%, -50%) scale(1.05)}} .service-box_img{ display: block; padding: 2.4rem; overflow: hidden; position: relative} .service-box_img .img{ overflow: hidden; position: relative; border-radius: 50%; padding-top: calc(1 / 1 * 100%)} .service-box_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} .service-box_img .img-thumb{ right: 0.6rem; bottom: 1.2rem; overflow: hidden; width: 9rem; height: 9rem; position: absolute; border-radius: 50%} .service-box_img .img-thumb img{ width: 100%; height: 100%; object-fit: cover} .service-box_content-title{ text-align: center; padding: 1.2rem; background: linear-gradient(0deg, #025899 0%, #025899 100%)} .service-box_content-title> *{ color: white} .service-box_content-title .title-20{ font-size: 2rem; line-height: 150%; transition: 0.4s ease-in-out} @media only screen and (max-width: 1200px){ .service-box_content-title .title-20{ font-size: 1.8rem}} @media screen and (min-width: 1201px){ .service-box_content-title .title-20:hover{ color: #dfaa23}} .service-box_content-title h3.title-20{ font-size: 2.2rem} @media only screen and (max-width: 1200px){ .service-box_content-title h3.title-20{ font-size: 2rem}} @media only screen and (max-width: 800px){ .service-box_content-title h3.title-20{ font-size: 2rem}} .service-box_content-title .text-16{ display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 1; -webkit-line-clamp: 1; letter-spacing: 0.05rem} .service-box_content ul{ display: flex; row-gap: 0.6rem; padding: 1.6rem 0.8rem; flex-direction: column} .service-box_content ul li:not(:last-child){ padding-bottom: 0.6rem; border-bottom: 0.1rem solid #025899} .service-box_content ul .box{ gap: 0.8rem; display: flex; align-items: center; justify-content: space-between} @media screen and (min-width: 1201px){ .service-box_content ul .box:hover .text-18{ color: #dfaa23}} .service-box_content ul .box .text-18{ transition: 0.4s ease-in-out} .service-box_content ul .text-14{ line-height: 133%; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 1; -webkit-line-clamp: 1} .partner{ margin: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .partner{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .partner{ margin: 4rem 0rem}} @media screen and (max-width: 1200px){ .partner-wrap{ row-gap: 2.4rem}} .partner-heading .text-18{ color: #025899} .partner-swiper .swiper-wrapper{ align-items: center; transition-timing-function: linear} .partner-swiper .swiper-slide{ padding: 0 1.2rem; width: calc(100% / 4)} @media screen and (max-width: 767px){ .partner-swiper .swiper-slide{ width: calc(100% / 3)}} @media screen and (max-width: 576px){ .partner-swiper .swiper-slide{ width: calc(100% / 2)}} .partner-swiper_img{ user-select: none; max-width: 31.4rem} @media screen and (max-width: 1200px){ .partner-swiper_img{ max-width: 20rem}} @media screen and (max-width: 576px){ .partner-swiper_img{ max-width: 15rem}} .partner-swiper_img img{ width: 100%; object-fit: cover} .m-about{ overflow: hidden; margin: 3rem 0rem 3rem} @media screen and (max-width: 992px){ .m-about{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .m-about{ margin: 4rem 0rem}} @media screen and (max-width: 767px){ .m-about-wrap{ row-gap: 2.4rem}} .m-about-list{ --letter-spacing: 4rem; display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--letter-spacing))} @media screen and (max-width: 1200px){ .m-about-list{ row-gap: 4rem; --letter-spacing: 2rem}} .m-about-item{ position: relative; width: calc(100% / 4); padding: 0 var(--letter-spacing)} @media screen and (max-width: 991px){ .m-about-item{ width: calc(100% / 2)}} @media screen and (max-width: 576px){ .m-about-item:nth-child(odd):before{ content: ""; top: 0; left: 100%; z-index: -1; width: 100vw; height: 7rem; border-radius: 4rem; position: absolute; transform: translateX(-50%); background-color: #025899} .m-about-item:nth-child(odd):after{ content: ""; right: 0; top: 1rem; height: 5rem; width: 0.1rem; position: absolute; background-color: white}} .m-about-img{ flex-shrink: 0; margin: 0 auto; user-select: none; width: 9rem; height: 9rem; border-radius: 50%} @media screen and (max-width: 1200px){ .m-about-img{ width: 7rem; height: 7rem}} .m-about-img img{ width: 100%; height: 100%; object-fit: cover} .m-about-content{ text-align: center} .m-about-content .text-18{ line-height: 133%} .m-about-row{ display: flex; flex-wrap: wrap; align-items: center} @media screen and (max-width: 991px){ .m-about-row{ row-gap: 2rem}} @media screen and (max-width: 991px){ .m-about-row_col{ width: 100%}} .m-about-row_img{ z-index: 5; user-select: none; position: relative; padding-top: calc(306 / 400 * 100%)} .m-about-row_img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%)} .m-about-row_content{ isolation: isolate; position: relative; border-radius: 2rem; padding: 4rem 2.4rem 4rem 14rem; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} @media screen and (min-width: 992px){ .m-about-row_content{ margin-left: -7rem}} @media screen and (max-width: 991px){ .m-about-row_content{ padding: 2.4rem}} .m-about-row_content::before{ top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("/wp-content/themes/i-dent/assets-v2/images/about/m-about-bg.png")} @media screen and (min-width: 992px){ .m-about-row_content:after{ left: 12%; top: -2.7rem; width: 7.5rem; height: 5.4rem; background-color: #e4f4ff}} .m-about-row_content::before, .m-about-row_content::after{ content: ""; position: absolute; pointer-events: none} .m-about-row_content .mona-content p:last-of-type{ margin-bottom: 0} .m-system{ overflow: hidden; margin: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .m-system{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .m-system{ margin: 4rem 0rem}} @media screen and (min-width: 1201px) and (max-width: 1440px){ .m-system .container{ max-width: 80%}} .m-system-heading{ text-align: center} .m-system-heading .text-18{ margin: 0 auto; line-height: 133%; max-width: 97.5rem} @media screen and (max-width: 575px){ .m-system-heading .text-18{ text-align: left}} .m-system-inner{ --letter-spacing: 1.6rem} @media screen and (max-width: 767px){ .m-system-inner{ --letter-spacing: 1.2rem}} @media screen and (max-width: 576px){ .m-system-inner{ --letter-spacing: 0.8rem}} .m-system-list{ display: flex; flex-wrap: wrap; row-gap: 1.6rem; justify-content: center; margin: 0 calc(-1 * var(--letter-spacing))} .m-system-item{ padding: 0 var(--letter-spacing)} @media screen and (max-width: 767px){ .m-system-item{ width: calc(100% / 2)}} .m-system-item.is-active .m-system-item_box, .m-system-item:hover .m-system-item_box{ background-color: #025899} .m-system-item.is-active .m-system-item_box .text-20, .m-system-item:hover .m-system-item_box .text-20{ color: white} .m-system-item_box{ gap: 1.2rem; flex-wrap: wrap; border-radius: 2rem; transition: 0.4s ease-in-out; display: flex; align-items: center; padding: 0.8rem 2.4rem; background-color: #e4f4ff} @media screen and (max-width: 767px){ .m-system-item_box{ gap: 0.5rem; padding: 0.3rem 1rem; flex-direction: column}} .m-system-item_box .text-20{ color: #025899; line-height: 150%; transition: 0.4s ease-in-out} @media screen and (max-width: 767px){ .m-system-item_box .text-20{ font-size: 1.6rem; text-align: center}} .m-system-item_box .icon{ gap: 0.4rem; transition: 0.4s ease-in-out; border-radius: 2rem; display: flex; align-items: center; padding: 0.2rem 0.8rem; background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%)} .m-system-item_box .icon .text-16{ line-height: 150%; color: #025899} .m-system-item_box .icon img{ width: 2rem; height: 2rem; filter: brightness(0) saturate(100%) invert(20%) sepia(43%) saturate(4445%) hue-rotate(190deg) brightness(94%) contrast(98%); object-fit: contain} .m-system-slide{ --letter-spacing: 0.5rem} .m-system-slide .swiper{ margin: 0 calc(-1 * var(--letter-spacing))} .m-system-slide .swiper-slide{ padding: 0 var(--letter-spacing)} .m-system-main{ position: relative} .m-system-main .m-system-img{ padding-top: calc(738 / 1728 * 100%)} @media screen and (max-width: 767px){ .m-system-main .m-system-img{ padding-top: calc(300 / 390 * 100%)}} @media screen and (max-width: 576px){ .m-system-main .swiper-navigation> *{ top: 30%}} .m-system-thumb .swiper-slide{ opacity: 0.6; transition: 0.4s ease-in-out; width: calc(100% / 6)} @media screen and (max-width: 1200px){ .m-system-thumb .swiper-slide{ width: calc(100% / 4)}} @media screen and (max-width: 576px){ .m-system-thumb .swiper-slide{ width: calc(100% / 2)}} .m-system-thumb .swiper-slide-thumb-active{ opacity: 1} .m-system-thumb .m-system-img{ padding-top: calc(114 / 174 * 100%)} .m-system-img{ cursor: pointer; overflow: hidden; position: relative; border-radius: 2rem} .m-system-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} @media screen and (max-width: 576px){ .m-system-box{ row-gap: 1.2rem}} @media screen and (max-width: 576px){ .m-system-content{ row-gap: 1.2rem}} .m-system-content .cate{ gap: 1.2rem; display: flex; flex-wrap: wrap} .m-system-content .cate .title-22{ width: 100%; color: white; line-height: 150%} @media screen and (min-width: 577px){ .m-system-content .cate .title-22{ padding: 0.8rem 1.6rem; background-color: #025899}} @media screen and (max-width: 576px){ .m-system-content .cate .title-22{ color: #025899}} @media screen and (min-width: 577px){ .m-system-content .desc{ padding: 1.2rem; background-color: #e4f4ff}} .m-system-content .desc .text-18{ line-height: 133%; text-align: justify} .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} .popup{ inset: 0; z-index: 101; position: fixed; visibility: hidden} .popup:has(.popup-contact) .popup-over{ height: auto; background-color: transparent} .popup:has(.popup-contact) .popup-main{ width: 100%; max-width: 77.6rem} .popup.open .popup-overlay{ opacity: 1; visibility: visible} .popup.open .popup-main{ opacity: 1; visibility: visible} .popup .wpcf7-response-output{ text-align: center} .popup-close{ top: -1rem; z-index: 5; right: -1rem; cursor: pointer; user-select: none; position: absolute; border-radius: 50%; width: 2.4rem; height: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background-color: black} .popup-close img{ object-fit: cover; width: 1.6rem; height: 1.6rem; filter: brightness(0) invert(1)} .popup-overlay{ inset: 0; z-index: 1; opacity: 0; visibility: hidden; position: absolute; transition: 0.4s ease-in-out; background-color: rgba(0, 0, 0, 0.8)} .popup-main{ top: 50%; left: 50%; z-index: 2; opacity: 0; display: flex; padding: 1.6rem; position: absolute; visibility: hidden; height: fit-content; transition: 0.4s ease-in-out; overflow: hidden auto; flex-direction: column; width: calc(100vw - 20rem); transform: translate(-50%, -50%)} @media screen and (max-width: 1200px){ .popup-main{ width: calc(100vw - 5rem)}} @media screen and (max-width: 576px){ .popup-main{ width: 100vw}} .popup-wrap{ width: 100%; position: relative} .popup-over{ position: relative; border-radius: 1rem; background-color: white; height: calc(100dvh - 10rem)} @media screen and (max-width: 1200px){ .popup-over{ height: calc(100dvh - 32rem)}} @media screen and (max-width: 767px){ .popup-over{ height: calc(100dvh - 46rem)}} .popup-video{ height: 100%; padding: 0.2rem} .popup-video_video{ width: 100%; height: 100%; overflow: hidden; border-radius: 1rem} .popup-video_video video, .popup-video_video iframe{ width: 100%; height: 100%; object-fit: cover} .popup-contact .book{ margin: 0} .popup-contact .book-form{ max-width: unset; border-radius: 0.8rem} @media screen and (min-width: 577px){ .popup-contact .book-form{ padding: 2.4rem 5.6rem}} .prize{ margin: 3rem 0rem 3rem} @media screen and (max-width: 992px){ .prize{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .prize{ margin: 4rem 0rem}} .prize-swiper{ position: relative; --letter-spacing: 2.5rem} .prize-swiper .swiper{ padding-block: 4rem; margin: -4rem -1.2rem} .prize-swiper .swiper-slide{ width: 100%; padding: 0 1.2rem} .prize-swiper + .prize-box_content{ width: 100%} .prize-box{ padding: 4rem; display: flex; flex-wrap: wrap; overflow: hidden; gap: 2.4rem 4.8rem; isolation: isolate; position: relative; border-radius: 2.5rem; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} @media screen and (max-width: 1200px){ .prize-box{ gap: 2.4rem; padding: 2rem}} .prize-box::before{ content: ""; top: 0; left: 0; width: 100%; z-index: -1; height: 100%; position: absolute; pointer-events: none; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("/wp-content/themes/i-dent/assets-v2/images/home/quality-bg.png")} @media screen and (max-width: 991px){ .prize-box{ flex-direction: column}} .prize-box_logo{ gap: 3rem; width: 100%; display: flex; align-items: center} @media screen and (max-width: 991px){ .prize-box_logo{ gap: 1.2rem}} .prize-box_logo img{ flex-shrink: 0; object-fit: contain; width: 5.9rem; height: 5.9rem} .prize-box_logo .title-22{ line-height: 150%; color: #025899; letter-spacing: 0.022rem} @media screen and (max-width: 991px){ .prize-box_logo .title-22{ text-align: center}} .prize-box_img{ width: 18%; flex-shrink: 0; user-select: none} @media screen and (max-width: 991px){ .prize-box_img{ width: 50%; margin: 0 auto}} @media screen and (max-width: 576px){ .prize-box_img{ width: 75%}} .prize-box_img .img{ display: block; position: relative; padding-top: calc(274 / 192 * 100%)} .prize-box_img .img img{ top: 50%; left: 50%; width: 100%; height: 100%; position: absolute; object-fit: contain; transform: translate(-50%, -50%); transition: 0.4s ease-in-out} @media screen and (min-width: 992px){ .prize-box_content{ width: calc(100% - 26rem)}} @media screen and (min-width: 992px) and (max-width: 1200px){ .prize-box_content{ width: calc(100% - 23rem)}} .prize-box_content .content-title{ gap: 0.8rem; display: flex; align-items: center} .prize-box_content .content-title .title-30{ line-height: 100%; color: #025899} @media screen and (max-width: 576px){ .prize-box_content .content-title .title-30{ font-size: 2rem}} .prize-box_content .content-title img{ user-select: none; object-fit: contain; width: 6.7rem; height: 6.7rem} @media screen and (max-width: 576px){ .prize-box_content .content-title img{ width: 4rem; height: 4rem}} .prize-box_content .title-22{ font-size: 2.2rem; line-height: 160%; text-align: justify} @media only screen and (max-width: 1200px){ .prize-box_content .title-22{ font-size: 2rem}} @media only screen and (max-width: 800px){ .prize-box_content .title-22{ font-size: 2rem}} @media screen and (max-width: 576px){ .prize-box_content .title-22{ font-size: 1.2rem}} .m-story{ margin: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .m-story{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .m-story{ margin: 4rem 0rem}} @media screen and (max-width: 1200px){ .m-story-wrap{ row-gap: 2.4rem}} @media screen and (max-width: 576px){ .m-story-wrap{ row-gap: 1.2rem}} .m-story-heading{ text-align: center} @media screen and (max-width: 576px){ .m-story-heading{ row-gap: 1.2rem}} .m-story-heading *{ color: #025899} @media screen and (max-width: 576px){ .m-story-heading .title-50{ font-size: 2.4rem}} @media screen and (max-width: 576px){ .m-story-heading .title-36{ font-size: 2.2rem}} .m-story-content .mona-content *{ font-size: 1.8rem; text-align: justify} @media screen and (max-width: 575px){ .m-story-content .mona-content *{ font-size: 1.6rem}} .m-core{ margin: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .m-core{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .m-core{ margin: 4rem 0rem}} @media screen and (max-width: 576px){ .m-core-wrap{ row-gap: 2.4rem}} .m-core-row{ align-items: center} @media screen and (max-width: 991px){ .m-core-col{ width: 100%}} .m-core-img{ position: relative; padding-top: calc(366 / 504 * 100%)} .m-core-img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%)} @media screen and (max-width: 991px){ .m-core-content{ row-gap: 3rem}} .m-core-content .mona-content{ font-size: 1.8rem; text-align: justify} @media screen and (max-width: 576px){ .m-core-content .mona-content{ font-size: 1.6rem}} .m-core-content .mona-content p{ line-height: 133%} .m-core-content .mona-content p:first-of-type{ margin-bottom: 0} @media screen and (max-width: 991px){ .m-core-content .btn{ margin: 0 auto}} .m-value{ position: relative; isolation: isolate; padding: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .m-value{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .m-value{ padding: 4rem 0rem}} .m-value::before{ content: ""; top: 0; left: 0; width: 100%; z-index: -1; height: 100%; position: absolute; pointer-events: none; background-size: cover; background-repeat: no-repeat; background-position: top; background-image: url("/wp-content/themes/i-dent/assets-v2/images/about/m-value-bg.jpg")} @media screen and (max-width: 1200px){ .m-value-heading{ row-gap: 3.2rem}} @media screen and (max-width: 767px){ .m-value-heading{ row-gap: 2.4rem}} .m-value-list{ gap: 2rem; display: flex; align-items: center} @media screen and (min-width: 768px){ .m-value-list{ justify-content: center}} @media screen and (max-width: 767px){ .m-value-list{ gap: 0.8rem; white-space: nowrap; overflow: auto hidden; padding-bottom: 0.4rem} .m-value-list::-webkit-scrollbar{ display: none}} .m-value-item{ cursor: pointer; overflow: hidden; isolation: isolate; position: relative; transition: 0.4s ease-in-out; border-radius: 2.5rem} @media screen and (max-width: 767px){ .m-value-item{ width: auto; flex: 1 0 auto}} .m-value-item.active, .m-value-item:hover{ background-color: #025899} .m-value-item.active .text-18, .m-value-item:hover .text-18{ color: white} .m-value-item .text-18{ color: #025899; line-height: 133%; text-align: center; transition: 0.4s ease-in-out; padding: 0.2rem 2rem} .m-value-swiper{ position: relative; --letter-spacing: 3.2rem} @media screen and (max-width: 1200px){ .m-value-swiper{ --letter-spacing: 1.2rem}} @media screen and (max-width: 1200px){ .m-value-swiper{ --letter-spacing: 0.8rem}} .m-value-swiper .swiper{ padding-block: 4rem; margin: -4rem calc(-1 * var(--letter-spacing))} .m-value-swiper .swiper-slide{ height: auto; width: calc(100% / 3); padding: 0 var(--letter-spacing)} @media screen and (max-width: 1200px){ .m-value-swiper .swiper-slide{ width: calc(100% / 2.5)}} @media screen and (max-width: 1024px){ .m-value-swiper .swiper-slide{ width: calc(100% / 2)}} @media screen and (max-width: 767px){ .m-value-swiper .swiper-slide{ width: 100%}} .m-value-box{ height: 100%; padding: 2rem; transition: 0.4s ease-in-out; border-radius: 2rem; background-color: white; border: 0.1rem solid transparent; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} @media screen and (min-width: 1201px){ .m-value-box:hover{ border-color: #025899}} .m-value-img{ margin: 0 auto; user-select: none; width: 10rem; height: 10rem} .m-value-img img{ width: 100%; height: 100%; object-fit: contain} .m-value-content{ text-align: center} .m-value-content> *{ line-height: 150%} .m-value-content .text-20{ color: #025899} .m-value-content .text-16{ font-size: 1.6rem; text-align: justify} .m-trip{ padding: 8rem 0rem 8rem} @media screen and (max-width: 992px){ .m-trip{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .m-trip{ padding: 4rem 0rem}} .m-trip-heading .title-22{ color: #025899; letter-spacing: 0.022rem} @media screen and (max-width: 576px){ .m-trip-heading .title-22{ font-size: 1.8rem}} @media screen and (max-width: 440px){ .m-trip-heading .title-22{ max-width: 30rem}} @media screen and (max-width: 440px){ .m-trip-heading .title-main{ max-width: 30rem}} @media screen and (max-width: 440px){ .m-trip-heading .title-main, .m-trip-heading .title-22{ margin: 0 auto}} .m-trip-row{ flex-direction: column} .m-trip-col{ width: 100%} @media screen and (max-width: 767px){ .m-trip-col{ width: 100%}} .m-trip-wrap{ display: flex} @media screen and (max-width: 576px){ .m-trip-swiper{ row-gap: 2.4rem}} .m-trip-swiper_main .swiper{ margin: 0 -0.8rem} .m-trip-swiper_main .swiper-slide{ width: 100%; padding: 0 0.8rem} .m-trip-swiper_thumb{ margin: 0 auto; position: relative; width: calc(100% - 7rem); --letter-spacing: 3.5rem; --widthItem: 10%} .m-trip-swiper_thumb::before{ position: absolute; content: ""; width: var(--widthItem); height: 1px; background: #025899; top: 1.6rem; left: 0; transition: 0.4s ease-in-out} @media screen and (max-width: 991px){ .m-trip-swiper_thumb{ --letter-spacing: 1.2rem}} @media screen and (max-width: 56px){ .m-trip-swiper_thumb{ --letter-spacing: 0.8rem}} .m-trip-swiper_thumb .swiper-slide{ width: auto; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; transition: 0.4s ease-in-out} @media screen and (min-width: 576px){ .m-trip-swiper_thumb .swiper-slide{ width: 25%}} .m-trip-swiper_thumb .swiper-slide::before{ position: absolute; content: ""; width: 1.8rem; border-radius: 50%; top: 0.75rem; left: 50%; transform: translateX(-50%); background: #025899; transition: 0.4s ease-in-out; height: 0} .m-trip-swiper_thumb .swiper-slide.is-active{ padding-top: 3rem} .m-trip-swiper_thumb .swiper-slide.is-active::before{ height: 1.8rem} .m-trip-swiper_thumb .swiper-slide-thumb-active.is-active{ padding-top: 0} .m-trip-swiper_thumb .swiper-slide-thumb-active.is-active::before{ height: 0} .m-trip-swiper_thumb .swiper-slide-thumb-active .text-20{ color: white; background-color: #025899} .m-trip-swiper_thumb .swiper-navigation .prev{ left: -4.8rem} .m-trip-swiper_thumb .swiper-navigation .next{ right: -4.8rem} .m-trip-swiper_thumb .swiper-navigation .prev, .m-trip-swiper_thumb .swiper-navigation .next{ top: 0; transform: unset} .m-trip-swiper_thumb .swiper-navigation .prev.swiper-button-disabled, .m-trip-swiper_thumb .swiper-navigation .next.swiper-button-disabled{ opacity: 1; pointer-events: unset} .m-trip-swiper .text-20{ white-space: nowrap; cursor: pointer; color: #707070; line-height: 150%; padding: 0 2.4rem; transition: 0.4s ease-in-out; border-radius: 1.5rem; background-color: transparent; text-align: center; width: fit-content} @media screen and (min-width: 1201px){ .m-trip-swiper .text-20:hover{ color: white; background-color: #025899}} @media screen and (max-width: 1200px){ .m-trip-swiper .text-20{ padding: 0.2rem 1.6rem}} @media screen and (max-width: 767px){ .m-trip-swiper .text-20{ font-size: 1.6rem; padding: 0.2rem 0.8rem}} @media screen and (max-width: 575px){ .m-trip-swiper .text-20{ padding: 0.2rem 0.6rem}} .m-trip-img{ overflow: hidden; position: relative; border-radius: 2rem; padding-top: calc(400 / 558 * 100%)} @media screen and (min-width: 1201px){ .m-trip-img:hover img{ transform: translate(-50%, -50%) scale(1.05)}} .m-trip-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} .p-about .service{ padding: 6rem 0rem 6rem; background: linear-gradient(270deg, #eaf6ff 0%, rgba(255, 255, 255, 0.5) 52.8%, #e4f4ff 104.5%)} @media screen and (max-width: 992px){ .p-about .service{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .p-about .service{ padding: 4rem 0rem}} .p-about .service-box_content ul{ display: none} .p-about .partner{ padding: 6rem 0rem 6rem; background: linear-gradient(270deg, #eaf6ff 0%, rgba(255, 255, 255, 0.5) 52.8%, #e4f4ff 104.5%)} @media screen and (max-width: 992px){ .p-about .partner{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .p-about .partner{ padding: 4rem 0rem}}