@charset "utf-8";

/*
 * File    : jt-strap.css
 * Author  : STUDIO-JT (KMS)
 *
 * SUMMARY :
 * A11Y
 * TYPOGRAPHY
 * JT GUIDE
 * BUTTON
 * FORM
 * CATEGORY
 * SEARCH
 * LOADMORE
 * LIST COMPONENT
 * SINGLE LAYOUT
 * SHARE
 * ATTACHMENTS
 * TAG
 * TABS
 * SWIPER
 * LAZYLOAD
 * SCROLL
 * VIDEO
 * GRID LIST
 * BOARD LIST
 * JT CONFIRM
 * 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: 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--01 { font-size: var(--font-size-primary-01); line-height: var(--font-lineheight-primary-01); font-weight: 700; letter-spacing: var(--letter-spacing-02); }
.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-02); }
.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-01); }
.jt-typo--04 { font-size: var(--font-size-primary-04); line-height: var(--font-lineheight-primary-04); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--05 { font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); font-weight: 500; letter-spacing: var(--letter-spacing-01); }
.jt-typo--06 { font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-06); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--07 { font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-07); font-weight: 500; letter-spacing: var(--letter-spacing-01); }
.jt-typo--08 { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-08); font-weight: 500; letter-spacing: var(--letter-spacing-01); }
.jt-typo--09 { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-09); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--10 { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 300; letter-spacing: var(--letter-spacing-01); }
.jt-typo--11 { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); }
.jt-typo--12 { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--13 { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-11); font-weight: 500; letter-spacing: var(--letter-spacing-01); }
.jt-typo--14 { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-11); font-weight: 700; letter-spacing: var(--letter-spacing-01); }


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

/* ACCENT ICON */
.jt-accent-icon { display: inline-block; }
.jt-accent-icon svg { display: block; width: 100%; height: auto; overflow: visible; }
.jt-accent-icon path { transition: fill .3s; }

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



/* **************************************** *
 * BUTTON
 * **************************************** */
/* TEXT */
.jt-btn__text { display: inline-flex; align-items: center; gap: 4rem; padding: 5rem 0; position: relative; font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-09); font-weight: 700; letter-spacing: var(--letter-spacing-01); color: var(--color-white); cursor: pointer; transition: color .3s; will-change: transform; }
.jt-btn__text :is(.jt-icon, .jt-accent-icon) { width: 18rem; position: relative; flex-shrink: 0; }
.jt-btn__text :is(.jt-icon, .jt-accent-icon) path[fill="black"] { fill: var(--color-white); }
.jt-btn__text > span { pointer-events: none; }

.jt-btn__text.jt-btn--small { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-11); }
.jt-btn__text.jt-btn--small :is(.jt-icon, .jt-accent-icon) { width: 10rem; }

.jt-btn__text.jt-btn--type-02 { color: var(--color-gray-400); }
.jt-btn__text.jt-btn--type-02 :is(.jt-icon, .jt-accent-icon) path[fill="black"] { fill: var(--color-gray-400); }
.jt-btn__text.jt-btn--type-03 { color: var(--color-black); }
.jt-btn__text.jt-btn--type-03 :is(.jt-icon, .jt-accent-icon) path[fill="black"] { fill: var(--color-black); }

/* BOX */
.jt-btn__box { display: inline-flex; align-items: center; gap: 4rem; padding: 7rem 9rem; position: relative; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-11); font-weight: 500; letter-spacing: var(--letter-spacing-01); color: var(--color-black); cursor: pointer; border: 1px solid var(--color-black); transition: background-color .3s, color .3s; will-change: transform; }
.jt-btn__box .jt-accent-icon { width: 18rem; position: relative; flex-shrink: 0; }

.jt-btn__box.jt-btn--large { justify-content: center; gap: 8rem; min-width: 240rem; padding: 16rem 37rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 700; border-width: 3rem; }

.jt-btn__box.jt-btn--icon-plus .jt-accent-icon { top: -1rem; }

/* HORIZONTAL */
.jt-btn__horizontal { display: flex; align-items: center; justify-content: space-between; gap: 20rem; padding: 16rem 20rem; position: relative; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing-01); color: var(--color-black); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-gray-300); cursor: pointer; transition: box-shadow .3s ease; will-change: transform; }
.jt-btn__horizontal .jt-accent-icon { width: 18rem; position: relative; flex-shrink: 0; }



/* **************************************** *
 * FORM
 * **************************************** */
/* LAYOUT */
.jt-form { display: flex; flex-direction: column; gap: 40rem; }

