@charset "utf-8";
/* ==========================================================================
   top.css  -  TOP page
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */
.top-hero {
    position: relative;
    background: var(--c-warm);
}
.top-hero_slider:not(.slick-initialized) .top-hero_slide:not(:first-child) {
    display: none;
}
.top-hero_text {
    padding: .48rem var(--side) .18rem;
}
.top-hero_title {
    font-size: .28rem;
    line-height: 1.16;
    font-weight: 400;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.top-hero_btn {
    min-width: 1.24rem;
    margin-top: .24rem;
}
.top-hero_img {
    display: block;
    padding: 0 var(--side);
}
.top-hero_img img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* text entrance on the active slide (one orchestrated moment) */
.js .top-hero_title,
.js .top-hero_btn {
    opacity: 0;
    transform: translateY(.16rem);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .top-hero_btn {
    transition-delay: .15s;
}
.js .slick-current .top-hero_title,
.js .slick-current .top-hero_btn {
    opacity: 1;
    transform: none;
}
.js .slick-current .top-hero_title { transition-delay: .2s; }
.js .slick-current .top-hero_btn   { transition-delay: .38s; }

/* controls */
.top-hero_ctrl {
    display: flex;
    align-items: center;
    gap: .08rem;
    padding: .1rem var(--side) .2rem;
}
.top-hero_btn-ctrl {
    display: grid;
    place-items: center;
    width: .18rem;
    height: .18rem;
    border: 1px solid var(--c-ink);
    border-radius: 3px;
    transition: background-color var(--dur), color var(--dur);
}
.top-hero_btn-ctrl .icon {
    width: .14rem;
    height: .14rem;
}
.top-hero_btn-ctrl:hover {
    background: var(--c-ink);
    color: var(--c-warm);
}
.top-hero_count {
    min-width: .3rem;
    font-size: .15rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.top-hero_pause {
    display: grid;
    place-items: center;
    width: .2rem;
    height: .2rem;
    margin-left: .08rem;
    border: 1px solid var(--c-ink);
    border-radius: 50%;
}
.top-hero_pause .icon {
    grid-area: 1 / 1;
    width: .24rem;
    height: .24rem;
}
.top-hero_pause .icon-play,
.top-hero_pause.is-paused .icon-pause {
    display: none;
}
.top-hero_pause.is-paused .icon-play {
    display: block;
}

/* ==========================================================================
   Concept
   ========================================================================== */
.top-concept {
    padding-top: .7rem;
}
.top-concept_img img {
    width: 100%;
    aspect-ratio: 612 / 286;
    object-fit: cover;
}
.top-concept_body {
    margin-top: .3rem;
}
.top-concept_lead {
    margin-top: .1rem;
    font-size: .16rem;
    letter-spacing: .06em;
}
.top-concept_text {
    margin-top: .2rem;
    font-size: .14rem;
    line-height: 1.5;
    letter-spacing: .04em;
    color: var(--c-ink-muted);
}

/* ==========================================================================
   Product sliders (Ranking / New Arrivals)
   SP: one card + next card peeking
   ========================================================================== */
.top-rank,
.top-new {
    overflow: hidden;
}
.top-products {
    position: relative;
}
.top-products_slider {
    width: 2.32rem;
}
.top-products_slider:not(.slick-initialized) {
    display: flex;
}
.top-products_slider .slick-list {
    overflow: visible;
}
.top-products_slider .slick-track {
    display: flex;
}
.top-products_slider .slick-slide {
    height: auto;
}
.top-products_slide {
    flex-shrink: 0;
    width: 2.32rem;
    padding: .02rem .1rem .12rem 0;
}
.top-products_slide .c-product {
    height: 100%;
}
.top-products .c-slider-arrow--prev { left: -.08rem; }
.top-products .c-slider-arrow--next { right: -.08rem; }

/* ==========================================================================
   Shop by brand
   ========================================================================== */
.top-brand_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .2rem .1rem;
}
.top-brand_list li:nth-child(n+7) {
    display: none;                /* SP design shows 2 rows (6 brands) */
}
.top-brand_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .12rem;
    text-align: center;
}
.top-brand_logo {
    display: block;
    width: 100%;
    max-width: .98rem;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
}
.top-brand_logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.top-brand_item:hover .top-brand_logo img {
    transform: scale(1.06);
}
.top-brand_name {
    font-size: .14rem;
    line-height: 1.2;
    color: var(--c-ink-muted);
}

/* ==========================================================================
   Shop by category
   ========================================================================== */
.top-cat_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .12rem;
}
.top-cat_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .1rem .06rem .12rem;
    border-radius: .06rem;
    background: var(--c-canvas);
    transition: background-color var(--dur);
}
.top-cat_item:hover {
    background: #EAE7E3;
}
.top-cat_img img {
    width: 100%;
    aspect-ratio: 32 / 30;
    object-fit: contain;
    transition: transform .5s var(--ease);
}
.top-cat_item:hover .top-cat_img img {
    transform: translateY(-.04rem);
}
.top-cat_name {
    margin-top: .04rem;
    font-size: .14rem;
}

