@charset "utf-8";

/*
 * File    : landing.css
 * Author  : STUDIO-JT (KMS)
 *
 * SUMMARY :
 * GLOBAL
 * VISUAL
 * FEATURE
 * PRODUCT
 * RECIPE
 * PREMIER
 * FAQ
 * SHOP
 * BRAND
 * KEYFRAMES
 * HOVER
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
/* SEPARATION */
.jt-separation { position: relative; overflow: hidden; }
.jt-separation__line { display: block; width: 100%; position: absolute; top: 0; left: 0; background: var(--color-primary); transform-origin: top; }
.jt-separation__line--guide { top: -100%; }

.jt-separation--primary { height: 217rem; }
.jt-separation--primary .jt-separation__line { height: 34rem; }

.jt-separation--secondary { height: 148rem; }
.jt-separation--secondary .jt-separation__line { height: 25rem; }

.jt-separation--third { height: 79rem; }
.jt-separation--third .jt-separation__line { height: 16rem; }

/* PARALLAX BACKGROUND */
.jt-motion-parallax { width: 100%; height: 100%; position: relative; overflow: hidden; }
.jt-motion-parallax__bg { display: block; width: calc(100% + 100px); height: calc(100% + 100px); position: absolute; bottom: -100px; left: -50px; background: no-repeat center center / cover; }

/* TEXT MOTION */
.jt-split-text { opacity: 0; }
.jt-split-text.jt-split-text--complete { opacity: 1; }

/* FADE */
.jt-motion--fade { opacity: 0; }



/* **************************************** *
 * VISUAL
 * **************************************** */
/* TITLE */
.section-visual__title { margin-bottom: 80rem; text-align: center; }
.section-visual__title > p { margin-top: 32rem; }

/* GALLERY */
.section-visual__gallery { display: grid; grid-template-columns: repeat(2, 1fr); }
.section-visual__gallery-item .jt-lazyload { padding-top: 93.83%; }

/* SLIDER */
.section-visual__slider { padding-top: 51.21%; position: relative; }

.section-visual__slider-swiper { width: 100%; position: absolute; top: 0; left: 0; }
.section-visual__slider-bg { width: 100%; height: 100%; background: no-repeat center center / cover; transform: scale(1.05) rotate(0.01deg); transition: transform 4.2s ease-in; }
.section-visual__slider-bg:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.4); }
.swiper-slide-active .section-visual__slider-bg { transform: scale(1) rotate(0deg); }

.section-visual__slider-typo { display: flex; flex-direction: column; gap: 20rem; width: 100%; padding: 0 44rem; position: absolute; left: 0; top: 50%; text-align: center; translate: 0 -50%; z-index: 2; }



/* **************************************** *
 * FEATURE
 * **************************************** */
.section-feature { margin-top: 173rem; }

/* INTRO */
.section-feature__intro { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.section-feature__intro-time { display: flex; align-items: baseline; }
.section-feature__intro-explain { min-width: 274rem; padding-top: 40rem; text-align: center; }

.slotmachine-number-wrap { display: inline-block; vertical-align: top; height: 260rem; overflow: hidden; }
.slotmachine-number-wrap span { display: block; position: relative; top: 0; text-align: center; }

/* CONTENT */
.section-feature__content { margin-top: 212rem; position: relative; z-index: 1; }

/* WAVE */
.section-feature__wave { display: flex; width: 100vw; margin-left: -44rem; position: absolute; left: 0; top: -109rem; overflow: hidden; }
.section-feature__wave-item { animation: marquee 60s linear 0s infinite; }
.section-feature__wave-item svg { display: block; width: 2090rem; height: auto; overflow: visible; }
.section-feature__wave-item svg path { stroke: var(--color-primary); }

.section-feature__wave--loading .section-feature__wave-item { animation: none; }

/* LIST */
.section-feature__list { display: flex; flex-direction: column; gap: 10rem; position: relative; }
.section-feature__list > li { display: flex; }
.section-feature__list > li > * { width: 50%; }

.section-feature__list-image { position: relative; }
.section-feature__list-image .jt-lazyload { padding-top: 93.83%; }

.section-feature__list-icon { width: 224rem; position: absolute; top: 50%; left: 50%; translate: -50% -50%; }
.section-feature__list-icon svg { display: block; width: 100%; height: auto; }
.section-feature__list-icon svg path { fill: var(--color-primary); }

.section-feature__list-text { display: flex; align-items: center; justify-content: center; padding: 0 60rem; text-align: center; }
.section-feature__list-text p { margin-top: 20rem; }

/* ICON MOTION */
.section-feature__list-icon--whirlpool { animation: whirlpool-spin 15s linear 0s infinite; }



/* **************************************** *
 * PRODUCT
 * **************************************** */
.section-product { margin-top: 353rem; }

/* TITLE */
.section-product__title { margin-bottom: 287rem; text-align: center; }

/* SLIDER */
.section-product__slider { width: 1374rem; margin: 0 auto 250rem; position: relative; }
.section-product__slider-item { display: flex; gap: 60rem; }

/* IMAGE */
.section-product__image { width: 660rem; padding: 50rem 0 52rem; }
.section-product__image > img { display: block; width: 100%; height: auto; }
.section-product__image > b { display: block; margin-top: 40rem; text-align: center; }

/* INFORMATION */
.section-product__info { width: 654rem; padding: 78rem 60rem 80rem; color: var(--color-black); background: var(--color-primary); border-radius: var(--border-radius-02); overflow: hidden; }

.section-product__info-head { display: flex; align-items: center; justify-content: space-between; }
.section-product__info-btn { right: -14rem; }

.section-product__info-list { margin-top: 20rem; margin-bottom: 40rem; }
.section-product__info-list > li { display: grid; grid-template-columns: 150rem 1fr; gap: 24rem; padding: 8rem 0; border-bottom: 1px solid var(--color-black); }

.section-product__info-special { display: grid; grid-template-columns: repeat(2, 206rem); justify-content: center; gap: 32rem 40rem; }
.section-product__info-special-image { width: 120rem; margin: 0 auto; }
.section-product__info-special-image svg { display: block; width: 100%; height: auto; }
.section-product__info-special-keyword { display: block; margin-top: 4rem; text-align: center; }



/* **************************************** *
 * RECIPE
 * **************************************** */
.section-recipe { margin-top: 240rem; }

/* TITLE */
.section-recipe__title { margin-bottom: 130rem; text-align: center; }

/* LIST */
.section-recipe__list { display: grid; grid-template-columns: repeat(4, 1fr); align-items: flex-start; gap: 0 32rem; }

.section-recipe__list-item { position: relative; border-radius: var(--border-radius-01); overflow: hidden; }
.section-recipe__list-item .jt-lazyload { padding-top: 105.81%; }

.section-recipe__list-name { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 32rem; position: absolute; top: 0; left: 0; text-align: center; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--color-primary); border-radius: var(--border-radius-01); opacity: 0; transition: opacity .6s var(--custom-ease-01); }

