@charset "utf-8";

/*
 * File    : jt-strap.css
 * Author  : STUDIO-JT (KMS)
 *
 * SUMMARY :
 * A11Y
 * TYPOGRAPHY
 * JT GUIDE
 * BUTTON
 * FORM
 * CATEGORY
 * SEARCH
 * PAGINATION
 * LOADMORE
 * LIST COMPONENT
 * SINGLE LAYOUT
 * SHARE
 * SWIPER
 * LAZYLOAD
 * VIDEO
 * CARD LIST
 * GRID LIST
 * COLUMN LIST
 * SCROLLER SLIDER
 * THUMB LIST
 * BANNER
 * POPUP
 * NEWSLETTER
 * ACCORDION
 * JT CONFIRM
 * JT MARQUEE
 * JT CURSOR
 * 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: 50rem; padding: 0 24rem; position: fixed; top: 0; left: 0; font-size: var(--font-size-primary-08); line-height: 50rem; 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-typo--01 { font-size: var(--font-size-primary-01); line-height: var(--font-lineheight-primary-01); font-weight: 800; letter-spacing: var(--letter-spacing-01); }
.jt-typo--02 { font-size: var(--font-size-primary-02); line-height: var(--font-lineheight-primary-02); font-weight: 800; letter-spacing: var(--letter-spacing-02); }
.jt-typo--03 { font-size: var(--font-size-primary-03); line-height: var(--font-lineheight-primary-03); font-weight: 800; letter-spacing: var(--letter-spacing-02); }
.jt-typo--04 { font-size: var(--font-size-primary-04); line-height: var(--font-lineheight-primary-04); font-weight: 800; letter-spacing: var(--letter-spacing-02); }
.jt-typo--05 { font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); font-weight: 800; letter-spacing: var(--letter-spacing-02); }
.jt-typo--06 { font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); font-weight: 800; letter-spacing: var(--letter-spacing-03); }
.jt-typo--07 { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 500; letter-spacing: var(--letter-spacing-03); }
.jt-typo--08 { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 800; letter-spacing: var(--letter-spacing-03); }
.jt-typo--09 { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 500; letter-spacing: var(--letter-spacing-03); }
.jt-typo--10 { font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 800; letter-spacing: var(--letter-spacing-03); }
.jt-typo--11 { font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-03); }
.jt-typo--12 { font-size: var(--font-size-primary-11); line-height: var(--font-lineheight-primary-11); font-weight: 500; letter-spacing: var(--letter-spacing-03); }
.jt-typo--13 { font-size: var(--font-size-primary-12); line-height: var(--font-lineheight-primary-12); font-weight: 500; letter-spacing: var(--letter-spacing-03); }

.jt-typo-secondary--01 { font-size: var(--font-size-secondary-01); line-height: var(--font-lineheight-secondary-01); font-weight: 700; letter-spacing: var(--letter-spacing-03); }
.jt-typo-secondary--02 { font-size: var(--font-size-secondary-02); line-height: var(--font-lineheight-secondary-02); font-weight: 700; letter-spacing: var(--letter-spacing-03); }
.jt-typo-secondary--03 { font-size: var(--font-size-secondary-03); line-height: var(--font-lineheight-secondary-03); font-weight: 700; letter-spacing: var(--letter-spacing-03); }
.jt-typo-secondary--04 { font-size: var(--font-size-secondary-04); line-height: var(--font-lineheight-secondary-04); font-weight: 700; letter-spacing: var(--letter-spacing-03); }
.jt-typo-secondary--05 { font-size: var(--font-size-secondary-05); line-height: var(--font-lineheight-secondary-05); font-weight: 700; letter-spacing: var(--letter-spacing-03); }
.jt-typo-secondary--06 { font-size: var(--font-size-secondary-06); line-height: var(--font-lineheight-secondary-06); font-weight: 700; letter-spacing: var(--letter-spacing-03); }
.jt-typo-secondary--07 { font-size: var(--font-size-secondary-07); line-height: var(--font-lineheight-secondary-07); font-weight: 700; letter-spacing: var(--letter-spacing-03); }
.jt-typo-secondary--08 { font-size: var(--font-size-secondary-08); line-height: var(--font-lineheight-secondary-08); font-weight: 700; letter-spacing: var(--letter-spacing-03); }
.jt-typo-secondary--09 { font-size: var(--font-size-secondary-09); line-height: var(--font-lineheight-secondary-09); font-weight: 600; letter-spacing: var(--letter-spacing-03); }
.jt-typo-secondary--10 { font-size: var(--font-size-secondary-10); line-height: var(--font-lineheight-secondary-10); font-weight: 600; letter-spacing: var(--letter-spacing-03); }
.jt-typo-secondary--11 { font-size: var(--font-size-secondary-11); line-height: var(--font-lineheight-secondary-11); font-weight: 600; letter-spacing: var(--letter-spacing-03); }



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

.jt-icon--mobile { display: none; }



/* **************************************** *
 * BUTTON
 * **************************************** */
/* BASIC */
.jt-btn__basic { display: inline-flex; gap: 8rem; align-items: center; position: relative; vertical-align: middle; padding: 8rem 18rem; font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 800; letter-spacing: var(--letter-spacing-03); color: var(--color-white); border: 2rem solid var(--color-white); border-radius: 20rem; cursor: pointer; transition: color .3s, background-color .3s, border-color .3s; }
html.mac .jt-btn__basic { padding-top: 9rem; padding-bottom: 7rem; }
.jt-btn__basic > span { position: relative; }
.jt-btn__basic .jt-icon { width: 12rem; }
.jt-btn__basic .jt-icon svg { overflow: visible; }
.jt-btn__basic .jt-icon path { fill: currentColor; }

.jt-btn__basic.jt-btn--type-02 { color: var(--color-black); border-color: var(--color-black); }

/* UNDERLINE */
.jt-btn__underline { display: inline-block; position: relative; vertical-align: middle; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 800; letter-spacing: var(--letter-spacing-03); color: var(--color-black); cursor: pointer; }
.jt-btn__underline > span { display: inline-block; position: relative; }
.jt-btn__underline > span:after { content: ''; display: block; width: 0; height: 2rem; position: absolute; bottom: -2rem; right: 0; left: auto; background: currentColor; transition: width .4s cubic-bezier(0.165, 0.840, 0.440, 1.000); }



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