.jt-form__fieldset { display: flex; flex-direction: column; gap: 20rem; }
.jt-form__entry { display: flex; gap: 20rem; }
.jt-form__entry-item { flex: 1; display: flex; gap: 20rem; }
.jt-form__data { flex: 1; display: flex; gap: 20rem; }
.jt-form__data-item { width: 460rem; }

.jt-form__data--column { flex-direction: column; }
.jt-form__data--column .jt-form__data-item { width: 100%; }

/* LABEL */
.jt-form__label { display: flex; align-items: center; width: 210rem; height: 50rem; flex-shrink: 0; }

/* INPUT */
.jt-form__field { display: block; width: 100%; height: 50rem; margin: 0; padding: 14rem 20rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); color: var(--color-black); background: var(--color-gray-100); border: none; border-radius: 0; box-shadow: inset 0 0 0 1px var(--color-gray-100); outline: none; box-sizing: border-box; transition: box-shadow .3s ease; opacity: 1; }
textarea.jt-form__field { height: 240rem; overflow: auto; resize: none; }
.jt-form__field:focus { box-shadow: inset 0 0 0 1px var(--color-black); }
.jt-form__field:disabled, 
.jt-form__field:read-only { color: var(--color-gray-300); }

/* VALIDITY */
.jt-form__valid { display: block; margin-top: 10rem; color: var(--color-primary); }
.jt-form__valid:empty { margin-top: 0; }

.jt-form__entry--pair .jt-form__data-item:nth-child(n+2) .jt-form__valid { display: none; }

/* CHECKBOX */
.jt-checkbox, 
.jt-radiobox { display: flex; flex-wrap: wrap; gap: 16rem 40rem; position: relative; }
.jt-checkbox input, 
.jt-radiobox input { position: absolute; opacity: 0; cursor: pointer; }
.jt-checkbox label, 
.jt-radiobox label { font-size: 0; cursor: pointer; }
.jt-checkbox label > span, 
.jt-radiobox label > span { display: block; padding-left: 28rem; position: relative; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); }
.jt-checkbox label > span:before, 
.jt-radiobox label > span:before { content: ''; display: block; width: 18rem; height: 18rem; position: absolute; top: 1rem; left: 0; background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-black); transition: box-shadow .3s ease; 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: 6rem; height: 10rem; top: 3rem; left: 6rem; 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: 8rem; height: 8rem; left: 5rem; top: 6rem; background: var(--color-black); border-radius: 50%; }
.jt-checkbox input:checked + span:after, 
.jt-radiobox input:checked + span:after { display: block; }
.jt-checkbox input:checked + span:before { background: var(--color-black); }
.jt-checkbox input:disabled + span, 
.jt-radiobox input:disabled + span { color: var(--color-gray-300); }
.jt-checkbox input:disabled + span:before, 
.jt-radiobox input:disabled + span:before { box-shadow: inset 0 0 0 1px var(--color-gray-300); background: var(--color-gray-200); }
.jt-checkbox input:disabled + span:after { border-color: var(--color-gray-300); }
.jt-radiobox input:disabled + span:after { background: var(--color-gray-300); }

.jt-form__data :is(.jt-checkbox, .jt-radiobox) { padding: 14rem 0; }

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

.choices { margin-bottom: 0; font-size: var(--font-size-primary-07); }
.choices__inner { display: block; min-height: inherit; padding: 0 50rem 0 19rem; position: relative; font-size: var(--font-size-primary-08); line-height: 48rem; font-weight: 500; letter-spacing: var(--letter-spacing-01); color: var(--color-black); background: var(--color-gray-100); border: 1px solid var(--color-gray-100); border-radius: 0; transition: background-color .3s, border-color .3s; }
.choices__inner:after { content: ''; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0); transition: box-shadow .3s ease; }
.choices__placeholder { color: var(--color-gray-300); opacity: 1; }

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

.choices__list--single { display: block; padding: 0; }
.choices__list--single .choices__item { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.choices__list--dropdown, 
.choices__list[aria-expanded] { border: solid var(--color-black); border-width: 0 1px 1px; border-radius: 0; }
.choices__list--dropdown .choices__item, 
.choices__list[aria-expanded] .choices__item { padding: 14rem 19rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); color: var(--color-black); transition: background-color .3s; }
.is-flipped .choices__list--dropdown, 
.is-flipped .choices__list[aria-expanded] { border-width: 1px 1px 0; border-radius: 0; }

.choices__item--disabled { display: none; }

