@charset "utf-8";

/*
 * File    : jt-strap.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * A11Y
 * TYPOGRAPHY
 * JT GUIDE
 * BUTTON
 * FORM
 * CATEGORY
 * SEARCH
 * PAGINATION
 * LOADMORE
 * SINGLE
 * SHARE
 * TAB
 * SWIPER
 * LAZYLOAD
 * VIDEO
 * FEATURE
 * BOARD
 * BREADCRUMB
 * PROGRESS
 * CTA
 * MOTION
 * 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-07); 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: 800; letter-spacing: var(--letter-spacing); }
.jt-typo--02 { font-size: var(--font-size-primary-02); line-height: var(--font-lineheight-primary-02); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--03 { font-size: var(--font-size-primary-03); line-height: var(--font-lineheight-primary-03); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--04 { font-size: var(--font-size-primary-04); line-height: var(--font-lineheight-primary-04); font-weight: 700; letter-spacing: var(--letter-spacing); }
.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); }
.jt-typo--06 { font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); font-weight: 700; letter-spacing: var(--letter-spacing); }
.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); }
.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); }
.jt-typo--09 { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 500; letter-spacing: var(--letter-spacing); }
.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); }
.jt-typo--11 { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 500; letter-spacing: var(--letter-spacing); }
.jt-typo--12 { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--13 { font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing); }
.jt-typo--14 { font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--15 { font-size: var(--font-size-primary-11); line-height: var(--font-lineheight-primary-11); font-weight: 500; letter-spacing: var(--letter-spacing); }
.jt-typo--16 { font-size: var(--font-size-primary-11); line-height: var(--font-lineheight-primary-11); font-weight: 700; letter-spacing: var(--letter-spacing); }



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



/* **************************************** *
 * BUTTON
 * **************************************** */