.jt-form__fieldset { display: flex; flex-direction: column; }
.jt-form__entry { margin-top: 48rem; }
.jt-form__entry:first-child { margin-top: 0; }
.jt-form__entry:has(.jt-agreement) { margin-top: 16rem; }
.jt-form__data { position: relative; font-size: 0; }
.jt-form__label + .jt-form__data { margin-top: 8rem; }
.jt-form__label + .jt-form__data:has(textarea.jt-form__field) { margin-top: 12rem; }

/* LABEL */
.jt-form__label { display: block; position: relative; font-size: 0; }
.jt-form__label > span { display: inline-block; vertical-align: middle; }
.jt-form--required .jt-form__label:after { content: ''; position: relative; top: -1rem; display: inline-block; vertical-align: super; width: 6rem; height: 6rem; margin-left: 6rem; background: #DF0000; border-radius: 50%; }

/* INPUT */
.jt-form__field { display: inline-block; vertical-align: middle; width: 100%; height: 40rem; margin: 0; padding: 0; font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 500; letter-spacing: var(--letter-spacing-03); border: 0; border-bottom: 1px solid var(--color-gray-300); border-radius: 0; outline: none; background: var(--color-white); box-sizing: border-box; transition: border .3s; opacity: 1; }
textarea.jt-form__field { height: 248rem; padding: 12rem 16rem; border: 1px solid var(--color-gray-300); overflow: auto; resize: none; }
.jt-form__field:focus { border-color: var(--color-black); }
.jt-form__field:disabled, .jt-form__field:read-only { border-color: var(--color-gray-300); }

/* EXPLAIN */
.jt-form__explain { display: block; margin-top: 8rem; color: var(--color-gray-900); }

/* VALIDITY */
.jt-form__valid { display: block; margin-top: 8rem; color: #DF0000; }
.jt-form__valid:empty { display: none; }

/* CHECKBOX, RADIO */
.jt-checkbox, .jt-radiobox { display: flex; flex-wrap: wrap; gap: 2rem 24rem; margin-top: -2rem; margin-bottom: -2rem; position: relative; }
.jt-checkbox input, .jt-radiobox input { position: absolute; opacity: 0; cursor: pointer; }
.jt-checkbox label, .jt-radiobox label { padding: 2rem 0; font-size: 0; cursor: pointer; }
.jt-checkbox label > span, .jt-radiobox label > span { padding-left: 40rem; position: relative; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 800; letter-spacing: var(--letter-spacing-03); color: var(--color-gray-600); }
.jt-checkbox label > span:before, .jt-radiobox label > span:before { content: ''; display: block; width: 24rem; height: 24rem; position: absolute; top: -1rem; left: 0; border: 1px solid var(--color-gray-400); transition: border .3s, background-color .1s; box-sizing: border-box; }
.jt-checkbox label > span:after, .jt-radiobox label > span:after { content: ''; display: none; position: absolute; box-sizing: border-box; }
.jt-checkbox label > span:after { width: 8rem; height: 12rem; left: 8rem; top: 3rem; border: solid var(--color-white); border-width: 0 2rem 2rem 0; transform: rotate(45deg); }
.jt-radiobox label > span:before { border-radius: 50%; }
.jt-radiobox label > span:after { width: 10rem; height: 10rem; left: 7rem; top: 6rem; background: var(--color-white); border-radius: 50%; }
.jt-checkbox input:checked + span:before, .jt-radiobox input:checked + span:before { background: var(--color-primary); border-color: var(--color-primary); }
.jt-checkbox input:disabled + span:before, .jt-radiobox input:disabled + span:before, .jt-checkbox input:disabled:checked + span:before, .jt-radiobox input:disabled:checked + span:before { border-color: var(--color-gray-300); background: var(--color-gray-300); }
.jt-checkbox input:checked + span:after, .jt-radiobox input:checked + span:after { display: block; }
.jt-checkbox input:disabled + span:before, .jt-radiobox input:disabled + span:before, .jt-checkbox input:disabled:checked + span:before, .jt-radiobox input:disabled:checked + span:before { border-color: var(--color-gray-300); background: var(--color-gray-300); }
.jt-checkbox input:disabled + span:after { border-color: var(--color-gray-500); }
.jt-radiobox input:disabled + span:after { background: var(--color-gray-500); }

/* CHOICES */
.jt-choices__wrap { position: relative; }

html.desktop .jt-choices { opacity: 0; } /* fix FOUC */

.choices { margin-bottom: 0; font-size: var(--font-size-primary-08); }
.choices__inner { display: block; min-height: inherit; height: 40rem; padding: 6rem 30rem 6rem 0; font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 500; letter-spacing: var(--letter-spacing-03); background: var(--color-white); border: 0; border-bottom: 1px solid var(--color-gray-300); border-radius: 0; transition: border-color .3s; }
.choices__placeholder { color: var(--color-gray-600); opacity: 1; }

.choices[data-type*=select-one] .choices__inner { padding-bottom: 6rem; }
.choices[data-type*=select-one]::after { content: ''; width: 20rem; height: 100%; margin: 0; right: 0; top: 0; border: none; background: url(../images/icon/icon-select.svg) no-repeat center center; background-size: 100% auto; transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); }

.choices__list--single { display: block; padding: 0; }

.choices__list--dropdown, 
.choices__list[aria-expanded] { border: 1px solid var(--color-black); border-radius: 0; }
.choices__list--dropdown .choices__item, 
.choices__list[aria-expanded] .choices__item { padding: 8rem 16rem; font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 500; letter-spacing: var(--letter-spacing-03); color: var(--color-gray-600); transition: background-color .3s; }

.is-open .choices__inner,
.is-flipped.is-open .choices__inner { border-radius: 0; }

.is-focused .choices__inner, 
.is-open .choices__inner { border-color: var(--color-black); }

.choices[data-type*=select-one].is-open::after { margin-top: 0; border: none; transform: rotate(-180deg); }

.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] { border-color: inherit; }

.choices__list--dropdown .choices__item--selectable.is-highlighted, 
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background: var(--color-gray-100); }
.choices__list--dropdown .choices__item--selectable.is-selected,
.choices__list[aria-expanded] .choices__item--selectable.is-selected { color: var(--color-black); }

html.mobile .jt-choices__wrap { background: var(--color-white); overflow: hidden; }
html.mobile .jt-choices__wrap:before { content: ''; width: 20rem; height: 20rem; position: absolute; top: 50%; right: 0; background: url(../images/icon/icon-select.svg) no-repeat center center; background-size: contain; transform: translate(0, -50%); }
html.mobile .jt-choices__wrap > select { appearance: none; width: 100%; margin: 0; height: 40rem; padding: 0 30rem 0 0; position: relative; font-family: var(--font-primary); font-size: var(--font-size-primary-07); line-height: 40rem; font-weight: 500; letter-spacing: var(--letter-spacing-03); color: var(--color-black); background: transparent; border: 0; border-bottom: 1px solid var(--color-gray-300); border-radius: 0; outline: none; box-shadow: none; opacity: 1; box-sizing: border-box; }
html.mobile .jt-choices__wrap > select:focus { border-color: var(--color-black); }
html.mobile .jt-choices__wrap > select:invalid { color: var(--color-gray-600); }

