@charset "utf-8";

/*
 * File    : sub-products.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * PRODUCTS
 * FAQ
 * FIND HOSPITALS
 * HOVER
 */



/* **************************************** *
 * PRODUCTS
 * **************************************** */
/* System */
.product-system.article__section { padding-top: 0; }
.product-system__slider { background: var(--color-black); border-radius: 32rem; overflow: hidden; }
.product-system__item { position: relative; }
.product-system__image { aspect-ratio: 1 / 0.5608; background: no-repeat center center / cover; }
.product-system__explain { position: absolute; left: 74rem; bottom: 48rem; color: #FFA34A; }
.product-system__info { margin-top: 24rem; background: var(--color-gray-200); padding: 32rem 60rem; border-radius: 32rem; }
.product-system__info-title { display: block; color: var(--color-primary); }
.product-system__info-list { margin-top: 16rem; }
.product-system__info-list > li { position: relative; padding-left: 14rem; color: var(--color-gray-900); }
.product-system__info-list > li + li { margin-top: 8rem; }
.product-system__info-list > li:before { content: ''; position: absolute; left: 0; top: calc(var(--font-lineheight-primary-08) / 2); width: 4rem; height: 4rem; border-radius: 50%; background: var(--color-gray-900); translate: 0 -2rem; }
.product-system__info-explain { margin-top: 8rem; color: var(--color-gray-800); }

/* Solution */
.product-solution { background: var(--color-gray-200); }
.product-solution .article__section-head { margin-bottom: 0; }
.product-solution__container { display: flex; justify-content: center; }

/* How */
.product-how { background: var(--color-black); }
.product-how .article__section-title { color: var(--color-white); }
.product-how .article__section-desc { color: var(--color-white); }
.product-how__video { border-radius: 32rem; overflow: hidden; }

/* Step */
.product-steps { background: #E8EAF7; --point-size: 16rem; --step-gap: 360rem; }
.product-steps__list { position: relative; max-width: 1180rem; margin: 0 auto; }
.product-steps__list > li { position: relative; margin-bottom: var(--step-gap); height: var(--point-size); }
.product-steps__list > li:before { content: ''; position: absolute; bottom: calc(100% - var(--point-size)); height: calc(var(--step-gap) + var(--point-size)); width: 2rem; left: 50%; background-image: url(../images/sub/products/step-dash.png); background-repeat: repeat-y; background-size: 2rem 8rem; translate: -50% 0; }
.product-steps__list > li:after { content: ''; display: block; clear: both; }
.product-steps__list > li:first-child:before { display: none; }
.product-steps__list > li:last-child { height: auto; margin-bottom: 0; }
.product-steps__list > li:nth-child(odd) .product-steps__content { float: left; }
.product-steps__list > li:nth-child(even) .product-steps__content { float: right; }
.product-steps__point { content: ''; position: relative; top: 0; display: block; width: var(--point-size); height: var(--point-size); border-radius: 50%; background: var(--color-black); margin: 0 auto; }
.product-steps__content { width: 530rem; background: var(--color-white); border-radius: 16rem; padding: 52rem 40rem 60rem; text-align: center; margin-top: calc(var(--point-size) * -1); }
.product-steps__label { display: inline-block; padding: 4rem 60rem; border-radius: 99rem; color: var(--color-white); background: var(--color-gray-900); margin-bottom: 24rem; }
.product-steps__icon { width: 160rem; margin: 0 auto; }
.product-steps__icon .jt-lazyload { padding-top: 100%; }
.product-steps__title { display: block; margin-top: 16rem; }
.product-steps__desc { margin-top: 12rem; color: var(--color-gray-800); }

/* Comparison */
.product-comparison__types { margin-top: 32rem; }
.product-comparison__types-title { display: block; margin-bottom: 12rem; color: var(--color-primary); }
.product-comparison__types-list { display: flex; gap: 8rem 42rem; justify-content: center; flex-wrap: wrap; }
.product-comparison__types-list > li { position: relative; color: var(--color-gray-600); }
.product-comparison__types-list > li + li:before { content: ''; position: absolute; left: -21rem; top: 50%; width: 2px; height: calc(var(--font-size-primary-05) * 0.7142); background: currentColor; translate: -50% -50%; }

.product-comparison__container { display: flex; --head-height: 254rem; }
.product-comparison__sticky { display: flex; gap: 20rem; width: 43.83%; max-width: 780rem; z-index: 2; }
.product-comparison__item { position: relative; background: var(--color-gray-200); border-radius: 16rem; overflow: hidden; }
.product-comparison__item:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 4rem solid var(--color-gray-400); border-radius: inherit; box-sizing: border-box; pointer-events: none; }
.product-comparison__head { position: relative; display: flex; align-items: end; justify-content: center; text-align: center; height: var(--head-height); padding: 16rem 24rem; color: var(--color-white); }
.product-comparison__head:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 98rem; background: linear-gradient(180deg, transparent 0%, #000 150%); }
.product-comparison__head-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / cover; }
.product-comparison__item-title { position: relative; z-index: 1; }
.product-comparison__list > li { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; height: 100rem; padding: 18rem 24rem; color: var(--color-gray-800); }
.product-comparison__list > li:nth-child(odd) { background: var(--color-gray-300); }
.product-comparison__list > li > b { display: none; }
.product-comparison__value > * { display: block; }
.product-comparison__content { flex: 1; overflow: hidden; margin-right: -70rem; margin-left: -10rem; }
.product-comparison__slider { padding-left: 20rem; padding-right: 60rem; }
.product-comparison__slider .swiper-button { top: calc((100% - var(--head-height)) / 2 + var(--head-height)); }
.product-comparison__slider .swiper-button-prev { left: 40rem; }
.product-comparison__slider .swiper-button-next { right: 90rem; }
.product-comparison__slide { padding: 0 10rem; }

.product-comparison__item--labels { width: 35.9%; max-width: 280rem; }
.product-comparison__item--labels:after { border-color: transparent; }
.product-comparison__item--labels .product-comparison__head { justify-content: start; text-align: left; background: #E8EAF7; color: var(--color-black); }
.product-comparison__item--labels .product-comparison__head:after { display: none; }
.product-comparison__item--labels .product-comparison__list > li { justify-content: start; text-align: left; }
.product-comparison__item--labels .product-comparison__list > li:nth-child(odd) { background: transparent; }
.product-comparison__item--labels .product-comparison__list > li:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; border: 1px dashed var(--color-gray-400) }
.product-comparison__item--labels .product-comparison__list > li:last-child:before { display: none; }

.product-comparison__item--primary { flex: 1; background: var(--color-primary); }
.product-comparison__item--primary:after { border-color: var(--color-primary); }
.product-comparison__item--primary .product-comparison__list > li { color: var(--color-white); }
.product-comparison__item--primary .product-comparison__list > li:nth-child(odd) { background: #5465A8; }

/* Benefit */
.product-benefit { background: var(--color-gray-200); }
.product-benefit__list { display: flex; gap: 12rem; justify-content: center; }
.product-benefit__list > li { flex: 1; max-width: 346rem; height: 460rem; }
.product-benefit__content { background: var(--color-white); border-radius: 16rem; padding: 70rem 32rem; text-align: center; height: 100%; }
.product-benefit__icon { width: 140rem; margin: 0 auto; }
.product-benefit__icon .jt-lazyload { padding-top: 100%; }
.product-benefit__title { display: block; margin-top: 24rem; color: var(--color-primary); }
.product-benefit__desc { margin-top: 12rem; color: var(--color-gray-800); }

/* Customer */
.product-customer { background: var(--color-white); }

/* Publication */
.product-publication { background: var(--color-gray-200); }
.product-publication .jt-board-list { border-top-width: 1px; border-top-color: var(--color-gray-400); }

body.page-template-dr-noon-ckd .product-publication { background: var(--color-white); }

/* POPUP */
.product-brochore__title { text-align: center; margin-bottom: 24rem; }
#jt-popup-brochure .jt-form { gap: 48rem; }
#jt-popup-brochure .jt-form__fieldset { gap: 20rem; }
#brochureDownloadFrame { position: absolute; width: 1px; height: 1px; opacity: 0; visibility: hidden; }

/* Detectable */
.product-detectable .jt-category { margin-bottom: 40rem; }
.product-detectable__list > li + li { margin-top: 40rem; }
.product-detectable__accordion { background: var(--color-gray-200); padding: 58rem 148rem 38rem; border-radius: 32rem; border: 2rem solid var(--color-gray-400); transition: background .3s; }
.product-detectable__head { text-align: center; }
.product-detectable__title { color: var(--color-primary); }
.product-detectable__desc { color: var(--color-gray-900); margin-top: 16rem; }
.product-detectable__explain { display: block; color: var(--color-gray-700); margin-top: 16rem; }
.product-detectable__content { display: none; }
.product-detectable__content-inner { padding-top: 60rem; }
.product-detectable__list > li:first-child .product-detectable__content { display: block; }
.product-detectable__canvas { position: relative; border-radius: 16rem; padding-top: 54.54%; border-radius: 16rem; overflow: hidden; }
.product-detectable__canvas:after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 4rem solid var(--color-primary); border-radius: inherit; box-sizing: border-box; }
.product-detectable__image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / cover; }
.product-detectable__image--after { clip-path: inset(0 0 0 50%); }
.product-detectable__viewbox { position: absolute; left: 50%; top: 0; right: 0; bottom: 0; z-index: 1; }
.product-detectable__viewbox:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4rem; background: var(--color-primary); translate: -50% 0; }
.product-detectable__viewbox-control { position: absolute; left: 0; top: 50%; translate: -50% -50%; width: 48rem; height: 48rem; background: var(--color-primary); border-radius: 50%; cursor: pointer; }
.product-detectable__viewbox-control .jt-icon { width: 100%; height: 100%; }
.product-detectable__viewbox-control .jt-icon path { fill: var(--color-white); }
.product-detectable__source { margin-top: 12rem; color: var(--color-gray-800); }
.product-detectable__gallery { margin-top: 60rem; }
.product-detectable__gallery-head { text-align: center; margin-bottom: 32rem; }
.product-detectable__gallery-desc { margin-top: 8rem; color: var(--color-gray-800); }
.product-detectable__gallery-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20rem; }
.product-detectable__gallery-image { border-radius: 16rem; overflow: hidden; }
.product-detectable__gallery-image .jt-lazyload { padding-top: 68.13%; }
.product-detectable__control { margin-top: 40rem; }
.product-detectable__control-btn { display: flex; align-items: center; justify-content: center; width: 52rem; height: 52rem; border-radius: 50%; background: var(--color-gray-700); padding: 0; border: 0; margin: 0 auto; cursor: pointer; transition: rotate .3s, background .3s; }
.product-detectable__control-btn .jt-icon { width: 20rem; height: 20rem; vertical-align: top; }
.product-detectable__control-btn .jt-icon path { fill: var(--color-white); }

