@charset "utf-8";

/*
 * File    : jt-strap.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * A11Y
 * TYPOGRAPHY
 * JT GUIDE
 * BUTTON
 * FORM
 * CATEGORY
 * SEARCH
 * PAGINATION
 * LIST COMPONENT
 * TABS
 * SWIPER
 * LAZYLOAD
 * VIDEO
 * ACCORDION LIST
 * GRID LIST
 * JT CONFIRM
 * MOTION
 * ANIMATIOM KEYFRAME
 * 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; }

#skip a { width: 1rem; height: 1rem; position: absolute; left: -10000rem; top: auto; overflow: hidden; }
#skip a:focus { display: block; width: 100%; height: 40rem; position: fixed; top: 0; left: 0; font-size: 14rem; line-height: 40rem; text-align: center; font-weight: bold; color: var(--color-white); background: var(--color-black); z-index: 999; }

:focus:not(:focus-visible) :is( select, input[type=text], input[type=tel], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], textarea, input[type=submit], input[type=button], button, a ) { outline: none; }



/* **************************************** *
 * TYPOGRAPHY
 * **************************************** */
.jt-typo--secondary { font-family: var(--font-secondary); }



/* **************************************** *
 * 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; }



/* **************************************** *
 * BUTTON
 * **************************************** */
.jt-btn__basic { display: inline-block; position: relative; vertical-align: middle; min-width: 300rem; padding: 11rem 49rem; font-size: 30rem; line-height: 1.25; font-weight: 500; text-align: center; color: var(--color-white); background: var(--color-black); border-radius: 60rem; cursor: pointer; }



/* **************************************** *
 * FORM
 * **************************************** */
/* LAYOUT */
.jt-form { display: flex; flex-wrap: wrap; gap: 100rem; }
.jt-form > * { width: 100%; }

/* FIELDSET */
.jt-form__fieldset { display: flex; flex-wrap: wrap; flex-direction: column; gap: 40rem 0; }
.jt-form__fieldset-row { display: flex; gap: 0 20rem; }
.jt-form__fieldset-row.jt-form__fieldset-row--narrow { margin-top: -16rem; }
.jt-form__fieldset-col { flex: 1; }

/* LABEL */
.jt-form__label { display: block; margin-bottom: 12rem; font-size: 30rem; line-height: 1.25; font-weight: 500; }

/* INPUT */
.jt-form__field { display: inline-block; vertical-align: middle; width: 100%; height: 60rem; margin: 0; padding: 0 12rem 2rem; font-family: var(--font-secondary); font-size: 30rem; line-height: 1.25; font-weight: 400; color: var(--color-white); border: 1px solid var(--color-black); border-radius: 0; outline: none; background: var(--color-black); box-sizing: border-box; opacity: 1; }
textarea.jt-form__field { height: 300rem; padding: 12rem; overflow: auto; resize: none; }