.choices.is-disabled .choices__inner { background: var(--color-gray-200); border-color: var(--color-gray-200); }
.choices.is-disabled[data-type*=select-one]::after { display: none; }

.is-focused .choices__inner { border-color: var(--color-black); }
.is-open .choices__inner { background: var(--color-white); border-color: var(--color-black); }
.is-open .choices__inner, .is-flipped.is-open .choices__inner { border-radius: 0; }

.choices[data-type*=select-one].is-open::after { margin-top: 0; border: none; transform: rotateX(-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-primary); }

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

html.mobile .jt-choices__wrap { background: var(--color-gray-100); overflow: hidden; }
html.mobile .jt-choices__wrap:before { content: ''; width: 18rem; height: 18rem; position: absolute; top: 50%; right: 16rem; background: url(../images/icon/arrow-small-bottom.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: 50rem; padding: 0 50rem 0 19rem; position: relative; font-family: var(--font-primary); font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); color: var(--color-gray-300); white-space: nowrap; text-overflow: ellipsis; background: transparent; border: 1px solid var(--color-gray-100); border-radius: 0; outline: none; box-shadow: none; opacity: 1; box-sizing: border-box; overflow: hidden; }
html.mobile .jt-choices__wrap > select:valid { color: var(--color-black); }
html.mobile .jt-choices__wrap:has(select[disabled]) { background: var(--color-gray-200); }
html.mobile .jt-choices__wrap:has(select[disabled]):before { display: none; }
html.mobile .jt-choices__wrap > select[disabled] { border-color: var(--color-gray-200); }

/* FILE */
.jt-customfile__inner { display: flex; align-items: center; gap: 20rem; }

.jt-customfile__field { width: fit-content; position: relative; flex-shrink: 0; }
.jt-customfile__input { width: 100%; height: 100%; position: absolute; z-index: 2; opacity: 0; cursor: pointer; }
.jt-customfile__button { display: inline-flex; align-items: center; gap: 8rem; margin: 0; padding: 10rem 16rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); color: var(--color-white); background: var(--color-black); border: none; border-radius: 0; outline: none; box-shadow: none; box-sizing: border-box; transition: background-color .3s; cursor: pointer; }
.jt-customfile__button > span { order: 2; }
.jt-customfile__button > .jt-icon { width: 16rem; order: 1; }
.jt-customfile__button > .jt-icon svg path { fill: var(--color-white); }

.jt-customfile__explain { color: var(--color-gray-300); }