/* EMAIL AUTOCOMPLETE */
.jt-automail { position: relative; }

.jt-automail__list { width: 100%; position: absolute; top: calc(100% - 1px); left: 0; background: var(--color-white); border: 1px solid var(--color-black); z-index: 1; overflow: hidden; }
.jt-automail__list > li { padding: 10rem 18rem; font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 500; letter-spacing: var(--letter-spacing-03); color: var(--color-black); cursor: pointer; transition: background .3s; }
.jt-automail__list > li > span { color: var(--color-black); }
.jt-automail__list > li.jt-automail--focus { background: var(--color-gray-100); }

/* CONTROL */
.jt-form__control { text-align: center; }
.jt-form__action { display: inline-block; padding: 8rem 18rem; position: relative; vertical-align: middle; font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 800; letter-spacing: var(--letter-spacing-03); color: var(--color-black); text-align: center; background: transparent; border: 2rem solid var(--color-black); border-radius: 21rem; box-sizing: border-box; transition: color .3s, background-color .3s; cursor: pointer; overflow: hidden; }

/* AGREEMENT */
.jt-agreement .jt-checkbox label > span > a { position: relative; display: inline-block; }
.jt-agreement .jt-checkbox label > span > a:after { content: ''; position: absolute; left: 0; width: 100%; bottom: -2rem; height: 2rem; background: currentColor }

/* LOADING */
.jt-form__loading { display: flex; align-items: center; justify-content: center; gap: 8rem; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--color-white); visibility: visible; opacity: 0; transition: opacity .3s, visibility .3s; }
.jt-form__loading-circle { display: block; width: 8rem; height: 8rem; background: var(--color-black); border-radius: 50%; animation: LoadingBounce 1s infinite ease-in-out; }
.jt-form__loading-circle:nth-child(2) { animation-delay: 0.1s; }
.jt-form__loading-circle:nth-child(3) { animation-delay: 0.2s; }

.jt-form--loading .jt-form__action { pointer-events: none; }
.jt-form--loading .jt-form__loading { visibility: visible; opacity: 1; }



/* **************************************** *
 * CATEGORY
 * **************************************** */
.jt-category { margin-top: 24rem; padding-bottom: 4rem; margin-bottom: -4rem; overflow: visible; }
.jt-category__list { justify-content: center; gap: 12rem; }
.jt-category__item { width: auto; }
.jt-category__item > a { display: flex; padding: 6rem 18rem; border-radius: 18rem; text-transform: uppercase; border: 2rem solid var(--color-black); transition: color .3s, background-color .3s; }

/* Active */
.jt-category--active > a { background-color: var(--color-black); color: var(--color-white); }



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

.jt-search__field { position: relative; }
.jt-search__input { display: block; width: 100%; height: 52rem; margin: 0; padding: 0 180rem 15rem 0; font-size: var(--font-size-primary-04); line-height: var(--font-lineheight-primary-04); font-weight: 800; letter-spacing: var(--letter-spacing-03); text-overflow: ellipsis; background: transparent; border: 0; border-bottom: 3rem solid var(--color-black); border-radius: 0; outline: none; opacity: 1; box-sizing: border-box; }
.jt-search__label { position: absolute; top: calc(var(--font-lineheight-primary-04) / 2); left: 0; transform: translateY(-50%); font-size: var(--font-size-primary-04); line-height: var(--font-lineheight-primary-04); font-weight: 800; letter-spacing: var(--letter-spacing-03); color: var(--color-black); cursor: text; }

/* SUBMIT */
.jt-search__submit { display: block; margin: 0; padding: 6rem 18rem; color: var(--color-black); border: 2rem solid var(--color-black); position: absolute; right: 0; top: 0; background: none; border-radius: 18rem; cursor: pointer; transition: background .3s, color .3s; }
.jt-search__submit .jt-icon { display: none; }

/* CLEAR */
.jt-search__reset { display: block; width: 24rem; margin: 0; padding: 0; position: absolute; right: 132rem; top: 6rem; background: none; border: none; cursor: pointer; opacity: 0; transition: opacity .15s; }
.jt-search__reset:before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; background: var(--color-black); border-radius: 50%; }
.jt-search__reset .jt-icon { position: relative; width: 100%; vertical-align: top; }
.jt-search__reset .jt-icon path { fill: var(--color-gray-200); }

/* ACTIVE */
.jt-search__bundle.jt-search--active .jt-search__label { opacity: 0; visibility: hidden; }
.jt-search__bundle.jt-search--active .jt-search__reset { opacity: 1; visibility: visible; }



/* **************************************** *
 * PAGINATION
 * **************************************** */
.jt-pagination { margin-top: 60rem; 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: 26rem; height: 28rem; margin: 0 8rem; position: relative; font-size: var(--font-size-primary-10); line-height: 28rem; font-weight: 700; letter-spacing: var(--letter-spacing-03); color: var(--color-gray-600); transition: color .3s; }
.jt-pagination .jt-pagination__numbers:after { content: ''; display: block; width: 47%; height: 2rem; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); box-sizing: border-box; }
.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--prev { margin-left: 4rem; margin-right: 7rem; }
.jt-pagination .jt-pagination__numbers.jt-pagination--next { margin-left: 7rem; margin-right: 4rem; }
.jt-pagination .jt-pagination__numbers.jt-pagination--first,
.jt-pagination .jt-pagination__numbers.jt-pagination--last { margin-left: 4rem; margin-right: 4rem; }

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



/* **************************************** *
 * LOADMORE
 * **************************************** */
.jt-loadmore { margin-top: 60rem; font-size: 0; text-align: center; }
.jt-loadmore__btn { display: inline-block; padding: 24rem 24rem 0; }
.jt-loadmore__btn > span { display: block; margin-bottom: 2rem; color: var(--color-black); }
.jt-loadmore__btn .jt-icon { width: 36rem; height: 36rem; transition: transform .3s; }
.jt-loadmore__btn .jt-icon path { fill: var(--color-black); }



/* **************************************** *
 * LIST COMPONENT
 * **************************************** */
