@charset "UTF-8";

/* 메디컬 큐레이션·컨투어 슬라이드2: Dior experience-carousel형 가로 캐러셀 */
html.medical-slide-page,
html.medical-slide-page body {
    margin: 0 !important;
    padding: 0 !important;
}

html.medical-slide-page .diete_history .scroll-wrap img {
    -webkit-user-drag: none;
    user-select: none;
}

html.medical-slide-page .diete_history {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #010101;
}

html.medical-slide-page .diete_history .section_inner,
html.medical-slide-page .diete_history .section_wrap {
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

html.medical-slide-page .diete_history .scroll-wrap {
    box-sizing: border-box;
    display: flex !important;
    align-items: stretch !important;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 12.2vw !important;
    gap: 8px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
}

html.medical-slide-page body:not(.page-35) .diete_history .scroll-wrap {
    cursor: grab;
}

html.medical-slide-page .diete_history .scroll-wrap::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

html.medical-slide-page .diete_history .scroll-wrap.is-dragging {
    user-select: none;
}

html.medical-slide-page body:not(.page-35) .diete_history .scroll-wrap.is-dragging {
    cursor: grabbing;
}

html.medical-slide-page .diete_history .scroll:not(.last-scroll) {
    position: relative;
    box-sizing: border-box;
    display: flex !important;
    flex: 0 0 calc((100% - 16px) / 3) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: calc((100% - 16px) / 3) !important;
    min-width: calc((100% - 16px) / 3) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.medical-slide-page .diete_history .scroll.last-scroll {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.medical-slide-page .diete_history .section_blank {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 참고 페이지와 같이 검은 무대 위에서 이미지 아래에 카드 콘텐츠를 배치한다. */
html.medical-slide-page .diete_history .section_img {
    position: static !important;
    order: 1;
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1850 / 2000 !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html.medical-slide-page .diete_history .section_img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
}

html.medical-slide-page .diete_history .section_text {
    position: static !important;
    order: 2;
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 32px 3rem 0 !important;
    text-align: center !important;
}

html.medical-slide-page .diete_history .text-top,
html.medical-slide-page .diete_history .text-second,
html.medical-slide-page .diete_history .text-desc {
    display: block;
    width: 100%;
    text-align: center !important;
}

html.medical-slide-page .diete_history .text-top {
    margin: 0 !important;
    color: #acb2b4 !important;
}

html.medical-slide-page .diete_history .text-second > em.outfit:first-of-type {
    color: #acb2b4 !important;
}

html.medical-slide-page .diete_history .text-second {
    margin: 0 0 16px !important;
    color: #fff !important;
}

html.medical-slide-page .diete_history .text-desc {
    margin: 0 !important;
    color: #fff !important;
}

html.medical-slide-page .diete_history_tablet,
html.medical-slide-page .method_section {
    display: none !important;
}


    html.medical-slide-page .diete_history {
        background: #fff;
    }

    html.medical-slide-page body.medical-curation-page .diete_history {
        padding: 115px 0 115px !important;
    }

    html.medical-slide-page body.contour-module-page .diete_history {
        padding: 115px 0 112.5px !important;
    }

    html.medical-slide-page .diete_history .scroll:not(.last-scroll) {
        position: relative;
        flex-basis: calc((100% - 16px) / 3) !important;
        width: calc((100% - 16px) / 3) !important;
        min-width: calc((100% - 16px) / 3) !important;
    }

    /* 메디컬 큐레이션은 19페이지 기준 카드 폭과 이미지 높이를 공유한다. */
    html.medical-slide-page body.medical-curation-page .diete_history .scroll:not(.last-scroll) {
        flex-basis: calc((100% + 24.4vw - 5rem - 16px) / 3) !important;
        width: calc((100% + 24.4vw - 5rem - 16px) / 3) !important;
        min-width: calc((100% + 24.4vw - 5rem - 16px) / 3) !important;
    }

    html.medical-slide-page body.medical-slide-two-column .diete_history .scroll:not(.last-scroll) {
        flex-basis: calc((100% - 8px) / 2) !important;
        width: calc((100% - 8px) / 2) !important;
        min-width: calc((100% - 8px) / 2) !important;
    }

    html.medical-slide-page .diete_history .section_img {
        position: static !important;
        order: 2;
        z-index: auto;
    }

    html.medical-slide-page body.contour-module-page .diete_history .section_img {
        aspect-ratio: 763.125 / 825 !important;
    }

    html.medical-slide-page body.contour-module-page .diete_history .scroll-wrap {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }

    html.medical-slide-page .diete_history .section_text {
        position: static !important;
        order: 1;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 0 18px !important;
        text-align: left !important;
    }

    html.medical-slide-page .diete_history .text-top,
    html.medical-slide-page .diete_history .text-second,
    html.medical-slide-page .diete_history .text-desc {
        text-align: left !important;
    }

    /* 컨투어 모듈 슬라이드 텍스트는 이미지 아래에서 좌측 정렬한다. */
    html.medical-slide-page body.contour-module-page .diete_history .section_text {
        order: 3;
        align-items: flex-start !important;
        padding: 18px 0 0 !important;
        text-align: left !important;
    }

    html.medical-slide-page body.contour-module-page .diete_history .text-top,
    html.medical-slide-page body.contour-module-page .diete_history .text-second,
    html.medical-slide-page body.contour-module-page .diete_history .text-desc {
        text-align: left !important;
    }

    html.medical-slide-page .diete_history .text-top,
    html.medical-slide-page .diete_history .text-second > em.outfit:first-of-type {
        color: #000 !important;
    }

    html.medical-slide-page .diete_history .text-top {
        font-weight: 450 !important;
    }

    /* 컨투어 모듈 하단 솔루션 라벨은 다이어트 루틴 영역의 별도 슬라이드다. */
    html.medical-slide-page body.contour-module-page .diete_routine .section_swiper .text-top,
    html.medical-slide-page body.contour-module-page .diete_routine .section_swiper .text-top em,
    html.medical-slide-page body.contour-module-page .diete_routine .section_swiper .text-top .en,
    html.medical-slide-page body.contour-module-page .diete_routine .section_swiper .text-top-number {
        font-size: 16px !important;
        font-weight: 450 !important;
        color: #888 !important;
    }

    html.medical-slide-page .diete_history .text-second,
    html.medical-slide-page .diete_history .text-desc {
        color: #000 !important;
    }

    html.medical-slide-page body.medical-curation-page .diete_history .section_text > p.text-second {
        margin: 0 !important;
        line-height: 1 !important;
    }

    html.medical-slide-page body.medical-curation-page .diete_history .section_text > p.text-second + p.text-second {
        margin-top: 11px !important;
    }

    html.medical-slide-page body.medical-curation-page .diete_history .section_text > p.text-desc {
        margin: 17px 0 0 !important;
        line-height: 1 !important;
    }

    html.medical-slide-page body.medical-curation-page .diete_history .section_text > p.text-desc + p.text-desc {
        margin-top: 10px !important;
    }

    html.medical-slide-page body.contour-module-page .diete_history .text-top {
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
    }

    html.medical-slide-page body.contour-module-page .diete_history .text-top em.outfit,
    html.medical-slide-page body.contour-module-page .diete_history .text-top .text-top-number {
        font-size: 16px !important;
        font-weight: 350 !important;
    }

    html.medical-slide-page body.contour-module-page .diete_history .text-desc {
        white-space: nowrap;
        margin-top: 10px !important;
        line-height: 1 !important;
    }

    html.medical-slide-page body.contour-module-page .diete_history .text-desc br {
        display: none !important;
    }




/* 메디컬 큐레이션·컨투어 모듈 세부 페이지 대표 이미지의 투명 전환을 제거한다. */

    html.medical-slide-page body.medical-curation-page .sub_visual .img img,
    html.medical-slide-page body.contour-module-page .sub_visual .img img {
        opacity: 1 !important;
        transition: none !important;
    }


/* grid-container pc_only와 같은 fadeInUp를 슬라이드 카드와 주요 콘텐츠에 적용한다. */

    html.medical-slide-page .diete_history .medical-slide-card-reveal,
    html.medical-slide-page .medical-slide-content-reveal {
        opacity: 0;
        transform: translateY(100px);
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-timing-function: ease;
        animation-fill-mode: both;
        animation-play-state: paused;
        will-change: opacity, transform;
    }

    html.medical-slide-page .diete_history .medical-slide-card-reveal {
        animation-delay: var(--medical-slide-card-delay, 0s);
    }

    html.medical-slide-page .medical-slide-content-reveal {
        animation-delay: var(--medical-slide-content-delay, 0s);
    }

    html.medical-slide-page .diete_history .medical-slide-card-reveal.is-visible,
    html.medical-slide-page .medical-slide-content-reveal.is-visible {
        animation-play-state: running;
    }