.jt-customfile__list { display: flex; flex-wrap: wrap; gap: 10rem 20rem; margin-top: 20rem; }
.jt-customfile__list:empty { display: none; }
.jt-customfile__item { display: inline-flex; align-items: center; gap: 10rem; }
.jt-customfile__item > span { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); order: 2; }
.jt-customfile__delete { display: block; width: 30rem; height: 30rem; margin: 0; padding: 0; position: relative; background: var(--color-black); border: none; border-radius: 50%; outline: none; box-shadow: none; box-sizing: border-box; transition: background-color .3s; cursor: pointer; order: 1; }
.jt-customfile__delete .jt-icon { display: block; width: 12rem; height: 12rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.jt-customfile__delete .jt-icon svg path { fill: var(--color-white); }

/* CONTROL */
.jt-form__control { font-size: 0; text-align: center; }

.jt-form__action { display: inline-block; min-width: 240rem; padding: 16rem; position: relative; color: var(--color-black); background: var(--color-white); border: 3rem solid var(--color-black); border-radius: 0; box-sizing: border-box; transition: color .3s, background-color .3s; cursor: pointer; }

.jt-form__action-spinner { display: none; width: 72rem; height: 8rem; margin: -4rem 0 0 -36rem; position: absolute; top: 50%; left: 50%; font-size: 0; line-height: 1; text-align: center; }
.jt-form__action-spinner > div { display: inline-block; width: 8rem; height: 8rem; margin: 0 8rem; background: var(--color-gray-300); 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__inner { padding: 30rem; background: var(--color-gray-100); }

.jt-agreement__title { display: block; margin-bottom: 27rem; padding-bottom: 30rem; border-bottom: 3rem solid var(--color-black); }

.jt-agreement__content > b { display: block; margin: 35rem 0 16rem; }
.jt-agreement__content li { position: relative; }
.jt-agreement__content li:before { content: ''; width: 4rem; position: absolute; left: 0; background: var(--color-black); }
.jt-agreement__content > ul { display: flex; flex-direction: column; gap: 10rem; }
.jt-agreement__content > ul > li { padding-left: 12rem; }
.jt-agreement__content > ul > li:before { height: 4rem; top: 9rem; border-radius: 50%; }
.jt-agreement__content > ul > li > ul > li { padding-left: 8rem; }
.jt-agreement__content > ul > li > ul > li:before { height: 1px; top: 10rem; }
.jt-agreement__conten-table { margin-top: 35rem; }
.jt-agreement__conten-table > table { width: 100%; table-layout: fixed; border-top: 1px solid var(--color-black); }
.jt-agreement__conten-table > table :is(th, td) { padding-left: 30rem; padding-right: 30rem; vertical-align: middle; text-align: center; border-bottom: 1px solid var(--color-black); }
.jt-agreement__conten-table > table th { padding-top: 13rem; padding-bottom: 13rem; }
.jt-agreement__conten-table > table td { padding-top: 14rem; padding-bottom: 16rem; }
.jt-agreement__conten-table > table th:nth-child(1),
.jt-agreement__conten-table > table th:nth-child(4) { width: 200rem; }
.jt-agreement__content > *:first-child { margin-top: 0; }
.jt-agreement__content > *:last-child { margin-bottom: 0; }

.jt-agreement__choice { margin-top: 27rem; padding-top: 30rem; border-top: 3rem solid var(--color-black); }
.jt-agreement__choice > b { display: block; margin-bottom: 16rem; color: var(--color-primary); }
.jt-agreement__choice .jt-checkbox label > span { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-09); font-weight: 700; }
.jt-agreement__choice .jt-checkbox label > span:before { top: 5rem; }
.jt-agreement__choice .jt-checkbox label > span:after { top: 7rem; }



/* **************************************** *
 * CATEGORY
 * **************************************** */
.jt-category ul { display: flex; flex-wrap: wrap; }
.jt-category ul li { position: relative; }
.jt-category ul li:not(:first-child):before { content: ''; display: block; width: 1px; height: 14rem; margin-top: -7rem; position: absolute; top: 50%; left: 0; background: var(--color-gray-300); }
.jt-category ul a { display: block; padding: 4rem 10rem 4rem 11rem; color: inherit; transition: color .3s; }
.jt-category ul li:first-child a { padding-left: 0; }
.jt-category ul li:last-child a { padding-right: 0; }
.jt-category ul li.jt-category--active a { color: var(--color-primary); }



/* **************************************** *
 * SEARCH
 * **************************************** */
.jt-search { width: 532rem; }

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

.jt-search__field { position: relative; }
.jt-search__input { display: block; width: 100%; height: 56rem; margin: 0; padding: 1rem 100rem 0 16rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); text-overflow: ellipsis; background: var(--color-white); border: none; border-bottom: 1px solid var(--color-black); border-radius: 0; outline: none; opacity: 1; box-sizing: border-box; transition: border .3s; }

.jt-search__label { position: absolute; top: 18rem; left: 16rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); color: var(--color-black); transition: opacity .26s; cursor: text; }

/* SUBMIT */
.jt-search__submit { display: block; width: 32rem; height: 32rem; margin: 0; padding: 0; position: absolute; right: 12rem; top: 50%; background: none; border: none; cursor: pointer; transform: translate(0, -50%); }
.jt-search__submit .jt-icon { display: block; width: 24rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* CLEAR */
.jt-search__reset { display: block; width: 32rem; height: 32rem; margin: 0; padding: 0; position: absolute; right: 56rem; top: 50%; background: none; border: none; cursor: pointer; transform: translate(0, -50%); opacity: 0; transition: opacity .15s; }
.jt-search__reset:before { content: ''; width: 24rem; height: 24rem; position: absolute; top: 50%; left: 50%; background: var(--color-black); border-radius: 50%; transform: translate(-50%, -50%); transition: background-color .3s; }
.jt-search__reset .jt-icon { display: block; width: 12rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; }
.jt-search__reset .jt-icon path { fill: var(--color-white); }

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



/* **************************************** *
 * LOADMORE
 * **************************************** */
.jt-loadmore { margin-top: 80rem; font-size: 0; text-align: center; }
.jt-loadmore.jt-loadmore--empty { margin-top: 0; }

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

.jt-loadmore.jt-loadmore--loading .jt-loadmore__btn > :is(span, i) { visibility: hidden; }
.jt-loadmore.jt-loadmore--loading .jt-loadmore__btn .jt-loadmore__spinner { display: block; }



/* **************************************** *
 * LIST COMPONENT
 * **************************************** */
/* NOTHING */
.jt-list-nothing { padding: 182rem 64rem; text-align: center; background: var(--color-gray-100); }
.jt-list-nothing b { display: block; }
.jt-list-nothing b:before { content: ''; display: block; width: 80rem; margin: 0 auto 20rem; background: url(../images/modules/icon-notice.svg) no-repeat center / contain; aspect-ratio: 1 / 1; }
.jt-list-nothing b > span { word-break: break-all; color: var(--color-primary); }

.jt-list-nothing.jt-list-nothing--secondary { display: flex; flex-direction: column; justify-content: center; gap: 10rem; min-height: 500rem; }
.jt-list-nothing.jt-list-nothing--secondary > b:before { display: none; }
.jt-list-nothing.jt-list-nothing--secondary > b:after { content: ''; display: inline-block; vertical-align: baseline; width: 6rem; height: 6rem; margin-left: 4rem; position: relative; background: var(--color-primary); }
.jt-list-nothing.jt-list-nothing--secondary > p:after { content: ''; display: inline-block; vertical-align: baseline; width: 4rem; height: 4rem; margin-left: 4rem; position: relative; background: var(--color-primary); }



/* **************************************** *
 * SINGLE LAYOUT
 * **************************************** */
/* LAYOUT */
.jt-single__header { margin-bottom: 40rem; position: relative; }

.jt-single__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 36rem; margin-bottom: 42rem; padding-right: 220rem; }
.jt-single__meta > * { position: relative; color: var(--color-gray-500); }