/* NOTHING */
.jt-list-nothing { padding: 100rem 32rem; text-align: center; background: var(--color-gray-100); border-radius: 8rem; }
.jt-list-nothing b { display: block; }
.jt-list-nothing p { padding-top: 8rem; color: var(--color-gray-900); }
.jt-list-nothing p span { color: var(--color-primary); }

/* COUNT */
.jt-list-count { position: relative; }
.jt-list-count p { position: absolute; right: 0; top: -60rem; }
.jt-list-count p > span { font-weight: 700; font-feature-settings: 'tnum'; }



/* **************************************** *
 * SINGLE LAYOUT
 * **************************************** */
/* RESET */
body.single .main-container { padding-bottom: 0; }
.main-container:has(.jt-single__header--visual) { padding-top: 0; }

/* LAYOUT */
.jt-single__header { position: relative; margin-bottom: 80rem; text-align: center; }

.jt-single__header--visual .jt-single__title,
.jt-single__header--visual .jt-single__cat,
.jt-single__header--visual .jt-single__desc { color: var(--color-white); }

.jt-single__header-inner { position: relative; display: flex; align-items: center; justify-content: center; height: 760rem; overflow: hidden; }
.jt-single__header-bg { position: absolute; left: 50%; top: 0; min-width: 100%; min-height: 100%; padding-top: 56.25%; background: no-repeat center center / cover; transform: translateX(-50%); }
.jt-single__header-bg:before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.jt-single__header-caption { margin-top: 8rem; color: var(--color-gray-600); text-align: left; }

.jt-single__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8rem; margin-top: 24rem; }
.jt-single__cat { text-transform: uppercase; }
.jt-single__date { color: var(--color-gray-500); }
.jt-single__desc { margin-top: 24rem; }

.jt-single__content { margin-bottom: 120rem; }

/* DETAIL */
.jt-single__detail { margin-bottom: 120rem; }
.jt-single__detail-list > li { display: flex; }
.jt-single__detail-list > li + li { margin-top: 8rem; }
.jt-single__detail-list > li > b { width: 100rem; padding-right: 16rem; }
.jt-single__detail-list > li > span { flex: 1; }

.jt-single__detail-tag { display: flex; flex-wrap: wrap; gap: 8rem; margin-top: 48rem; }
.jt-single__detail-tag > a { padding: 8rem 16rem; background: var(--color-gray-200); color: var(--color-gray-800); border-radius: 20rem; transition: color .3s, background .3s; }

/* SHARE */
.jt-single__share { margin-top: 48rem; }

/* CONTROL */
.jt-single__control { font-size: 0; text-align: center; margin: 48rem 0 80rem; }
.jt-single__control:last-child { margin-bottom: 160rem; }

/* LINK */
.jt-single__link { font-size: 0; text-align: center; margin-top: 70rem; }

/* DIVIDER */
.jt-single__divider { position: relative; text-align: center; }
.jt-single__divider-inner:before { content: ''; position: absolute; left: 0; top: 50%; right: 0; height: 3rem; background: var(--color-black); transform: translateY(-50%); }
.jt-single__divider-logo { position: relative; display: inline-block; padding: 0 24rem; background: var(--color-white); }
.jt-single__divider-logo i { display: inline-block; width: 180rem; }
.jt-single__divider-logo svg { width: 100%; height: auto; vertical-align: top; }



/* **************************************** *
 * SHARE
 * **************************************** */
.jt-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 16rem; }
.jt-share .jt-share__item { display: block; width: 42rem; height: 42rem; position: relative; background: var(--color-white); border-radius: 50%; transition: .3s; }
.jt-share .jt-share__item:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; background: inherit; border: 2rem solid var(--color-black); box-sizing: border-box; transition: transform .3s; }
.jt-share .jt-share__item .jt-icon { display: block; width: 24rem; margin: 0 auto; position: relative; top: 50%; transform: translate(0, -50%); }

/* CLIPBOARD */
.jt-share__tooltip { padding: 16rem 40rem; position: fixed; left: 50rem; left: 50%; bottom: 40rem; background: var(--color-gray-900); z-index: 501; transform: translate(-50%, 0); opacity: 0; visibility: hidden; }
.jt-share__tooltip p { color: var(--color-white); white-space: nowrap; }



/* **************************************** *
 * SWIPER
 * **************************************** */
.swiper-wrapper { height: auto; }

/* BUTTON */
.swiper-button { transition: opacity .3s; }
.swiper-button { width: 54rem; height: 24rem; }
.swiper-button .jt-icon { width: 100%; height: 100%; }
.swiper-button .jt-icon path { fill: var(--color-black); }
.swiper-button-next, .swiper-button-prev { position: relative; width: auto; height: auto; margin-top: 0; color: inherit; background: transparent; border: 0; padding: 0; left: auto; right: auto; opacity: 1; }
.swiper-button-next:after, .swiper-button-prev:after { display: none; }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .3; }

