@charset "utf-8";

/*
 * File    : rwd-product.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * 1480px
 * 1200px
 * 1023px
 * 860px
 * 540px
 */


 
/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

    .product-system__info { padding: 28rem 48rem; }

    .product-steps { --step-gap: 340rem; }
    .product-steps__content { padding: 40rem 40rem 52rem; }

    .product-comparison__container { --head-height: 240rem }
    .product-comparison__content { margin-right: -50rem; }
    .product-comparison__slider { padding-right: 40rem; }
    .product-comparison__slider .swiper-button { width: 48rem; height: 48rem; }
    .product-comparison__slider .swiper-button-next { right: 70rem; }

    .product-benefit__list > li { height: 440rem; }
    .product-benefit__content { padding: 60rem 28rem; }

    .find-hospitals__sidebar { padding: 36rem 14rem 36rem 36rem; gap: 36rem; }
    .find-hospitals__search { padding-right: 22rem; }
    .find-hospitals__list { padding-right: 22rem; }
    .find-hospitals__link { margin-top: 36rem; }
    .find-hospitals__data .jt-list-nothing { padding-right: 22rem; }

}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

    .product-system__slider { border-radius: 24rem; }
    .product-system__explain { left: 56rem; bottom: 36rem; }
    .product-system__info { padding: 24rem 40rem; margin-top: 20rem; }
    .product-system__info-list { margin-top: 12rem; }
    .product-system__info-list > li + li { margin-top: 6rem; }

    .product-how__video { border-radius: 24rem; }

    .product-steps { --point-size: 14rem; --step-gap: 300rem; }
    .product-steps__content { padding: 40rem 32rem; width: calc(50% - 40rem); }
    .product-steps__label { padding: 4rem 48rem; }
    .product-steps__icon { width: 140rem; }

    .product-comparison__types { margin-top: 24rem; }
    .product-comparison__types-list { gap: 6rem 36rem; }
    .product-comparison__types-list > li + li:before { left: -18rem; }
    .product-comparison__container { --head-height: 220rem }
    .product-comparison__content { margin-right: -40rem; }
    .product-comparison__sticky { gap: 16rem; }
    .product-comparison__slider { padding-left: 18rem; padding-right: 32rem; }
    .product-comparison__slider .swiper-button { width: 44rem; height: 44rem; }
    .product-comparison__slider .swiper-button .jt-icon { width: 18rem; height: 18rem; }
    .product-comparison__slider .swiper-button-prev { left: 36rem; }
    .product-comparison__slider .swiper-button-next { right: 60rem; }
    .product-comparison__slide { padding: 0 8rem; }

    .product-benefit__title { margin-top: 20rem; }
    .product-benefit__desc br { display: none; }
    .product-benefit__list { flex-wrap: wrap; }
    .product-benefit__list > li { flex: none; width: calc(33.33% - 8rem); max-width: inherit; height: auto; }
    .product-benefit__content { padding: 48rem 24rem; }

    body.page-template-dr-noon-ckd .product-benefit__list,
    body.page-template-dr-noon-fundus .product-benefit__list { max-width: 740rem; margin: 0 auto; }
    body.page-template-dr-noon-ckd .product-benefit__list > li,
    body.page-template-dr-noon-fundus .product-benefit__list > li { width: calc(50% - 6rem); }

    .product-detectable .jt-category { margin-bottom: 36rem; }
    .product-detectable__accordion { padding: 48rem 120rem 32rem; border-radius: 24rem; }
    .product-detectable__content-inner { padding-top: 48rem; }
    .product-detectable__desc { margin-top: 12rem; }
    .product-detectable__explain { margin-top: 12rem; }
    .product-detectable__viewbox-control { width: 44rem; height: 44rem; }
    .product-detectable__gallery { margin-top: 48rem; }
    .product-detectable__gallery-head { margin-bottom: 28rem; }
    .product-detectable__gallery-list { gap: 16rem; }
    .product-detectable__control-btn { width: 48rem; height: 48rem; }
    .product-detectable__control-btn .jt-icon { width: 18rem; height: 18rem; }
    .product-detectable__control { margin-top: 32rem; }

    .find-hospitals__sidebar { padding: 32rem 12rem 32rem 32rem; gap: 32rem; }
    .find-hospitals__search { padding-right: 20rem; }
    .find-hospitals__search .jt-search { gap: 10rem; }
    .find-hospitals__search .jt-search__input { padding: 0 52rem; }
    .find-hospitals__search .jt-search__label { left: 52rem; } 
    .find-hospitals__search .jt-search__submit { width: 24rem; height: 24rem; }
    .find-hospitals__search .jt-search__reset { width: 24rem; height: 24rem; }
    .find-hospitals__data { gap: 10rem; }
    .find-hospitals__list { padding-right: 20rem; }
    .find-hospitals__list > li { padding: 28rem 0; }
    .find-hospitals__products { margin-top: 16rem; }
    .find-hospitals__link { margin-top: 32rem; }
    .find-hospitals__data .jt-list-nothing { padding-right: 20rem; }

}