.jt-single__type { color: var(--color-primary); }
.jt-single__type:after { content: ''; display: block; width: 4rem; height: 4rem; margin-top: -2rem; position: absolute; top: 50%; right: -20rem; background: var(--color-primary); }

.jt-single__cat { display: flex; flex-wrap: nowrap; gap: 30rem; margin-top: 30rem; }
.jt-single__cat > li { display: flex; align-items: flex-start; gap: 0; flex: 0 1 auto; max-width: 50%; }
.jt-single__cat > li > b { flex-shrink: 0; display: inline-block; padding-right: 17rem; position: relative; color: var(--color-gray-300); }
.jt-single__cat > li > b:after { content: ''; width: 1px; height: 13rem; position: absolute; top: 2rem; right: 8rem; background: var(--color-gray-300); }
.jt-single__cat > li > p { flex: 1; display: flex; flex-wrap: wrap; gap: 8rem 19rem; }
.jt-single__cat > li > p > span { position: relative; }
.jt-single__cat > li > p > span:not(:last-child):after { content: ''; width: 3px; height: 3px; position: absolute; top: 7rem; right: -11rem; background: var(--color-gray-300); border-radius: 50%; }

.jt-single__entry { display: flex; flex-direction: column; gap: 40rem; margin-top: 78rem; padding-top: 30rem; border-top: 3rem solid var(--color-black); }

/* SHARE */
.jt-single__share { position: absolute; top: 0; right: 0; }

/* TAG */
.jt-single__tag > h2 { margin-bottom: 16rem; }

/* RELATED */
.jt-single__related { margin-top: 40rem; }

.jt-single__related-title { margin-bottom: 20rem; }

/* CONTROL */
.jt-single__control { margin-top: 80rem; font-size: 0; text-align: center; }

.jt-single__entry:has(> :only-child) .jt-single__control { margin-top: 90rem; }



/* **************************************** *
 * SHARE
 * **************************************** */
.jt-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 10rem; }
.jt-share .jt-share__item { display: block; width: 40rem; height: 40rem; position: relative; background: var(--color-gray-200); transition: .3s; }
.jt-share .jt-share__item .jt-icon { display: block; width: 24rem; margin: 0 auto; position: relative; top: 50%; transform: translate(0, -50%); }

.jt-share .jt-share__item.jt-share--linkedin .jt-icon { width: 22rem; }

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



/* **************************************** *
 * ATTACHMENTS
 * **************************************** */
.jt-download-files { display: flex; flex-wrap: wrap; gap: 10rem; }
.jt-download-files > a { display: inline-block; padding: 10rem 16rem 10rem 15rem; font-size: 0; color: var(--color-white); background: var(--color-black); transition: background-color .3s; }
.jt-download-files > a > * { vertical-align: middle; }
.jt-download-files > a > span { word-break: break-all; }
.jt-download-files > a .jt-icon { display: inline-block; margin-right: 7rem; }
.jt-download-files > a .jt-icon svg path { fill: var(--color-white); }



/* **************************************** *
 * TAG
 * **************************************** */