/* PAGINATION */
.swiper-control { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 0; z-index: 2; opacity: 0; visibility: hidden; }
.swiper-control .swiper-pagination.swiper-pagination-bullets { display: inline-flex; vertical-align: middle; width: auto; position: relative; top: auto; bottom: auto; left: auto; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { position: relative; display: flex; align-items: center; justify-content: center; width: auto; height: auto; background: transparent; opacity: 1; padding: 4rem; margin: 0; vertical-align: top; border-radius: 0; overflow: hidden; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before { content: ''; display: block; width: 8rem; height: 8rem; border-radius: 50%; background: var(--color-gray-400); transition: background .3s; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active:before { background: var(--color-white); }

/* NAVIGATION */
.swiper-navigation { opacity: 0; visibility: hidden; }

/* SOUND */
.swiper-sound { position: absolute; bottom: 22rem; right: 22rem; padding: 0; border: 0; padding: 8rem; background: transparent; cursor: pointer; z-index: 3; transition: opacity .3s; }
.swiper-sound .jt-icon { width: 36rem; vertical-align: top; }
.swiper-sound .jt-icon path { fill: var(--color-white); }
.swiper-sound--off { display: none; }

.swiper--muted .swiper-sound--off { display: block; }
.swiper--muted .swiper-sound--on { display: none; }



/* **************************************** *
 * 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-100); }
.jt-lazyload.jt-lazyload--loaded .jt-lazyload__color-preview { background: transparent; transition: background-color .1s; transition-delay: .3s; }



/* **************************************** *
 * VIDEO
 * **************************************** */
/* Embed Video */
.jt-embed-video { margin-left: auto; margin-right: auto; position: relative; } 
.jt-embed-video__inner { position: relative; width: 100%; padding-top: 56.25%; } 
.jt-embed-video__inner iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; box-sizing: content-box; background: #000 url(../images/layout/spin.png) no-repeat center center; background-size: 32rem 32rem; }
.jt-embed-video__poster { width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer; z-index: 1; }
.jt-embed-video__poster .jt-embed-video__img { display: block; width: 100%; margin: 0; }
.jt-embed-video__overlay { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .5); }
.jt-embed-video__overlay-btn { display: block; width: 60rem; height: 60rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.jt-embed-video__overlay-btn:after { content: ''; display: block; height: 100%; background: no-repeat center center / cover; background-image: url(../images/icon/icon-play.svg); transition: transform 1s cubic-bezier(.23, 1, .32, 1); }

/* 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: 50%; left: 50%; transform: translate(-50%, -50%); 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; }



/* **************************************** *
 * CARD LIST
 * **************************************** */
.jt-card { --item-gap: 16rem; --item-count: 4; margin: 0 calc(var(--item-gap) * -1); overflow: visible; }
.jt-card__item { width: calc(100% / var(--item-count) - (var(--item-gap) * 2)); margin: 0 var(--item-gap); }
.jt-card__item > a { display: block; }
.jt-card__thumb { position: relative; overflow: hidden; }
.jt-card__thumb .jt-lazyload { padding-top: 125%; transition: transform .7s; }
.jt-card__thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-card__thumb .jt-lazyload__color-preview { background-color: var(--color-gray-200); }
.jt-card__thumb .jt-icon { position: absolute; right: 20rem; bottom: 20rem; width: 15rem; opacity: .7; z-index: 1; }
.jt-card__thumb .jt-icon path { fill: var(--color-white); }
.jt-card__content { margin-top: 16rem; }
.jt-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.jt-card__title b { text-decoration: underline; text-decoration-thickness: 2rem; text-decoration-color: transparent; text-underline-offset: 3rem; transition: text-decoration-color .3s; }
.jt-card__info { display: flex; gap: 8rem; margin-top: 4rem; max-width: 100%; }
.jt-card__category { text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-card__date { color: var(--color-gray-500); white-space: nowrap; }

/* Navigator */
.jt-card__navigator { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); display: flex; gap: 24rem; opacity: 0; visibility: hidden; }
.jt-card__navigator .swiper-button { width: 54rem; padding: 10rem 0; }
.jt-card__navigator .swiper-button .jt-icon path { fill: var(--color-black); }

/* Secondary */
.jt-card--secondary { --item-count: 6; }



/* **************************************** *
 * GRID LIST
 * **************************************** */
.jt-grid { display: flex; align-items: flex-start; gap: 32rem; }

.jt-grid__container { flex: 1; max-width: calc(50% - 16rem); }
.jt-grid__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32rem; }
.jt-grid__item > a { display: block; position: relative; }
.jt-grid__thumb { position: relative; overflow: hidden; }
.jt-grid__thumb .jt-lazyload { padding-top: 125%; transition: transform .7s; }
.jt-grid__thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-grid__thumb .jt-icon { position: absolute; right: 20rem; bottom: 20rem; width: 15rem; opacity: .7; z-index: 1; }
.jt-grid__thumb .jt-icon path { fill: var(--color-white); }
.jt-grid__content { margin-top: 16rem; }
.jt-grid__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.jt-grid__title b { text-decoration: underline; text-decoration-thickness: 2rem; text-decoration-color: transparent; text-underline-offset: 3rem; transition: text-decoration-color .3s; }
.jt-grid__info { display: inline-flex; gap: 8rem; margin-top: 4rem; max-width: 100%; }
.jt-grid__category { text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-grid__date { flex: 1; color: var(--color-gray-500); white-space: nowrap; }

/* Sticky */
.jt-grid__sticky { flex: 1; max-width: calc(50% - 16rem); position: sticky; top: 32rem; }
.jt-grid__sticky .jt-grid__item > a:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 62.53%, rgba(0, 0, 0, 0.7) 100%); z-index: 1; }
.jt-grid__sticky .jt-grid__content { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; text-align: center; padding: 0 40rem 50rem; }
.jt-grid__sticky .jt-grid__title b { color: var(--color-white); text-underline-offset: 5rem; }
.jt-grid__sticky .jt-grid__info { margin-top: 6rem; }
.jt-grid__sticky .jt-grid__thumb .jt-icon { width: 21rem; }

/* Reverse */
.jt-grid--reverse .jt-grid__sticky { order: 2; }
.jt-grid--reverse .jt-grid__container { order: 1; }



/* **************************************** *
 * COLUMN LIST
 * **************************************** */
.jt-column { display: grid; gap: 32rem; }
.jt-column--secondary, .jt-column:has(.jt-column--secondary) { gap: 60rem; }
.jt-column__list { --item-gap: 16rem; --item-count: 3; margin: 0 calc(var(--item-gap) * -1); }
.jt-column__item { width: calc(100% / var(--item-count) - (var(--item-gap) * 2)); margin: 0 var(--item-gap); }
.jt-column__item > a { display: block; position: relative; }
.jt-column__item > a:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 62.53%, rgba(0, 0, 0, 0.7) 100%); z-index: 1; }
.jt-column__thumb { position: relative; overflow: hidden; }
.jt-column__thumb .jt-lazyload { padding-top: 125%; transition: transform .7s; }
.jt-column__thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-column__thumb .jt-lazyload__color-preview { background-color: var(--color-gray-200); }
.jt-column__thumb .jt-icon { position: absolute; right: 20rem; bottom: 20rem; width: 15rem; opacity: .7; z-index: 1; }
.jt-column__thumb .jt-icon path { fill: var(--color-white); }
.jt-column__content { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; text-align: center; padding: 0 40rem 50rem; }
.jt-column__title { color: var(--color-white); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.jt-column__title b { text-decoration: underline; text-decoration-thickness: 2rem; text-decoration-color: transparent; text-underline-offset: 3rem; transition: text-decoration-color .3s; }
.jt-column__info { display: inline-flex; gap: 8rem; margin-top: 6rem; max-width: 100%; }
.jt-column__category { text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-column__date { flex: 1; color: var(--color-gray-500); white-space: nowrap; }

/* Secondary */
.jt-column--secondary .jt-column__item > a:before { display: none; }
.jt-column--secondary .jt-column__content { position: relative; text-align: left; padding: 0; margin-top: 16rem; }
.jt-column--secondary .jt-column__title { color: var(--color-black); }
.jt-column--secondary .jt-column__info { margin-top: 4rem; }



/* **************************************** *
 * SCROLLER SLIDER
 * **************************************** */
.jt-scroller { display: flex; --item-gap: 32rem; --item-count: 3; --button-width: 54rem; --navi-gap: 24rem; --item-width: calc((100% - (var(--item-gap) * (var(--item-count) - 1))) / var(--item-count)); }
.jt-scroller__head  { position: relative; flex: 1; padding-right: var(--item-gap); padding-left: calc((100% - 1360rem) / 2); background: var(--color-gray-900); z-index: 2; }
.jt-scroller__title { color: var(--color-white); margin-bottom: 36rem; }
.jt-scroller__body { width: calc(100% - 348rem - ((100% - 1360rem) / 2)); padding-right: calc((100% - 1360rem) / 2); }
.jt-scroller__slider { height: auto; overflow: visible; }
.jt-scroller__slider .swiper-navigation { display: flex; gap: var(--navi-gap); align-items: center; justify-content: flex-end; margin-top: 80rem; }
.jt-scroller__slider .swiper-progress { position: relative; display: block; height: 2rem; width: calc((var(--item-width) * 2 + var(--item-gap)) - (var(--button-width) * 2 + var(--navi-gap) * 2)); background: rgba(255, 255, 255, .2); }
.jt-scroller__slider .swiper-progress__bar { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--color-white); transform: scaleX(0); transform-origin: 0 0; }
.jt-scroller__slider .swiper-button .jt-icon { width: var(--button-width); }
.jt-scroller__slider .swiper-button .jt-icon path { fill: var(--color-white); }
.jt-scroller__item { width: var(--item-width); margin-right: var(--item-gap); }
.jt-scroller__item:last-child { margin-right: 0; }
.jt-scroller__thumb { overflow: hidden; }
.jt-scroller__thumb .jt-lazyload { padding-top: 125%; transition: transform .7s; }
.jt-scroller__thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-scroller__thumb .jt-lazyload__color-preview { background-color: var(--color-gray-800); }
.jt-scroller__content { margin-top: 16rem; }
.jt-scroller__content-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: var(--color-white); }
.jt-scroller__category { display: block; margin-top: 6rem; color: var(--color-gray-500); }
.jt-scroller__footer { display: none; }