/* BASIC */
.jt-btn__basic { display: inline-flex; align-items: center; justify-content: center; gap: 10rem; padding: 10rem 38rem; color: var(--color-white); border: 2px solid var(--color-black); background: var(--color-black); border-radius: 2rem; cursor: pointer; transition: background .3s, color .3s, border .3s; }
.jt-btn__basic span { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-btn__basic .jt-icon { width: 24rem; }
.jt-btn__basic .jt-icon path { fill: currentColor; }

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



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

.jt-form__fieldset { display: flex; flex-wrap: wrap; gap: 40rem; }
.jt-form__entry { width: 100%; }
.jt-form__entry--harf { width: calc(50% - 20rem); }
.jt-form__data { position: relative; font-size: 0; }

/* LABEL */
.jt-form__label { position: relative; display: block; margin-bottom: 14rem; }
.jt-form__label > span { display: inline-block; vertical-align: middle; }
.jt-form--required .jt-form__label:after { content: ''; display: inline-block; vertical-align: text-top; width: 5rem; height: 5rem; margin-left: 8rem; background: currentColor; border-radius: 50%; }

/* INPUT */
.jt-form__field { display: inline-block; vertical-align: middle; width: 100%; height: 50rem; margin: 0; padding: 10rem 0; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 500; letter-spacing: var(--letter-spacing); border: 0; border-bottom: 1px solid var(--color-gray-400); border-radius: 0; outline: none; background: transparent; box-sizing: border-box; transition: border .3s; opacity: 1; }
textarea.jt-form__field { height: 200rem;; overflow: auto; resize: none; }
.jt-form__field:focus { border-color: var(--color-gray-500); }
.jt-form__field:disabled, 
.jt-form__field:read-only { pointer-events: none; }

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

/* VALIDITY */
.jt-form__valid { position: absolute; left: 0; top: calc(100% + 10rem); width: 100%; color: #FF0000; }

/* ERROR */
.jt-form__data--error .jt-form__field { border-color: #FF0000; }

/* CHECKBOX, RADIO */
.jt-checkbox, 
.jt-radiobox { display: flex; flex-wrap: wrap; gap: 2rem 32rem; 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 { display: inline-block; padding-left: 30rem; position: relative; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 500; letter-spacing: var(--letter-spacing); }
.jt-checkbox label > span:before, 
.jt-radiobox label > span:before { content: ''; position: absolute; top: 4rem; left: 0; display: block; width: 20rem; height: 20rem; border-radius: 2rem; border: 1px solid var(--color-gray-400); background: var(--color-white); 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:before { border-radius: 2rem; }
.jt-checkbox label > span:after { width: 6rem; height: 12rem; left: 7rem; top: 7rem; border: solid var(--color-black); 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: 5rem; top: 9rem; background: var(--color-black); border-radius: 50%; }
.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-09); }
.choices__inner { display: block; min-height: inherit; padding: 17rem 42rem 17rem 19rem; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 500; letter-spacing: var(--letter-spacing); color: var(--color-black); background: var(--color-white); border: 1px solid var(--color-gray-600); border-radius: 0; transition: border-color .3s; }
.choices__placeholder { color: var(--color-black); opacity: 1; }

.choices[data-type*=select-one] .choices__inner { padding-bottom: 17rem; }
.choices[data-type*=select-one]::after { content: ''; width: 16rem; height: 16rem; margin-top: -8rem; right: 12rem; top: 50%; border: none; background: url(../images/icon/jt-icon/jt-chevron-bottom-tiny-2px-square.svg) no-repeat center center / cover; 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] { background: var(--color-white); border: 1px solid var(--color-black); border-radius: 0; }
.choices__list--dropdown .choices__item, 
.choices__list--dropdown .choices__item, 
.choices__list[aria-expanded] .choices__item { padding: 18rem 20rem; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 500; letter-spacing: var(--letter-spacing); color: var(--color-black); 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: -8rem; 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 { font-weight: 700; }

html.mobile .jt-choices__wrap { background: var(--color-white); overflow: hidden; }
html.mobile .jt-choices__wrap:before { content: ''; width: 16rem; height: 16rem; position: absolute; top: 50%; right: 12rem; background: url(../images/icon/jt-icon/jt-chevron-bottom-tiny-2px-square.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: 60rem; padding: 0 42rem 0 19rem; position: relative; font-family: var(--font-primary); font-size: var(--font-size-primary-09); line-height: 60rem; font-weight: 500; letter-spacing: var(--letter-spacing); color: var(--color-black); background: transparent; border: 1px solid var(--color-gray-600); 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); }

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

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

/* AGREEMENT */
.jt-agreement { margin-top: -16rem; }
.jt-agreement label { color: var(--color-black); }
.jt-agreement label a { display: inline-block; margin-left: 8rem; color: var(--color-black); box-shadow: inset 0 -1px 0 0 currentColor; transition: color .3s; }
.jt-agreement .jt-checkbox label > span, 
.jt-agreement .jt-radiobox label > span { padding-left: 36rem; }
.jt-agreement .jt-checkbox label > span:before, 
.jt-agreement .jt-radiobox label > span:before { width: 26rem; height: 26rem; top: 2rem; }
.jt-agreement .jt-checkbox label > span:after { width: 8rem; height: 14rem; left: 9rem; top: 6rem; }
.jt-agreement .jt-radiobox label > span:after { width: 12rem; height: 12rem; left: 7rem; top: 9rem; }
.jt-agreement .jt-checkbox + .jt-checkbox { margin-top: 10rem; }

/* CONTROL */
.jt-form__control { display: flex; gap: 10rem; justify-content: center; }

.jt-form__action { position: relative; min-width: 240rem; padding: 12rem 24rem; background: var(--color-black); border: 0; border-radius: 2rem; transition: background-color .3s; color: var(--color-white); cursor: pointer; }
.jt-form__action > span { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 700; letter-spacing: var(--letter-spacing); }

.jt-form__action-spinner { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 0; }
.jt-form__action-spinner > div { display: inline-block; width: 8rem; height: 8rem; margin: 0 5rem; background: var(--color-gray-600); 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 { pointer-events: none; }
.jt-form.jt-form--loading .jt-form__action > span { visibility: hidden; }
.jt-form.jt-form--loading .jt-form__action-spinner { display: block; }

/* EXCEPT */
.jt-form__except-divider { position: relative; text-align: center; color: var(--color-gray-700); margin-bottom: 60rem; }
.jt-form__except-divider:before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--color-gray-500); transform: translate(0, -50%); }
.jt-form__except-divider span { position: relative; display: inline-block; background: var(--color-gray-100); padding: 0 12rem; }
.jt-form__except-control a { display: inline-block; padding: 10rem 38rem; width: 100%; border: 2rem solid var(--color-black); border-radius: 2rem; text-align: center; color: var(--color-black); transition: color .3s, background .3s; }



/* **************************************** *
 * CATEGORY
 * **************************************** */
.jt-category { padding: 40rem 0; }
.jt-category ul { font-size: 0; }
.jt-category li { display: inline-block; }
.jt-category li + li{ margin-left: 8rem; }
.jt-category a { display: inline-block; padding: 6rem 40rem; background: var(--color-gray-300); border-radius: 2rem; color: var(--color-black); transition: background .3s, color .3s; }
.jt-category--active a { background: var(--color-black); color: var(--color-white); }



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

.jt-search__field { position: relative; width: 600rem; box-shadow: inset 0 -1px 0 0 var(--color-gray-700); }
.jt-search__input { display: block; width: 100%; height: 50rem; margin: 0; padding: 10rem 0; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 500; letter-spacing: var(--letter-spacing); text-overflow: ellipsis; background: transparent; border: 0; border-radius: 0; outline: none; opacity: 1; box-sizing: border-box; }
.jt-search__input:focus { border-color: var(--color-black); }

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

.jt-search__input:disabled, 
.jt-search__input:read-only { border-color: var(--color-gray-300); }
.jt-search__input:disabled + .jt-search__label, 
.jt-search__input:read-only + .jt-search__label { color: var(--color-gray-400); }

/* CLEAR */
.jt-search__reset { display: block; width: 28rem; height: 28rem; margin: 0; padding: 0; position: absolute; right: 0; top: 50%; background: none; border: none; cursor: pointer; transform: translate(0, -50%); opacity: 0; transition: opacity .15s; }
.jt-search__reset .jt-icon { display: block; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; }
.jt-search__reset .jt-icon svg { position: relative; }
.jt-search__reset .jt-icon path { fill: var(--color-gray-700); }

/* 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 { display: flex; justify-content: center; align-items: center; text-align: center; margin-top: 60rem; }
.jt-pagination__numbers { display: flex; min-width: 30rem; height: 30rem; padding: 0 10rem; justify-content: center; align-items: center; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 500; letter-spacing: var(--letter-spacing); color: var(--color-gray-700); transition: color .3s; }
.jt-pagination__numbers .jt-icon { width: 21rem; }
.jt-pagination__numbers .jt-icon path { fill: var(--color-gray-700); }

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


/* **************************************** *
 * LOADMORE
 * **************************************** */
.jt-loadmore { margin-top: 120rem; font-size: 0; text-align: center; }
.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-white); 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 > span { visibility: hidden; }
.jt-loadmore.jt-loadmore--loading .jt-loadmore__btn .jt-loadmore__spinner { display: block; }



/* **************************************** *
 * SINGLE
 * **************************************** */
/* RESET */
body.single { background: var(--color-white); }
body.single .main-container { padding-top: 224rem; padding-bottom: 160rem; }

/* BREADCRUMB */
.jt-single { overflow-wrap: anywhere; }
.jt-single .jt-breadcrumb a,
.jt-single .jt-breadcrumb span { color: var(--color-black); font-weight: 700; }
.jt-single .jt-breadcrumb__separator span { background-image: url('../images/icon/jt-icon/jt-chevron-right-smaller-3px-square.svg'); top: 0; width: 10rem; height: 14rem; }

/* LAYOUT */
.jt-single__header { padding-bottom: 60rem; margin-bottom: 60rem; border-bottom: 1px solid var(--color-gray-700); }
.jt-single__category { margin-bottom: 40rem; }
.jt-single__meta { display: flex; flex-direction: column; gap: 4rem; margin-top: 18rem; color: var(--color-gray-700); }
.jt-single__body { position: relative; }

/* TAGS */
.jt-single__tags { display: flex; flex-wrap: wrap; gap: 6rem; margin-top: 60rem; }
.jt-single__tags a { display: block; padding: 6rem 24rem; color: var(--color-gray-700); background: var(--color-gray-100); white-space: nowrap; transition: background .3s; }

/* CONTROL */
.jt-single__control { display: flex; justify-content: center; gap: 10rem; margin-top: 120rem; }
.jt-single__control a { min-width: 180rem; }

/* FORM */
.jt-single__form { background: var(--color-gray-100); padding: 80rem; margin-top: 60rem; }
.jt-single__form-title { margin-bottom: 40rem; }

/* EXPLAIN */
.jt-single__explain { background: var(--color-gray-100); padding: 40rem; margin-top: 60rem; }
.jt-single__explain-label { position: relative; display: inline-block; margin-bottom: 28rem; padding-bottom: 4rem; box-shadow: inset 0 -1px 0 currentColor; }
.jt-single__explain-title { margin-bottom: 8rem; }
.jt-single__explain-logo { display: flex; justify-content: flex-end; align-items: flex-end; height: 67rem; }
.jt-single__explain-logo .jt-icon { width: 80rem; }
.jt-single__explain-logo .jt-icon path { fill: var(--color-gray-600); }

/* NAV */
.jt-single__nav { position: absolute; left: calc((1840rem - 100%) / 2 * -1); top: 0; bottom: 0; opacity: 0; visibility: hidden; }
.jt-single__nav-inner { position: sticky; top: 110rem; display: flex; flex-direction: column; max-height: calc(100svh - 220rem); margin-bottom: 160rem; width: 300rem; padding: 32rem 28rem; background: var(--color-gray-100); border-radius: 2rem; }
.jt-single__nav-head { margin-bottom: 24rem; padding-bottom: 24rem; border-bottom: 1px solid var(--color-gray-400); }
.jt-single__nav-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.jt-single__nav-list { flex: 1; overflow: auto; overscroll-behavior: none; }
.jt-single__nav-list > li + li { margin-top: 4rem; }
.jt-single__nav-list > li > a { display: block; padding: 8rem 12rem; color: var(--color-gray-700); border-radius: 2rem; transition: background .3s, color .3s; }
.jt-single__nav-list > li > a.jt-single__nav--active { background: var(--color-gray-200); color: var(--color-black); }
.jt-single__nav-list > li > a > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

html.win .jt-single__nav-list { overflow: overlay; }
html.win .jt-single__nav-list::-webkit-scrollbar { width: 4rem; background: transparent; }
html.win .jt-single__nav-list::-webkit-scrollbar-track { background: transparent; border-radius: 99rem; }
html.win .jt-single__nav-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .1); border-radius: 99rem; }