.jt-form__field:read-only::-webkit-input-placeholder { color: #666; }

html.ios .jt-form__field { padding-top: 2rem; padding-bottom: 0; }
html.ios textarea.jt-form__field { padding: 12rem; }

/* VALIDITY */
.jt-form__valid { display: block; margin-top: 12rem; font-size: 20rem; line-height: 1.25; font-weight: 500; color: #F00;; }
.jt-form__valid:empty { display: none; }

/* CHECKBOX */
.jt-checkbox { display: flex; flex-wrap: wrap; position: relative; }
.jt-checkbox input { position: absolute; opacity: 0; cursor: pointer; }
.jt-checkbox label { padding: 2rem 0; font-size: 0; cursor: pointer; }
.jt-checkbox label > span { padding-left: 34rem; position: relative; font-size: 20rem; line-height: 1.25; font-weight: 500; }
.jt-checkbox label > span:before { content: ''; display: block; width: 20rem; height: 20rem; position: absolute; top: 3rem; left: 0; border: 3rem solid var(--color-black); transition: border .3s, background-color .1s; box-sizing: border-box; }
.jt-checkbox label > span:after { content: ''; display: none; position: absolute; box-sizing: border-box; }
.jt-checkbox label > span:after { width: 20rem; height: 20rem; top: 3rem; left: 0; background: var(--color-black); }
.jt-checkbox input:checked + span:after { display: block; }

/* CHIP */
.jt-form__chip { display: flex; flex-wrap: wrap; gap: 5rem 0; }
.jt-form__chip > label { position: relative; padding: 0 16rem; border: 1px solid var(--color-black); border-radius: 38rem; cursor: pointer; }
.jt-form__chip > label > input { position: absolute; top: 0; left: 0; opacity: 0; }
.jt-form__chip > label > span { font-size: 40rem; line-height: 1.25; font-weight: 400; }
.jt-form__chip > label:has(input:checked) { color: var(--color-white); background: var(--color-black); }

/* CONTROL */
.jt-form__control { font-size: 0; text-align: center; }
.jt-form__action { display: inline-block; vertical-align: middle; padding: 11rem 98rem; position: relative; font-size: 30rem; line-height: 1.25; font-weight: 500; color: var(--color-primary); background: var(--color-black); border: none; border-radius: 60rem; box-sizing: border-box; cursor: pointer; }

.jt-form__action-spinner { display: none; width: 78rem; height: 10rem; margin: -5rem 0 0 -39rem; position: absolute; top: 50%; left: 50%; font-size: 0; line-height: 1; text-align: center; }
.jt-form__action-spinner > div { display: inline-block; width: 10rem; height: 10rem; margin: 0 8rem; background: var(--color-primary); border-radius: 100%; animation: bounce-delay 1.4s infinite ease-in-out both; }
.jt-form__action-spinner .jt-form__action-spinner-ball-01 { animation-delay: -0.32s; }
.jt-form__action-spinner .jt-form__action-spinner-ball-02 { animation-delay: -0.16s; }

.jt-form.jt-form--loading .jt-form__action { color: transparent; }
.jt-form.jt-form--loading .jt-form__action-spinner { display: block; }

/* AGREEMENT */
.jt-agreement { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.jt-agreement a { display: inline-block; position: relative; }
.jt-agreement a:before,
.jt-agreement a:after { content: ''; display: block; height: 1px; position: absolute; bottom: 2rem; background: currentColor; transition: width .4s; transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); }
.jt-agreement a:before { width: 100%; right: 0; transition-delay: .2s; }
.jt-agreement a:after { width: 0; left: 0; transition-delay: 0s; }

/* AGREEMENT POPUP */
.privacy-popup { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; z-index: 999; }
.privacy-popup__inner { width: 90%; max-width: 800rem; padding: 23rem 30rem 30rem; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); background: var(--color-white); }

.privacy-popup__head { padding-bottom: 20rem; margin-bottom: 78rem; border-bottom: 1px solid var(--color-black); }
.privacy-popup__title { font-size: 32rem; line-height: 1.25; font-weight: 700; }

.privacy-popup__body { padding-right: 30rem; }

.privacy-popup__content { max-height: calc(100vh - 300rem); overflow-y: auto; }
.privacy-popup__content * { font-size: 14rem; line-height: 1.71; font-weight: 500; color: #666; }
.privacy-popup__content li { padding-left: 8rem; position: relative; }
.privacy-popup__content li:before { content: ''; width: 3px; height: 3px; position: absolute; top: 10rem; left: 0; background: currentColor; border-radius: 50%; }
html.ios .privacy-popup__content li:before { top: 11rem; }
.privacy-popup__content > * + * { margin-top: 20rem; }

.privacy-popup__copy { position: absolute; right: -13rem; bottom: 76rem; transform: rotate(90deg); font-size: 14rem; line-height: 1; font-weight: 500; }

.privacy-popup__close { display: block; width: 50rem; height: 50rem; margin: 0; padding: 0; position: absolute; top: 18rem; right: 18rem; background: transparent; border: none; box-sizing: border-box; cursor: pointer; z-index: 2; }
.privacy-popup__close .jt-icon { width: 100%; transition: transform .3s; }

/* VARIATION */
.jt-form--secondary { color: var(--color-white); }

.jt-form--secondary .jt-form__field { background: #3B3B3B; border-color: #3B3B3B; }

.jt-form--secondary .jt-form__chip > label { border-color: var(--color-white); }
.jt-form--secondary .jt-form__chip > label:has(input:checked) { color: var(--color-black); background: var(--color-white); }

.jt-form--secondary .jt-checkbox label > span:before { border-color: var(--color-white); }
.jt-form--secondary .jt-checkbox label > span:after { background: var(--color-white); }

.jt-form--secondary .jt-form__action { color: var(--color-black); background:  var(--color-primary); }
.jt-form--secondary .jt-form__action-spinner > div { background: var(--color-black); }

/* CUSTOM */
.jt-form__fieldset-row.jt-form__fieldset-row--custom { flex-wrap: wrap; }
.jt-form__fieldset-row.jt-form__fieldset-row--custom > .jt-form__fieldset-col { flex: none; }
.jt-form__fieldset-row.jt-form__fieldset-row--custom > .jt-form__fieldset-col:not(:last-child) { width: calc((100% - 20rem) / 2); }
.jt-form__fieldset-row.jt-form__fieldset-row--custom > .jt-form__fieldset-col:last-child { width: 100%; margin-top: 24rem; }



/* **************************************** *
 * CATEGORY
 * **************************************** */
.jt-category { margin: -5rem -12rem; }
.jt-category ul { display: flex; flex-wrap: wrap; }
.jt-category li { font-size: 0; }
.jt-category a { display: inline-block; padding: 5rem 12rem; font-size: 60rem; line-height: 1.25; font-weight: 500; transition: color .3s; }
.jt-category li.jt-category--all { width: 100%; }
.jt-category li.jt-category--active a { color: var(--color-primary); }



/* **************************************** *
 * SEARCH
 * **************************************** */
.jt-search__bundle { position: relative; }

.jt-search__label { font-size: 60rem; line-height: 1.25; font-weight: 500; }
.jt-search__input { display: block; width: 100%; height: 75rem; margin: 0; padding: 7rem 70rem 0 0; font-size: 60rem; line-height: 1; font-weight: 500; text-overflow: ellipsis; background: var(--color-white); border: 0rem solid var(--color-black); border-bottom-width: 5rem; border-radius: 0; outline: none; opacity: 1; box-sizing: border-box; transition: border .3s; }

.jt-search__submit { display: block; width: 54rem; height: 54rem; margin: 0; padding: 0; position: absolute; right: 0; bottom: 13rem; background: none; border: none; cursor: pointer; }
.jt-search__submit .jt-icon { display: block; width: 54rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.jt-search__submit-icon--small { display: none; }

.jt-search__toggle { display: none; }



/* **************************************** *
 * PAGINATION
 * **************************************** */
.jt-pagination { margin-top: 100rem; font-size: 0; text-align: center; }
.jt-pagination:empty { margin-top: 0; }

.jt-pagination .jt-pagination__numbers { display: inline-block; vertical-align: top; min-width: 27rem; height: 27rem; margin: 0 2rem; position: relative; font-size: 16rem; line-height: 27rem; font-weight: 700; color: #B6B6B6; transition: color .3s; }
.jt-pagination .jt-pagination__numbers .jt-icon { width: 12rem; position: absolute; top: calc(50% - 1rem); left: 50%; transform: translate(-50%, -50%); }

.jt-pagination .jt-pagination__numbers.jt-pagination--current { color: var(--color-black); }



/* **************************************** *
 * LIST COMPONENT
 * **************************************** */
/* LIST LAYOUT */
.jt-board__head { margin-bottom: 100rem; padding: 64rem 0; position: relative; }
.jt-board__head:before { content: ''; width: 100%; height: 12rem; position: absolute; bottom: -12rem; left: 0; background: var(--color-neon-gradient); pointer-events: none; }
.jt-board__head-row { display: grid; grid-template-columns: 1fr 603rem; align-items: center; gap: 34rem; }

.jt-board__title { font-size: 60rem; line-height: 1.42; font-weight: 500; }

/* NOTHING */
.jt-list-nothing { padding: 152rem 0 124rem; text-align: center; }
.jt-list-nothing p { font-size: 20rem; line-height: 1.56; font-weight: 500; color: #A8A8A8; }
.jt-list-nothing p > span { display: block; }



/* **************************************** *
 * TABS
 * **************************************** */
.jt-tabs:after { content: ''; display: table; clear: both; }

.jt-tabs__menu { display: flex; flex-wrap: nowrap; justify-content: center; gap: 14rem; width: 100%; margin-bottom: 100rem; }
.jt-tabs__menu li { display: flex; position: relative; background: var(--color-black); border-radius: 40rem; cursor: pointer; }
.jt-tabs__menu li a { display: block; width: 100%; padding: 1rem 30rem; font-size: 30rem; line-height: 1.25; font-weight: 500; text-align: center; color: var(--color-white); align-self: center; }
.jt-tabs__menu li.jt-tabs--active { background: var(--color-primary); }
.jt-tabs__menu li.jt-tabs--active a { color: var(--color-black); }

.jt-tabs__panels { float: left; width: 100%; }
.jt-tabs__panels > div { display: none; }
.jt-tabs__panels > div:first-child { display: block; }



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

/* NAVIGATION */
.swiper-navigation .swiper-button { width: 50rem; height: 100rem; margin: -50rem 0 0; padding: 0; background: transparent; border: none; border-radius: 50%; transition: opacity .3s; }
.swiper-navigation .swiper-button:after { display: none; }
.swiper-navigation .swiper-button.swiper-button-disabled { opacity: 0; }
.swiper-navigation .swiper-button-prev { left: 13rem; }
.swiper-navigation .swiper-button-next { right: 13rem; }
.swiper-navigation .swiper-button .jt-icon { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* PAGINATION */
.swiper-pagination { width: auto; bottom: inherit; top: 116rem; left: 20rem; }
.swiper-pagination > span { line-height: 1; font-weight: 500; font-feature-settings: 'tnum'; }
.swiper-pagination > span.swiper-pagination-current,
.swiper-pagination > span.swiper-pagination-slash { font-size: 50rem; }
.swiper-pagination > span.swiper-pagination-total { font-size: 20rem; }

.swiper-pagination.swiper-pagination-bullets { width: 100%; left: 0; right: auto; top: auto; bottom: 52rem; font-size: 0; }
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { display: inline-block; vertical-align: middle; width: 12rem; height: 12rem; margin: 0; position: relative; background: transparent; opacity: 1; }
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before,.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { content: ''; width: 6rem; height: 6rem; position: absolute; top: 50%; left: 50%; border-radius: 50%; translate: -50% -50%; box-sizing: border-box; transition: opacity .3s; }
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before { border: 1px solid var(--color-black); }
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { background: var(--color-black); opacity: 0; }
.swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after { opacity: 1; }



/* **************************************** *
 * 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: #F8F8F8; }
.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; }
.jt-background-video__poster--small { display: none; }



/* **************************************** *
 * ACCORDION LIST
 * **************************************** */
.jt-accordion { border-top: 1px solid var(--color-black); }
.jt-accordion__item { width: 100%; border-bottom: 1px solid var(--color-black); transition: background-color .3s; }

.jt-accordion__head { cursor: pointer; }

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

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

/* HOVER */
.jt-accordion__item.jt-accordion--hover { background: var(--color-primary); }

/* ACTIVE */
.jt-accordion__item.jt-accordion--active { background: var(--color-primary); }

@media print {

    .jt-accordion__content-inner { display: block !important; }

}



/* **************************************** *
 * GRID LIST
 * **************************************** */
.jt-grid-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40rem 12rem; }

.jt-grid-list__item-inner { display: block; cursor: pointer; }

.jt-grid-list__thumb { position: relative; overflow: hidden; }
.jt-grid-list__thumb:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255, 255, 255, 0.02); -webkit-backdrop-filter: blur(13rem); backdrop-filter: blur(13rem); opacity: 0; transition: opacity .3s; transition-delay: .1s; }
.jt-grid-list__thumb .jt-lazyload { padding-top: 100%; }
.jt-grid-list__thumb .jt-background-video { position: relative; aspect-ratio: 1 / 1; }
.jt-grid-list__thumb-layer { position: absolute; top: -3rem; right: -3rem; bottom: -3rem; left: -3rem; }
.jt-grid-list__thumb-layer svg { display: block; width: 100%; height: auto; }
.jt-grid-list__thumb-meta { display: none; }

.jt-grid-list__content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16rem; margin-top: 18rem; padding-left: 38rem; position: relative; }
.jt-grid-list__content:before { content: ''; width: 22rem; height: 22rem; position: absolute; top: 0; left: 0; background: var(--color-black); border-radius: 50%; }
:is(.jt-grid-list__title, .jt-grid-list__date, .jt-grid-list__charge) { display: block; font-size: 22rem; line-height: 1.25; font-weight: 500; }
:is(.jt-grid-list__title, .jt-grid-list__date, .jt-grid-list__charge) .jt-grid-list__highlight { color: var(--color-primary); }



/* **************************************** *
 * JT CONFIRM
 * **************************************** */
.jt-confirm { position: fixed; left: 0; top: 0; width: 100%; height: 100%; text-align: center; z-index: 99999; }
.jt-confirm:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; }

.jt-confirm__container { display: inline-block; vertical-align: middle; width: 90%; max-width: 460rem; padding-bottom: 40rem; background: var(--color-white); overflow: hidden; }

.jt-confirm__content { display: flex; align-items: center; justify-content: center; padding: 40rem 30rem 30rem; }
.jt-confirm__content p { font-size: 32rem; line-height: 1.25; font-weight: 500; word-wrap: break-word; word-break: keep-all; }
.jt-confirm__content p > b { font-weight: 700; }

.jt-confirm__actions { display: flex; flex-wrap: nowrap; justify-content: center; }
.jt-confirm__btn { width: 300rem; padding: 11rem 0; font-size: 30rem; line-height: 1.25; font-weight: 500; color: inherit; background: var(--color-primary); border: none; border-radius: 60rem; cursor: pointer; }

.jt-confirm--choice .jt-confirm__actions { gap: 15rem; padding: 0 30rem; }
.jt-confirm--choice .jt-confirm__btn { flex: 1; }



/* **************************************** *
 * MOTION
 * **************************************** */
/* SCRAMBLE TEXT */
.jt-scramble-txt { display: inline-block; vertical-align: top; height: 1em; position: relative; line-height: 1; font-feature-settings: 'tnum'; }
.jt-scramble-txt > * { display: inline-block; vertical-align: top; }
.jt-scramble-txt .slotmachine-number-wrap { height: 100%; overflow: hidden; }
.jt-scramble-txt .slotmachine-number-wrap > span { display: block; position: relative; top: 0; }

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

.jt-split-text .jt-split-text--line-wrap { overflow: hidden; }

/* IMAGE */
.jt-motion-image[data-motion-type="zoom"] { overflow: hidden; }
.jt-motion-image[data-motion-type="zoom"] img { transform: scale(1.2); }



/* **************************************** *
 * ANIMATIOM KEYFRAME
 * **************************************** */
/* LOADMORE BOUNCE DELAY */
@keyframes bounce-delay {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}



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

    /* FORM */
    .jt-agreement a:hover:before { width: 0; transition-delay: 0s; }
    .jt-agreement a:hover:after { width: 100%; transition-delay: .2s; }

    .privacy-popup__close:hover .jt-icon { transform: rotate(90deg); }

    /* SEARCH */
    .jt-search__submit:hover .jt-icon path { fill: var(--color-primary); }

    /* PAGINATION */
    .jt-pagination a.jt-pagination__numbers:hover { color: var(--color-primary); }
    .jt-pagination a.jt-pagination__numbers:hover .jt-icon svg path { fill: var(--color-primary); }

    /* GRID LIST */
    .jt-grid-list:hover .jt-grid-list__item:not(:hover) .jt-grid-list__thumb:after { opacity: 1; transition-delay: 0; }

}