/* **************************************** *
 * THUMB LIST
 * **************************************** */
.jt-thumb-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 60rem 32rem; }
.jt-thumb-list__thumb { position: relative; overflow: hidden; }
.jt-thumb-list__thumb .jt-lazyload { padding-top: 125%; transition: transform .7s; }
.jt-thumb-list__thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-thumb-list__thumb .jt-icon { position: absolute; bottom: 20rem; right: 20rem; width: 15rem; opacity: .7; z-index: 1; }
.jt-thumb-list__thumb .jt-icon path { fill: var(--color-white); }
.jt-thumb-list__state { position: absolute; left: 10rem; top: 10rem; padding: 2rem 8rem; color: var(--color-white); background: var(--color-black); border-radius: 11rem; z-index: 1; }
.jt-thumb-list__state--ended { background: var(--color-gray-600); }
.jt-thumb-list__content { margin-top: 16rem; }
.jt-thumb-list__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.jt-thumb-list__title b { text-decoration: underline; text-decoration-thickness: 2rem; text-decoration-color: transparent; text-underline-offset: 4rem; transition: text-decoration-color .3s; }
.jt-thumb-list__info { display: inline-flex; gap: 8rem; margin-top: 4rem; max-width: 100%; }
.jt-thumb-list__category { text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-thumb-list__range { color: var(--color-gray-500); }
.jt-thumb-list__date { flex: 1; color: var(--color-gray-500); white-space: nowrap; }
.jt-thumb-list__tags { display: flex; flex-wrap: wrap; gap: 2rem 6rem; margin-top: 10rem; }
.jt-thumb-list__tags > span { color: var(--color-black); }
.jt-thumb-list__desc { margin-top: 8rem; }

/* Secondary wide image */
.jt-thumb-list--secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jt-thumb-list--secondary .jt-thumb-list__thumb .jt-lazyload { padding-top: 61.8%; }
.jt-thumb-list--secondary .jt-thumb-list__content { text-align: center; }



/* **************************************** *
 * BANNER
 * **************************************** */
.jt-banner { position: relative; }
.jt-banner__container { position: relative; }
.jt-banner__link { display: block; }
.jt-banner__media { position: relative; }
.jt-banner__media .jt-lazyload { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.jt-banner__content { position: absolute; left: 0; width: 100%; }
.jt-banner__title { color: var(--color-white); }

.jt-banner--mobile { display: none; }

/* Top */
.jt-banner--top { position: fixed; top: 0; left: 0; width: 100%; background: var(--color-black); overflow: hidden; }
.jt-banner--top .jt-banner { height: 100%; }
.jt-banner--top .jt-banner__container { height: 100%; }
.jt-banner--top .jt-banner__media { padding-top: var(--maximize-top-height, 0); transition: opacity .3s; }
.jt-banner--top .jt-banner__media img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.jt-banner--top .jt-banner__content { top: 50%; transform: translateY(-50%); text-align: center; opacity: 0; visibility: hidden; transition: opacity .3s; }
.jt-banner--top .jt-banner__sound { bottom: 14rem; right: 22rem; }

body.jt-minimize-layout .jt-banner--top { height: var(--minimize-top-height, 0); z-index: 501; }
body.jt-minimize-layout .jt-banner--top .jt-banner__media { opacity: 0; visibility: hidden; }
body.jt-minimize-layout .jt-banner--top .jt-banner__content { opacity: 1; visibility: visible; }
body.jt-minimize-layout .jt-banner--top .jt-banner__sound { opacity: 0; visibility: hidden; }

body:has(.jt-banner--top) { --minimize-top-height: 0; --maximize-top-height: 10.41%; position: relative; margin-top: var(--maximize-top-height, 0); }
body:has(.jt-banner--top) #header { position: absolute; }
body:has(.jt-banner--top) .minimize#header { position: fixed; top: var(--minimize-top-height, 0); }
body:has(.jt-banner--top).open-menu-fixed { --maximize-top-height: 0; --minimize-top-height: 0; }
body:has(.jt-banner--top .jt-banner__content) { --minimize-top-height: 50rem; }

/* Cover */
.jt-banner--cover:before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); z-index: 1; }
.jt-banner--cover .jt-banner__media { aspect-ratio: 1 / 0.5588; }
.jt-banner--cover .jt-banner__media:before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 62.53%, rgba(0, 0, 0, 0.50) 100%); z-index: 1; }
.jt-banner--cover .jt-banner__media .jt-lazyload { height: 100%; }
.jt-banner--cover .jt-banner__media .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-banner--cover .jt-banner__content { position: absolute; left: 0; bottom: 0; width: 100%; text-align: center; padding: 0 40rem 80rem; z-index: 1; pointer-events: none; }
.jt-banner--cover .jt-banner__title { color: var(--color-white); }
.jt-banner--cover .jt-banner__info { display: inline-flex; gap: 8rem; margin-top: 16rem; }
.jt-banner--cover .jt-banner__info span { color: var(--color-white); }
.jt-banner--cover .jt-banner__info time { color: var(--color-gray-500); }
.jt-banner--cover .jt-banner__sound { bottom: 22rem; right: 22rem; }
.jt-banner--cover .jt-banner__sound .jt-icon { width: 36rem; }

