@charset "utf-8";

/*
 * File    : jt-strap.css
 * Author  : STUDIO-JT (KMS)
 *
 * SUMMARY :
 * A11Y
 * TYPOGRAPHY
 * JT GUIDE
 * SWIPER
 * LAZYLOAD
 * VIDEO
 * MARQUEE
 * ACCORDION
 * HOVER
 */



/* **************************************** *
 * A11Y
 * **************************************** */
.sr-only { position: absolute; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; }



/* **************************************** *
 * TYPOGRAPHY
 * **************************************** */
.jt-typo--01 { font-size: var(--font-size-primary-01); line-height: var(--font-lineheight-primary-01); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--02 { font-size: var(--font-size-primary-02); line-height: var(--font-lineheight-primary-02); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--03 { font-size: var(--font-size-primary-03); line-height: var(--font-lineheight-primary-03); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--04 { font-size: var(--font-size-primary-04); line-height: var(--font-lineheight-primary-04); font-weight: 600; letter-spacing: var(--letter-spacing); }
.jt-typo--05 { font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); font-weight: 600; letter-spacing: var(--letter-spacing); }
.jt-typo--06 { font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); font-weight: 600; letter-spacing: var(--letter-spacing); }
.jt-typo--07 { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 600; letter-spacing: var(--letter-spacing); }



/* **************************************** *
 * JT GUIDE
 * **************************************** */
/* ICON */
.jt-icon { display: inline-block; }
.jt-icon svg { display: block; width: 100%; height: auto; }
.jt-icon svg path { fill: var(--color-black); transition: fill .3s; }



/* **************************************** *
 * SWIPER
 * **************************************** */
.swiper { height: 100%; }

/* PAGINATION */
.swiper-pagination.swiper-pagination-bullets { display: inline-block; vertical-align: middle; margin-top: 40rem; position: relative; bottom: auto; left: auto; font-size: 0; }
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { width: 20rem; height: 20rem; margin: 0 7rem; position: relative; background: transparent; opacity: 1; will-change: transform; }
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before,
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { content: ''; position: absolute; border-radius: 50%; box-sizing: border-box; }
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { width: 6rem; height: 6rem; margin-top: -3rem; margin-left: -3rem; top: 50%; left: 50%; background: color-mix(in srgb, var(--color-white) 50%, transparent 50%); transition: background-color .3s; }
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before { width: 100%; height: 100%; top: 0; left: 0; scale: 0; border: 2rem solid var(--color-white); transition: scale .4s; }
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after { background: var(--color-white); }
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:before { scale: 1; }

/* BUTTON */
.swiper-button { width: 30rem; height: 30rem; margin: 0; padding: 0; position: relative; top: inherit; background: transparent; border: none; }
.swiper-button:after { display: none; }
.swiper-button-prev { left: inherit; }
.swiper-button-next { right: inherit; }
.swiper-button .jt-icon { width: 20rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.swiper-button .jt-icon path { fill: var(--color-pms-7544); }
.swiper-button.swiper-button-disabled { opacity: .5; }

/* CONTROL UI */
.swiper-control { display: flex; align-items: center; justify-content: center; gap: 7rem; margin-top: 20rem; }
.swiper-control .swiper-pagination.swiper-pagination-bullets { width: fit-content; margin-top: 0; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { background: color-mix(in srgb, var(--color-pms-7544) 50%, transparent 50%); }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before { border-color: var(--color-pms-7544); }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after { background: var(--color-pms-7544); }



/* **************************************** *
 * LAZYLOAD
 * **************************************** */
img[data-unveil] { opacity: 0; transition: opacity .3s; }
.jt-lazyload--loaded img[data-unveil], img[data-unveil].jt-lazyload--loaded { opacity: 1; }

.jt-lazyload { position: relative; overflow: hidden; }
.jt-lazyload img { display: block; width: 100%; position: absolute; left: 0; top: 0; }
.jt-lazyload.jt-lazyload--loaded img, .jt-lazyload img.jt-lazyload--loaded { height: auto; }

/* COLOR PREVIEW */
.jt-lazyload__color-preview { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-gray-200); }
.jt-lazyload.jt-lazyload--loaded .jt-lazyload__color-preview { background: transparent; transition: background-color .1s; transition-delay: .3s; }



/* **************************************** *
 * VIDEO
 * **************************************** */
/* NATIVE BACKGROUND VIDEO */
.jt-background-video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.jt-background-video__vod { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; transform: translateZ(0); }
.jt-background-video__vod:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.jt-background-video__vod video { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; }
.jt-background-video__poster { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center center; background-size: cover; z-index: 2; }
.jt-background-video__alternative { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center center; background-size: cover; z-index: 1; }

/* POPUP WITH VIDEO */
.jt-video-popup { width: 100%; height: 100%; max-width: inherit; max-height: inherit; margin: 0; padding: 0; position: fixed; left: 0; top: 0; background-color: var(--color-pms-300); border: none; box-sizing: border-box; overflow: hidden; -ms-scroll-chaining: none; overscroll-behavior: none; }
.jt-video-popup::backdrop { background: transparent; }

.jt-video-popup__content { width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.jt-video-popup__content iframe { width: 100%; height: 100%; position: relative; }

.jt-video-popup__close { width: 32rem; height: 32rem; margin: 0; padding: 0; position: fixed; top: 20rem; right: 20rem; background: transparent; border: none; outline: none; cursor: pointer; z-index: 1; transition: opacity .3s; }
.jt-video-popup__close .jt-icon { width: 100%; }
.jt-video-popup__close .jt-icon svg path { fill: var(--color-white); }



/* **************************************** *
 * MARQUEE
 * **************************************** */
/* BASIC TYPE */
.jt-marquee { font-size: 0; white-space: nowrap; overflow: hidden; }
.jt-marquee__inner { display: inline-block; will-change: auto; }
.jt-marquee__item { display: inline-block; }

/* DRAG TYPE */
.jt-drag-marquee { display: block; font-size: 0; white-space: nowrap; overflow: hidden; }
.jt-drag-marquee__wrapper, .jt-drag-marquee__inner, .jt-drag-marquee__item { display: inline-block; vertical-align: top; }



/* **************************************** *
 * ACCORDION
 * **************************************** */
.jt-accordion { display: flex; flex-wrap: wrap; row-gap: 8rem; }
.jt-accordion__item { width: 100%; background: var(--color-gray-100); border-radius: var(--radius-01); transition: background-color .3s; }

.jt-accordion__head { padding: 16rem 54rem 16rem 16rem; position: relative; cursor: pointer; }
.jt-accordion__control { width: 24rem; height: 24rem; position: absolute; top: 18rem; right: 15rem; transition: rotate .3s; }
.jt-accordion__control .jt-icon { display: block; width: 100%; }
.jt-accordion__control .jt-icon path { fill: var(--color-gray-600); }

.jt-accordion__content { position: relative; overflow: hidden; }
.jt-accordion__content-inner { padding: 0 16rem 16rem; }

.jt-accordion .jt-accordion__item:not(:first-child) .jt-accordion__content .jt-accordion__content-inner { display: none; }

/* CONTENT */
.jt-accordion__content { color: var(--color-gray-800) }
.jt-accordion__content p + p { margin-top: 16rem; }
.jt-accordion__content b { font-weight: 700; }
.jt-accordion__content a { box-shadow: 0 1px 0 0 currentColor; transition: box-shadow .3s; -webkit-box-decoration-break: clone; }

/* ACTIVE */
.jt-accordion__item.jt-accordion--active { background: var(--color-pms-7541); }
.jt-accordion__item.jt-accordion--active .jt-accordion__control .jt-icon path { fill: var(--color-black); }
.jt-accordion__item.jt-accordion--active .jt-accordion__control { rotate: -180deg; }



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

    /* SWIPER */
    .swiper-button:not(.swiper-button-disabled):hover .jt-icon path { fill: var(--color-pms-7545); }

    /* VIDEO */
    .jt-video-popup__close:hover { opacity: 0.7; }

    /* ACCORDION */
    .jt-accordion__head:hover .jt-accordion__control .jt-icon path { fill: var(--color-black); }

    .jt-accordion__content a:hover { box-shadow: 0 2rem 0 0 currentColor; }

}