@charset "utf-8";

/*
 * File    : jt-strap.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * A11Y
 * TYPOGRAPHY
 * JT GUIDE
 * BUTTON
 * FORM
 * CATEGORY
 * PAGINATION
 * LIST COMPONENT
 * SINGLE LAYOUT
 * ATTACHMENT
 * SWIPER
 * LAZYLOAD
 * VIDEO
 * BOARD LIST
 * GRID LIST
 * BREADCRUMB
 * FILTER
 * EMPTY
 * JT ALERT
 * NODATA
 * ANIMATION 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-03); }
.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-03); }
.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-02); }
.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-02); }
.jt-typo--05 { font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--06 { 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--07 { font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--08 { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--09 { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 500; letter-spacing: var(--letter-spacing-01); }
.jt-typo--10 { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--11 { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); 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-08); font-weight: 400; letter-spacing: var(--letter-spacing-01); }
.jt-typo--13 { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--14 { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 500; letter-spacing: var(--letter-spacing-01); }
.jt-typo--15 { font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); }



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

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



/* **************************************** *
 * BUTTON
 * **************************************** */
/* TEXT */
.jt-btn__text { display: inline-flex; align-items: center; gap: 4rem; padding: 4rem 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; }
.jt-btn__text .jt-accent-icon { width: 18rem; }
.jt-btn__text .jt-accent-icon path[fill="black"] { fill: var(--color-white); transition: fill .3s; }

.jt-btn__text.jt-btn--small { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); }

.jt-btn__text.jt-btn--type-02 { color: var(--color-gray-400); }
.jt-btn__text.jt-btn--type-02 .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 .jt-accent-icon path[fill="black"] { fill: var(--color-black); }

/* BASIC */
.jt-btn__basic { display: inline-flex; justify-content: center; align-items: center; gap: 8rem; padding: 10rem 34rem; border: 2rem solid var(--color-black); color: var(--color-black); font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 700; letter-spacing: var(--letter-spacing-01); cursor: pointer; transition: background .3s; }
.jt-btn__basic .jt-accent-icon { width: 18rem; }



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

.jt-form__fieldset { display: flex; flex-wrap: wrap; gap: 20rem 0; }
.jt-form__entry { width: 100%; }
.jt-form__data { margin-top: 12rem; position: relative; font-size: 0; }

/* LABEL */
.jt-form__label { display: block; position: relative; font-size: 0; }
.jt-form__label > span { display: inline-block; vertical-align: middle; }

/* INPUT */
.jt-form__field { display: inline-block; vertical-align: middle; width: 100%; height: 48rem; margin: 0; padding: 0 16rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 700; letter-spacing: var(--letter-spacing-01); border: 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: 220rem; padding: 15rem 18rem; overflow: auto; resize: none; }
.jt-form__field:focus { border-color: var(--color-black); }
.jt-form__field:disabled, .jt-form__field:read-only { background: var(--color-gray-100); color: var(--color-gray-500); }

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

/* VALIDITY */
.jt-form__valid { display: block; color: var(--color-primary); margin-top: 12rem; }
.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: 28rem; position: relative; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 500; letter-spacing: var(--letter-spacing-01); }
.jt-checkbox label > span:before, .jt-radiobox label > span:before { content: ''; display: block; width: 20rem; height: 20rem; position: absolute; top: -1rem; left: 0; box-shadow: inset 0 0 0 1px var(--color-gray-300); transition: box-shadow .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: 6rem; height: 11rem; left: 7rem; top: 2rem; 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: 6rem; top: 5rem; background: var(--color-white); border-radius: 50%; }
.jt-checkbox input:checked + span:before, .jt-radiobox input:checked + span:before { background: var(--color-black); box-shadow: inset 0 0 0 1px var(--color-black); }
.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 { box-shadow: inset 0 0 0 1px 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-width: 200rem; min-height: inherit; padding: 11rem 44rem 11rem 11rem; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 700; letter-spacing: var(--letter-spacing-01); color: var(--color-black); background: var(--color-white); border: 1px solid var(--color-black); 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: 11rem; }
.choices[data-type*=select-one]::after { content: ''; width: 44rem; height: 100%; margin: 0; right: 0; top: 0; border: none; background: url('../images/icon/select.svg') no-repeat center center; background-size: 18rem auto; transition: transform .3s; }