/* Middle */
.jt-banner--middle { height: 200vh; }
.jt-banner--middle .jt-banner__container { position: sticky; top: 0; }
.jt-banner--middle .jt-banner__media { height: 100vh; }
.jt-banner--middle .jt-banner__media .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-banner--middle .jt-banner__content { bottom: 0; padding: 50rem 0; }

/* Bottom */
.jt-banner--bottom .jt-banner__media { padding-top: 23.52%; }
.jt-banner--bottom .jt-banner__content { bottom: 0; padding: 50rem 60rem; }

/* Close */
.jt-banner__close { position: absolute; top: 22rem; right: 22rem; width: 40rem; height: 40rem; padding: 8rem; background: transparent; border: 0; cursor: pointer; transition: opacity .3s; }
.jt-banner__close .jt-icon { width: 100%; height: 100%; }
.jt-banner__close .jt-icon path { fill: var(--color-white); }

/* Sound */
.jt-banner__sound { position: absolute; bottom: 20rem; right: 20rem; padding: 0; border: 0; padding: 8rem; background: transparent; cursor: pointer; z-index: 1; transition: opacity .3s; }
.jt-banner__sound .jt-icon { width: 24rem; vertical-align: top; }
.jt-banner__sound .jt-icon path { fill: var(--color-white); }
.jt-banner__sound--off { display: none; }

.jt-banner--muted .jt-banner__sound--off { display: block; }
.jt-banner--muted .jt-banner__sound--on { display: none; }



/* **************************************** *
 * POPUP
 * **************************************** */
.jt-popup { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; overflow: auto; scrollbar-width: none; overscroll-behavior: none; opacity: 0; visibility: hidden; }
.jt-popup::-webkit-scrollbar { display: none; }
.jt-popup__overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .6); }
.jt-popup__container { position: relative; width: 1360rem; max-width: calc(100% - 240rem); margin: 0 auto; }
/* TODO START : 사이즈 고정 없이 사용할때 */
/* .jt-popup__container-inner { position: relative; width: 1360rem; max-width: calc(100% - 240rem); max-height: calc(100vh - 180rem); margin: 0 auto; font-size: 0; }
.jt-popup__item { align-self: center; }
.jt-popup__item .jt-banner__container { max-width: 100%; max-height: calc(100vh - 180rem); margin: 0 auto; }
.jt-popup__item .jt-banner__container:has(.jt-background-video) { aspect-ratio: 1 / 0.5588; }
.jt-popup__media { position: relative; height: 100%; text-align: center; }
.jt-popup__media img { max-width: 100%; max-height: calc(100vh - 180rem); } */
/* TODO END */
/* TODO START : 사이즈 고정 */
.jt-popup__item .jt-banner__container { position: relative; max-height: calc(100vh - 180rem); aspect-ratio: 1 / 0.5588; margin: 0 auto; }
.jt-popup__media { position: absolute; inset: 0; }
.jt-popup__media > a { display: block; height: 100%; }
.jt-popup__media img { width: 100%; height: 100%; object-fit: cover; }
/* TODO END */
.jt-popup__title { display: block; color: var(--color-white); margin-top: 8rem; }
.jt-popup__close { position: fixed; right: 50rem; top: 50rem; display: flex; align-items: center; gap: 8rem; border: 0; padding: 10rem; background: none; cursor: pointer; z-index: 1; transition: opacity .3s; }
.jt-popup__close span { color: var(--color-white); }
.jt-popup__close .jt-icon { width: 24rem; }
.jt-popup__close .jt-icon path { fill: var(--color-white); }

/* Slider */
.jt-popup__slider { overflow: visible; }
.jt-popup__slider .swiper-button { position: fixed; width: 64rem; height: 64rem; top: 50%; transform: translateY(-50%); opacity: .6; transition: opacity .3s; }
.jt-popup__slider .swiper-button .jt-icon path { fill: var(--color-white); }
.jt-popup__slider .swiper-button-prev { left: 60rem; }
.jt-popup__slider .swiper-button-next { right: 60rem; }
.jt-popup__slider .swiper-control { position: fixed; bottom: 28rem; }
.jt-popup__slider .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { padding: 8rem; }
.jt-popup__slider .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before { width: 12rem; height: 12rem; }



/* **************************************** *
 * NEWSLETTER
 * **************************************** */