/* **************************************** *
 * SHARE
 * **************************************** */
.jt-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 12rem; }
.jt-share .jt-share__item { display: block; width: 46rem; height: 46rem; position: relative; background: var(--color-gray-200); border-radius: 50%; transition: .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: 15rem 40rem; 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 { color: var(--color-white); }



/* **************************************** *
 * TAB
 * **************************************** */
.jt-tab__content { display: none; }
.jt-tab__content.jt-tab--active { display: block; }



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

.swiper-buttons { width: 100%; }
.swiper-control { position: absolute; left: 0; bottom: 0; font-size: 0; text-align: center; z-index: 2; opacity: 0; visibility: hidden; }

/* PAGINATION */
.swiper-control .swiper-pagination.swiper-pagination-bullets { display: inline-block; vertical-align: middle; width: auto; position: relative; bottom: auto; left: auto; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { width: 16rem; height: 16rem; margin: 0; border-radius: 0; position: relative; background: transparent; opacity: 1; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { content: ''; width: 8rem; height: 8rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-gray-300); border-radius: 50%; transition: background-color .3s, opacity .3s; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after { background: var(--color-gray-600); }

/* NAVIGATION */
.swiper-navigation { display: flex; gap: 8rem; }
.swiper-navigation .swiper-button { position: relative; width: 40rem; height: 40rem; margin: 0; padding: 0; background: var(--color-gray-100); border: none; border-radius: 50%; inset: auto; transition: background .3s; }
.swiper-navigation .swiper-button:after { display: none; }
.swiper-navigation .swiper-button .jt-icon { width: 16rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.swiper-navigation .swiper-button .jt-icon path { fill: var(--color-gray-600); }



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

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

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



/* **************************************** *
 * VIDEO
 * **************************************** */
/* 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: flex; justify-content: center; align-items: center; width: 82rem; height: 82rem; margin-top: -41rem; margin-left: -41rem; position: absolute; top: 50%; left: 50%; 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: ''; display: block; width: 100%; height: 100%; background: url(../images/icon/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; }



/* **************************************** *
 * FEATURE
 * **************************************** */
.jt-feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 20rem; }
.jt-feature > li { display: flex; flex-direction: column; gap: 80rem; background: var(--color-white); padding: 40rem; color: var(--color-black); border-radius: 2rem; }
.jt-feature__icon { font-size: 0; }
.jt-feature__icon .jt-icon { display: inline-flex; justify-content: center; align-items: center; width: 60rem; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--color-black); }
.jt-feature__icon .jt-icon path { fill: var(--color-white); }
.jt-feature__content { flex: 1; display: flex; flex-direction: column; }
.jt-feature__content-title { display: block; margin-bottom: 10rem; }
.jt-feature__content-control { flex: 1; display: flex; align-items: flex-end; margin-top: 40rem; }
.jt-feature__content-control a { width: 100%; }

/* SECONDARY */
.jt-feature--secondary > li { gap: 24rem; text-align: center; }
.jt-feature--secondary .jt-feature__content-desc.jt-typo--07 { color: var(--color-gray-700); }



/* **************************************** *
 * BOARD
 * **************************************** */
.jt-board { padding-bottom: 160rem; }
.jt-board__head { display: flex; justify-content: space-between; align-items: center; padding: 60rem 0; }
.jt-board__count { display: flex; gap: 21rem; }
.jt-board__count span { position: relative; }
.jt-board__count span:after { content: ''; position: absolute; top: 50%; right: -11rem; width: 1rem; height: 15rem; background: var(--color-gray-700); transform: translate(0, -50%); }

/* FLEX */
.jt-board__flex > li { border-top: 1px solid var(--color-gray-700); }
.jt-board__flex > li > a { display: flex; justify-content: space-between; gap: 208rem; padding: 40rem 0; color: var(--color-black); }
.jt-board__flex-content { flex: 1; position: relative; }
.jt-board__flex-meta { margin-bottom: 20rem; }
.jt-board__flex-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.jt-board__flex-info { display: flex; gap: 18rem; margin-top: 20rem; color: var(--color-gray-700); }
.jt-board__flex-info > * { position: relative; }
.jt-board__flex-info > * + * { flex: 1; }
.jt-board__flex-info > * + *:before { content: ''; position: absolute; left: -9rem; top: calc(var(--font-size-primary-08) * var(--font-lineheight-primary-08) / 2); margin-top: -8rem; width: 2rem; height: 16rem; background: var(--color-gray-500); }
.jt-board__flex-info time { white-space: nowrap; }
.jt-board__flex-more { display: inline-block; margin-top: 60rem; box-shadow: inset 0 -1px 0 0 currentColor; }
.jt-board__flex-thumb { width: 532rem; border-radius: 2rem; overflow: hidden; }
.jt-board__flex-thumb .jt-lazyload { padding-top: 56.39%; transition: transform 1s; }
.jt-board__flex-thumb .jt-lazyload__color-preview { background: var(--color-gray-400); }
.jt-board__flex-thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-board__flex-tags { display: flex; flex-wrap: wrap; gap: 6rem; margin-top: 60rem; }
.jt-board__flex-tags span { display: block; padding: 6rem 24rem; color: var(--color-gray-700); background: var(--color-gray-200); white-space: nowrap; }
.jt-board__flex-outlink { position: absolute; bottom: 0; left: 0; }
.jt-board__flex-outlink .jt-icon { width: 20rem; }
.jt-board__flex-outlink .jt-icon path { fill: var(--color-black); }

.jt-board__flex-content:has(.jt-board__flex-more) { height: 250rem; }

/* GRID */
.jt-board__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60rem 20rem; }
.jt-board__grid > li > a { display: flex; flex-direction: column; justify-content: space-between; gap: 40rem; height: 100%; padding: 40rem; background: var(--color-white); color: var(--color-black); border-radius: 2rem; }
.jt-board__grid-meta { margin-bottom: 20rem; }
.jt-board__grid-meta:has(.jt-typo--11) { margin-bottom: 8rem; }
.jt-board__grid-content:nth-child(2) { margin-bottom: 40rem; }
.jt-board__grid-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.jt-board__grid-date { display: block; margin-top: 20rem; color: var(--color-gray-700); }
.jt-board__grid-thumb { border-radius: 2rem; overflow: hidden; }
.jt-board__grid-thumb .jt-lazyload { padding-top: 56.34%; transition: transform 1s; }
.jt-board__grid-thumb .jt-lazyload img { height: 100%; object-fit: cover; }

/* HIGHLIGHT */
.jt-board__highlight { margin-bottom: 60rem; }
.jt-board__highlight a { display: flex; justify-content: space-between; gap: 100rem; padding: 50rem; background: var(--color-white); color: var(--color-black); border-radius: 2rem; }
.jt-board__highlight-content { flex: 1; }
.jt-board__highlight-meta { margin-bottom: 20rem; }
.jt-board__highlight-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.jt-board__highlight-info { display: flex; gap: 18rem; margin-top: 20rem; color: var(--color-gray-700); }
.jt-board__highlight-info > * { position: relative; }
.jt-board__highlight-info > * + * { flex: 1; }
.jt-board__highlight-info > * + *:before { content: ''; position: absolute; left: -9rem; top: calc(var(--font-size-primary-08) * var(--font-lineheight-primary-08) / 2); margin-top: -8rem; width: 2rem; height: 16rem; background: var(--color-gray-500); }
.jt-board__highlight-info time { white-space: nowrap; }
.jt-board__highlight-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; margin-top: 50rem; }
.jt-board__highlight-thumb { width: 800rem; border-radius: 2rem; overflow: hidden; }
.jt-board__highlight-thumb .jt-lazyload { padding-top: 56.37%; transition: transform 1s; }
.jt-board__highlight-thumb .jt-lazyload__color-preview { background: var(--color-gray-400); }
.jt-board__highlight-thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-board__highlight .swiper-control { display: flex; justify-content: space-between; align-items: center; bottom: 50rem; left: 50rem; right: 950rem; }
.jt-board__highlight .swiper-pagination { margin-left: -4rem; }