.product-detectable__accordion--active { background: #E8EAF7; border-color: #E8EAF7; }
.product-detectable__accordion--active .product-detectable__control-btn { rotate: -180deg }



/* **************************************** *
 * FAQ
 * **************************************** */
body.page-template-faq .article__section { padding-top: 0; }



/* **************************************** *
 * FIND HOSPITALS
 * **************************************** */
body.page-template-find-hospitals .article__section { padding-top: 0; }
.find-hospitals__container { position: relative; }
.find-hospitals__map { background: var(--color-gray-200); max-width: 1180rem; width: 66.3%; border-radius: 16rem; overflow: hidden; }
.find-hospitals__map #jt-map { padding-top: 74.49%; }
.find-hospitals__map .jt-map-marker { display: flex; flex-direction: column; align-items: center; }
.find-hospitals__map .jt-map-marker__title { background: var(--color-primary); color: var(--color-white); padding: 4rem 12rem; border-radius: 8rem; }
.find-hospitals__map .jt-map-marker__icon { display: block; width: 62rem; height: 62rem; }
.find-hospitals__map .jt-map-marker__icon svg { width: 100%; vertical-align: top; }
.find-hospitals__sidebar { position: absolute; right: 0; top: 0; width: calc(33.7% - 20rem); height: 100%; display: flex; flex-direction: column; gap: 40rem; border-radius: 16rem; background: var(--color-gray-200); padding: 40rem 16rem 40rem 40rem; }
.find-hospitals__sidebar .jt-list-count { margin-bottom: 0; }
.find-hospitals__search { padding-right: 24rem; }
.find-hospitals__search .jt-search { flex-direction: column; gap: 12rem; }
.find-hospitals__search .jt-search__input { background: var(--color-white); height: 52rem; padding: 0 56rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); border-radius: 6rem; }
.find-hospitals__search .jt-search__label { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); top: 12rem; left: 56rem; }
.find-hospitals__search .jt-search__submit { width: 28rem; height: 28rem; left: 16rem; }
.find-hospitals__search .jt-search__reset { width: 28rem; height: 28rem; right: 16rem; }
.find-hospitals__search .jt-search__reset .jt-icon { width: 12rem; height: 12rem; }
.find-hospitals__data { display: flex; flex-direction: column; gap: 12rem; overflow: hidden; }
.find-hospitals__list { padding-right: 24rem; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: none; }
.find-hospitals__data .jt-list-nothing { padding-right: 24rem; }
html.win .find-hospitals__list { overflow: overlay; }
html.win .find-hospitals__list::-webkit-scrollbar { width: 8rem; background: transparent; }
html.win .find-hospitals__list::-webkit-scrollbar-track { background: var(--color-gray-300); border-radius: 99rem; }
html.win .find-hospitals__list::-webkit-scrollbar-thumb { background: var(--color-gray-700); border-radius: 99rem; }
html.ff .find-hospitals__list { scrollbar-width: thin; }
.find-hospitals__list > li { padding: 32rem 0; }
.find-hospitals__list > li + li { border-top: 1px solid var(--color-gray-400); }
.find-hospitals__title { transition: color .3s; }
.find-hospitals__title > a { color: inherit; }
.find-hospitals__info { display: flex; margin-top: 4rem; gap: 20rem; }
.find-hospitals__info > a { position: relative; color: var(--color-gray-700); transition: color .3s; }
.find-hospitals__info > a:has(+a):before { content: ''; position: absolute; top: calc(var(--font-lineheight-primary-07) / 2); right: -10rem; width: 4rem; height: 4rem; border-radius: 50%; background: var(--color-gray-700); translate: 50% -50%; pointer-events: none; white-space: nowrap; }
.find-hospitals__info > a:last-child { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-hospitals__products { display: flex; gap: 8rem; margin-top: 20rem; }
.find-hospitals__products > li > span { display: block; padding: 4rem 20rem; background: var(--color-white); color: var(--color-gray-800); border-radius: 18rem; }
.find-hospitals__link { display: flex; gap: 4rem; margin-top: 40rem; }
.find-hospitals__link > a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4rem; background: var(--color-gray-400); color: var(--color-gray-700); text-align: center; padding: 10rem 20rem; border-radius: 99rem; transition: background .3s, color .3s; }
.find-hospitals__link .jt-icon { width: 16rem; height: 16rem; }
.find-hospitals__link .jt-icon path { fill: currentColor; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* PRODUCT */
    .product-detectable__accordion:has(.product-detectable__control-btn:hover) { background: #E8EAF7; }
    .product-detectable__control-btn:hover { background: var(--color-gray-800); }

    /* FIND HOSPITALS */
    .find-hospitals__list > li:hover .find-hospitals__title { color: var(--color-primary); }
    .find-hospitals__info > a:hover { color: var(--color-black); }
    .find-hospitals__link > a:hover { background: var(--color-gray-500); color: var(--color-gray-800); }

}