: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} .ser{ padding: 3rem 0} @media screen and (max-width: 430px){ .ser-heading .title-main{ width: 100%; margin: 0 auto; max-width: 34rem}} .ser-inner{ width: 100%; margin: 0 auto; max-width: 100.4rem; --letter-spacing: 1.5rem} @media screen and (max-width: 1200px){ .ser-inner{ --letter-spacing: 1rem}} .ser-list{ display: flex; flex-wrap: wrap; row-gap: calc(2 * var(--letter-spacing)); margin: 0 calc(-1 * var(--letter-spacing))} .ser-item{ width: calc(100% / 2); padding: 0 var(--letter-spacing)} @media screen and (max-width: 767px){ .ser-item{ width: 100%}} .ser-box{ overflow: hidden; border-radius: 2rem; padding: 3.6rem 1.6rem 1.6rem; border: 0.1rem solid #025899} @media screen and (max-width: 767px){ .ser-box{ padding: 2rem 1.2rem 1.2rem; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)}} .ser-price .title-22{ color: white; margin: 0 auto; line-height: 150%; width: fit-content; border-radius: 3rem; padding: 0.4rem 1.8rem; letter-spacing: 0.022rem; background-color: #025899; border: 0.1rem solid #025899} @media screen and (max-width: 767px){ .ser-price .title-22{ font-size: 1.8rem}} .ser-price .price-total{ gap: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center} .ser-price .price-total .text-18{ line-height: 150%; color: #025899; border-top: 0.1rem solid #025899; border-bottom: 0.1rem solid #025899} .ser-price .price-total .title-main{ 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: 767px){ .ser-price .price-total .title-main{ font-size: 2.5rem}} .ser-content ul{ padding: 1.6rem; border-radius: 2rem; background: linear-gradient(270deg, #96d3f3 0%, #e4f4ff 50.28%, #96d3f3 100%)} .ser-content ul li{ gap: 0.8rem; display: flex; line-height: 150%} .ser-content ul li img{ flex-shrink: 0; margin-top: 0.5rem; object-fit: contain; width: 1.6rem; height: 1.6rem} .brace-ser .ser-box{ max-width: 40.4rem; border: 0; padding: 2.8rem 1rem 1rem 1rem; background: linear-gradient(270deg, #96d3f3 0%, #e4f4ff 50.28%, #96d3f3 100%); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25)} @media screen and (max-width: 575.98px){ .brace-ser .ser-box{ max-width: 100%; row-gap: 0.2rem}} .brace-ser .ser-content{ border-radius: 2rem; background: #fff; padding: 3.8rem 1.8rem 3rem 1.8rem; display: flex; flex-direction: column; row-gap: 2.6rem} .brace-ser .ser-content .title-22{ color: #025899; text-align: center} @media screen and (max-width: 575.98px){ .brace-ser .ser-content .title-22{ font-size: 1.8rem}} .brace-ser .ser-content ul{ background: transparent; padding: 0; border-radius: 0} .brace-ser .ser-price .price-total{ justify-content: start} .brace-ser .ser-price .price-total .title-main{ letter-spacing: calc(32px * (1 / 100)); font-size: 3.2rem} @media screen and (max-width: 418.98px){ .brace-ser .ser-price .price-total .title-main{ font-size: 2.6rem}} .brace-ser .ser-inner{ max-width: 100%; position: relative} .brace-ser .ser-inner .swiper-slide{ width: fit-content; padding: 1rem 0} .brace-ser .ser-inner .ser-item{ width: 100%; padding: 0 0.8rem} @media screen and (max-width: 575.98px){ .brace-ser .ser-inner .ser-item{ padding: 0}} .brace-ser .swiper-navigation:has(.swiper-button-lock){ display: none} .brace-ser .swiper-navigation> *{ width: 3.2rem; height: 3.2rem; background: #025899} .brace-ser .swiper-navigation> *:after{ width: 1.1rem; height: 1.1rem; background-image: url("../images/brace/navi.svg")} .brace-ser .swiper-navigation .prev::after{ transform: rotate(0deg)} .brace-ser .swiper-navigation .next::after{ transform: rotate(-180deg)} .ser-img{ margin-right: auto; margin-left: auto; max-width: 25.2rem; width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden} .ser-img img{ width: 100%; height: auto} .ser-action{ display: flex; align-items: center; justify-content: center; gap: 1.2rem} .ser-action .btn{ padding: 0.5rem 2.4rem; font-size: 1.8rem} @media screen and (max-width: 575.98px){ .ser-action .btn{ font-size: 1.6rem}} @media screen and (max-width: 575.98px){ .ser-action{ gap: 2.8rem}} .ser-tag{ position: relative; margin-top: 1.6rem} @media screen and (min-width: 576px){ .ser-tag{ display: none}} .ser-tag_item{ display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #2b2b2b; padding: 0.1rem 1.2rem; border-radius: 3rem; background: transparent; transition: 0.4s ease-in-out} .ser-tag .swiper-slide{ width: fit-content} .ser-tag .swiper-slide-thumb-active .ser-tag_item{ background: #025899; color: #fff} .promotion .ser-wrap{ row-gap: 5.4rem} .promotion .ser-price .title-22{ letter-spacing: calc(22px * (1 / 100)); padding: 0.4rem 2.4rem; text-align: center; display: flex; align-items: center; justify-content: center} .promotion .ser-price .price-total .title-main{ font-size: 3rem; letter-spacing: calc(30px * (1 / 100))} @media only screen and (max-width: 1200px){ .promotion .ser-price .price-total .title-main{ font-size: 2.7rem}} @media only screen and (max-width: 800px){ .promotion .ser-price .price-total .title-main{ font-size: 2.4rem}} .promotion .ser-content ul{ row-gap: 0.8rem} .promotion .ser-box{ box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25)} .promotion-slide{ position: relative; margin: 0 calc(-1 * var(--letter-spacing))} .promotion-slide .ser-list{ margin: 0; flex-wrap: nowrap; justify-content: unset !important} .promotion-slide .swiper-navigation .prev{ left: 0} .promotion-slide .swiper-navigation .next{ right: 0} .promo-card{ width: fit-content; box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25); background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 48%, #dfaa23 100%); color: white; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; transition: transform 0.4s ease; padding: 1px; border-radius: 10rem} @media screen and (max-width: 575.98px){ .promo-card{ width: 100%}} .promo-highlight{ line-height: 1; font-size: 6rem; font-weight: 900; letter-spacing: calc(60px * (1 / 100)); background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 48%, #dfaa23 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent} @media only screen and (max-width: 1200px){ .promo-highlight{ font-size: 3.5rem}} @media only screen and (max-width: 800px){ .promo-highlight{ font-size: 2.5rem}} @media screen and (max-width: 991.98px){ .promo-highlight{ font-size: 3rem}} .promo-content{ padding-right: 4rem; padding-left: 0; width: calc(100% - 2px); height: calc(100% - 2px); background: #025899; border-radius: 10rem; display: flex; align-items: center; position: relative; max-height: 12.6rem} @media screen and (max-width: 1199.98px){ .promo-content{ padding-right: 2.4rem}} @media screen and (max-width: 767.98px){ .promo-content{ padding-right: 1.6rem}} @media screen and (max-width: 575.98px){ .promo-content{ max-height: 9.2rem}} .promo-gift{ flex-shrink: 0; width: 13rem; height: 13rem; border-radius: 50%; background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 48%, #dfaa23 100%); display: flex; align-items: center; justify-content: center; padding: 1px} .promo-gift img{ width: 100%; height: auto; object-fit: contain} .promo-gift__inner{ border-radius: 50%; background: #025899; display: flex; align-items: center; justify-content: center; padding: 2.4rem; width: calc(100% - 2px); height: calc(100% - 2px)} @media screen and (max-width: 767.98px){ .promo-gift__inner{ padding: 1.6rem}} @media screen and (max-width: 991.98px){ .promo-gift{ width: 12rem; height: 12rem}} @media screen and (max-width: 575.98px){ .promo-gift{ width: 9.2rem; height: 9.2rem}} .promo-list{ display: flex; align-items: center; gap: 2.6rem; position: relative; padding-left: 3.4rem; padding-bottom: 1.4rem; padding-top: 0.4rem} .promo-list:has(.mona-content) .promo-highlight{ font-size: 4rem} @media only screen and (max-width: 1200px){ .promo-list:has(.mona-content) .promo-highlight{ font-size: 3.5rem}} @media only screen and (max-width: 800px){ .promo-list:has(.mona-content) .promo-highlight{ font-size: 2.7rem}} @media screen and (max-width: 767.98px){ .promo-list:has(.mona-content){ padding-left: 0.8rem}} @media screen and (max-width: 575.98px){ .promo-list:has(.mona-content) .promo-highlight{ font-size: 2.4rem}} @media screen and (max-width: 400.98px){ .promo-list:has(.mona-content) .promo-highlight{ font-size: 2rem}} @media screen and (max-width: 1199.98px){ .promo-list{ padding-left: 1.6rem; gap: 1.6rem}} @media screen and (max-width: 767.98px){ .promo-list{ gap: 0.6rem; padding-left: 1.4rem}} @media screen and (max-width: 575.98px){ .promo-list{ padding-top: 0.6rem}} .promo-item{ padding-right: 2.6rem; border-right: 1px solid #fff; white-space: nowrap; display: flex; flex-direction: column; row-gap: 0.4rem} .promo-item:last-child{ padding-right: 0; border: 0} .promo-item:has(.mona-content){ white-space: unset} .promo-item .mona-content{ min-width: 25rem; color: #fff; font-size: 1.4rem; text-align: left} .promo-item .mona-content li{ font-size: 1.4rem} @media screen and (max-width: 767.98px){ .promo-item .mona-content{ min-width: 18rem; font-size: 1.3rem} .promo-item .mona-content li{ font-size: 1.3rem}} @media screen and (max-width: 575.98px){ .promo-item .mona-content{ font-size: 1.2rem; min-width: 18rem} .promo-item .mona-content li{ font-size: 1.1rem}} @media screen and (max-width: 424.98px){ .promo-item .mona-content{ min-width: 12rem} .promo-item .mona-content li{ font-size: 0.9rem}} @media screen and (max-width: 1199.98px){ .promo-item{ padding-right: 1.6rem} .promo-item .title-22{ font-size: 1.8rem}} @media only screen and (max-width: 1199.98px) and (max-width: 1200px){ .promo-item .title-22{ font-size: 1.6rem}} @media screen and (max-width: 991.98px){ .promo-item .title-22{ font-size: 1.6rem}} @media screen and (max-width: 767.98px){ .promo-item{ padding-right: 0.6rem}} @media screen and (max-width: 575.98px){ .promo-item .title-18{ font-size: 1.4rem} .promo-item .title-22{ font-size: 1.4rem}} @media screen and (max-width: 400.98px){ .promo-item{ row-gap: 0} .promo-item .title-18{ font-size: 1.2rem} .promo-item .title-22{ font-size: 1.2rem}} .promotion-grid{ display: flex; flex-wrap: wrap; gap: 6.6rem 4.6rem; justify-content: center} @media screen and (max-width: 1199.98px){ .promotion-grid{ column-gap: 1.6rem}} @media screen and (max-width: 991.98px){ .promotion-grid{ row-gap: 4rem}} .promo-btn{ position: absolute; bottom: -2rem; left: 55%; transform: translateX(-50%)} .promo-txt{ display: flex; align-items: center; gap: 0.4rem} .promo-txt__sub{ display: flex; justify-content: start; flex-direction: column; align-items: start; font-size: 1.8rem; font-weight: 700} @media only screen and (max-width: 1200px){ .promo-txt__sub{ font-size: 1.6rem}} .promo-txt__sub .promo-highlight{ font-size: 2.4rem} @media screen and (max-width: 991.98px){ .promo-txt__sub .promo-highlight{ font-size: 1.8rem}} @media screen and (max-width: 767.98px){ .promo-txt__sub .promo-highlight{ font-size: 1.6rem}} @media screen and (max-width: 767.98px){ .promo-txt__sub{ font-size: 1.4rem}} @media screen and (max-width: 575.98px){ .promo-txt__sub{ font-size: 1.2rem}} .offer{ position: relative} .offer-bg{ inset: 0; width: 100%; height: 100%; position: absolute} .offer-bg img{ width: 100%; height: 100%; object-fit: cover} .offer-position{ z-index: 5; position: relative} .offer-flex{ width: 100%; margin: 0 auto; padding: 4rem 0} .offer-inner .btn{ min-width: 18.4rem} .offer-list{ display: flex; flex-wrap: wrap; row-gap: 4rem; margin: 0 -4rem} @media screen and (max-width: 1200px){ .offer-list{ row-gap: 2rem; margin: 0 -1rem}} .offer-item{ padding: 0 4rem; width: calc(100% / 2)} @media screen and (max-width: 1200px){ .offer-item{ padding: 0 1rem}} @media screen and (max-width: 1024px){ .offer-item{ width: 100%}} .offer-box{ height: 100%; gap: 1.2rem; display: flex; border-radius: 3rem; padding: 3rem 1.6rem; background-color: white; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} @media screen and (max-width: 1024px){ .offer-box{ padding: 2rem}} @media screen and (max-width: 576px){ .offer-box{ flex-direction: column}} .offer-img{ flex-shrink: 0; border-radius: 50%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 5.7rem; height: 5.7rem; background-color: #025899} @media screen and (max-width: 576px){ .offer-img{ margin: 0 auto}} .offer-img .img{ flex-shrink: 0; max-width: 2.8rem} .offer-img .img img{ width: 100%; object-fit: contain; filter: brightness(0) invert(1)} .offer-content .price{ overflow: hidden; width: fit-content; border-radius: 3rem; background-color: #e4f4ff; display: flex; align-items: center; flex-wrap: wrap; color: #025899} @media screen and (max-width: 576px){ .offer-content .price{ margin: 0 auto}} .offer-content .price .title-22{ gap: 1rem; font-weight: 700; color: #025899; border-radius: 3rem; padding-left: 1.4rem; display: flex; align-items: center} @media screen and (max-width: 576px){ .offer-content .price .title-22{ font-size: 1.4rem; padding-left: 0.8rem}} .offer-content .price .title-22 span{ color: white; display: block; border-radius: inherit; padding: 0.4rem 1.4rem; background-color: #ec1d23} @media screen and (max-width: 576px){ .offer-content .price .title-22 span{ padding: 0.4rem 0.8rem}} .offer-content .price:has(.offer-txt){ gap: 1rem; padding-right: 1.4rem} .offer-content ul li{ position: relative; padding-left: 1.6rem} .offer-content ul li::before{ content: ""; left: 0; top: 0.9rem; border-radius: 50%; position: absolute; width: 0.6rem; height: 0.6rem; background-color: #000000} .offer{ padding: 3rem 0rem 3rem} @media screen and (max-width: 992px){ .offer{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .offer{ padding: 4rem 0rem}} .offer-heading .tab{ gap: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center} .offer-heading .tab-item{ text-align: center; transition: 0.4s ease-in-out; border-radius: 10rem; padding: 0.6rem 1.6rem} @media screen and (max-width: 576px){ .offer-heading .tab-item{ padding: 0.4rem 1.2rem}} .offer-heading .tab-item.active{ background-color: #025899} .offer-heading .tab-item.active .text-18{ color: white} @media screen and (min-width: 1201px){ .offer-heading .tab-item:hover{ background-color: #025899} .offer-heading .tab-item:hover .text-18{ color: white}} .offer-heading .tab .text-18{ line-height: 133%; color: #025899; transition: 0.4s ease-in-out} .offer-group{ position: relative; padding: 3rem 0} .offer-block> .title-22{ color: #025899} .offer-flex{ padding: 0} @media screen and (max-width: 576px){ .offer-box{ position: relative; padding: 2rem 4.2rem; padding-top: 1rem; width: 90%; margin: 0 auto}} @media screen and (max-width: 576px){ .offer-img{ width: 5rem; height: 5rem; position: absolute; left: -1.6rem; top: -1.6rem}} @media screen and (max-width: 576px){ .offer-list{ row-gap: 4rem}} @media screen and (max-width: 576px){ .offer-content .price{ background-color: transparent; width: 100%; border-radius: 0; padding: 0} .offer-content .price .title-22{ flex-direction: column; width: 100%; text-align: center; padding-left: 0; row-gap: 0.8rem} .offer-content .price .title-22 span{ display: block; width: 100%; border-radius: 3rem} .offer-content .price .title-22 span:last-child{ font-size: 2rem; font-weight: 700} .offer-content .price .title-22 .offer-tt{ background: #e4f4ff; color: #025899; font-weight: 700; font-size: 1.8rem}} @media screen and (max-width: 576px){ .offer-txt{ width: 100%; text-align: center}} .offer.offer-without--tab{ padding: 2rem 0} .offer.offer-without--tab:has(.offer-bg) .offer-box{ padding: 2rem; flex-wrap: wrap} .offer.offer-without--tab:has(.offer-bg) .offer-box> .title-22{ width: 100%; color: #025899} @media screen and (max-width: 576px){ .offer.offer-without--tab:has(.offer-bg) .offer-box> .title-22{ background: #e4f4ff; color: #025899; background: #e4f4ff; font-size: 1.8rem; min-height: 4rem; display: flex; align-items: center; justify-content: center; border-radius: 3rem; width: max-content; padding: 0 1rem; margin: 0 auto}} @media screen and (max-width: 400px){ .offer.offer-without--tab:has(.offer-bg) .offer-box> .title-22{ font-size: 1.6rem}} .offer.offer-without--tab:has(.offer-bg) .offer-content{ flex: 1} @media screen and (max-width: 567px){ .offer.offer-without--tab:has(.offer-bg) .offer-content .price .title-22{ flex-direction: row; gap: 0} .offer.offer-without--tab:has(.offer-bg) .offer-content .price .title-22 span{ height: 4rem; margin-left: -2rem; border-bottom-left-radius: 0; border-top-left-radius: 0; display: flex; align-items: center; padding-left: 2.4rem} .offer.offer-without--tab:has(.offer-bg) .offer-content .price .title-22 .offer-tt{ z-index: 1; background: #025899; color: #fff; white-space: nowrap; padding: 0 1.6rem; display: flex; align-items: center; margin-left: 0; border-radius: 3rem; width: fit-content}} @media screen and (max-width: 400px){ .offer.offer-without--tab:has(.offer-bg) .offer-content .price .title-22{ font-size: 1.4rem} .offer.offer-without--tab:has(.offer-bg) .offer-content .price .title-22 span:last-child{ font-size: 1.7rem} .offer.offer-without--tab:has(.offer-bg) .offer-content .price .title-22 .offer-tt{ font-size: 1.6rem}} .offer.offer-without--tab:has(.offer-bg) .offer-flex{ padding-bottom: 0; margin-top: 4rem} .offer.offer-without--tab:has(.offer-bg) .offer-inner{ row-gap: 2rem; max-width: 112.4rem; margin: 0 auto} .share{ margin: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .share{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .share{ margin: 4rem 0rem}} @media screen and (max-width: 576px){ .share-heading .title-main{ margin: 0 auto; max-width: 30rem}} .share-heading .text-18{ line-height: 1.33} @media screen and (min-width: 577px){ .share-heading .text-18{ margin: 0 auto; max-width: 85.6rem; text-align: center}} @media screen and (max-width: 576px){ .share-heading .text-18{ text-align: justify}} .share-swiper{ position: relative} @media screen and (min-width: 1025px){ .share-swiper{ display: none}} .share-swiper .swiper{ margin: 0 -0.8rem} .share-swiper .swiper-slide{ padding: 0 0.8rem; width: calc(100% / 2)} @media screen and (max-width: 576px){ .share-swiper .swiper-slide{ width: 100%}} .share-swiper .swiper-navigation> *{ top: calc(50% - 3rem)} .share-swiper_box{ gap: 2rem; display: flex} .share-swiper_img{ width: 100%; height: 100%; cursor: pointer; position: relative} @media screen and (min-width: 1201px){ .share-swiper_img:hover .img img{ transform: translate(-50%, -50%) scale(1.05)}} .share-swiper_img .img{ height: 100%; overflow: hidden; position: relative; border-radius: 1rem; padding-top: calc(410 / 670 * 100%)} @media screen and (max-width: 1200px){ .share-swiper_img .img{ padding-top: calc(214 / 380 * 100%)}} .share-swiper_img .img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%); transition: 0.4s ease-in-out} .share-swiper_content> *{ line-height: 150%} .share-swiper_content .text-16{ color: #025899} .share .icon{ width: 4rem; height: 4rem; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%)} .share .icon img{ width: 100%; height: 100%; object-fit: contain} .share-row{ --rg: 1.6rem; --cg: 1.6rem} @media screen and (max-width: 1024px){ .share-row{ display: none}} .share-list{ max-height: 39rem; padding-right: 3rem; overflow: hidden auto} .share-list .share-swiper_img{ flex-shrink: 0; max-width: 19.4rem} .share-list .share-swiper_img .icon{ width: 2rem; height: 2rem} .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} .policy{ padding: 5rem 0rem 5rem} @media screen and (max-width: 992px){ .policy{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .policy{ padding: 4rem 0rem}} .policy-box{ height: 100%; padding: 2.4rem; box-shadow: 1rem 1rem 4rem 0 rgba(40, 105, 240, 0.16); border-radius: 3rem; background-color: #025899} .policy-content{ height: 100%} .policy-content .title-22{ line-height: 150%; color: #025899; text-align: center; border-radius: 3rem; padding: 0.8rem 1.6rem; background-color: white} .policy-content .text-18{ color: white; text-align: center} .policy-content .btn{ margin-top: auto} .policy-swiper{ position: relative} .policy-swiper .swiper{ margin: 0 -2.4rem} @media screen and (max-width: 1200px){ .policy-swiper .swiper{ margin: 0 -0.8rem}} .policy-swiper .swiper-slide{ height: auto; padding: 0 2.4rem; width: calc(100% / 3)} @media screen and (max-width: 1200px){ .policy-swiper .swiper-slide{ padding: 0 0.8rem}} @media screen and (max-width: 1024px){ .policy-swiper .swiper-slide{ width: calc(100% / 2)}} @media screen and (max-width: 576px){ .policy-swiper .swiper-slide{ width: 100%}} @media screen and (min-width: 1201px){ .policy-swiper .swiper-navigation{ display: none}} .policy2 .title-main{ font-size: 2.2rem} @media only screen and (max-width: 1200px){ .policy2 .title-main{ font-size: 2rem}} @media only screen and (max-width: 800px){ .policy2 .title-main{ font-size: 1.9rem}} .policy2 .policy-swiper{ display: flex; flex-wrap: wrap; justify-content: center; gap: 4rem 1.6rem} @media screen and (max-width: 740px){ .policy2 .policy-swiper{ flex-direction: column; justify-content: start}} .policy2 .policy-box{ position: relative; height: 17.2rem; padding: 0; width: 36.8rem; background: transparent; box-shadow: none; border-radius: 0; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("../images/brace/decora1.svg")} .policy2 .policy-box:first-child{ width: 32.4rem; background-image: url("../images/brace/decora2.svg")} @media screen and (max-width: 420px){ .policy2 .policy-box{ width: 32.4rem; background-image: url("../images/brace/decora2.svg")}} .policy2 .policy-content{ color: #000000; padding-top: 1rem; padding-left: 8rem; padding-right: 3rem; padding-bottom: 1.4rem; row-gap: 0.4rem} .policy2 .policy-content .title-22{ padding: 0; border-radius: 0; text-align: left} .policy2 .policy-content .btn{ margin-left: 0; min-width: 18.4rem; font-size: 1.6rem} @media only screen and (max-width: 800px){ .policy2 .policy-content .btn{ font-size: 1.4rem}} .policy2 .policy-content .text-18{ color: #000000; text-align: left; font-size: 1.6rem} @media only screen and (max-width: 800px){ .policy2 .policy-content .text-18{ font-size: 1.4rem}} .policy-voucher{ position: absolute; left: -2rem; top: 50%; transform: translateY(-50%) rotate(-90deg); font-size: 2.2rem; font-weight: 700; color: #fff} .m-share{ margin: 6rem 0} .m-share-title{ width: 100%; margin: 0 auto; max-width: 88.8rem} .m-share-title .text-18{ margin: 0 auto; line-height: 1.33; max-width: 49.8rem; text-align: left} @media screen and (min-width: 576px){ .m-share-title .text-18{ text-align: center}} .m-share-list{ --letter-spacing: 1rem; display: flex; flex-wrap: wrap; row-gap: 2rem; margin: 0 calc(-1 * var(--letter-spacing))} .m-share-item{ width: calc(100% / 2); padding: 0 var(--letter-spacing)} @media screen and (max-width: 767px){ .m-share-item{ width: 100%}} .m-share-img{ position: relative} @media screen and (min-width: 1201px){ .m-share-img:hover .img img{ transform: translate(-50%, -50%) scale(1.05)}} .m-share-img .img{ overflow: hidden; position: relative; border-radius: 2rem; padding-top: calc(326 / 612 * 100%)} .m-share-img .img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%); transition: 0.4s ease-in-out} .m-share-img .icon{ cursor: pointer; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); border-radius: 50%; width: 4.6rem; height: 4.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center} @media screen and (max-width: 991px){ .m-share-img .icon{ width: 3.2rem; height: 3.2rem}} @media screen and (max-width: 767px){ .m-share-img .icon{ width: 2.8rem; height: 2.8rem}} .m-share-img .icon img{ width: 100%; height: 100%; object-fit: cover} @media screen and (min-width: 768px){ .m-share-extra .m-share-list{ display: grid; row-gap: 0.8rem; overflow: hidden; margin: 0 -0.4rem; grid-template-columns: 75% 25%; grid-template-rows: repeat(2, 1fr)} .m-share-extra .m-share-item{ width: 100%; padding: 0 0.8rem} .m-share-extra .m-share-item:first-child{ grid-column: span 1; grid-row: 1 / span 3} .m-share-extra .m-share-item:nth-child(2){ grid-column: 2 / span 1; grid-row: 3 / span 1}} .m-share-extra .m-share-slider{ --letter-spacing: 1rem} @media screen and (max-width: 767.98px){ .m-share-extra .m-share-slider{ margin-left: calc(-1 * var(--letter-spacing)); margin-right: calc(-1 * var(--letter-spacing))}} .m-share-extra .m-share-list{ margin: 0} @media screen and (max-width: 767.98px){ .m-share-extra .m-share-list{ flex-wrap: nowrap}} .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} .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 1.8rem; 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 .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} .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%)} .calendar{ position: relative; padding: 8rem 0rem 8rem} @media screen and (max-width: 992px){ .calendar{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .calendar{ padding: 4rem 0rem}} .calendar-bg{ inset: 0; z-index: -1; position: absolute} @media screen and (max-width: 1024px){ .calendar-bg{ background-color: #025899}} .calendar-bg img{ width: 100%; height: 100%; object-fit: cover} @media screen and (max-width: 1024px){ .calendar-bg img{ display: none}} .calendar-position{ z-index: 5; position: relative} .calendar-content{ width: 100%; max-width: 59rem; margin-left: auto; text-align: center} @media screen and (min-width: 1025px){ .calendar-content{ margin-right: 16rem}} @media screen and (min-width: 1025px) and (max-width: 1200px){ .calendar-content{ margin-right: 12rem}} @media screen and (max-width: 1024px){ .calendar-content{ margin-right: auto}} .calendar-content .title-22{ font-size: 2.2rem; color: #025899} @media screen and (max-width: 1024px){ .calendar-content .title-22{ color: white; font-size: 1.8rem}} @media screen and (max-width: 400px){ .calendar-content .title-22{ margin: 0 auto; max-width: 26rem}} .calendar-content .title-35{ margin: 0 auto; font-size: 3.5rem; width: fit-content; background: linear-gradient(270deg, #bd0000 0%, #ff1f1f 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent} @media screen and (max-width: 1024px){ .calendar-content .title-35{ font-size: 2.4rem; background: linear-gradient(90deg, #dfaa23 0%, #fbf08d 47.92%, #dfaa23 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent}} @media screen and (max-width: 576px){ .calendar-content .title-35{ margin: 0 auto; font-size: 2rem; max-width: 20rem}} .calendar-content .text-18{ color: #2b2b2b} @media screen and (max-width: 1024px){ .calendar-content .text-18{ color: #e4f4ff}} @media screen and (max-width: 1024px){ .calendar-content_title{ row-gap: 1.2rem}} .calendar-content_title> *{ line-height: 150%} .calendar-content form .form-wrap{ row-gap: 1.6rem} .calendar-content form .form-text{ display: none} .calendar-content form .form-action{ margin-top: 0.8rem} @media screen and (max-width: 1024px){ .calendar-content form .form-action .btn{ font-size: 1.6rem; padding: 0.4rem 2.4rem}} .calendar-content form input{ border-color: #025899} .feedback{ margin: 3rem 0rem 3rem} @media screen and (max-width: 992px){ .feedback{ margin: 6rem 0rem}} @media screen and (max-width: 576px){ .feedback{ margin: 4rem 0rem}} .feedback-wrap{ row-gap: 2.4rem} .feedback-swiper{ width: 100%; margin: 0 auto; max-width: 102rem; position: relative; --letter-spacing: 1rem} @media screen and (max-width: 1200px){ .feedback-swiper{ --letter-spacing: 0.5rem}} .feedback-swiper .swiper{ padding-block: 4rem; margin: -4rem calc(-1 * var(--letter-spacing))} .feedback-swiper .swiper-wrapper{ row-gap: 2rem; flex-direction: row !important} @media screen and (max-width: 1200px){ .feedback-swiper .swiper-wrapper{ row-gap: 1rem}} .feedback-swiper .swiper-slide{ width: calc(100% / 2); padding: 0 var(--letter-spacing)} @media screen and (max-width: 576px){ .feedback-swiper .swiper-slide{ width: 100%}} .feedback-box{ row-gap: 1.6rem; padding: 1.2rem; overflow: hidden; border-radius: 2rem; background-color: white; box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.25)} @media screen and (min-width: 1201px){ .feedback-box:hover .img img{ transform: translate(-50%, -50%) scale(1.05)}} @media screen and (max-width: 767px){ .feedback-box{ padding: 1.2rem}} .feedback-img_img{ height: 100%} .feedback-img_img .img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%); transition: 0.4s ease-in-out; object-fit: inherit} .feedback-img_img .img:not(:has(picture)){ overflow: hidden; position: relative; border-radius: 2rem; padding-top: calc(385 / 660 * 100%); display: block} .feedback-img_img .img:has(picture) picture{ display: block; overflow: hidden; position: relative; border-radius: 2rem; padding-top: calc(385 / 660 * 100%)} .feedback-content{ gap: 1.2rem; position: relative} .feedback-content_title{ row-gap: 0.8rem} @media screen and (max-width: 1200px){ .feedback-content_title{ row-gap: 0.4rem}} .feedback-content_title> *{ line-height: 150%} .feedback-content_title .text-20{ color: #025899; margin-right: 11rem} @media screen and (min-width: 1200px){ .feedback-content_title .text-20{ margin-right: 12rem}} .feedback-content_title .box{ gap: 0.6rem; display: flex} .feedback-content_title .box img{ flex-shrink: 0; margin-top: 0.3rem; object-fit: contain; width: 1.6rem; height: 1.6rem} .feedback-content .text-18{ color: #535353} .feedback-content> .text-18{ position: absolute; right: 0; top: 0; min-width: 11rem; text-align: right} @media screen and (min-width: 1200px){ .feedback-content> .text-18{ min-width: 12rem}} .feedback-content.d-none{ display: none} .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}} @media screen and (max-width: 576px){ .newspapper-wrap .title-main{ font-size: 2rem}} .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} .implant{ padding: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .implant{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .implant{ padding: 4rem 0rem}} .implant-heading .title-22{ color: #025899; line-height: 150%} .implant-swiper{ position: relative} .implant-swiper .swiper{ margin: 0 -4rem} @media screen and (max-width: 576px){ .implant-swiper .swiper{ margin: 0 -2.4rem}} .implant-swiper .swiper-slide{ padding: 0 4rem; width: calc(100% / 4)} @media screen and (max-width: 1024px){ .implant-swiper .swiper-slide{ width: calc(100% / 3)}} @media screen and (max-width: 576px){ .implant-swiper .swiper-slide{ padding: 0 2.4rem; width: calc(100% / 2)}} .implant-img{ position: relative} .implant-img .img{ overflow: hidden; padding-top: 100%; border-radius: 50%; position: relative; border: 0.1rem solid #025899} .implant-img .img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%)} .implant-content .heading> *{ line-height: 150%} .implant-content .heading .text-20{ color: #025899} .implant-content .heading .text-16{ color: #000} .implant-content .price .title-22{ color: #ec1d23} @media screen and (max-width: 576px){ .implant-content .price .title-22 span{ display: block}} .m-gift{ padding: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .m-gift{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .m-gift{ padding: 4rem 0rem}} .m-gift-heading{ text-align: center} .m-gift-heading .text-18{ line-height: 1.33; text-align: left} @media screen and (min-width: 576px){ .m-gift-heading .text-18{ text-align: center}} .m-gift-list{ display: flex; flex-wrap: wrap; row-gap: 4rem; margin: 0 -4rem; justify-content: center} @media screen and (max-width: 1024px){ .m-gift-list{ row-gap: 2.4rem; margin: 0 -2.4rem}} .m-gift-item{ padding: 0 4rem; width: calc(100% / 4)} @media screen and (max-width: 1024px){ .m-gift-item{ padding: 0 2.4rem; width: calc(100% / 3)}} @media screen and (max-width: 576px){ .m-gift-item{ width: calc(100% / 2)}} .m-gift-img{ user-select: none; position: relative} .m-gift-img .img{ margin: 0 auto; border-radius: 50%; width: 10.8rem; height: 10.8rem} .m-gift-img .img img{ width: 100%; height: 100%; object-fit: cover} .m-gift-content{ text-align: center} .m-gift-content .text-18{ line-height: 133%} .m-brace{ position: relative; padding: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .m-brace{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .m-brace{ padding: 4rem 0rem}} .m-brace-extra::before{ content: ""; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; position: absolute; background-size: cover; background-repeat: no-repeat; background-position: top; background-image: url("/wp-content/themes/i-dent/assets-v2/images/brace/offer-bn1.png")} .m-brace-heading .title-22{ color: #025899} .m-brace-swiper{ position: relative} .m-brace-swiper .swiper{ padding-block: 4rem; margin: -4rem -2.5rem} @media screen and (max-width: 1200px){ .m-brace-swiper .swiper{ margin: -4rem -1.2rem}} @media screen and (min-width: 1201px){ .m-brace-swiper .swiper-wrapper{ row-gap: 2rem; flex-wrap: wrap; transform: unset !important}} .m-brace-swiper .swiper-slide{ padding: 0 2.5rem; width: calc(100% / 2)} @media screen and (max-width: 1200px){ .m-brace-swiper .swiper-slide{ padding: 0 1.2rem}} @media screen and (max-width: 576px){ .m-brace-swiper .swiper-slide{ width: 100%}} @media screen and (min-width: 1201px){ .m-brace-swiper .swiper-navigation{ display: none}} .m-brace-box{ gap: 4rem; padding: 1.6rem; box-shadow: 1rem 1rem 4rem 0 rgba(40, 105, 240, 0.16); border-radius: 2rem; display: flex; align-items: center; background-color: white} @media screen and (max-width: 1200px){ .m-brace-box{ gap: 2.4rem; padding: 1.2rem}} @media screen and (max-width: 1024px){ .m-brace-box{ flex-direction: column}} .m-brace-img{ flex-shrink: 0} .m-brace-img .img{ border-radius: 50%; width: 20.2rem; height: 20.2rem} .m-brace-img .img img{ width: 100%; height: 100%; object-fit: cover} .m-brace-content{ text-align: center} @media screen and (max-width: 1024px){ .m-brace-content{ row-gap: 1.2rem}} .m-brace-content .heading{ color: #025899} .m-brace-content .price> *{ font-size: 2rem; line-height: 150%} @media only screen and (max-width: 1200px){ .m-brace-content .price> *{ font-size: 1.8rem}} .m-brace-content .price-old{ color: #2b2b2b; font-weight: 500; text-decoration: line-through} .m-brace-content .price-new{ font-weight: 700; color: #ec1d23} .gold-banner{ padding: 6rem 0rem 6rem} @media screen and (max-width: 992px){ .gold-banner{ padding: 6rem 0rem}} @media screen and (max-width: 576px){ .gold-banner{ padding: 4rem 0rem}} .gold-banner .img{ position: relative; padding-top: calc(692 / 1248 * 100%)} .gold-banner .img img{ top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: translate(-50%, -50%)} .p-gold .feedback .title-main{ display: none} .p-gold .ser-heading .title-22{ color: #025899} .p-gold .ser-price .title-22{ border: 0; padding: 0; border-radius: 0; background-color: transparent} .p-gold .ser-content ul{ background: white} .p-gold .ser-box{ background-color: #025899; padding: 3.2rem 1.2rem 1.2rem; height: 100%; justify-content: space-between}