/* NOTHING */
.jt-board__nothing { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 12rem; text-align: center; height: 580rem; background: var(--color-white); padding: 40rem; }
.jt-board__nothing b { display: block; overflow-wrap: anywhere; }
.jt-board__nothing p { color: var(--color-gray-700); }

/* CONTROL */
.jt-board__control { display: flex; justify-content: center; gap: 10rem; margin-top: 60rem; }
.jt-board__control a { min-width: 180rem; }



/* **************************************** *
 * BREADCRUMB
 * **************************************** */
.jt-breadcrumb { display: flex; flex-wrap: wrap; gap: 10rem; align-items: center; color: var(--color-white); text-transform: none; }
.jt-breadcrumb a, .jt-breadcrumb span { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 500; letter-spacing: var(--letter-spacing); color: var(--color-white); }
.jt-breadcrumb__separator { display: flex; align-items: center; }
.jt-breadcrumb__separator span { position: relative; top: 2rem; display: block; width: 6rem; height: 12rem; background: url(../images/icon/icon-breadcrumb-chevron.svg) no-repeat center center / cover; overflow: hidden; font-size: 0; text-indent: -9999rem; }
.jt-breadcrumb > li:last-child > a, .jt-breadcrumb > li:last-child > span { font-weight: 700; }



/* **************************************** *
 * PROGRESS
 * **************************************** */