.jt-tag { display: flex; flex-wrap: wrap; gap: 10rem; }
.jt-tag a { display: inline-block; padding: 4rem 0; position: relative; color: inherit; }
.jt-tag a:before,
.jt-tag a:after { content: ''; display: block; width: 100%; position: absolute; left: 0; bottom: 0; }
.jt-tag a:before { height: 1px; background: var(--color-gray-300); }
.jt-tag a:after { height: 3rem; background: var(--color-black); transform: scaleY(0); transition: transform .3s; }



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

.jt-tabs__menu li { width: 50%; }
.jt-tabs--col2 .jt-tabs__menu li { width: 50%; }
.jt-tabs--col3 .jt-tabs__menu li { width: 33.3333333333%; }
.jt-tabs--col4 .jt-tabs__menu li { width: 25%; }
.jt-tabs--col5 .jt-tabs__menu li { width: 20%; }
.jt-tabs--col6 .jt-tabs__menu li { width: 16.6666666667%; }
.jt-tabs--col7 .jt-tabs__menu li { width: 14.2857142857%; }
.jt-tabs--col8 .jt-tabs__menu li { width: 12.5%; }
.jt-tabs--col9 .jt-tabs__menu li { width: 11.1111111111%; }
.jt-tabs--col10 .jt-tabs__menu li { width: 10%; }
.jt-tabs--col11 .jt-tabs__menu li { width: 9.09090909091%; }
.jt-tabs--col12 .jt-tabs__menu li { width: 8.33333333333%; }

.jt-tabs__menu { display: flex; flex-wrap: nowrap; width: 100%; margin-bottom: 12rem; }
.jt-tabs__menu li { display: flex; border: solid transparent; border-width: 1px 0 1px 1px; border-bottom-color: var(--color-black); cursor: pointer; }
.jt-tabs__menu li:first-child { border-left: none; }
.jt-tabs__menu li a { display: block; width: 100%; padding: 13rem; text-align: center; color: inherit; align-self: center; }

.jt-tabs__menu li.jt-tabs--active { border-color: var(--color-black); border-bottom-color: transparent; }
.jt-tabs__menu li.jt-tabs--active + li { border-left-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; }

/* SECONDARY */
.jt-tabs.jt-tabs--secondary .jt-tabs__menu { flex-wrap: wrap; gap: 8rem; margin-bottom: 60rem; }
.jt-tabs.jt-tabs--secondary .jt-tabs__menu li { width: fit-content; border: none; }
.jt-tabs.jt-tabs--secondary .jt-tabs__menu li a { padding: 8rem 30rem; background: var(--color-gray-100); transition: color .3s, background-color .3s; }
.jt-tabs.jt-tabs--secondary .jt-tabs__menu li.jt-tabs--active a { color: var(--color-white); background: var(--color-black); }



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

.swiper-control { margin-top: 30rem; position: relative; z-index: 2; }