.jt-newsletter { position: fixed; left: 0; right: 0; bottom: 0; background: #2E8288; z-index: 500; opacity: 0; visibility: hidden; }
.jt-newsletter__inner { display: flex; gap: 60rem; justify-content: space-between; align-items: center; padding: 40rem 0; }
.jt-newsletter__title { color: var(--color-white); }
.jt-newsletter__desc { color: var(--color-white); margin-top: 8rem; }
.jt-newsletter__close { position: absolute; right: 20rem; top: 20rem; padding: 10rem; cursor: pointer; transition: opacity .3s; }
.jt-newsletter__close .jt-icon { width: 24rem; }
.jt-newsletter__close .jt-icon path { fill: var(--color-white); }



/* **************************************** *
 * ACCORDION
 * **************************************** */
.jt-accordion__item { border-top: 2rem solid var(--color-black); }
.jt-accordion__head { position: relative; display: flex; align-items: flex-start; gap: 24rem; padding: 24rem 56rem 24rem 12rem; cursor: pointer; transition: background .3s; }
.jt-accordion__title { flex: 1; font-size: 0; }
.jt-accordion__title b { text-decoration: underline; text-decoration-thickness: 2rem; text-decoration-color: transparent; text-underline-offset: 3rem; transition: text-decoration-color .3s; }
.jt-accordion__date { position: relative; top: calc((var(--font-lineheight-primary-05) - var(--font-lineheight-secondary-10)) / 2); color: var(--color-gray-600); }
.jt-accordion__control { position: absolute; right: 12rem; font-size: 0; display: flex; align-items: center; height: var(--font-lineheight-primary-05); }
.jt-accordion__control .jt-icon { width: 20rem; transition: transform .3s; }
.jt-accordion__content-inner { padding: 36rem; background: var(--color-gray-100); border-top: 1px solid var(--color-gray-300); display: none; }
.jt-accordion__content-inner .jt-blocks > *,
.jt-accordion__content-inner .jt-blocks > *.alignwide,
.jt-accordion__content-inner .jt-blocks > *:not(.alignfull) { margin-left: 0; margin-right: 0; }
.jt-accordion .jt-accordion__item.jt-accordion--active .jt-accordion__control .jt-icon { transform: rotate(-180deg); }



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

.jt-confirm__container { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 36rem; vertical-align: middle; width: calc(100% - 28rem); max-width: 480rem; min-height: 280rem; padding: 80rem; background: var(--color-white); border-radius: 30rem; overflow: hidden; }

.jt-confirm__content { display: flex; align-items: center; justify-content: center; }
.jt-confirm__content p { font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); font-weight: 800; letter-spacing: var(--letter-spacing-03); word-wrap: break-word; word-break: keep-all; }

.jt-confirm__actions { display: flex; flex-wrap: nowrap; justify-content: center; }
.jt-confirm__btn { padding: 8rem 18rem; font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 800; letter-spacing: var(--letter-spacing-03); color: inherit; background-color: var(--color-white); border: 2rem solid var(--color-black); border-radius: 21rem; cursor: pointer; transition: color .3s, background-color .3s; }

.jt-confirm--choice .jt-confirm__btn { width: 50%; }
.jt-confirm--choice .jt-confirm__btn:first-child { border-right-width: 1px; }
.jt-confirm--choice .jt-confirm__btn.jt-confirm--cancel { color: var(--color-gray-800); }



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



/* **************************************** *
 * JT CURSOR
 * **************************************** */
.jt-cursor { width: 60rem; height: 60rem; position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none; }
.jt-cursor__inner { display: block; width: 100%; height: 100%; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.jt-cursor__circle { display: flex; align-items: center; justify-content: center; width: 0; height: 0; position: absolute; top: 50%; left: 50%; background: color-mix(in srgb, var(--color-black) 30%, transparent 70%); border-radius: 50%; transform: translate(-100%, -100%); overflow: hidden; opacity: 0; }
.jt-cursor__circle .jt-icon { display: block; width: 20rem; }
.jt-cursor__circle .jt-icon path { fill: var(--color-white); }
.jt-cursor__circle .jt-icon:has(.drag) { width: 42rem; }



/* **************************************** *
 * ANIMATION KEYFRAME
 * **************************************** */
@keyframes LoadingBounce {
    0% { transform: translate3d(0, 0, 0); }
    20% { transform: translate3d(0, -4rem, 0); }
    40% { transform: translate3d(0, 0, 0); }
}



/* **************************************** *
 * PORTRAIT
 * **************************************** */
@media (orientation: portrait) {
    
    /* BANNER */
    /* .jt-banner--middle .jt-banner__media { height: auto; padding-top: 49.84%; } */

}



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

    /* BUTTON */
    .jt-btn__basic:hover { color: var(--color-black); background-color: var(--color-white); }
    .jt-btn__basic.jt-btn--type-02:hover { color: var(--color-white); background-color: var(--color-black); }
    
    .jt-btn__underline:hover > span:after { width: 100%; left: 0; right: auto; }

    /* FORM */
    .jt-form__action:hover { background-color: var(--color-black); color: var(--color-white); }
    .jt-automail__list > li:hover { background: var(--color-gray-100); }

    /* CATEGORY */
    .jt-category__item > a:hover { background-color: var(--color-black); color: var(--color-white); }

    /* SEARCH */
    .jt-search__submit:hover { color: var(--color-white); background: var(--color-black); }

    /* LOADMORE */
    .jt-loadmore__btn:hover .jt-icon { transform: translateY(6rem); }
    
    /* SINGLE */
    .jt-single__detail-tag > a:hover { background: var(--color-gray-300); color: var(--color-black); }

    /* SHARE */
    .jt-share .jt-share__item:hover { background: var(--color-black); }
    .jt-share .jt-share__item:hover:before { transform: scale(1.24); }
    .jt-share .jt-share__item:hover .jt-icon path { fill: var(--color-white); }

    /* SWIPER */
    .swiper-sound:hover { opacity: .5 !important; }

    /* VIDEO */
    .jt-embed-video__overlay:hover .jt-embed-video__overlay-btn:after { transform: scale(1.1); }
    .jt-banner__sound:hover { opacity: .5; }
    
    /* CARD LIST */
    .jt-card__item > a:hover .jt-card__thumb .jt-lazyload { transform: scale(1.05); }
    .jt-card__item > a:hover .jt-card__title b { text-decoration-color: currentColor; }

    /* GRID LIST */
    .jt-grid__item > a:hover .jt-grid__thumb .jt-lazyload { transform: scale(1.05); }
    .jt-grid__item > a:hover .jt-grid__title b { text-decoration-color: currentColor; }

    /* THUMB LIST */
    .jt-thumb-list__item > a:hover .jt-thumb-list__thumb .jt-lazyload { transform: scale(1.05); }
    .jt-thumb-list__item > a:hover .jt-thumb-list__title b { text-decoration-color: currentColor; }

    /* CULUMN LIST */
    .jt-column__item > a:hover .jt-column__thumb .jt-lazyload { transform: scale(1.05); }
    .jt-column__item > a:hover .jt-column__title b { text-decoration-color: currentColor; }

    /* SCROLLER */
    .jt-scroller__item > a:hover .jt-scroller__thumb .jt-lazyload { transform: scale(1.05); }

    /* BANNER */
    .jt-banner__close:hover { opacity: .5; }

    /* POPUP */
    .jt-popup__close:hover { opacity: .5; }
    .jt-popup__slider .swiper-button:hover { opacity: 1; }

    /* NEWSLETTER */
    .jt-newsletter__close:hover { opacity: .5; }

    /* ACCORDION */
    .jt-accordion__head:hover .jt-accordion__title b { text-decoration-color: currentColor; }

    /* CONFIRM */
    .jt-confirm__btn:hover { color: var(--color-white); background-color: var(--color-black); }

}