.jt-progress { display: flex; gap: 20rem; }
.jt-progress__item { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 40rem; color: var(--color-gray-700); transition: color .3s; }
.jt-progress__item:before { content: ''; display: block; height: 5rem; background: var(--color-gray-700); }
.jt-progress__line { position: absolute; top: 0; left: 0; width: 100%; height: 5rem; background: var(--color-white); transform: scaleX(0); transform-origin: 0 0; }
.jt-progress__video { position: relative; padding-top: 56.25%; margin-top: -20rem; opacity: .5; transition: opacity .3s; }
.jt-progress__content { padding: 0 40rem; }
.jt-progress__content p { margin-top: 10rem; }
.jt-progress__tags { display: flex; gap: 10rem; justify-content: center; }
.jt-progress__tags span { display: inline-block; padding: 5rem 9rem; border: 1px solid currentColor; border-radius: 2rem; }

.jt-progress--active { color: var(--color-white); }
.jt-progress--active .jt-progress__video { opacity: 1; }

.jt-progress:has(.jt-progress__item:nth-child(4)) .jt-progress__content { padding: 0 20rem; }
.jt-progress:has(.jt-progress__video) .jt-progress__content { padding: 0 !important; margin-top: -20rem; }



/* **************************************** *
 * CTA
 * **************************************** */