.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: 6rem 12rem; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 700; letter-spacing: var(--letter-spacing-01); color: var(--color-gray-500); transition: color .3s; }
.choices__list--dropdown .choices__item:first-child,
.choices__list[aria-expanded] .choices__item:first-child { padding-top: 16rem; }
.choices__list--dropdown .choices__item:last-child,
.choices__list[aria-expanded] .choices__item:last-child { padding-bottom: 16rem; }

.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 { color: var(--color-black); background: transparent; }
.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: 18rem; height: 18rem; position: absolute; top: 50%; right: 11rem; background: url(../images/icon/select.svg) no-repeat center center; background-size: contain; transform: translate(0, -50%); }
html.mobile .jt-choices__wrap > select { appearance: none; width: 100%; min-width: 200rem; margin: 0; height: 42rem; padding: 0 44rem 0 11rem; position: relative; font-family: var(--font-primary); font-size: var(--font-size-primary-09); line-height: 1; font-weight: 700; letter-spacing: var(--letter-spacing-01); color: var(--color-black); background: transparent; border: 1px solid var(--color-black); 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.ios .jt-choices__wrap > select { line-height: 1.5; }

/* 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; }
.jt-automail__list > li { padding: 8rem 16rem; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 700; letter-spacing: var(--letter-spacing-01); color: var(--color-gray-500); cursor: pointer; transition: color .3s; }
.jt-automail__list > li:first-child { padding-top: 16rem; }
.jt-automail__list > li:last-child { padding-bottom: 16rem; }
.jt-automail__list > li > span { color: var(--color-primary); }
.jt-automail__list > li.jt-automail--focus { color: var(--color-black); }

/* CONTROL */
.jt-form__control { position: relative; width: 100%; text-align: center; }
.jt-form__action { display: inline-block; width: 100%; padding: 10rem 22rem; position: relative; vertical-align: middle; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 700; letter-spacing: var(--letter-spacing-01); color: var(--color-black); text-align: center; background: var(--color-white); border: 2rem solid var(--color-black); border-radius: 0; box-sizing: border-box; transition: background-color .3s, border-color .3s; cursor: pointer; }

/* LOADING */
.jt-form__loading { position: absolute; top: 50%; left: 50%; font-size: 0; line-height: 1; text-align: center; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.jt-form__loading-item { display: inline-block; width: 8rem; height: 8rem; margin: 0 4rem; background: var(--color-gray-400); border-radius: 100%; animation: bounce-delay 1.4s infinite ease-in-out both; }
.jt-form__loading-item:nth-child(2) { animation-delay: 0.16s; }
.jt-form__loading-item:nth-child(3) { animation-delay: 0.32s; }

.jt-form--loading .jt-form__action { pointer-events: none; color: transparent; background: var(--color-white); border-color: var(--color-gray-400); }
.jt-form--loading .jt-form__loading { opacity: 1; visibility: visible; }



/* **************************************** *
 * CATEGORY 
 * **************************************** */
.jt-category ul { display: flex; flex-wrap: wrap; gap: 6rem; }
.jt-category ul a { display: block; padding: 8rem 24rem; box-shadow: inset 0 0 0 1px var(--color-gray-300); color: var(--color-black); transition: background-color .3s, box-shadow .3s; }
.jt-category ul li.jt-category--active a { background-color: var(--color-black); color: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-black); }



/* **************************************** *
 * PAGINATION
 * **************************************** */
.jt-pagination { display: flex; gap: 8rem; justify-content: center; margin-top: 60rem; }
.jt-pagination__numbers { display: flex; justify-content: center; align-items: center; min-width: 30rem; height: 30rem; text-align: center; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 500; letter-spacing: var(--letter-spacing-01); color: var(--color-black); transition: color .3s; }
.jt-pagination__numbers .jt-icon { width: 18rem; }
.jt-pagination__numbers.jt-pagination--current { color: var(--color-white); background: var(--color-black); }
.jt-pagination__numbers.jt-pagination--current:after { background: var(--color-black); }
.jt-pagination--disabled { opacity: 0; visibility: hidden; }



/* **************************************** *
 * LIST COMPONENT
 * **************************************** */
/* NOTHING */
.jt-list-nothing {margin-top: 40rem; padding: 150rem 0; text-align: center; }
.jt-list-nothing b { display: block; color: var(--color-gray-500); }
.jt-list-nothing b > span { color: var(--color-black); }
.jt-list-nothing p { margin-top: 12rem; }



/* **************************************** *
 * SINGLE LAYOUT
 * **************************************** */
/* LAYOUT */
.jt-single { display: flex; justify-content: space-between; gap: 80rem; }
.jt-single__inner { flex: 1; max-width: 872rem; }

body.single-resources .jt-single,
body.single-training .jt-single { opacity: 0; visibility: hidden; }

/* HEADER */
.jt-single__header { margin: 40rem 0; }
.jt-single__header-top { display: flex; align-items: center; justify-content: space-between; gap: 40rem; margin-bottom: 30rem; }
.jt-single__meta { display: flex; gap: 24rem; }
.jt-single__cat { color: var(--color-primary); }
.jt-single__date { position: relative; }
.jt-single__cat + .jt-single__date:before { content: ''; position: absolute; left: -12rem; top: 50%; transform: translate(-50%, -50%); width: 4rem; height: 4rem; background: var(--color-primary); }
.jt-single__desc { margin-top: 16rem; }
.jt-single__utils { position: relative; }
.jt-single__like-btn { font-size: 0; padding: 0; background: none; border: none; cursor: pointer; }
.jt-single__like-btn .jt-icon { width: 40rem; }
.jt-single__like-btn #heart-fill { fill: transparent; }
.jt-single__like-btn.jt-single__like--active #heart-fill { fill: var(--color-primary); }
.jt-single__like-btn.jt-single__like--active #heart-stroke { fill: var(--color-primary); }
.jt-single__like-toast { position: absolute; left: 50%; bottom: calc(100% + 8rem); transform: translate( -50%, 0) !important; white-space: nowrap; color: var(--color-black); background: var(--color-gray-200); padding: 6rem 12rem; opacity: 0; visibility: hidden; z-index: 1; }
.jt-single__like-toast span { display: block; }
.jt-single__like-toast:before { content: ''; position: absolute; left: 50%; transform: translate(-50%, 0); top: 100%; width: 0; height: 0; border-top: 8rem solid var(--color-gray-200); border-right: 6rem solid transparent; border-left: 6rem solid transparent; }
.jt-single__header-nav { display: none; }

/* OVERVIEW */
.jt-single__overview { margin-top: 30rem; border: solid var(--color-black); border-width: 1px 0; padding: 16rem 0; }
.jt-single__overview-title { display: block; margin-bottom: 6rem; }
.jt-single__overview-list > li + li { margin-top: 6rem; }

/* NAV */
.jt-single__nav { width: 264rem; opacity: 0; visibility: hidden; display: none; }
.jt-single__nav-inner { position: sticky; top: 120rem; }
.jt-single__nav-list { margin-top: 16rem; }
.jt-single__nav-list li { margin-bottom: 8rem; }
.jt-single__nav-list li:last-child { padding-bottom: 0; }
.jt-single__nav-list a { display: block; color: var(--color-gray-500); transition: color .3s; }
.jt-single__nav-list li > ul { margin-bottom: 16rem; margin-top: 8rem; }
.jt-single__nav-list li > ul > li > a { padding-left: 16rem; }
.jt-single__nav-list a.jt-single__nav--active { color: var(--color-primary); }
.jt-single__nav-list li:last-child > ul { margin-bottom: 0; }

body.single-resources .jt-single__nav,
body.single-training .jt-single__nav { display: block; }

/* ATTACHMENT */
.jt-single__attachments { margin-top: 30rem; }

/* TAG */
.jt-single__tags { display: flex; flex-wrap: wrap; gap: 6rem; margin-top: 30rem; }
.jt-single__tags > a { display: block; padding: 4rem 8rem; background: var(--color-gray-200); color: var(--color-black); transition: color .3s, background .3s; }

/* CONTROL */
.jt-single__control { display: flex; justify-content: center; padding: 80rem 0 40rem; margin-top: 60rem; border-top: 3rem solid var(--color-black); }

/* RELATED */
.jt-single__related { margin-top: 40rem; }
.jt-single__related .jt-grid-list__item:has(.jt-grid-list__icon) figure { padding-top: 80%; }



/* **************************************** *
 * ATTACHMENT
 * **************************************** */
.jt-download-files { display: flex; flex-wrap: wrap; gap: 10rem; }
.jt-download-files > a { display: flex; gap: 8rem; align-items: center; background: var(--color-black); color: var(--color-white); padding: 10rem 16rem; transition: background .3s; }
.jt-download-files span { flex: 1; max-width: 320rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
.jt-download-files .jt-icon { width: 16rem; }
.jt-download-files .jt-icon path { fill: currentColor; }



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

.swiper-control { margin-top: 24rem; 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: 8rem; height: 8rem; margin: 0; position: relative; background: var(--color-gray-300); opacity: 1; border-radius: 50%; transition: background .3s; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--color-primary); }



/* **************************************** *
 * 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, .4); }
.jt-embed-video__overlay-btn { display: block; width: 64rem; height: 64rem; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; box-sizing: border-box; opacity: 0.8; transition: opacity .3s; }
.jt-embed-video__overlay-btn:after { content: ''; display: block; position: absolute; width: 100%; height: 100%; background: url(../images/icon/play.svg) no-repeat center center / cover; }

.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; }



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

.jt-accordion__head { display: flex; align-items: center; justify-content: space-between; gap: 48rem; min-height: 84rem; padding: 12rem 0; cursor: pointer; transition: padding .3s, gap .3s; }
.jt-accordion__title { flex: 1; }
.jt-accordion__control { position: relative; width: 18rem; height: 18rem; }
.jt-accordion__control .jt-accent-icon { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); }
.jt-accordion__control .jt-accent-icon svg { transition: opacity .3s; }
.jt-accordion__control .jt-accent-icon:after { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 2rem; background: var(--color-black); transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s; }

.jt-accordion__content { position: relative; overflow: hidden; }
.jt-accordion__content-inner { padding: 0 16rem 40rem; display: none; }
.jt-accordion__content-inner .jt-blocks > * { max-width: inherit; }

/* ACTIVE */
.jt-accordion__item.jt-accordion--active { background: var(--color-gray-100); }
.jt-accordion__item.jt-accordion--active .jt-accordion__head { padding-left: 16rem; padding-right: 16rem; gap: 16rem; }
.jt-accordion__item.jt-accordion--active .jt-accordion__control .jt-accent-icon svg { opacity: 0; }
.jt-accordion__item.jt-accordion--active .jt-accordion__control .jt-accent-icon:after { opacity: 1; }

@media print {

    .jt-accordion__item { background: var(--color-white); }
    .jt-accordion__item .jt-accordion__control .jt-accent-icon svg { opacity: 0; }
    .jt-accordion__item .jt-accordion__control .jt-accent-icon:after { opacity: 1; }
    .jt-accordion__content-inner { display: block !important; }

}



/* **************************************** *
 * BOARD LIST
 * **************************************** */
.jt-board-list__link { display: flex; align-items: center; justify-content: space-between; gap: 48rem; color: var(--color-black); height: 84rem; border-bottom: 1px solid var(--color-black); transition: background .3s, padding .3s, gap .3s; }
.jt-board-list__content { flex: 1; display: flex; gap: 16rem; }
.jt-board-list__meta { display: flex; align-items: center; gap: 16rem; width: 120rem; }
.jt-board-list__type { color: var(--color-primary); }
.jt-board-list__category { color: var(--color-gray-600); }
.jt-board-list__title { flex: 1; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.jt-board-list__date { position: relative; display: flex; justify-content: flex-end; align-items: center; width: 100rem; text-align: right; }
.jt-board-list__date time { transition: opacity .3s; }
.jt-board-list__icon { position: absolute; right: 0; opacity: 0; font-size: 0; transition: opacity .3s; }
.jt-board-list__icon .jt-accent-icon { width: 28rem; }

/* SECONDARY */
.jt-board-list--secondary .jt-board-list__content { flex-direction: column; gap: 6rem; }
.jt-board-list--secondary .jt-board-list__meta { width: auto; }



/* **************************************** *
 * GRID LIST
 * **************************************** */
.jt-grid-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60rem 24rem; }
.jt-grid-list .swiper-wrapper { gap: 60rem 24rem; }
.jt-grid-list .swiper-control { display: none; }
.jt-grid-list__link { color: var(--color-black); }
.jt-grid-list__content { height: 146rem; }
.jt-grid-list__info { display: flex; gap: 12rem; margin-bottom: 8rem; }
.jt-grid-list__info *:nth-child(1) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-grid-list__info *:nth-child(2) { flex: 1; color: var(--color-gray-500); white-space: nowrap; }
.jt-grid-list__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: calc(var(--font-size-primary-07) * var(--font-lineheight-primary-07) * 3); }
html.mac .jt-grid-list__title { height: calc(var(--font-size-primary-07) * var(--font-lineheight-primary-07) * 3 + 1rem) }
.jt-grid-list__title > span { border-bottom: 2rem solid transparent; transition: border-color .3s; }
.jt-grid-list__tag { display: flex; justify-content: space-between; align-items: center; gap: 12rem; margin-top: 8rem; }
.jt-grid-list__category { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; padding: 4rem 0; color: var(--color-primary); }
.jt-grid-list__status { position: relative; padding: 3rem 7rem; border-radius: 12rem; border: 1px solid var(--color-black); }
.jt-grid-list__status--disable { color: var(--color-gray-600); background: var(--color-gray-200); border-color: var(--color-gray-200); }
.jt-grid-list__thumb { position: relative; overflow: hidden; }
.jt-grid-list__thumb figure { padding-top: 46.27%; transition: transform .7s; }
.jt-grid-list__thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-grid-list__icon { display: flex; align-items: center; justify-content: center; width: 60rem; height: 60rem; background: var(--color-white); position: absolute; bottom: 0; right: 0; transition: background .3s; }
.jt-grid-list__icon .jt-accent-icon { width: 28rem; }