/* PAGINATION */
.swiper-control .swiper-pagination.swiper-pagination-bullets { display: flex; justify-content: center; gap: 10rem; position: static; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { width: 10rem; height: 10rem; margin: 0; position: relative; background: var(--color-black); border-radius: 0; opacity: 0.2; transition: width .4s, opacity .3s; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 40rem; opacity: 1; }

/* PLAY & PAUSE STATE */
.swiper-state { width: 31rem; height: 31rem; position: absolute; top: 50%; right: -10rem; transform: translate(0, -50%); }
.swiper-state__btn { display: block; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; top: 0; left: 0; background: transparent; border: none; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s; cursor: pointer; }
.swiper-state__btn .jt-icon { display: block; width: 15rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.swiper-state__btn .jt-icon path { fill: var(--color-white); }
.swiper-state.swiper-state--play .swiper-state__btn--play { opacity: 1; visibility: visible; }
.swiper-state.swiper-state--pause .swiper-state__btn--pause { opacity: 1; visibility: visible; }

/* NAVIGATION */
.swiper-navigation .swiper-button { width: 80rem; height: 80rem; margin: -40rem 0 0; padding: 0; background: var(--color-white); border: none; transition: background-color .3s; }
.swiper-navigation .swiper-button:after { display: none; }
.swiper-navigation .swiper-button-prev { left: 0; }
.swiper-navigation .swiper-button-next { right: 0; }
.swiper-navigation .swiper-button .jt-accent-icon { width: 28rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.swiper-navigation .swiper-button.swiper-button-disabled { background: color-mix(in srgb, var(--color-white) 10%, transparent 90%); backdrop-filter: blur(20rem); -webkit-backdrop-filter: blur(20rem); 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: var(--color-gray-100); }
.jt-lazyload.jt-lazyload--loaded .jt-lazyload__color-preview { background: transparent; transition: background-color .1s; transition-delay: .3s; }



/* **************************************** *
 * SCROLL
 * **************************************** */
.simplebar-wrapper { padding-bottom: 4rem; }
.simplebar-content { padding-bottom: 1px !important; }
.simplebar-scrollbar:before { top: 0; bottom: 0; left: 0; right: 0; }
.simplebar-track.simplebar-horizontal { height: 4rem; }



/* **************************************** *
 * 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, .4); }
.jt-embed-video__overlay-btn { display: block; width: 70rem; height: 70rem; margin-top: -35rem; margin-left: -35rem; position: absolute; top: 50%; left: 50%; background: var(--color-white); border-radius: 50%; box-sizing: border-box; opacity: 0.8; transform: scale(1); transition: opacity .5s cubic-bezier(.165, .84, .44, 1), transform 1s cubic-bezier(.23, 1, .32, 1); }
.jt-embed-video__overlay-btn:after { content: ''; width: auto; height: auto; display: block; position: absolute; top: 50%; left: 50%; margin-top: -7rem; margin-left: -4rem; font-style: normal; border-top: 7rem solid transparent; border-bottom: 7rem solid transparent; border-left: 10rem solid var(--color-primary); transition: transform 1s cubic-bezier(.23, 1, .32, 1); }

.ios .jt-embed-video__poster { opacity: 0; visibility: hidden; }

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



/* **************************************** *
 * GRID LIST
 * **************************************** */
.jt-grid-list { display: grid; gap: 80rem 60rem; }

.jt-grid-list--col2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jt-grid-list--col3 { grid-template-columns: repeat(3, minmax(0, 426rem)); }

.jt-grid-list__link { display: block; color: inherit; }

.jt-grid-list__thumb { position: relative; background: var(--color-gray-100); }
.jt-grid-list__thumb .jt-lazyload img { top: 50%; transform: translateY(-50%); }

.jt-grid-list__icon { width: 52rem; height: 52rem; position: absolute; top: 50%; left: 50%; background: color-mix(in srgb, var(--color-white) 70%, transparent 30%); backdrop-filter: blur(20rem); -webkit-backdrop-filter: blur(20rem); border-radius: 50%; transform: translate3d(-50%, -50%, 0); }
.jt-grid-list__icon svg { display: block; width: 21rem; height: auto; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }
.jt-grid-list__icon svg path { fill: var(--color-black); }

.jt-grid-list__label { padding: 8rem 10rem; position: absolute; left: 0; bottom: 0; color: var(--color-white); background: var(--color-primary); }
.jt-grid-list__label.jt-grid-list__label--secondary { background: color-mix(in srgb, var(--color-black) 70%, transparent 30%); }

.jt-grid-list__key { display: flex; align-items: center; justify-content: space-between; background: var(--color-primary); }
.jt-grid-list__key-label { flex: 1; min-width: 0; padding: 0 20rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.jt-grid-list__key-logo { flex-shrink: 0; padding: 20rem; background: var(--color-black); }
.jt-grid-list__key-logo > svg { display: block; width: 97rem; height: auto; }

.jt-grid-list__content { display: flex; flex-direction: column; gap: 16rem; padding-top: 35rem; }
.jt-grid-list__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.jt-grid-list__title > span { border-bottom: 2rem solid transparent; transition: border .3s; }

/* PRIMARY */
.jt-grid-list--primary .jt-grid-list__thumb .jt-lazyload { padding-top: 62.68%; }

/* SECONDARY */
.jt-grid-list--secondary .jt-grid-list__thumb .jt-lazyload { padding-top: 62.91%; }
.jt-grid-list--secondary .jt-grid-list__content { gap: 10rem; padding-top: 20rem; }



/* **************************************** *
 * BOARD LIST
 * **************************************** */
.jt-board-list { border-top: 3rem solid var(--color-black); }
.jt-board-list__item { border-bottom: 1px solid var(--color-black); }

.jt-board-list__content { display: flex; align-items: center; justify-content: space-between; padding: 30rem 20rem 31rem; gap: 30rem; color: inherit; transition: background-color .3s; }

.jt-board-list__title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.jt-board-list__title br { display: none; }
.jt-board-list__date { flex-shrink: 0; color: var(--color-gray-800); }

.jt-board-list__actions { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 10rem; }

/* UNCUT TITLE */
.jt-board-list.jt-board-list--uncut .jt-board-list__title { white-space: inherit; }

/* SECONDARY */
.jt-board-list.jt-board-list--secondary { border-top-width: 1px; }



/* **************************************** *
 * JT CONFIRM
 * **************************************** */
.jt-confirm { position: fixed; left: 0; top: 0; width: 100%; height: 100%; text-align: center; background: color-mix(in srgb, var(--color-black) 70%, transparent 30%); 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: 376rem; background: var(--color-white); overflow: hidden; }

.jt-confirm__content { display: flex; align-items: center; justify-content: center; min-height: 150rem; padding: 36rem 32rem 32rem; }
.jt-confirm__content p { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-09); font-weight: 700; letter-spacing: var(--letter-spacing-01); word-wrap: break-word; word-break: keep-all; }

.jt-confirm__actions { display: flex; flex-wrap: nowrap; }
.jt-confirm__btn { width: 100%; padding: 14rem 20rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); color: inherit; background: var(--color-white); border: solid var(--color-black); border-width: 1px 0 0; cursor: pointer; transition: color .3s; }

.jt-confirm--choice .jt-confirm__btn { width: 50%; }
.jt-confirm--choice .jt-confirm__btn:first-child { border-right-width: 1px; }



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

/* LOADING SPINNER */
@keyframes spin {
    from { transform: rotate(0); }
    to{ transform: rotate(359deg); }
}



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

    /* BUTTON */
    .jt-btn__text:hover { color: var(--color-primary); }
    .jt-btn__text:hover :is(.jt-icon, .jt-accent-icon) path[fill="black"] { fill: var(--color-primary); }

    .jt-btn__box:not(.jt-btn--large):hover { background: var(--color-primary); }
    .jt-btn__box:not(.jt-btn--large):hover .jt-accent-icon path:not([fill="black"]) { fill: var(--color-white); }
    .jt-btn__box.jt-btn--large:hover { color: var(--color-white); background: var(--color-black); }
    .jt-btn__box.jt-btn--large:hover .jt-accent-icon path[fill="black"] { fill: var(--color-white); }

    .jt-btn__horizontal:hover { box-shadow: inset 0 0 0 3rem var(--color-black); }

    /* FORM */
    .jt-form__field:not(:disabled, :read-only):hover { box-shadow: inset 0 0 0 3rem var(--color-black); }

    .jt-checkbox label:not(:has(input:disabled)):hover > span:before,
    .jt-radiobox label:not(:has(input:disabled)):hover > span:before { box-shadow: inset 0 0 0 3rem var(--color-black); }

    .choices:not(.is-disabled):not(.is-open):hover .choices__inner { border-color: var(--color-black); }
    .choices:not(.is-disabled):not(.is-open):hover .choices__inner:after { box-shadow: inset 0 0 0 3rem var(--color-black); }
    
    .jt-customfile__input:hover + .jt-customfile__button { background: var(--color-primary); }
    .jt-customfile__delete:hover { background: var(--color-primary); }
    .jt-customfile__delete:hover .jt-icon svg path { fill: var(--color-black); }

    .jt-form__action:hover { color: var(--color-white); background: var(--color-black); }

    /* SEARCH */
    .jt-search__reset:hover:before { background: var(--color-primary); }
    .jt-search__reset:hover .jt-icon path { fill: var(--color-black); }

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

    /* ATTACHMENTS */
    .jt-download-files > a:hover { background: var(--color-primary); }

    /* TAG */
    .jt-tag a:hover:after { transform: scaleY(1); }

    /* TABS */
    .jt-tabs.jt-tabs--secondary .jt-tabs__menu li:not(.jt-tabs--active) a:hover { background: var(--color-gray-200); }

    /* SWIPER */
    .swiper-navigation .swiper-button:not(.swiper-button-disabled):hover { background: var(--color-primary); }

    /* VIDEO */
    .jt-embed-video__poster:hover .jt-embed-video__overlay-btn { opacity: 1; transform: scale(1.2); }
    .jt-embed-video__poster:hover .jt-embed-video__overlay-btn:after { transform: scale(0.8); }

    /* GRID LIST */
    .jt-grid-list__link:hover .jt-grid-list__title > span { border-bottom-color: var(--color-black); }

    /* BOARD LIST */
    a.jt-board-list__content:hover { background: var(--color-gray-100); }

    /* JT CONFIRM */
    .jt-confirm__btn:hover { color: var(--color-primary); }

}