.jt-cta { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; height: 449rem; filter: grayscale(1); border-radius: 2rem; overflow: hidden; }
.jt-cta__video { position: absolute; inset: 0; }
.jt-cta__content { position: relative; }
.jt-cta__title { color: var(--color-white); }
.jt-cta__desc { color: var(--color-gray-500); margin-top: 4rem; }
.jt-cta__control { display: flex; justify-content: center; gap: 20rem; margin-top: 32rem; }
.jt-cta__control a { display: inline-flex; gap: 1px; color: var(--color-white); border-radius: 2rem; overflow: hidden; backdrop-filter: blur(25rem); transition: background-color .3s; }
.jt-cta__control span { position: relative; display: flex; align-items: center; justify-content: center; padding: 10rem 20rem; }
.jt-cta__control span:before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.1); }
.jt-cta__control .jt-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 46rem; transition: background-color .3s; }
.jt-cta__control .jt-icon:before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.1); }
.jt-cta__control .jt-icon svg { width: 24rem; }
.jt-cta__control .jt-icon path { fill: currentColor; }



/* **************************************** *
 * MOTION
 * **************************************** */
.jt-motion__item { opacity: 0; }



/* **************************************** *
 * CONFIRM
 * **************************************** */
.jt-confirm { position: fixed; left: 0; top: 0; width: 100%; height: 100%; text-align: center; background-color: rgba(0, 0, 0, .5); 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: calc(100% - 40rem); max-width: 376rem; background: var(--color-white); border-radius: 2rem; overflow: hidden; }