/* ==========================================================================
   Event
   ========================================================================== */
.top-event_list {
    display: grid;
    gap: .44rem;
    padding: 0;
}
.top-event_img img {
    width: 100%;
    aspect-ratio: 345 / 230;
    object-fit: cover;
}
.top-event_body {
    padding: .16rem var(--side) 0;
    text-align: center;
}
.top-event_label {
    font-size: .13rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--c-gold);
}
.top-event_title {
    margin-top: .06rem;
    font-size: .18rem;
    line-height: 1.25;
    font-weight: 400;
}
.top-event_text {
    margin-top: .14rem;
    font-size: .13rem;
    line-height: 1.5;
    text-align: left;
}
.top-event_body .c-btn {
    margin-top: .2rem;
}

/* ==========================================================================
   Skin concern
   ========================================================================== */
.top-concern {
    overflow: hidden;
    background: #F8F6F3;
}
.top-concern_slider:not(.slick-initialized) {
    display: flex;
    gap: .12rem;
}
.top-concern_slider .slick-list {
    overflow: visible;
}
.top-concern_slide {
    width: 2.64rem;
    padding-right: .12rem;
}
.top-concern_slider:not(.slick-initialized) .top-concern_slide {
    flex-shrink: 0;
}
.top-concern_card {
    display: flex;
    gap: .12rem;
    padding: .14rem;
    background: #F1EDE8;
    transition: background-color var(--dur);
}
.top-concern_card:hover {
    background: #ECE6DF;
}
.top-concern_img {
    flex-shrink: 0;
    width: .8rem;
    overflow: hidden;
}
.top-concern_img img {
    width: 100%;
    aspect-ratio: 260 / 370;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.top-concern_card:hover .top-concern_img img {
    transform: scale(1.05);
}
.top-concern_body {
    display: flex;
    flex-direction: column;
    gap: .04rem;
    min-width: 0;
    padding-top: .12rem;
}
.top-concern_title {
    font-size: .13rem;
    font-weight: 600;
}
.top-concern_text {
    font-size: .13rem;
    line-height: 1.35;
}
.top-concern_more {
    margin-top: .04rem;
    font-size: .11rem;
    font-weight: 500;
}
.top-concern_progress {
    position: relative;
    width: 2.4rem;
    height: 2px;
    margin-top: .3rem;
    overflow: hidden;
    background: var(--c-white);
}
.top-concern_progress span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 25%;
    background: var(--c-gold);
    transition: transform .5s var(--ease), width .5s var(--ease);
}

/* ==========================================================================
   Korea buying service
   ========================================================================== */
