@charset "utf-8";

/*
 * File    : main.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * LAYOUT
 * VISUAL
 * SPECIAL
 * FASHION
 * BANNER
 * WATCH & JEWELRY
 * POPULAR
 * COVER
 * BEAUTY
 * INSTAGRAM
 * LIFESTYLE
 * CULTURE
 * ARTNOW
 * HOVER
 */



/* **************************************** *
 * LAYOUT
 * **************************************** */
body.home .main-container { padding-top: 200rem; padding-bottom: 0; }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual__slider { background: var(--color-gray-900); }
.main-visual__item { position: relative; aspect-ratio: 1 / 0.5588; }
.main-visual__item .jt-banner__container { height: 100%; }
.main-visual__media { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.main-visual__media:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .2); z-index: 1; }
.main-visual__media:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 62.53%, rgba(0, 0, 0, .5) 100%); z-index: 1; }
.main-visual__media img { width: 100%; height: 100%; object-fit: cover; }
.main-visual__content { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; padding: 0 40rem 82rem; z-index: 1; }
.main-visual__title { max-width: 720rem; margin: 0 auto; color: var(--color-white); }
.main-visual__info { display: inline-flex; gap: 8rem; margin-top: 16rem; }
.main-visual__info span { color: var(--color-white); }
.main-visual__info time { color: var(--color-gray-500); }

/* Swiper */
.main-visual__slider .swiper-control { bottom: 30rem; left: 80rem; right: 80rem; }
.main-visual__slider .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { padding: 10rem 0; margin: 0 2rem;}
.main-visual__slider .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before { width: 140rem; height: 2rem; background: var(--color-white); opacity: .3; border-radius: 0; }
.main-visual__slider .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet .swiper-pagination-state { position: absolute; left: 0; top: 50%; width: 100%; height: 2rem; background: var(--color-white); margin-top: -1rem; transform: scale(0, 1); transform-origin: 0 0; }

/* Split */
.main-visual__split { position: absolute; inset: 0; will-change: transform; }
.main-visual__split-item { position: absolute; top: 0; bottom: 0; width: 10.2%; background: no-repeat center center / cover; }



/* **************************************** *
 * SPECIAL
 * **************************************** */
.main-special.jt-section { padding-bottom: 0; }



/* **************************************** *
 * FASHION
 * **************************************** */
.main-fashion.jt-section:has(+.main-banner) { padding-bottom: 0; }



/* **************************************** *
 * BANNER
 * **************************************** */
.main-banner { overflow: visible; }



/* **************************************** *
 * WATCH & JEWELRY
 * **************************************** */



/* **************************************** *
 * POPULAR
 * **************************************** */



/* **************************************** *
 * COVER
 * **************************************** */
.main-cover.jt-section { padding-top: 96rem; padding-bottom: 0; }
.main-cover:has(+.main-banner) { padding-bottom: var(--padding-bottom); }



/* **************************************** *
 * BEAUTY
 * **************************************** */



/* **************************************** *
 * INSTAGRAM
 * **************************************** */



/* **************************************** *
 * LIFESTYLE
 * **************************************** */
.main-beauty + .main-lifestyle { padding-top: 0; }


/* **************************************** *
 * CULTURE
 * **************************************** */
.main-lifestyle + .main-culture { padding-top: 0; }


/* **************************************** *
 * ARTNOW
 * **************************************** */
.main-artnow.jt-section { background: var(--color-gray-100); padding-top: 110rem; padding-bottom: 130rem; }
.main-artnow .jt-section__head { margin-bottom: 48rem; }
.main-artnow .jt-section__title { text-align: center; }
.main-artnow .jt-section__title i { display: inline-block; max-width: 300rem; }
.main-artnow .jt-section__title svg { width: 100%; height: auto; vertical-align: top; }
.main-artnow .jt-section__title path { fill: #97CE8B; }



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

}