: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} .book{ margin-bottom: 6rem; margin-top: 2.4rem; min-height: 20.4rem} .book + .solution{ padding-top: 0} .book-form{ width: 100%; margin: 0 auto; max-width: 77.6rem; border-radius: 2.5rem; padding: 1.2rem 5.6rem; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1rem 0.7rem 0 rgba(191, 191, 191, 0.25); background: linear-gradient(270deg, #96d3f3 0%, #e4f4ff 50.28%, #96d3f3 100%)} @media screen and (max-width: 576px){ .book-form{ padding: 2.4rem; border: 0.1rem solid #025899}} .book-form_title{ gap: 0; text-align: center; display: flex; flex-direction: column; row-gap: 0.4rem} .book-form_title .title-22{ color: #025899} .book-form_title> *{ line-height: 130%} .book form .form-wrap{ row-gap: 0.8rem} .book form .form-text{ display: none} .book form .form-dropdown{ flex-shrink: 0} .book form .form-service{ order: 3} @media screen and (min-width: 768px){ .book form .form-service{ display: none}} .book form .form-group{ gap: 1rem} .book form .form-group:has(.form-dropdown) .form-box{ width: 100%} @media screen and (max-width: 576px){ .book form .form-action{ order: 4}} @media screen and (max-width: 767px){ .book form .form-action .btn{ color: white; background: #025899}} .book-extra .book-form{ padding: 0; overflow: hidden} .book-extra .book-form_inner form{ padding: 1.6rem 6rem} @media screen and (max-width: 1024px){ .book-extra .book-form_inner form{ padding: 1.6rem 3.2rem}} @media screen and (max-width: 576px){ .book-extra .book-form_inner form{ padding: 1.6rem}} .book-extra .book-form_title{ row-gap: 0} .book-extra .book-form_title .title-22{ color: white; padding: 1rem 1.6rem; background-color: #025899} .book-extra .book-form_title .text-18{ font-weight: 400; font-size: 1.6rem; padding: 1.6rem; padding-bottom: 0; text-align: left} @media screen and (min-width: 576px){ .book-extra .book-form_title .text-18{ text-align: center}} .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}} .pill{ overflow: hidden; padding: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .pill{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .pill{ padding: 4rem 0rem}} .pill-heading{ width: 100%; margin: 0 auto; text-align: center; max-width: 102.5rem} .pill-heading .text-18{ line-height: 1.33; text-align: left} @media screen and (min-width: 576px){ .pill-heading .text-18{ text-align: center}} .pill-inner{ user-select: none; --letter-spacing: 5rem} @media screen and (max-width: 1200px){ .pill-inner{ --letter-spacing: 2.4rem}} @media screen and (max-width: 991px){ .pill-inner{ display: none}} .pill-list{ display: flex; flex-wrap: wrap; row-gap: calc(2 * var(--letter-spacing)); margin: 0 calc(-1 * var(--letter-spacing))} .pill-item{ width: calc(100% / 4); padding: 0 var(--letter-spacing)} .pill-img{ position: relative} @media screen and (max-width: 991px){ .pill-img{ width: 100%; margin: 0 auto; max-width: 22.4rem}} .pill-img .img{ padding-top: 100%; position: relative; border-radius: 50%} .pill-img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%)} .pill-tab{ overflow: hidden; border-radius: 2rem; background-color: white; border: 0.1rem solid #e4f4ff; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} .pill-tab .tab{ display: flex; flex-wrap: wrap; background-color: #e4f4ff} .pill-tab .tab-item{ width: calc(100% / 4)} .pill-tab .tab-item.active .tab-box{ background-color: #025899} .pill-tab .tab-item.active .tab-box> *{ color: white} .pill-tab .tab-item:not(:last-child){ position: relative} .pill-tab .tab-item:not(:last-child)::before{ content: ""; top: 50%; right: 0; width: 0.1rem; height: 4.8rem; position: absolute; transform: translateY(-50%); background-color: #025899} .pill-tab .tab-item:last-child{ flex: 1} .pill-tab .tab-box{ height: 100%; padding: 1.2rem; text-align: center; transition: 0.4s ease-in-out; justify-content: center} .pill-tab .tab-box> *{ color: #025899; line-height: 133%; transition: 0.4s ease-in-out; letter-spacing: 0.022rem} @media screen and (max-width: 1200px){ .pill-tab .tab-box .text-20{ font-size: 1.6rem}} @media screen and (max-width: 1200px){ .pill-tab .tab-box .text-18{ font-size: 1.4rem}} .pill-content{ padding: 2.4rem} @media screen and (max-width: 1200px){ .pill-content{ padding: 1.6rem}} .pill-swiper{ position: relative} @media screen and (min-width: 992px){ .pill-swiper{ display: none}} .pill-swiper .swiper{ margin: 0 -0.4rem} .pill-swiper .swiper-slide{ padding: 0 0.4rem; width: calc(100% / 2)} @media screen and (max-width: 576px){ .pill-swiper .swiper-slide{ width: 100%}} .pill-swiper_content{ overflow: hidden; border-radius: 2rem; background-color: #e4f4ff} .pill-swiper_content .heading{ padding: 0.8rem; text-align: center; background-color: #025899} .pill-swiper_content .heading> *{ color: white; line-height: 150%} .pill-swiper_content .desc{ padding: 2rem} .veneer-pill{ padding-top: 0} .veneer-pill .pill-tab .tab-item{ min-height: 7.4rem} .veneer-pill .pill-tab .tab-box{ padding: 0} .veneer-pill .pill-tab .tab-box> *{ font-size: 1.8rem; color: #000000} @media only screen and (max-width: 1200px){ .veneer-pill .pill-tab .tab-box> *{ font-size: 1.6rem}} .veneer-pill .veneer-grid{ margin-top: 0; column-gap: 7.6rem} @media screen and (max-width: 1199.98px){ .veneer-pill .veneer-grid{ column-gap: 4.6rem}} @media screen and (max-width: 991.98px){ .veneer-pill .pill-wrap{ row-gap: 2.8rem}} .veneer-pill .veneer-content{ display: flex; flex-direction: column; row-gap: 4rem; padding-bottom: 2rem} .veneer-pill .veneer-content .mona-content h2, .veneer-pill .veneer-content .mona-content h3, .veneer-pill .veneer-content .mona-content h4, .veneer-pill .veneer-content .mona-content h5, .veneer-pill .veneer-content .mona-content h6{ color: #025899; margin-bottom: 2.4rem} .veneer-pill .veneer-content .mona-content h2{ font-size: 2.4rem} @media only screen and (max-width: 1200px){ .veneer-pill .veneer-content .mona-content h2{ font-size: 2rem}} @media only screen and (max-width: 800px){ .veneer-pill .veneer-content .mona-content h2{ font-size: 1.7rem}} .veneer-pill .veneer-content .mona-content h3{ font-size: 2.2rem} @media only screen and (max-width: 1200px){ .veneer-pill .veneer-content .mona-content h3{ font-size: 2rem}} @media only screen and (max-width: 800px){ .veneer-pill .veneer-content .mona-content h3{ font-size: 2rem}} .veneer-pill .veneer-content .mona-content h4{ font-size: 2rem} @media only screen and (max-width: 1200px){ .veneer-pill .veneer-content .mona-content h4{ font-size: 1.8rem}} .veneer-pill .pill-content{ padding: 2rem 2rem 0 9.4rem} .veneer-pill .veneer-image{ width: 26%; border-radius: 0} .veneer-pill .pill-swiper .pill-img{ max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 2.6rem; width: 15.8rem; height: 15.8rem} .veneer-pill .pill-swiper .pill-img .img{ width: 100%; padding-top: 0} .veneer-pill .pill-swiper .pill-img .img img{ position: initial; width: 100%; height: 100%; object-fit: cover; transform: unset} .veneer-pill .pill-swiper .swiper{ margin: 0 -1.6rem} .veneer-pill .pill-swiper .swiper-navigation> *{ top: 7.8rem} .veneer-pill .pill-swiper .swiper-navigation:has(.swiper-button-lock){ display: none} .veneer-pill .pill-swiper .swiper-navigation> *{ width: 3.2rem; height: 3.2rem; background: #025899} .veneer-pill .pill-swiper .swiper-navigation> *:after{ width: 1.1rem; height: 1.1rem; background-image: url("../images/brace/navi.svg")} .veneer-pill .pill-swiper .swiper-navigation .prev::after{ transform: rotate(0deg)} .veneer-pill .pill-swiper .swiper-navigation .next::after{ transform: rotate(-180deg)} .veneer-pill .pill-swiper .swiper-slide{ padding: 0 1.4rem; width: fit-content} .veneer-pill .pill-swiper_content{ background: transparent; padding: 1.6rem; padding-top: 0} @media screen and (max-width: 991.98px){ .veneer-pill .pill-swiper_content{ padding: 0}} .veneer-pill .pill-swiper .heading{ max-width: 86%; margin-right: auto; margin-left: auto; border-radius: 4rem; position: relative} .veneer-pill .pill-swiper .heading .text-18{ font-size: 1.8rem} .veneer-pill .pill-swiper .veneer-grid{ margin-top: -2rem; gap: 1.6rem; padding: 5rem 3rem 2rem; flex-direction: column; background: #fff; border-radius: 2rem; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25)} .veneer-pill .pill-swiper .veneer-image{ width: 100%; display: flex; align-items: center; justify-content: center} .veneer-pill .pill-swiper .veneer-image img{ max-height: 38.6rem; width: auto} .veneer-pill .pill-swiper .veneer-content{ row-gap: 2.4rem; padding-bottom: 0} .veneer-pill .pill-swiper .veneer-content .btn{ margin-right: auto; margin-left: auto; min-width: 14.6rem} .veneer-pill .pill-swiper .veneer-content .mona-content{ font-size: 1.6rem; line-height: 1.5} .veneer-pill .pill-txt{ z-index: 2} @media screen and (min-width: 992px){ .veneer-pill .pill-txt{ display: none}} .veneer-pill .pill-txt .heading{ max-width: 96%; padding: 0.8rem 9rem} .veneer-pill .pill-txt .swiper-slide{ width: 100%} .veneer-pill .js-pill-swiper1{ margin-top: -4.8rem} .veneer-pill .js-pill-swiper1 .swiper-slide{ padding: 0} @media screen and (max-width: 991.98px){ .veneer-pill .js-pill-swiper1 .swiper-slide{ width: 100%}} @media screen and (max-width: 991.98px){ .veneer-pill .js-pill-swiper1 .pill-swiper_content{ padding: 1.6rem}} @media screen and (max-width: 991.98px){ .veneer-pill .js-pillTab{ margin-top: 2rem}} @media screen and (max-width: 575.96px){ .veneer-pill .js-pillTab .swiper-slide{ width: 50%}} .adv{ padding: 5rem 0} @media screen and (max-width: 850px){ .adv-row{ flex-direction: column-reverse}} @media screen and (max-width: 850px){ .adv-col{ width: 100%}} .adv-heading .title-22{ color: #025899} .adv-img{ overflow: hidden; position: relative; border-radius: 1.6rem; display: flex; align-items: start; justify-content: start} .adv-img img{ width: 100%; height: auto} .adv-faqs .faqs-heading{ gap: 1.6rem; cursor: pointer; display: flex; align-items: center; align-items: start} .adv-faqs .faqs-heading .title-22{ line-height: 150%; color: #025899; letter-spacing: 0.022rem} .adv-faqs .faqs-heading .img-dropdown{ flex-shrink: 0; width: 2.8rem; height: 2.8rem} .adv-faqs .faqs-heading img{ width: 100%; height: auto; object-fit: contain} .adv-faqs .faqs-content{ padding-top: 2.4rem} .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")} .media{ overflow: hidden} .media .m-share-img{ position: relative} .media .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 .m-share-img .icon img{ width: 100%; height: 100%; object-fit: cover} .media .m-share-img .img{ border-radius: 3rem; overflow: hidden; position: relative; padding-top: calc(418 / 1251 * 100%); min-height: 20rem} @media screen and (max-width: 767.98px){ .media .m-share-img .img{ padding-top: calc(432 / 390 * 100%); border-radius: 2rem}} .media .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} @media screen and (min-width: 768px){ .media .m-share-img .icon{ width: 9rem; height: 9rem}} @media screen and (max-width: 767.98px){ .media .m-share-img .icon{ width: 8rem; height: 8rem}} .m-share-video{ max-width: 100%} .m-share-video iframe, .m-share-video video{ aspect-ratio: 910 / 512; border-radius: 2rem; overflow: hidden; max-width: 100%; display: block; margin: 0 auto} .t-price{ padding: 3rem 0} @media screen and (min-width: 576px){ .t-price-heading .mona-content{ text-align: center}} .t-price-heading .mona-content p{ color: #025899; line-height: 1.33} @media screen and (max-width: 767px){ .t-price-heading .mona-content p strong{ font-size: 1.6rem}} .t-price-table .mona-content .table-resp{ margin: 0} @media screen and (max-width: 1200px){ .t-price-table .mona-content .table-resp{ width: 100%; overflow: auto hidden}} @media screen and (max-width: 767.98px){ .t-price-table .mona-content .table-resp:has(td[data-tt]){ overflow: hidden} .t-price-table .mona-content .table-resp:has(td[data-tt]) thead{ display: none} .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr{ display: flex; flex-direction: column; margin-top: 2rem} .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr:first-child{ margin-top: 0} .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr td{ position: relative; display: flex; align-items: center; padding: 1.2rem; padding-right: 2.4rem; justify-content: space-between; gap: 0.8rem} .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr td[data-tt]::before{ text-align: left; content: attr(data-tt); font-size: 1.6rem; color: #2b2b2b; font-weight: 400; min-width: 14rem} .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr td:nth-of-type(odd){ background: #e4f4ff} .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-text, .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-action{ min-height: 6.2rem; display: flex; text-align: center; justify-content: center; align-items: center; color: #fff; background: #025899} .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-text{ border-top-left-radius: 2rem; border-top-right-radius: 2rem} .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-text> *{ margin: 0; color: #fff; font-size: 1.8rem}} @media screen and (max-width: 767.98px) and (max-width: 767px){ .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-text{ max-width: 100%}} @media screen and (max-width: 767.98px){ .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-action{ width: 100% !important; border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem} .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-action> *> *{ font-size: 1.6rem} .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-action .btn{ padding: 0.35rem 2rem} .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr td> *> *{ font-size: 1.8rem} .t-price-table .mona-content .table-resp:has(td[data-tt]) tbody tr:nth-child(even){ background: transparent}} .t-price-table .mona-content .note{ margin-top: 2.4rem} .t-price-table .mona-content table{ margin: 0; user-select: none; border-radius: 2rem; width: 100% !important; height: auto !important; border-collapse: separate !important} .t-price-table .mona-content table thead th{ color: #fff; font-weight: 700; font-size: 1.8rem; text-align: center; vertical-align: middle; background-color: #025899} @media screen and (max-width: 1200px){ .t-price-table .mona-content table thead th{ font-size: 1.6rem}} .t-price-table .mona-content table thead th span{ display: block; font-weight: 400; margin-top: 0.2rem} .t-price-table .mona-content table thead th:first-child{ border-top-left-radius: 2rem} .t-price-table .mona-content table thead th:last-child{ border-top-right-radius: 2rem} .t-price-table .mona-content table tbody{ background-color: #fff} .t-price-table .mona-content table tbody tr:last-child td:first-child{ border-bottom-left-radius: 2rem} .t-price-table .mona-content table tbody tr:last-child td:last-child{ border-bottom-right-radius: 2rem} .t-price-table .mona-content table tbody tr:nth-child(even){ background-color: #e4f4ff} .t-price-table .mona-content table tbody tr td{ vertical-align: middle; background-color: transparent; min-width: 18rem} @media screen and (max-width: 576px){ .t-price-table .mona-content table tbody tr td{ padding: 1rem 0.8rem}} .t-price-table .mona-content table tbody .table-text p{ font-weight: 700; color: #025899; line-height: 150%} .t-price-table .mona-content table tbody .table-text p span{ display: block; font-weight: 400} .t-price-table .mona-content table tbody .table-ul ul{ margin: 0} .t-price-table .mona-content table tbody .table-ul ul li{ color: #2b2b2b; margin: 0.2rem 0; font-size: 1.5rem; line-height: 150%} .t-price-table .mona-content table tbody .table-price{ text-align: center} .t-price-table .mona-content table tbody .table-price .price{ display: flex; row-gap: 0.4rem; flex-direction: column} .t-price-table .mona-content table tbody .table-price .price p{ margin: 0} .t-price-table .mona-content table tbody .table-price .price> span{ font-size: 1.8rem; font-weight: 700; color: #025899; line-height: 150%} @media only screen and (max-width: 1200px){ .t-price-table .mona-content table tbody .table-price .price> span{ font-size: 1.6rem}} .t-price-table .mona-content table tbody .table-price .new{ color: #e50000; font-weight: 700} .t-price-table .mona-content table tbody .table-price .old{ color: #2b2b2b; text-decoration: line-through} .t-price-table .mona-content table tbody .table-action .btn{ color: #025899; padding: 0.35rem 1.2rem} @media screen and (min-width: 1201px){ .t-price-table .mona-content table tbody .table-action .btn:hover{ color: white}} .t-price-table .mona-content table td{ border: 0} .t-price-table .mona-content table td, .t-price-table .mona-content table th{ padding: 2.4rem 1.6rem} @media screen and (max-width: 1200px){ .t-price-table .mona-content table td, .t-price-table .mona-content table th{ padding: 1.5rem 1rem}} @media screen and (max-width: 767px){ .t-price-table.table-mobile .mona-content .table-resp{ border-radius: 2rem} .t-price-table.table-mobile .mona-content .table-resp table thead th{ font-size: 1.4rem; font-weight: 400; padding: 2rem 0.8rem; text-transform: lowercase} .t-price-table.table-mobile .mona-content .table-resp table thead th:last-child{ display: none} .t-price-table.table-mobile .mona-content .table-resp table thead th::first-letter{ text-transform: uppercase} .t-price-table.table-mobile .mona-content .table-resp table thead th> span{ display: none} .t-price-table.table-mobile .mona-content .table-resp table tbody tr td{ padding: 2rem 0.8rem; min-width: unset} .t-price-table.table-mobile .mona-content .table-resp table tbody tr td.table-action{ display: none} .t-price-table.table-mobile .mona-content .table-resp table tbody tr td.table-text, .t-price-table.table-mobile .mona-content .table-resp table tbody tr td.table-guarantee{ text-align: center} .t-price-table.table-mobile .mona-content .table-resp table tbody tr td.table-text>:first-child, .t-price-table.table-mobile .mona-content .table-resp table tbody tr td.table-guarantee>:first-child{ margin-top: 0 !important} .t-price-table.table-mobile .mona-content .table-resp table tbody tr td.table-text>:last-child, .t-price-table.table-mobile .mona-content .table-resp table tbody tr td.table-guarantee>:last-child{ margin-bottom: 0 !important} .t-price-table.table-mobile .mona-content .table-resp table tbody tr td.table-guarantee p{ font-size: 1.4rem}} @media screen and (max-width: 767px) and (max-width: 430px){ .t-price-table.table-mobile .mona-content .table-resp table tbody tr td.table-text p, .t-price-table.table-mobile .mona-content .table-resp table tbody tr td.table-price p{ font-size: 1.4rem}} @media screen and (max-width: 767px){ .t-price-table.table-mobile .mona-content .table-resp table tbody tr td.table-text{ max-width: 15rem}} .t-price-wrap{ margin-top: 5rem} .t-price-wrap:first-child{ margin-top: 0} @media screen and (max-width: 575.98px){ .t-price{ padding-bottom: 2.4rem}} .veneer-price{ padding-top: 0} .veneer-price .t-price-heading .mona-content{ color: #000; line-height: 1.5} .veneer-price .t-price-heading .mona-content p{ color: inherit; line-height: inherit} .veneer-price .t-price-table .mona-content table tbody tr td.table-guarantee{ text-align: center} @media screen and (max-width: 576px){ .tee-faqs{ margin-right: -1.6rem; margin-left: -1.6rem}} .t-price-table.t-price-table-card-mobile .t-price-mobile-action{ display: none} @media screen and (max-width: 767.98px){ .t-price-table.t-price-table-card-mobile .mona-content .table-resp, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]){ overflow: hidden; border-radius: 2rem 2rem 0 0} .t-price-table.t-price-table-card-mobile .mona-content .table-resp table, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) table{ table-layout: fixed; border-radius: 2rem 2rem 0 0} .t-price-table.t-price-table-card-mobile .mona-content .table-resp thead, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) thead{ display: table-header-group} .t-price-table.t-price-table-card-mobile .mona-content .table-resp table thead th, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) table thead th{ font-size: 1.4rem; font-weight: 400; padding: 1.8rem 0.8rem; text-transform: none} .t-price-table.t-price-table-card-mobile .mona-content .table-resp table thead th:first-child, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) table thead th:first-child{ font-size: 0; line-height: 0} .t-price-table.t-price-table-card-mobile .mona-content .table-resp table thead th:last-child, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) table thead th:last-child{ display: none} .t-price-table.t-price-table-card-mobile .mona-content .table-resp table thead th> span, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) table thead th> span{ display: none} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr{ display: table-row; margin-top: 0; flex-direction: row} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr td, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr td{ position: static; display: table-cell; align-items: initial; justify-content: initial; gap: 0; min-width: unset; padding: 1.8rem 0.8rem} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr td[data-tt]::before, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr td[data-tt]::before{ display: none; content: none} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr td:nth-of-type(odd), .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr td:nth-of-type(odd){ background: transparent} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr td.table-text, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-text{ width: 34%; border-radius: 0; text-align: center} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr td.table-price, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-price{ width: 33%; text-align: center} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr td.table-text, .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr td.table-action, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-text, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-action{ min-height: 0; display: table-cell; color: inherit; text-align: center; justify-content: initial; align-items: initial; background: transparent} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr td.table-text> *, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-text> *{ margin: 0; color: #025899; font-size: 1.8rem} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr td.table-text p span, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-text p span{ color: #025899} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr td.table-action, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-action{ display: none} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr:last-child td:first-child, .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr:last-child td:nth-child(3), .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr:last-child td:first-child, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr:last-child td:nth-child(3){ border-bottom-left-radius: 0; border-bottom-right-radius: 0} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr:nth-child(even), .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr:nth-child(even){ background: #e4f4ff} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr:nth-child(even) td, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr:nth-child(even) td{ background: #e4f4ff} .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody .table-text p, .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody .table-price p, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody .table-text p, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody .table-price p{ font-size: 1.4rem} .t-price-table.t-price-table-card-mobile .t-price-mobile-action{ display: flex; justify-content: center; padding: 1.6rem; background: #025899; border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem} .t-price-table.t-price-table-card-mobile .t-price-mobile-action .btn{ min-width: 11rem; padding: 0.45rem 2rem}} @media screen and (max-width: 430px){ .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr td.table-text p, .t-price-table.t-price-table-card-mobile .mona-content .table-resp tbody tr td.table-price p, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-text p, .t-price-table.t-price-table-card-mobile .mona-content .table-resp:has(td[data-tt]) tbody tr td.table-price p{ font-size: 1.4rem}} .interest{ overflow: hidden; padding: 10rem 0rem 10rem} @media screen and (max-width: 992px){ .interest{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .interest{ padding: 4rem 0rem}} .interest-heading{ width: 100%; position: relative; max-width: 114.8rem; border-radius: 99rem; margin: 0 auto -4.3rem; padding: 1.675rem 4rem; background-color: #025899} @media screen and (max-width: 767px){ .interest-heading{ padding: 1.2rem}} .interest-heading .title-main{ color: white} .interest-inner{ overflow: hidden; border-radius: 2rem; --letter-spacing: 3.5rem; background-color: white; padding: 9.4rem 5rem 2.4rem 5rem; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} @media screen and (max-width: 1200px){ .interest-inner{ --letter-spacing: 3rem}} @media screen and (max-width: 767px){ .interest-inner{ padding: 7.8rem 1.4rem 1.4rem}} .interest-list{ display: flex; flex-wrap: wrap; row-gap: 2.4rem; margin: 0 calc((-1 * var(--letter-spacing)))} .interest-item{ width: calc(100% / 4); padding: 0 var(--letter-spacing)} @media screen and (max-width: 1024px){ .interest-item{ width: calc(100% / 3)}} @media screen and (max-width: 767px){ .interest-item{ width: calc(100% / 2)}} .interest-img{ margin: 0 auto; flex-shrink: 0; user-select: none; width: 10.8rem; height: 10.8rem} .interest-img img{ width: 100%; height: 100%; object-fit: cover} .interest-content{ text-align: center} .interest-content .text-18{ line-height: 133%} .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} .team{ margin: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .team{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .team{ margin: 4rem 0rem}} @media screen and (max-width: 767px){ .team-wrap{ row-gap: 2.4rem}} .team-heading{ --letter-spacing: 1.2rem} .team-heading> .text-18{ text-align: left} @media screen and (min-width: 576px){ .team-heading> .text-18{ text-align: center}} .team-heading_list{ display: flex; flex-wrap: wrap; row-gap: 2.4rem; justify-content: center; margin: 0 calc(-1 * var(--letter-spacing))} .team-heading_item{ width: calc(100% / 4); padding: 0 var(--letter-spacing)} @media screen and (max-width: 991px){ .team-heading_item{ width: calc(100% / 2)}} .team-heading_box-img{ flex-shrink: 0; margin: 0 auto; user-select: none; border-radius: 50%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 6.4rem; height: 6.4rem; background-color: #e4f4ff} .team-heading_box-img img{ width: 4.2rem; height: 4.2rem; object-fit: contain} .team-heading_box-content{ text-align: center} .team-heading_box-content .text-18{ color: #025899; line-height: 1.33} @media screen and (max-width: 1024px){ .team-heading_box-content .text-18{ font-size: 1.4rem}} @media screen and (max-width: 767px){ .team-content{ row-gap: 2.4rem}} .team-content_title .text-20{ line-height: 150%} .team-content_title .title-main{ text-align: left} .team-content_action{ gap: 1.6rem; display: flex; flex-wrap: wrap} @media screen and (max-width: 767px){ .team-content_action{ justify-content: center}} .team-content_action .btn{ font-size: 1.8rem} @media only screen and (max-width: 1200px){ .team-content_action .btn{ font-size: 1.6rem}} .team-user{ 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 (max-width: 767px){ .team-user{ width: 100%; margin: 0 auto; max-width: 40rem}} .team-user_img{ position: relative; padding-top: calc(340 / 280 * 100%)} .team-user_img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%)} .team-row{ align-items: center} @media screen and (max-width: 767px){ .team-row{ flex-direction: column-reverse}} @media screen and (max-width: 767px){ .team-col{ width: 100%}} .team-inner{ overflow: hidden; isolation: isolate; position: relative; border-radius: 2rem; padding: 2rem 4rem 2rem 10rem; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} @media screen and (max-width: 1200px){ .team-inner{ padding: 4rem}} @media screen and (max-width: 767px){ .team-inner{ padding: 2.4rem; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)}} .team-inner::before{ content: ""; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; 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/home/team-bg.jpg")} .team-swiper{ position: relative} @media screen and (max-width: 767px){ .team-swiper .swiper-navigation .prev{ left: -1.5rem}} @media screen and (max-width: 767px){ .team-swiper .swiper-navigation .next{ right: -1.5rem}} @media screen and (max-width: 576px){ .team-swiper .swiper-navigation .prev, .team-swiper .swiper-navigation .next{ top: 22%}} .team-swiper-thumb{ margin: 0 auto; max-width: fit-content; overflow: hidden; width: 100%; position: relative} .team-swiper-thumb .swiper{ margin: 0 auto; max-width: 67rem} .team-swiper-thumb .swiper-slide{ user-select: none; width: fit-content; padding: 0 0.4rem} .team-swiper-thumb .swiper-slide-thumb-active .text-18{ color: white; background-color: #025899; border-color: #025899} .team-swiper-thumb .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background: #025899} .team-swiper-thumb .text-18{ cursor: pointer; line-height: 133%; border-radius: 2rem; transition: 0.4s ease-in-out; padding: 0.5rem 2rem; background-color: #fdfeff; border: 0.1rem solid #025899} @media screen and (max-width: 576px){ .team-swiper-thumb .text-18{ padding: 0.3rem 2rem}} .team-swiper-main{ --letter-spacing: 0.8rem; position: relative} .team-swiper-main .swiper{ padding-block: 4rem; margin: -4rem calc(-1 * var(--letter-spacing))} .team-swiper-main .swiper-slide{ padding: 0 var(--letter-spacing)} .veneer-team .title-main{ font-size: 2.2rem} @media only screen and (max-width: 1200px){ .veneer-team .title-main{ font-size: 2rem}} @media only screen and (max-width: 800px){ .veneer-team .title-main{ font-size: 2rem}} .veneer-team h3.title-main{ font-size: 2.2rem} @media only screen and (max-width: 1200px){ .veneer-team h3.title-main{ font-size: 2rem}} @media only screen and (max-width: 800px){ .veneer-team h3.title-main{ font-size: 2rem}} .veneer-team h2.title-main{ font-size: 3.2rem} @media only screen and (max-width: 1200px){ .veneer-team h2.title-main{ font-size: 2.7rem}} @media only screen and (max-width: 800px){ .veneer-team h2.title-main{ font-size: 2.5rem}} .veneer-team .title-desc{ text-align: left; max-width: 107.8rem; margin-right: auto; margin-left: auto} @media screen and (min-width: 576px){ .veneer-team .title-desc{ text-align: center}} .veneer-team .team-wrap{ row-gap: 4rem} .veneer-team .team-heading_list{ margin-top: 2.4rem} .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} .object{ padding: 3.6rem 0; border-radius: 2rem; background-color: #e4f4ff; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} .object-heading ul{ gap: 3.2rem; display: flex; flex-wrap: wrap; justify-content: center} @media screen and (max-width: 767px){ .object-heading ul{ gap: 1.6rem 2.4rem}} .object-heading ul li{ gap: 0.8rem; display: flex; width: calc(100% / 5 - 2.56rem)} @media screen and (max-width: 1200px){ .object-heading ul li{ width: calc(100% / 3 - 2.2rem)}} @media screen and (max-width: 767px){ .object-heading ul li{ width: calc(100% / 2 - 1.2rem)}} .object-heading ul li> img{ flex-shrink: 0; object-fit: contain; width: 2.4rem; height: 2.4rem} @media screen and (max-width: 767px){ .object-heading ul li> img{ margin-top: 0.2rem; width: 1.6rem; height: 1.6rem}} .object-heading ul li .text-18{ line-height: 133%; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 1; -webkit-line-clamp: 1} .object-swiper{ position: relative; --letter-spacing: 1.2rem} .object-swiper .swiper{ padding-block: 4rem; margin: -4rem calc(-1 * var(--letter-spacing))} .object-swiper .swiper-slide{ width: calc(100% / 2); padding: 0 var(--letter-spacing)} @media screen and (max-width: 767px){ .object-swiper .swiper-slide{ width: 100%}} .quality{ position: relative; isolation: isolate; padding: 8rem 0rem 8rem} @media screen and (max-width: 992px){ .quality{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .quality{ padding: 4rem 0rem}} .quality::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/quality-bg.png")} .quality-heading .title-main{ width: 100%; margin: 0 auto; max-width: 75rem; line-height: 150%} .quality-swiper{ position: relative; --letter-spacing: 1.2rem} @media screen and (max-width: 767px){ .quality-swiper{ --letter-spacing: 0.6rem}} .quality-swiper .swiper-pagination-bullet{ background-color: #025899} .quality-swiper .swiper-pagination-bullet-active{ background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 48%, #dfaa23 100%)} @media screen and (min-width: 1201px){ .quality-swiper .swiper{ margin: 0 auto; max-width: 114rem}} @media screen and (max-width: 1200px){ .quality-swiper .swiper{ margin: 0 calc(-1 * var(--letter-spacing))}} .quality-swiper .swiper-slide{ width: calc(100% / 4); padding: 0 var(--letter-spacing)} @media screen and (max-width: 1024px){ .quality-swiper .swiper-slide{ width: calc(100% / 3)}} @media screen and (max-width: 767px){ .quality-swiper .swiper-slide{ width: calc(100% / 2)}} .quality-swiper_img{ position: relative; padding-top: calc(356 / 236 * 100%)} .quality-swiper_img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%)} .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} .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} .teeth{ padding: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .teeth{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .teeth{ padding: 4rem 0rem}} @media screen and (min-width: 992px){ .teeth-main{ display: none}} .teeth-main .swiper{ padding-block: 4rem; margin: -4rem -1.2rem} .teeth-main .swiper-slide{ padding: 0 1.2rem; width: calc(100% / 2)} @media screen and (max-width: 767px){ .teeth-main .swiper-slide{ width: 100%}} .teeth-main .teeth-box{ box-shadow: 1rem 1rem 4rem 0 rgba(40, 105, 240, 0.16); position: relative; border-radius: 2rem; padding: 4.8rem 2.4rem 2.4rem} .teeth-main .teeth-img{ position: relative} .teeth-main .teeth-img .img{ margin: 0 auto; max-width: 24.4rem} .teeth-main .teeth-img .img img{ width: 100%; object-fit: cover} .teeth-main .teeth-img .desc{ left: 50%; top: -2.4rem; width: 100%; max-width: 32rem; position: absolute; text-align: center; border-radius: 4rem; margin: -4.4rem auto 0; padding: 0.8rem 1.6rem; transform: translateX(-50%); background-color: #025899} .teeth-main .teeth-img .desc .text-18{ color: white; line-height: 150%} .teeth-main .teeth-content ul li{ gap: 1.2rem; display: flex; align-items: center} .teeth-main .teeth-content ul li .text-18{ line-height: 150%} .teeth-main .teeth-content ul li strong{ font-weight: 700; color: #025899} .teeth-thumb{ position: relative} .teeth-thumb .swiper{ margin: 0 -1.2rem} .teeth-thumb .swiper-slide{ padding: 0 1.2rem; width: calc(100% / 6)} @media screen and (max-width: 991px){ .teeth-thumb .swiper-slide{ width: calc(100% / 4)}} @media screen and (max-width: 576px){ .teeth-thumb .swiper-slide{ width: calc(100% / 2)}} .teeth-thumb .swiper-slide-thumb-active .teeth-img{ border-color: #025899} .teeth-thumb .teeth-img{ padding-top: 100%; border-radius: 50%; position: relative; transition: 0.4s ease-in-out; border: 0.2rem solid transparent} .teeth-thumb .teeth-img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%)} .teeth-tab{ box-shadow: 1rem 1rem 4rem 0 rgba(40, 105, 240, 0.16); overflow: hidden; border-radius: 2rem} @media screen and (max-width: 991px){ .teeth-tab{ display: none}} .teeth-tab .tab{ display: flex; flex-wrap: wrap; background-color: #eff9ff} .teeth-tab .tab-item{ padding: 1.2rem; transition: 0.4s ease-in-out; width: calc(100% / 6)} @media screen and (max-width: 1200px){ .teeth-tab .tab-item{ align-content: center}} .teeth-tab .tab-item.active{ background-color: #025899} .teeth-tab .tab-item.active .text-18{ color: white} .teeth-tab .tab .text-18{ line-height: 133%; text-align: center} @media screen and (max-width: 1200px){ .teeth-tab .tab .text-18{ font-size: 1.4rem}} .teeth-tab_box{ gap: 7.2rem; padding: 2.4rem; overflow: hidden; display: flex; align-items: center} .teeth-tab_img{ width: 100%; flex-shrink: 0; max-width: 34.4rem; position: relative; margin-bottom: -2.4rem} .teeth-tab_img .img{ position: relative; padding-top: calc(386 / 344 * 100%)} .teeth-tab_img .img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%)} .teeth-tab_content .title-22{ color: #025899} .teeth-tab_content ul li{ gap: 1.2rem; display: flex; align-items: center} .teeth-tab_content ul li img{ flex-shrink: 0; object-fit: contain; width: 1.8rem; height: 1.8rem} .teeth-tab_content ul li .text-18{ line-height: 150%} .teeth-tab_content .btn{ margin-top: 6rem} .teeth.teeth-sec .teeth-tab_img{ margin-bottom: 0; max-width: unset; width: calc(25% - 1.6rem)} .teeth.teeth-sec .teeth-tab_img .img{ height: 100%} @media screen and (max-width: 991px){ .teeth.teeth-sec .teeth-tab_img{ width: 50%; margin: 0 auto}} @media screen and (max-width: 576px){ .teeth.teeth-sec .teeth-tab_img{ width: 100%; margin-bottom: 2rem}} .teeth.teeth-sec .teeth-tab{ box-shadow: 0rem 4px 4px 0 rgba(0, 0, 0, 0.25); max-width: 82.8rem; width: 75%; display: block} @media screen and (max-width: 991px){ .teeth.teeth-sec .teeth-tab{ width: 100%; max-width: 100%}} @media screen and (max-width: 991px){ .teeth.teeth-sec .teeth-tab{ width: 100%; max-width: 100%}} @media screen and (max-width: 576px){ .teeth.teeth-sec .teeth-tab{ width: 82%; max-width: 100%; margin: 0 auto; position: relative; overflow: unset}} .teeth.teeth-sec .teeth-slide{ display: flex; gap: 2.4rem 1.6rem; flex-wrap: wrap} .teeth.teeth-sec .tab .swiper-slide{ width: 25%; padding: 1.2rem 2rem; transition: 0.4s ease-in-out} .teeth.teeth-sec .tab .swiper-slide.swiper-slide-thumb-active{ background: #025899} .teeth.teeth-sec .tab .swiper-slide.swiper-slide-thumb-active .tab-item .text-18{ color: #fff} @media screen and (max-width: 576px){ .teeth.teeth-sec .tab .swiper-slide.swiper-slide-thumb-active{ background: #fff} .teeth.teeth-sec .tab .swiper-slide.swiper-slide-thumb-active .tab-item{ background: #025899}} @media screen and (max-width: 767px){ .teeth.teeth-sec .tab .swiper-slide{ padding: 1.2rem 0.8rem}} @media screen and (max-width: 576px){ .teeth.teeth-sec .tab .swiper-slide{ width: 100%}} @media screen and (max-width: 576px){ .teeth.teeth-sec .tab{ margin-top: -2.2rem}} .teeth.teeth-sec .tab-item{ width: 100%; padding: 0; cursor: pointer} .teeth.teeth-sec .tab-item .text-18{ font-size: 1.6rem; color: #000} @media only screen and (max-width: 800px){ .teeth.teeth-sec .tab-item .text-18{ font-size: 1.4rem}} @media screen and (max-width: 576px){ .teeth.teeth-sec .tab-item{ width: 94%; margin: 0 auto; min-height: 4.2rem; padding: 0.8rem 0.6rem; border-radius: 4rem} .teeth.teeth-sec .tab-item .text-18{ font-size: 1.6rem; font-weight: 700}} .teeth.teeth-sec .teeth-tab_box{ display: flex; gap: 3rem; padding: 4rem 7.2rem; align-items: start} .teeth.teeth-sec .teeth-tab_box .teeth-thumb{ width: 31%; flex-shrink: 0} .teeth.teeth-sec .teeth-tab_box .teeth-thumb .teeth-img{ padding-top: 0} .teeth.teeth-sec .teeth-tab_box .teeth-thumb .teeth-img img{ position: initial; transform: unset} @media screen and (max-width: 576px){ .teeth.teeth-sec .teeth-tab_box .teeth-thumb{ margin: 0 auto; width: 22.5rem; height: 22.5rem}} .teeth.teeth-sec .teeth-tab_box .teeth-tab_content{ flex: 1} .teeth.teeth-sec .teeth-tab_box .teeth-tab_content .btn{ margin-top: 1rem} @media screen and (max-width: 576px){ .teeth.teeth-sec .teeth-tab_box .teeth-tab_content .btn{ margin-left: auto; margin-right: auto}} @media screen and (max-width: 576px){ .teeth.teeth-sec .teeth-tab_box .teeth-tab_content{ margin: 0 auto}} @media screen and (max-width: 767px){ .teeth.teeth-sec .teeth-tab_box{ padding: 4rem; gap: 1.6rem}} @media screen and (max-width: 576px){ .teeth.teeth-sec .teeth-tab_box{ flex-direction: column}} .teeth.teeth-sec .teeth-gallery{ position: relative} .teeth.teeth-sec .teeth-gallery .swiper-navigation .next, .teeth.teeth-sec .teeth-gallery .swiper-navigation .prev{ width: 4.2rem; height: 4.2rem} @media screen and (max-width: 767px){ .teeth.teeth-sec .teeth-gallery .swiper-navigation .next, .teeth.teeth-sec .teeth-gallery .swiper-navigation .prev{ width: 3.2rem; height: 3.2rem}} .teeth.teeth-sec .teeth-gallery .swiper-navigation .next{ right: 1rem} @media screen and (max-width: 576px){ .teeth.teeth-sec .teeth-gallery .swiper-navigation .next{ right: -4.2rem}} .teeth.teeth-sec .teeth-gallery .swiper-navigation .prev{ left: 1rem} @media screen and (max-width: 576px){ .teeth.teeth-sec .teeth-gallery .swiper-navigation .prev{ left: -4.2rem}} @media screen and (max-width: 576px){ .teeth.teeth-sec .teeth-gallery{ position: initial}} .veneer{ padding-bottom: 5rem} .veneer .mona-content{ font-size: 1.8rem} @media only screen and (max-width: 1200px){ .veneer .mona-content{ font-size: 1.6rem}} .veneer-grid{ margin-top: 3rem; display: flex; flex-wrap: wrap; row-gap: 1.4rem; column-gap: 6rem} @media screen and (max-width: 1199.98px){ .veneer-grid{ column-gap: 4rem}} @media screen and (max-width: 991.98px){ .veneer-grid{ column-gap: 2.4rem}} .veneer-image{ border-radius: 2rem; overflow: hidden; width: 34%} .veneer-image img{ width: 100%; height: auto; display: block} @media screen and (max-width: 768.98px){ .veneer-image{ width: 100%}} .veneer-title{ font-size: clamp(40px, 5vw, 56px); font-weight: 800; line-height: 1.2; margin-bottom: 32px; color: #1a1a1a} .veneer-content{ flex: 1} .veneer-content .more-btn{ padding: 2rem; border-bottom-left-radius: 5rem; border-bottom-right-radius: 5rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 42%, #e4f4ff 76%); margin-top: -4rem; padding-top: 6rem} @media screen and (min-width: 576px){ .veneer-content .more-btn{ display: none}} .veneer-content .mona-content{ font-size: 1.8rem; overflow: hidden} @media only screen and (max-width: 1200px){ .veneer-content .mona-content{ font-size: 1.6rem}} .veneer-content .mona-content.is-full{ max-height: 100% !important} .veneer-desc{ margin-bottom: 5rem} .veneer-adv{ padding-top: 0} @media screen and (max-width: 850px){ .veneer-adv .adv-row{ flex-direction: column}} @media screen and (max-width: 575.98px){ .veneer-adv .adv-faqs .faqs-heading .title-22{ font-size: 1.8rem}} @media screen and (max-width: 575.98px){ .veneer-adv .adv-faqs .faqs-content{ padding-top: 2rem}} .different{ padding-bottom: 6rem} .different-wrap{ margin-top: 5rem; border-radius: 3rem; overflow: hidden} @media screen and (max-width: 575.98px){ .different-wrap{ border-radius: 2.4rem}} .different-head{ display: flex; overflow: hidden; text-align: center} .different-head_item{ min-height: 7rem; width: 50%; background: #025899; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; line-height: 1.5; font-weight: 700; letter-spacing: calc(22px * (1 / 100))} @media only screen and (max-width: 1200px){ .different-head_item{ font-size: 2rem}} @media only screen and (max-width: 800px){ .different-head_item{ font-size: 2rem}} .different-head_item:last-child{ background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 48%, #dfaa23 100%); color: #025899} @media screen and (max-width: 575.98px){ .different-head_item{ font-size: 1.8rem; min-height: 3.8rem}} .different-list .faqs{ display: flex; flex-direction: column; row-gap: 0.2rem} .different-list .faqs-item.is-active .faqs-heading::after{ background-image: url("../images/veneer/minus.svg")} .different-list .faqs-heading{ cursor: pointer; padding: 1.2rem 3rem; background: #e4f4ff; display: flex; align-items: center; text-align: center; justify-content: center; position: relative; padding-right: 7rem} .different-list .faqs-heading::after{ transition: 0.4s ease-in-out; right: 3rem; position: absolute; content: ""; width: 3rem; height: 3rem; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("../images/veneer/plus.svg")} .different-list .faqs-heading .title-22{ color: #025899; font-size: 1.8rem} @media screen and (max-width: 991.98px){ .different-list .faqs-heading{ padding-right: 4rem} .different-list .faqs-heading::after{ right: 2rem}} @media screen and (max-width: 575.98px){ .different-list .faqs-heading::after{ right: 1.2rem}} .different-list .faqs-content{ display: flex; flex-wrap: wrap; gap: 6.4rem; position: relative; padding: 1.5rem 3.2rem 4rem 3.2rem} .different-list .faqs-content::before{ position: absolute; content: ""; height: 100%; top: 0; left: 50%; transform: translateX(-50%); width: 1px; background: #025899} @media screen and (max-width: 575.98px){ .different-list .faqs-content::before{ width: 0.5px}} .different-list .faqs-content .mona-content{ width: calc(50% - 3.2rem); font-size: 1.8rem; line-height: 1.5} @media only screen and (max-width: 1200px){ .different-list .faqs-content .mona-content{ font-size: 1.6rem}} @media screen and (max-width: 991.98px){ .different-list .faqs-content{ gap: 3.2rem; padding: 1.5rem} .different-list .faqs-content .mona-content{ width: calc(50% - 1.6rem)}} @media screen and (max-width: 575.98px){ .different-list .faqs-content{ gap: 2rem; padding: 2rem 1.5rem} .different-list .faqs-content .mona-content{ width: calc(50% - 1rem)}} .process .title-desc{ max-width: 109rem; text-align: left; margin-top: 1.5rem} @media screen and (min-width: 576px){ .process .title-desc{ text-align: center}} .process .m-share-box{ margin-top: 4rem} .process-steps{ display: flex; justify-content: center; align-items: center; position: relative; margin-top: 7rem} @media screen and (max-width: 767.98px){ .process-steps{ flex-direction: column; margin-top: 4rem}} .step-item{ text-align: center; transition: transform 0.4s ease; display: flex; align-items: center; flex-direction: column; row-gap: 3.2rem; position: relative; padding-right: 6.5rem} .step-item::before{ position: absolute; content: ""; right: 2rem; top: 5.5rem; height: 1.8rem; width: 5.6rem; background-size: cover; background-repeat: no-repeat; background-position: right center; background-image: url("../images/veneer/arrow.svg")} @media screen and (max-width: 1199.98px){ .step-item::before{ width: 4.6rem; right: 1rem}} @media screen and (max-width: 991.98px){ .step-item::before{ width: 2.1rem; right: 0}} @media screen and (max-width: 767.98px){ .step-item::before{ right: unset; left: calc(5.5rem - 0.9rem); bottom: 1rem; transform: rotate(90deg); top: unset}} .step-item:last-child{ padding-right: 0} .step-item:last-child::before{ display: none} @media screen and (max-width: 767.98px){ .step-item:last-child{ padding-bottom: 0}} @media screen and (max-width: 1199.98px){ .step-item{ padding-right: 5.5rem}} @media screen and (max-width: 991.98px){ .step-item{ padding-right: 2rem}} @media screen and (max-width: 767.98px){ .step-item{ padding-right: 0; padding-bottom: 4rem; flex-direction: row; column-gap: 2.4rem}} .step-circle{ width: 11rem; height: 11rem; display: flex; align-items: center; justify-content: center} .step-circle img{ width: 100%; height: auto} .step-content{ display: flex; flex-direction: column; row-gap: 1rem} .step-number{ display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.8rem; padding: 0.2rem 2rem; border-radius: 3rem; background: #025899; margin-right: auto; margin-left: auto; width: fit-content} .step-desc{ font-size: 1.8rem; max-width: 18.8rem; margin-right: auto; margin-left: auto} @media screen and (max-width: 767.98px){ .step-desc{ font-size: 1.6rem}} .process-detail{ margin-top: 7rem; margin-bottom: 2.8rem; border-radius: 2rem; padding: 1px; background: linear-gradient(90deg, #96d3f3 0%, #e4f4ff 50%, #96d3f3 100%)} .process-detail .mona-content{ padding: 3.2rem 2.4rem; background: #fff; border-radius: 2rem; font-size: 1.8rem} @media only screen and (max-width: 1200px){ .process-detail .mona-content{ font-size: 1.6rem}} .process-detail .mona-content h3, .process-detail .mona-content h2, .process-detail .mona-content h4, .process-detail .mona-content h5, .process-detail .mona-content h6{ color: #025899; margin-bottom: 0.8rem; margin-top: 2.4rem} .process-detail .mona-content h2{ font-size: 2.2rem} @media only screen and (max-width: 1200px){ .process-detail .mona-content h2{ font-size: 2rem}} @media only screen and (max-width: 800px){ .process-detail .mona-content h2{ font-size: 2rem}} .process-detail .mona-content h3{ font-size: 2rem} @media only screen and (max-width: 1200px){ .process-detail .mona-content h3{ font-size: 1.8rem}} .process-detail .mona-content h3, .process-detail .mona-content h4, .process-detail .mona-content h5, .process-detail .mona-content h6{ font-size: 1.8rem} @media only screen and (max-width: 1200px){ .process-detail .mona-content h3, .process-detail .mona-content h4, .process-detail .mona-content h5, .process-detail .mona-content h6{ font-size: 1.6rem}} @media screen and (max-width: 575.98px){ .process-detail .mona-content{ padding: 3.2rem 1.4rem 1.4rem 1.4rem} .process-detail .mona-content h3{ font-size: 1.8rem}} @media screen and (max-width: 767.98px){ .process-detail{ margin-top: 5rem}} .process-note{ font-size: 1.8rem; background: #e4f4ff; padding: 1.4rem; position: relative; padding-left: 4rem} @media only screen and (max-width: 1200px){ .process-note{ font-size: 1.6rem}} .process-note::before{ left: 1rem; top: 1.4rem; position: absolute; content: ""; width: 2.4rem; height: 2.4rem; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("../images/veneer/check1.svg")} .process-note strong{ font-weight: 700; color: #025899; font-size: 2.2rem} @media only screen and (max-width: 1200px){ .process-note strong{ font-size: 2rem}} @media only screen and (max-width: 800px){ .process-note strong{ font-size: 2rem}} @media screen and (max-width: 575.98px){ .process-note{ padding: 1.2rem; margin: 0 -1.6rem; padding-left: 4rem} .process-note::before{ left: 1rem; top: 1.2rem} .process-note strong{ font-size: 1.8rem}} .p-veneer .interest{ padding: 0} .p-veneer .interest-inner{ box-shadow: unset; border: 1px solid #025899} .p-veneer .count{ padding-bottom: 4rem} .p-veneer .service{ padding-top: 0} .p-veneer .service .title-main{ font-size: 2.2rem} @media only screen and (max-width: 1200px){ .p-veneer .service .title-main{ font-size: 2rem}} @media only screen and (max-width: 800px){ .p-veneer .service .title-main{ font-size: 2rem}} .p-veneer .service .title-22{ font-size: 1.8rem; color: #000; font-weight: 400; text-transform: unset; text-align: left} @media only screen and (max-width: 1200px){ .p-veneer .service .title-22{ font-size: 1.6rem}} @media screen and (min-width: 576px){ .p-veneer .service .title-22{ text-align: center}} .p-veneer .service-box_content-title .text-16{ display: none} .p-veneer .service-box_content ul{ display: none} .p-veneer .service-swiper{ --letter-spacing: 1.5rem} .p-veneer .service-swiper .swiper-slide{ width: calc(100% / 3)} @media screen and (max-width: 767.98px){ .p-veneer .service-swiper .swiper-slide{ width: calc(100% / 2)}} @media screen and (max-width: 575.98px){ .p-veneer .service-swiper .swiper-slide{ width: 100%}} @media screen and (max-width: 1199.98px){ .p-veneer .service-swiper{ --letter-spacing: 0.8rem}} .p-veneer .service-box{ background: transparent; display: flex; flex-direction: column; row-gap: 1.2rem} .p-veneer .service-box_img{ padding: 0} .p-veneer .service-box_img .img{ border-radius: 2rem; padding-top: calc(318 / 380 * 100%)} .p-veneer .object{ box-shadow: unset; background: transparent} @media screen and (max-width: 575.98px){ .p-veneer .object{ padding-top: 1rem}} .p-veneer .object-heading .title-main{ font-size: 2.2rem} @media only screen and (max-width: 1200px){ .p-veneer .object-heading .title-main{ font-size: 2rem}} @media only screen and (max-width: 800px){ .p-veneer .object-heading .title-main{ font-size: 2rem}} .p-veneer .object-heading .title-desc{ text-align: left; max-width: 106.2rem; margin-right: auto; margin-left: auto} @media screen and (min-width: 576px){ .p-veneer .object-heading .title-desc{ text-align: center}} .p-veneer .object-swiper{ --letter-spacing: 1rem} .p-veneer .object-swiper .swiper-navigation> *:after{ background-image: url("../images/brace/icon-chevron.svg")} .p-veneer .object-swiper .swiper-slide{ width: calc(100% / 3)} @media screen and (max-width: 575.98px){ .p-veneer .object-swiper .swiper-slide{ width: 100%}} .p-veneer .object-swiper .feedback-box{ box-shadow: none; padding: 0} .p-veneer .object-swiper .feedback-img_img .img{ padding-top: 0; overflow: hidden; border-radius: 2rem} .p-veneer .object-swiper .feedback-img_img .img img{ position: initial; width: 100%; height: auto; object-fit: contain; transform: unset} @media screen and (max-width: 1199.98px){ .p-veneer .object-swiper{ --letter-spacing: 0.8rem}} .genuine{ padding: 6rem 0} .genuine .title-desc{ max-width: 95.4rem; margin-right: auto; margin-left: auto; text-align: left; margin-top: 2.4rem} @media screen and (min-width: 576px){ .genuine .title-desc{ text-align: center}} .genuine-img{ margin-top: 5rem; margin-bottom: 3rem; display: flex; align-items: center; justify-content: center} .genuine-img_item img{ max-height: 8rem; width: auto} @media screen and (max-width: 767.98px){ .genuine-img{ margin-top: 3rem}} .genuine-list{ max-width: 113.4rem; margin-right: auto; margin-left: auto; gap: 2.4rem; display: flex; flex-wrap: wrap; justify-content: space-between} .genuine-list ul li{ margin-top: 2.4rem; font-size: 1.8rem; font-weight: 700; color: #025899; position: relative; padding-left: 5.4rem} .genuine-list ul li::before{ position: absolute; content: ""; width: 2.8rem; height: 2.8rem; left: 0; top: 0; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("../images/veneer/check2.svg")} .genuine-list ul li:first-child{ margin-top: 0} @media screen and (max-width: 767.98px){ .genuine-list ul li{ padding-left: 4.4rem; margin-top: 1.5rem}} @media screen and (max-width: 767.98px){ .genuine-list{ background: #e4f4ff; padding: 2.4rem 1.6rem; border-radius: 2rem}} @media screen and (max-width: 767.98px){ .genuine{ padding: 4rem 0}} .takecare .title-22{ font-size: 3.5rem} @media only screen and (max-width: 1200px){ .takecare .title-22{ font-size: 3rem}} @media only screen and (max-width: 800px){ .takecare .title-22{ font-size: 2.5rem}} @media screen and (max-width: 575.98px){ .takecare .title-22{ font-size: 2rem}} .takecare .title-desc{ text-align: left; max-width: 118.2rem} @media screen and (min-width: 576px){ .takecare .title-desc{ text-align: center}} .takecare .genuine-list{ margin-top: 4rem; max-width: 122.8rem; column-gap: 6rem} @media screen and (max-width: 1199.98px){ .takecare .genuine-list{ column-gap: 3.2rem}} @media screen and (max-width: 991.98px){ .takecare .genuine-list{ column-gap: 1.6rem}} .takecare .genuine-list ul{ width: calc(50% - 3rem)} .takecare .genuine-list ul li{ margin-top: 4rem; padding-left: 8.8rem; font-size: 1.8rem; font-weight: 400; color: #000} @media only screen and (max-width: 1200px){ .takecare .genuine-list ul li{ font-size: 1.6rem}} .takecare .genuine-list ul li::before{ width: 4.8rem; height: 4.8rem; background-image: url("../images/veneer/check3.svg")} @media screen and (max-width: 1199.98px){ .takecare .genuine-list ul li::before{ width: 3.8rem; height: 3.8rem}} @media screen and (max-width: 991.98px){ .takecare .genuine-list ul li::before{ width: 2.8rem; height: 2.8rem}} .takecare .genuine-list ul li:first-child{ margin-top: 0} @media screen and (max-width: 1199.98px){ .takecare .genuine-list ul li{ padding-left: 6.8rem}} @media screen and (max-width: 991.98px){ .takecare .genuine-list ul li{ padding-left: 4.2rem; margin-top: 3.2rem}} @media screen and (max-width: 1199.98px){ .takecare .genuine-list ul{ width: calc(50% - 1.6rem)}} @media screen and (max-width: 991.98px){ .takecare .genuine-list ul{ width: calc(50% - 0.8rem)}} @media screen and (max-width: 767.98px){ .takecare .genuine-list ul{ width: 100%; padding: 0; background: transparent; border-radius: 0}} @media screen and (max-width: 767.98px){ .takecare .genuine-list{ padding: 0; background: transparent; border-radius: 0}}