/* SECONDARY */
.jt-grid-list--secondary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jt-grid-list--secondary .jt-grid-list__thumb figure { padding-top: 62.93%; }

/* HAS ICON */
.jt-grid-list__item:has(.jt-grid-list__icon) .jt-grid-list__content { height: auto; padding-bottom: 20rem; }
.jt-grid-list__item:has(.jt-grid-list__icon) .jt-grid-list__title { -webkit-line-clamp: 2; height: calc(var(--font-size-primary-07) * var(--font-lineheight-primary-07) * 2); }
.jt-grid-list__item:has(.jt-grid-list__icon) figure { padding-top: 60.6%; }

/* PLAY */
.jt-grid-list__play { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 42rem; height: 42rem; background: rgba(255, 255, 255, .7); border-radius: 50%; transform: translate(-50%, -50%); }
.jt-grid-list__play svg { width: 18rem; height: auto; }



/* **************************************** *
 * BREADCRUMB
 * **************************************** */
.jt-breadcrumb { display: flex; flex-wrap: wrap; gap: 8rem; margin-bottom: 20rem; }
.jt-breadcrumb > li > a,
.jt-breadcrumb > li > span { font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-01); color: var(--color-black); transition: color .3s; }
.jt-breadcrumb__separator { position: relative; display: flex; align-items: center; }
html.mac .jt-breadcrumb__separator { top: 1rem; }
html.ios .jt-breadcrumb__separator { top: 1rem; }
.jt-breadcrumb__separator span { width: 12rem; height: 12rem; background: url(../images/icon/jt-icon/jt-chevron-right-mini-1px-square.svg) no-repeat center center / cover; opacity: .4; overflow: hidden; text-indent: -9999rem; }
.jt-breadcrumb--current { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }



/* **************************************** *
 * FILTER 
 * **************************************** */
.jt-filter { display: flex; justify-content: space-between; align-items: center; gap: 80rem; margin-bottom: 40rem; }
.jt-filter--center { justify-content: center; margin-top: 60rem; }

/* SORTING */
.jt-filter__sorting > ul { display: flex; align-items: center; gap: 16rem; }
.jt-filter__sorting > ul > li > a { position: relative; display: block; color: var(--color-gray-500); transition: color .3s;; }
.jt-filter__sorting > ul > li > a:after { content: ''; position: absolute; left: 0; bottom: -2rem; width: 100%; height: 1px; background: transparent; transition: background .3s; }
.jt-filter__sorting > ul > li:first-child > a { padding-left: 0; }
.jt-filter__sorting > ul > li:last-child > a { padding-right: 0; }
.jt-filter__sorting > ul > li.jt-filter__sorting--active > a { color: var(--color-black); font-weight: 700; }
.jt-filter__sorting > ul > li.jt-filter__sorting--active > a:after { background: currentColor; }



/* **************************************** *
 * EMPTY
 * **************************************** */
.jt-empty { position: relative; background: var(--color-gray-200); }
.jt-empty svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 221rem; width: calc(100% - 80rem); }



/* **************************************** *
 * JT ALERT
 * **************************************** */