.top-kbs {
    padding-top: .6rem;
}
.top-kbs_band {
    position: relative;
    overflow: hidden;
    background: var(--c-sage);
    color: var(--c-white);
    text-align: center;
}
.top-kbs_plane {
    position: absolute;
    left: 0;
    top: .42rem;
    width: 2.8rem;
}
/* plane flies in when the band enters the screen */
.js .top-kbs_band .top-kbs_plane {
    transform: translateX(-100%);
    transition: transform 1.6s cubic-bezier(.25, .7, .2, 1) .2s;
}
.js .top-kbs_band.is-inview .top-kbs_plane {
    transform: none;
}
.top-kbs_body {
    position: relative;
    padding: 1.1rem .45rem .5rem;
}
.top-kbs_title {
    max-width: 2.6rem;
    margin: 0 auto;
    font-size: .27rem;
    line-height: 1.25;
    font-weight: 400;
    text-transform: uppercase;
}
.top-kbs_lead {
    margin-top: .2rem;
    font-size: .15rem;
    color: var(--c-gold);
}
.top-kbs_text {
    margin-top: .18rem;
    font-size: .13rem;
    line-height: 1.4;
}
.top-kbs_btn {
    display: inline-flex;
    align-items: center;
    height: .36rem;
    margin-top: .24rem;
    padding: 0 .18rem;
    border-radius: .05rem;
    background: var(--c-white);
    font-size: .13rem;
    font-weight: 600;
    color: var(--c-ink);
    transition: background-color var(--dur), color var(--dur);
}
.top-kbs_btn:hover {
    background: var(--c-ink);
    color: var(--c-white);
}
.top-kbs_skyline {
    display: block;
    width: 100%;
    height: .9rem;
    object-fit: cover;
    object-position: center bottom;
}
.top-kbs_strip {
    padding: .2rem .3rem;
    background: var(--c-warm);
    font-size: .2rem;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--c-sage);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.top-faq .c-sec-head {
    flex-wrap: nowrap;
}
.top-faq_more {
    width: auto;
    padding-left: 0;
}
.top-faq_more::before {
    display: none;
}
.top-faq_nav {
    margin: 0 calc(var(--side) * -1) .2rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.top-faq_nav::-webkit-scrollbar {
    display: none;
}
.top-faq_tabs {
    display: flex;
    gap: .24rem;
    width: max-content;
    min-width: 100%;
    padding: 0 var(--side);
    border-bottom: 1px solid #C9C4BF;
}
.top-faq_tab {
    position: relative;
    display: block;
    padding: .06rem 0 .08rem;
    font-size: .15rem;
    white-space: nowrap;
    color: var(--c-ink-muted);
    transition: color var(--dur);
}
.top-faq_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--c-ink);
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease);
}
.top-faq_tab.is-active {
    color: var(--c-ink);
}
.top-faq_tab.is-active::after {
    transform: scaleX(1);
}
.top-faq_body {
    scroll-margin-top: calc(var(--header-h) + .2rem);
}
.top-faq .c-faq_group {
    scroll-margin-top: calc(var(--header-h) + .2rem);
}

/* ==========================================================================
   Tablet  768px -
   ========================================================================== */