.section-recipe__list-item--video a { display: block; }
.section-recipe__list-item--video .jt-lazyload:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.2); }
.section-recipe__list-item--video .jt-icon { width: 64rem; position: absolute; top: 50%; left: 50%; translate: -50% -50%; }
.section-recipe__list-item--video .jt-icon svg path { fill: var(--color-white); }

.section-recipe__list-item:nth-child(2) { margin-top: 228rem; }
.section-recipe__list-item:nth-child(4) { margin-top: 288rem; }
.section-recipe__list-item:nth-child(5) { margin-top: 142rem; }
.section-recipe__list-item:nth-child(6) { margin-top: 370rem; }
.section-recipe__list-item:nth-child(7) { margin-top: 17rem; }
.section-recipe__list-item:nth-child(8) { margin-top: 392rem; }

/* HOVER */
.section-recipe__list-item:hover .section-recipe__list-name { opacity: 1; }
.section-recipe__list-item--video a:hover .jt-icon svg path { fill: var(--color-primary); }



/* **************************************** *
 * PREMIER
 * **************************************** */
.section-premier { margin-top: 468rem; }

/* TITLE */
.section-premier__title { margin-bottom: 128rem; text-align: center; }



/* **************************************** *
 * FAQ
 * **************************************** */
.section-faq { margin-top: 240rem; }

/* TITLE */
.section-faq__title { margin-bottom: 60rem; text-align: center; }

/* LIST */
.section-faq .jt-accordion__item:nth-child(n+6) { display: none; }

/* LOADMORE */
.section-faq__more { margin-top: 72rem; text-align: center; }



/* **************************************** *
 * SHOP
 * **************************************** */
.section-shop { margin-top: 402rem; }

/* TITLE */
.section-shop__title { display: flex; flex-direction: column; gap: 40rem; text-align: center; }

/* IMAGES */
.section-shop__image { width: 660rem; margin: -230rem auto 0; }
.section-shop__image .jt-lazyload { padding-top: 100%; }

/* LINK */
.section-shop__link { display: flex; gap: 8rem; align-items: center; justify-content: center; width: 584rem; padding: 15rem 60rem; margin: 60rem auto 0; background: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 99rem; transition: background-color .3s; }
.section-shop__link-logo { width: 30rem; height: 30rem; background: url(../images/landing/shop-logo-amazon.png) no-repeat center center / cover; border-radius: 50%; }
.section-shop__link > span { color: var(--color-black); transition: color .3s; }
.section-shop__link > .jt-icon { width: 16rem; }
.section-shop__link > .jt-icon svg path { fill: var(--color-black); }



/* **************************************** *
 * BRAND
 * **************************************** */
.section-brand { margin-top: 240rem; }

.section-brand__inner { padding-top: 46.91%; position: relative; overflow: hidden; }

.section-brand__bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.section-brand__bg:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.2); }

.section-brand__content { display: flex; flex-direction: column; gap: 24rem; width: 100%; padding: 0 44rem; position: absolute; top: 50%; left: 0; text-align: center; color: var(--color-white); translate: 0 -50%; }



/* **************************************** *
 * KEYFRAMES
 * **************************************** */
@keyframes marquee {
    from { transform: translate3d(0%, 0, 0); }
    to { transform: translate3d(-100%, 0, 0); }
}

@keyframes whirlpool-spin {
    from { transform: rotate(0); }
    to { transform: rotate(359deg); }
}



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

    /* SHOP */
    .section-shop__link:hover { background: transparent; }
    .section-shop__link:hover > span { color: var(--color-primary); }
    .section-shop__link:hover > .jt-icon svg path { fill: var(--color-primary); }

}