.jt-confirm__content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10rem; min-height: 150rem; padding: 40rem; }
.jt-confirm__content b { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-confirm__content p { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 500; letter-spacing: var(--letter-spacing); }

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

.jt-confirm--choice .jt-confirm__btn { width: 50%; }
.jt-confirm--choice .jt-confirm__btn.jt-confirm--cancel { background: var(--color-gray-300); color: var(--color-black); }



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



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

    /* BUTTON */
    .jt-btn__basic.jt-btn--type-01:hover { background: var(--color-gray-800); border-color: var(--color-gray-800); }
    .jt-btn__basic.jt-btn--type-02:hover { color: var(--color-white); background: var(--color-black); }
    .jt-btn__basic.jt-btn--type-03:hover { color: var(--color-black); background: var(--color-white); }
    .jt-form__data:not(.jt-form__data--error) .jt-form__field:hover { border-color: var(--color-gray-500); }
    .jt-form__action:hover { background: var(--color-gray-800); }
    .jt-form__except-control a:hover { color: var(--color-white); background: var(--color-black); }
    .jt-agreement label a:hover { color: var(--color-gray-700); }
    .jt-automail__list > li:hover { background: var(--color-gray-100); color: var(--color-black); }
    .jt-checkbox label:hover > span:before, 
    .jt-radiobox label:hover > span:before { border-color: var(--color-gray-500); }

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

    /* BOARD */
    .jt-board__flex > li > a:hover .jt-board__flex-thumb .jt-lazyload { transform: scale(1.05); }
    .jt-board__grid > li > a:hover .jt-board__grid-thumb .jt-lazyload { transform: scale(1.05); }
    .jt-board__highlight a:hover .jt-board__highlight-thumb .jt-lazyload { transform: scale(1.05); }

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

    /* SINGLE */
    .jt-single__tags a:hover { background: var(--color-gray-200); }
    .jt-single__nav-list > li > a:hover { color: var(--color-black); }

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

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

    /* CTA */
    .jt-cta__control a:hover { background: var(--color-black); }

    /* SWIPER */
    .swiper-navigation .swiper-button:hover { background: var(--color-gray-200); }
    .swiper-navigation .swiper-button:hover .jt-icon path { fill: var(--color-black); }

}