.jt-alert { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .5); }
.jt-alert__container { display: flex; flex-direction: column; gap: 30rem; align-items: center; justify-content: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--color-white); width: 480rem; min-height: 240rem; padding: 20rem; }
.jt-alert__content { width: 100%; text-align: center; }
.jt-alert__content h1 { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-alert__content p { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 400; letter-spacing: var(--letter-spacing-01); margin-top: 8rem; }
.jt-alert__actions { display: flex; gap: 16rem; }
.jt-alert__btn { min-width: 100rem; max-width: 160rem; height: 40rem; padding: 0 16rem; background: var(--color-white); border: 0; border-radius: 0; outline: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: inset 0 0 0 1rem var(--color-gray-300); color: var(--color-black); cursor: pointer; transition: box-shadow .3s, background-color .3s; }
.jt-alert__btn-label { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 700; letter-spacing: var(--letter-spacing-01); }



/* **************************************** *
 * NODATA
 * **************************************** */
.jt-nodata { display: flex; align-items: center; justify-content: center; text-align: center; height: 600rem; background: var(--color-gray-100); }
.jt-nodata__icon { display: flex; justify-content: center; align-items: center; width: 80rem; height: 80rem; background: var(--color-primary); margin: 0 auto; font-style: normal; }
.jt-nodata__desc { margin-top: 20rem; }



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



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

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

    .jt-btn__basic:hover { background: var(--color-primary); }

    /* FORM */
    .jt-form__action:hover { background-color: var(--color-primary); }
    .jt-automail__list > li:hover { color: var(--color-black); }
    .jt-checkbox label:hover > span:before, .jt-radiobox label:hover > span:before { box-shadow: inset 0 0 0 2rem var(--color-black); }

    /* VIDEO */
    .jt-embed-video__overlay:hover .jt-embed-video__overlay-btn { opacity: 1; }

    /* CATEGORY */
    .jt-category ul a:hover { background-color: var(--color-gray-100); box-shadow: inset 0 0 0 2rem var(--color-black); }

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

    /* SINGLE LAYOUT */
    .jt-single__like-btn:not(.jt-single__like--active):hover #heart-fill { fill: var(--color-black); }
    .jt-single__nav-list a:not(.jt-single__nav--active):hover { color: var(--color-black); }
    .jt-single__tags > a:hover { background: var(--color-black); color: var(--color-white); }

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

    /* ACCORDION */
    .jt-accordion__item:hover { background: var(--color-gray-100); }
    .jt-accordion__item:hover .jt-accordion__head { padding-left: 16rem; padding-right: 16rem; gap: 16rem; }

    /* BOARD LIST */
    .jt-board-list__link:hover { background: var(--color-gray-100); padding: 0 16rem; gap: 16rem; }
    .jt-board-list__link:hover .jt-board-list__date time { opacity: 0; }
    .jt-board-list__link:hover .jt-board-list__icon { opacity: 1; }

    /* GRID LIST */
    .jt-grid-list__link:hover .jt-grid-list__title > span { border-color: currentColor; }
    .jt-grid-list__link:hover .jt-grid-list__icon { background: var(--color-primary); }
    .jt-grid-list__link:hover .jt-grid-list__thumb .jt-lazyload { transform: scale(1.05); }

    /* BREADCRUMB */
    .jt-breadcrumb > li > a:hover { color: var(--color-primary); }

    /* FILTER */
    .jt-filter__sorting > ul > li > a:hover { color: var(--color-black); }
    .jt-filter__sorting > ul > li:hover > a:after { background: currentColor; }

    /* JT ALERT */
    .jt-alert__btn:hover { box-shadow: inset 0 0 0 2rem var(--color-black); background-color: var(--color-gray-100); }

}