/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px){

    .product-system__explain { left: 48rem; bottom: 32rem; }

    .product-solution .article__section-title br { display: none; }
    .product-solution .article__section-desc br { display: none; }

    .product-how .article__section-desc br { display: none; }

    .product-comparison__sticky { width: 59.55%; max-width: inherit; }
    .product-comparison__item--labels { width: 180rem; max-width: inherit; }

    .product-detectable__accordion { padding: 48rem 100rem 32rem; }

    .find-hospitals__map { width: 100%; max-width: inherit; }
    .find-hospitals__map #jt-map { padding-top: 56%; }

    .find-hospitals__sidebar { position: static; width: 100%; padding: 28rem 10rem 28rem 28rem; margin-top: 24rem; gap: 28rem; height: 720rem; }
    .find-hospitals__search { padding-right: 18rem; }
    .find-hospitals__list { padding-right: 18rem; }
    .find-hospitals__link { margin-top: 28rem; }
    .find-hospitals__data .jt-list-nothing { padding-right: 18rem; }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    .product-system__slider { border-radius: 16rem; }
    .product-system__explain { left: 32rem; bottom: 28rem; }
    .product-system__info { padding: 24rem 32rem; margin-top: 16rem; border-radius: 16rem; }

    .product-how__video { border-radius: 16rem; }

    .product-steps { --point-size: 12rem; --step-gap: 280rem; }
    .product-steps__content { padding: 26rem 28rem; }
    .product-steps__label { margin-bottom: 20rem; padding: 4rem 36rem; }
    .product-steps__icon { width: 120rem; }
    .product-steps__title { margin-top: 12rem; }
    .product-steps__desc { margin-top: 8rem; }

    .product-comparison__types-title { margin-bottom: 8rem; }
    .product-comparison__types-list { gap: 4rem 24rem; }
    .product-comparison__types-list > li + li:before { left: -12rem; }

    .product-comparison__container { --head-height: 200rem }
    .product-comparison__sticky { width: calc(50% - 8rem); }
    .product-comparison__content { margin-right: -24rem; }
    .product-comparison__item--labels { display: none; }
    .product-comparison__list > li { flex-direction: column; gap: 8rem; }
    .product-comparison__list > li > b { display: block; opacity: 0.8; }
    .product-comparison__list > li > b br { display: none; }
    .product-comparison__slider { padding-left: 10rem; padding-right: 12rem; }
    .product-comparison__slider .swiper-button { width: 36rem; height: 36rem; }
    .product-comparison__slider .swiper-button-prev { left: 28rem; }
    .product-comparison__slider .swiper-button-next { right: 40rem; }
    .product-comparison__slide { padding: 0 12rem; }

    .product-benefit__list > li { width: calc(50% - 6rem); }
    .product-benefit__content { padding: 40rem 24rem; }
    .product-benefit__icon { width: 120rem; }
    .product-benefit__title { margin-top: 16rem; }
    .product-benefit__desc { margin-top: 8rem; }

    .product-detectable .jt-category { margin-bottom: 32rem; }
    .product-detectable__accordion { padding: 40rem 60rem 28rem; border-radius: 16rem; }
    .product-detectable__desc br { display: none; }
    .product-detectable__content-inner { padding-top: 40rem; }
    .product-detectable__viewbox-control { width: 40rem; height: 40rem; }
    .product-detectable__gallery { margin-top: 40rem; }
    .product-detectable__gallery-head { margin-bottom: 24rem; }
    .product-detectable__gallery-list { gap: 12rem; }
    .product-detectable__control { margin-top: 28rem; }
    .product-detectable__control-btn { width: 44rem; height: 44rem; }
    .product-detectable__control-btn .jt-icon { width: 16rem; height: 16rem; }

    #jt-popup-brochure .jt-form { gap: 40rem; }

    .find-hospitals__sidebar { padding: 24rem 8rem 24rem 24rem; gap: 24rem; height: 600rem; }
    .find-hospitals__search { padding-right: 16rem; }
    .find-hospitals__search .jt-search { gap: 8rem; }
    .find-hospitals__search .jt-search__label { top: 14rem; }
    .find-hospitals__list { padding-right: 16rem; }
    .find-hospitals__list > li { padding: 24rem 0; }
    .find-hospitals__link { margin-top: 24rem; }
    .find-hospitals__link .jt-icon { width: 14rem; height: 14rem; }
    .find-hospitals__products { margin-top: 12rem; }
    .find-hospitals__data .jt-list-nothing { padding-right: 16rem; }
    
}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    .product-system__explain { left: 15rem; bottom: 12rem; font-size: 8rem; line-height: 18rem; }
    .product-system__info { padding: 24rem; }
    .product-system__info-list { margin-top: 8rem; }
    .product-system__info-explain { margin-top: 6rem; }
    
    .product-steps { --point-size: auto; }
    .product-steps__list:before { display: none; }
    .product-steps__list > li { margin-bottom: 20rem; }
    .product-steps__list > li:nth-child(odd) .product-steps__content { float: none; }
    .product-steps__list > li:nth-child(even) .product-steps__content { float: none; }
    .product-steps__point { display: none; }
    .product-steps__content { width: auto; padding: 32rem 24rem; }
    .product-steps__label { padding: 4rem 32rem; }
    .product-steps__icon { width: 100rem; }

    .product-comparison__container { flex-direction: column; gap: 12rem; --head-height: 180rem }
    .product-comparison__content { margin-right: -20rem; margin-left: -20rem; }
    .product-comparison__sticky { width: 100%; }
    .product-comparison__slider { padding-right: 10rem; }
    .product-comparison__slider .swiper-button { width: 32rem; height: 32rem; }
    .product-comparison__slider .swiper-button-prev { left: 6rem; }
    .product-comparison__slider .swiper-button-next { right: 6rem; }
    .product-comparison__slide { padding: 0 10rem; }
    .product-comparison__head { padding: 12rem 24rem; }
    .product-comparison__list > li { gap: 4rem; }

    .product-benefit__list { gap: 20rem; }
    .product-benefit__list > li { width: 100%; }
    .product-benefit__content { padding: 32rem 24rem; }
    .product-benefit__icon { width: 100rem; }

    body.page-template-dr-noon-ckd .product-benefit__list > li,
    body.page-template-dr-noon-fundus .product-benefit__list > li { width: 100%; }

    .product-detectable .jt-category { margin-bottom: 24rem; }
    .product-detectable__accordion { padding: 32rem 24rem 24rem; border-radius: 16rem; }
    .product-detectable__desc { margin-top: 8rem; }
    .product-detectable__explain { margin-top: 8rem; }
    .product-detectable__content-inner { padding-top: 36rem; }
    .product-detectable__viewbox-control { width: 36rem; height: 36rem; }
    .product-detectable__source { margin-top: 8rem; }
    .product-detectable__gallery { margin-top: 36rem; }
    .product-detectable__gallery-list { grid-template-columns: 1fr; }
    .product-detectable__control { margin-top: 24rem; }
    .product-detectable__control-btn { width: 40rem; height: 40rem; }
    .product-detectable__control-btn .jt-icon { width: 14rem; height: 14rem; }

    .product-brochore__title { margin-bottom: 20rem; }
    #jt-popup-brochure .jt-form { gap: 36rem; }

    .find-hospitals__map #jt-map { padding-top: 80%; }

    .find-hospitals__sidebar { margin-top: 20rem; }
    .find-hospitals__search .jt-search { gap: 6rem; }
    .find-hospitals__search .jt-search__input { height: 48rem; padding: 0 48rem; }
    .find-hospitals__search .jt-search__label { left: 48rem; top: 12rem; }
    .find-hospitals__search .jt-search__submit { width: 20rem; height: 20rem; }
    .find-hospitals__search .jt-search__reset { width: 20rem; height: 20rem; }
    .find-hospitals__list > li { padding: 20rem 0; }
    .find-hospitals__link { margin-top: 20rem; }
    .find-hospitals__products { margin-top: 10rem; gap: 6rem; }
    .find-hospitals__products > li > span { padding: 2rem 16rem; }
    .find-hospitals__info { margin-top: 2rem; }

}