@media (min-width: 768px) {
    /* hero: image as background, text on the left */
    .top-hero_slide {
        position: relative;
        display: flex !important;
        align-items: center;
        height: clamp(4.2rem, 52vw, 7.5rem);
    }
    .top-hero_img {
        position: absolute;
        inset: 0;
        padding: 0;
    }
    .top-hero_img img {
        height: 100%;
        aspect-ratio: auto;
    }
    .top-hero_text {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 14.4rem;
        margin: 0 auto;
        padding: 0 var(--side) .4rem;
    }
    .top-hero_title {
        font-size: clamp(.36rem, 4vw, .54rem);
    }
    .top-hero_btn {
        min-width: 1.4rem;
        margin-top: .48rem;
    }
    .top-hero_ctrl {
        position: absolute;
        left: 0;
        right: 0;
        bottom: .32rem;
        max-width: 14.4rem;
        margin: 0 auto;
        padding: 0 var(--side);
        gap: .1rem;
        pointer-events: none;
    }
    .top-hero_ctrl > * {
        pointer-events: auto;
    }
    .top-hero_btn-ctrl {
        width: .24rem;
        height: .24rem;
    }
    .top-hero_pause {
        width: .26rem;
        height: .26rem;
    }
    .top-hero_count {
        font-size: .2rem;
    }

    /* concept */
    .top-concept {
        padding-top: .8rem;
    }
    .top-concept_inner {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: .24rem;
        align-items: center;
    }
    .top-concept_img {
        grid-column: 1 / span 6;
    }
    .top-concept_body {
        grid-column: 7 / -1;
        margin-top: 0;
        padding-left: .2rem;
    }
    .top-concept_lead {
        font-size: .18rem;
    }
    .top-concept_text {
        margin-top: .36rem;
        font-size: .15rem;
    }

    /* product sliders */
    .top-products_slider {
        width: auto;
        margin: 0 -.12rem;
    }
    .top-products_slider .slick-list {
        overflow: hidden;
        padding: .04rem 0 .16rem;
    }
    .top-products_slide {
        width: 33.333%;
        padding: 0 .12rem;
    }
    .top-products .c-slider-arrow--prev { left: -.17rem; }
    .top-products .c-slider-arrow--next { right: -.17rem; }

    /* brand */
    .top-brand_list li:nth-child(n+7) {
        display: block;
    }
    .top-brand_list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-width: 9.6rem;
        margin: 0 auto;
        gap: .28rem .2rem;
    }
    .top-brand_logo {
        max-width: 1.2rem;
    }
    .top-brand_name {
        font-size: .15rem;
    }

    /* category */
    .top-cat_list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: .2rem;
    }
    .top-cat_item {
        padding: .24rem .12rem .16rem;
        border-radius: .08rem;
    }
    .top-cat_name {
        margin-top: .1rem;
        font-size: .16rem;
    }

    /* event */
    .top-event_list {
        gap: .42rem;
        padding: 0 var(--side);
    }
    .top-event_item {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        column-gap: .24rem;
    }
    .top-event_img img {
        aspect-ratio: 576 / 368;
    }
    .top-event_body {
        padding: 0 .3rem 0 .5rem;
        text-align: left;
    }
    .top-event_item--reverse .top-event_img {
        order: 2;
    }
    .top-event_item--reverse .top-event_body {
        padding: 0 .3rem 0 .4rem;
    }
    .top-event_label { font-size: .14rem; }
    .top-event_title {
        margin-top: .14rem;
        font-size: .22rem;
        font-weight: 500;
    }
    .top-event_text {
        margin-top: .22rem;
        font-size: .14rem;
    }
    .top-event_body .c-btn {
        margin-top: .32rem;
    }

    /* skin concern */
    .top-concern_slide {
        width: 5.26rem;
        padding-right: .36rem;
    }
    .top-concern_card {
        gap: .3rem;
        padding: .3rem .32rem;
    }
    .top-concern_img {
        width: 1.3rem;
    }
    .top-concern_body {
        padding-top: .4rem;
    }
    .top-concern_title { font-size: .15rem; }
    .top-concern_text  { font-size: .15rem; line-height: 1.2; }
    .top-concern_more  { margin-top: .1rem; font-size: .12rem; }
    .top-concern_progress {
        width: 4.2rem;
        margin-top: .44rem;
    }

    /* KBS: boxed inside the container */
    .top-kbs {
        padding: .9rem var(--side) 0;
    }
    .top-kbs_band {
        max-width: 12.8rem;
        margin: 0 auto;
    }
    .top-kbs_plane {
        top: .1rem;
        width: 4.9rem;
    }
    .top-kbs_body {
        padding: .56rem .4rem .16rem;
    }
    .top-kbs_title { max-width: none; font-size: .36rem; }
    .top-kbs_lead  { margin-top: .04rem; font-size: .2rem; }
    .top-kbs_text  { margin-top: .3rem; font-size: .16rem; line-height: 1.5; }
    .top-kbs_btn {
        height: .44rem;
        margin-top: .28rem;
        padding: 0 .3rem;
        font-size: .16rem;
    }
    .top-kbs_skyline {
        height: auto;
        margin-top: -.3rem;
    }
    .top-kbs_strip {
        padding: .06rem .3rem .08rem;
        font-size: .26rem;
    }

    /* FAQ: side nav + list */
    .top-faq_wrap {
        display: grid;
        grid-template-columns: 2.4rem minmax(0, 1fr);
        column-gap: .4rem;
        align-items: start;
    }
    .top-faq_nav {
        position: sticky;
        top: calc(var(--header-h) + .3rem);
        margin: 0;
        overflow: visible;
    }
    .top-faq_tabs {
        display: grid;
        gap: .16rem;
        width: auto;
        padding: .14rem 0 0;
        border: 0;
    }
    .top-faq_tab {
        display: inline-block;
        padding: 0 0 .04rem;
        font-size: .17rem;
    }
    .top-faq_tab::after {
        bottom: 0;
        height: 1px;
        background: var(--c-gold);
        transform-origin: left;
    }
}

/* ==========================================================================
   PC  1280px -
   ========================================================================== */
@media (min-width: 1280px) {
    .top-hero_text {
        padding-left: calc(var(--side) + .4rem);
    }
    .top-hero_ctrl {
        padding-left: calc(var(--side) + .4rem);
    }
    .top-concept {
        padding-top: 1.1rem;
    }
    .top-concept_body {
        padding-left: .5rem;
    }
    .top-products_slide {
        width: 25%;
    }
    .top-faq_wrap {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: .24rem;
    }
    .top-faq_nav {
        grid-column: 1 / span 3;
    }
    .top-faq_body {
        grid-column: 4 / -1;
        padding-left: .08rem;
    }
    .top-event_body {
        padding-left: .7rem;
    }
    .top-event_item--reverse .top-event_body {
        padding-left: .54rem;
    }
}