@charset "utf-8";

/*
 * File    : jt-strap.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * A11Y
 * TYPOGRAPHY
 * JT GUIDE
 * BUTTON
 * FORM
 * CATEGORY
 * PAGINATION
 * LOADMORE
 * LIST COMPONENT
 * SINGLE LAYOUT
 * SHARE
 * TOOLTIP
 * SWIPER
 * LAZYLOAD
 * VIDEO
 * ACCORDION LIST
 * JT FLOAT
 * BOARD
 * SEARCH
 * CONTACT
 * WIDECARD
 * POPUP
 * 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-01); }
.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-01); }
.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-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-02); }
.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-02); }
.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-02); }
.jt-typo--08 { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 700; letter-spacing: var(--letter-spacing-02); }
.jt-typo--09 { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 700; letter-spacing: var(--letter-spacing-02); }
.jt-typo--10 { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 500; letter-spacing: var(--letter-spacing-02); }
.jt-typo--11 { font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing-02); }
.jt-typo--12 { font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-02); }
.jt-typo--13 { font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 400; letter-spacing: var(--letter-spacing-02); }
.jt-typo--14 { font-size: var(--font-size-primary-11); line-height: var(--font-lineheight-primary-11); font-weight: 700; letter-spacing: var(--letter-spacing-02); }
.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-02); }
.jt-typo--16 { font-size: var(--font-size-primary-12); line-height: var(--font-lineheight-primary-12); font-weight: 500; letter-spacing: var(--letter-spacing-02); }



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



/* **************************************** *
 * BUTTON
 * **************************************** */
.jt-btn__basic { position: relative; display: inline-block; vertical-align: middle; padding: 14rem 40rem; font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing-02); color: var(--color-white); text-align: center; background: none; border: 0; border-radius: 8rem; white-space: nowrap; cursor: pointer; transition: background .3s; }
.jt-btn__basic:before { content: ''; position: absolute; inset: 0; background: linear-gradient(98deg, #00B4FF 1.72%, #0081FF 49.42%, #A600FF 97.11%); border-radius: inherit; transition: opacity .3s; }
.jt-btn__basic > span { position: relative; }

.jt-btn__basic.jt-btn--type-02 { color: #12205A; }
.jt-btn__basic.jt-btn--type-02:before { background: linear-gradient(95deg, #55E451 1.78%, #EF0 97.65%); }

.jt-btn__basic.jt-btn--large { padding-top: 16rem; padding-bottom: 16rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); }

.jt-btn__round { position: relative; display: inline-block; vertical-align: middle; padding: 14rem 40rem; font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing-02); color: var(--color-black); text-align: center; background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-gray-400); border-radius: 8rem; white-space: nowrap; cursor: pointer; transition: color .3s; }
.jt-btn__round > span { position: relative; }

.jt-btn__round.jt-btn--large { padding-top: 16rem; padding-bottom: 16rem; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); }



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

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

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

/* INPUT */
.jt-form__field { display: inline-block; vertical-align: middle; width: 100%; height: 51rem; margin: 0; padding: 0 15rem; font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-02); color: var(--color-black); border: 1px solid var(--color-gray-400); border-radius: 4rem; outline: none; background: var(--color-white); box-sizing: border-box; transition: border .3s; opacity: 1; }
textarea.jt-form__field { height: 220rem; padding: 11rem 15rem; overflow: auto; resize: none; }
.jt-form__field:focus { border-color: var(--color-black); }
.jt-form__field:disabled { background: var(--color-gray-100); pointer-events: none; }
.jt-form__field:read-only:focus::-webkit-input-placeholder { color: var(--color-gray-600); }
.jt-form__data--error .jt-form__field { border-color: #D60000 !important; }

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

/* VALIDITY */
.jt-form__valid { display: block; margin-top: 8rem; color: #D60000; }
.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: 32rem; position: relative; color: var(--color-gray-700); }
.jt-checkbox label > span:before, .jt-radiobox label > span:before { content: ''; display: block; width: 24rem; height: 24rem; position: absolute; top: 0; left: 0; background: var(--color-white); border: 1px solid var(--color-gray-400); transition: border .3s, background-color .1s; box-sizing: border-box; }
.jt-checkbox label > span:after, .jt-radiobox label > span:after { content: ''; display: none; position: absolute; box-sizing: border-box; }
.jt-checkbox label > span:before, .jt-radiobox label > span:before { border-radius: 4rem; }
.jt-checkbox label > span:after { width: 16rem; height: 16rem; background: url(../images/icon/icon-checkbox.svg) no-repeat center center / cover; left: 4rem; top: 4rem; }
.jt-radiobox label > span:after { width: 12rem; height: 2rem; left: 6rem; top: 11rem; background: var(--color-white); border-radius: 99rem; }
.jt-checkbox input:checked + span:before, .jt-radiobox input:checked + span:before { background: var(--color-primary); border-color: var(--color-primary); }
.jt-checkbox input:disabled + span:before, .jt-radiobox input:disabled + span:before, .jt-checkbox input:disabled:checked + span:before, .jt-radiobox input:disabled:checked + span:before { border-color: var(--color-gray-500); background: var(--color-gray-400); }
.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-500); background: var(--color-gray-400); }
.jt-checkbox input:disabled + span:after { background-image: url(../images/icon/icon-checkbox-disabled.svg); }
.jt-radiobox input:disabled + span:after { background: var(--color-gray-600); }

/* 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: flex; align-items: center; min-height: 51rem; padding: 0 51rem 0 15rem; font-size: var(--font-size-primary-10); line-height: 1; font-weight: 500; letter-spacing: var(--letter-spacing-02); background: var(--color-white); border: 1px solid var(--color-gray-400); color: var(--color-black); border-radius: 4rem; transition: border-color .3s; }
.choices__placeholder { color: var(--color-gray-600); opacity: 1; }

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

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

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

.is-flipped.is-open .choices__list--dropdown, 
.is-flipped.is-open .choices__list[aria-expanded] {  border-radius: 4rem 4rem 0 0; }

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

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

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

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

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

.jt-form__data--error .choices__inner { border-color: #D60000; }

.jt-choices__wrap:has(option[value="etc"]) textarea.jt-form__field { display: none; margin-top: 8rem; }
.jt-choices__wrap:has(option[value="etc"]:checked) textarea.jt-form__field { display: block; }

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: 18rem; right: 15rem; background: url(../images/icon/icon-select-medium.svg) no-repeat center center; background-size: contain; }
html.mobile .jt-choices__wrap > select { appearance: none; width: 100%; margin: 0; height: 51rem; padding: 0 51rem 0 15rem; position: relative; font-size: var(--font-size-primary-10); line-height: 1; font-weight: 500; letter-spacing: var(--letter-spacing-02); color: var(--color-black); background: transparent; border: 1px solid var(--color-gray-400); border-radius: 4rem; 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-white); border: 1px solid var(--color-black); border-radius: 0 0 4rem 4rem; z-index: 1; }
.jt-automail__list > li { padding: 11rem 19rem; font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 500; letter-spacing: var(--letter-spacing-02); color: var(--color-gray-600); cursor: pointer; }
.jt-automail__list > li > span { color: var(--color-primary); }
.jt-automail__list > li.jt-automail--focus { background: var(--color-gray-100); }

.jt-automail--open .jt-form__field { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* CONTROL */
.jt-form__control { text-align: center; }
.jt-form__action { display: inline-block; width: 100%; padding: 16rem 24rem; 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-02); color: var(--color-white); text-align: center; background: var(--color-primary); border: 0; border-radius: 8rem; box-sizing: border-box; transition: color .3s, background-color .3s; cursor: pointer; }

.jt-form__loading { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 8rem; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.jt-form__loading span { width: 8rem; height: 8rem; background: var(--color-white); border-radius: 100%; animation: bounce-delay 1.4s infinite ease-in-out both; }
.jt-form__loading span:nth-child(2) { animation-delay: 0.16s; }
.jt-form__loading span:nth-child(3) { animation-delay: 0.32s; }
.jt-form--loading .jt-form__loading { opacity: 1; visibility: visible; }
.jt-form--loading button[type="submit"] { pointer-events: none; }
.jt-form--loading button[type="submit"] > span { opacity: 0; visibility: hidden; }

/* CHAPTER */
.jt-form:has(.jt-form__chapter) { gap: 60rem; }
.jt-form__chapter { display: flex; flex-direction: column; gap: 20rem; }
.jt-form__chapter:first-child { margin-top: 0; }
.jt-form__chapter-head { display: flex; align-items: center; justify-content: space-between; gap: 20rem; }
.jt-form__chapter-title { flex: 1; display: flex; align-items: center; gap: 10rem; color: var(--color-gray-600); }
.jt-form__chapter-title .jt-icon { display: flex; align-items: center; justify-content: center; width: 32rem; height: 32rem; background: var(--color-gray-400); border-radius: 50%; transition: background .3s; }
.jt-form__chapter-title .jt-icon path { fill: var(--color-white); }
.jt-form__chapter-content { display: none; }
.jt-form__chapter-content .jt-form__control { margin-top: 20rem; }
.jt-form__chapter-inner { background: var(--color-gray-100); border-radius: 8rem; padding: 40rem; }

.jt-form__chapter-explain { padding: 20rem 0; }
.jt-form__chapter-explain > li { position: relative; padding-left: 36rem; color: var(--color-gray-700) }
.jt-form__chapter-explain > li + li { margin-top: 8rem; }
.jt-form__chapter-explain > li:before { content: ''; position: absolute; left: 20rem; top: calc(var(--font-size-primary-09) * var(--font-lineheight-primary-09) / 2 - 3rem); width: 6rem ; height: 6rem; background: currentColor; border-radius: 50%; }

.jt-form__chapter:not(.jt-form__chapter--complete) .jt-form__chapter-result { display: none; }
.jt-form__chapter-result { display: flex; justify-content: space-between; align-items: center; gap: 80rem; background: var(--color-gray-300); border-radius: 8rem; padding: 24rem 40rem; }
.jt-form__chapter-data { display: flex; gap: 10rem; }
.jt-form__chapter-data + .jt-form__chapter-data { margin-top: 4rem; }
.jt-form__chapter-data > * { color: var(--color-gray-800); }
.jt-form__chapter-modify { box-shadow: inset 0 -2rem 0 0 currentColor; color: var(--color-secondary); padding: 0; border: 0; background: none; cursor: pointer; }

.jt-form__chapter--active .jt-form__chapter-title { color: var(--color-gray-800); }
.jt-form__chapter--active .jt-form__chapter-title .jt-icon { background: var(--color-primary); }
.jt-form__chapter--active .jt-form__chapter-content { display: block; }
.jt-form__chapter--active .jt-form__chapter-result { display: none; }

/* AGREEMENT */
.jt-agreement li + li { margin-top: 16rem }
.jt-agreement label > span.jt-typo--08 { color: var(--color-black); }
.jt-agreement label > span > a { display: inline-block; color: var(--color-black); box-shadow: inset 0 -1px 0 0 currentColor; transition: box-shadow .3s; }
.jt-agreement + .jt-form__valid { margin-top: 12rem; }

/* DATEPICKER */
.jt-form__datepicker { position: relative; max-width: 200rem; }
.jt-form__datepicker .jt-form__field { line-height: 51rem; padding: 0 51rem; -webkit-appearance: none; cursor: pointer; }
.jt-form__datepicker .jt-form__field::-webkit-calendar-picker-indicator { display: none; }
.jt-form__datepicker .jt-form__field::-webkit-date-and-time-value { text-align: left; }
.jt-form__datepicker .jt-form__field:invalid::-webkit-datetime-edit-fields-wrapper { display: none; }
.jt-form__datepicker-calendar { position: absolute; left: 20rem; top: 50%; transform: translate(0, -50%); width: 24rem; pointer-events: none; }
.jt-form__datepicker-calendar path { fill: var(--color-gray-700); }
.jt-form__datepicker-chevron { position: absolute; right: 18rem; top: 50%; transform: translate(0, -50%); width: 16rem; pointer-events: none; }
.jt-form__datepicker-chevron path { fill: var(--color-gray-600); }

.jt-datepicker { position: absolute; left: 0; top: 100%; margin-top: 8rem; width: max-content; border: 1px solid var(--color-gray-800); border-radius: 4rem; padding: 20rem 16rem; background: var(--color-white); z-index: 1; }
.jt-datepicker.-inline- { position: relative; top: auto; left: auto; display: inline-block; z-index: auto; }
.jt-datepicker .air-datepicker-body.-hidden- { visibility: hidden; height: 0; overflow: hidden; }
.jt-datepicker .air-datepicker-nav { position: relative; display: flex; justify-content: center; align-items: center; gap: 123rem; margin-bottom: 20rem; }
.jt-datepicker .air-datepicker-nav--inner { border-radius: 99rem; }
.jt-datepicker .air-datepicker-nav--title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; cursor: pointer; }
.jt-datepicker .air-datepicker-nav--action { cursor: pointer; font-size: 0; }
.jt-datepicker .air-datepicker-nav--action .jt-icon { width: 24rem; }
.jt-datepicker .air-datepicker-nav--action .jt-icon svg path { fill: var(--color-black); }
.jt-datepicker .air-datepicker-body--day-names { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12rem; margin-bottom: 12rem; }
.jt-datepicker .air-datepicker-body--day-name { display: flex; justify-content: center; align-items: center; text-align: center; width: 32rem; height: 32rem; margin: 0 auto; font-size: var(--font-size-primary-11); line-height: var(--font-lineheight-primary-11); letter-spacing: var(--letter-spacing-02); font-weight: 500; color: var(--color-gray-700); }
.jt-datepicker .air-datepicker-body--cells { display: grid; gap: 8rem 12rem; }
.jt-datepicker .air-datepicker-cell { cursor: pointer; color: var(--color-gray-800); width: 100%; height: 32rem; margin: 0 auto; white-space: nowrap; }
.jt-datepicker .air-datepicker-cell-inner { position: relative; width: 100%; height: 100%; border-radius: 99rem; }
.jt-datepicker .air-datepicker-cell-inner span { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.jt-datepicker .air-datepicker-cell.-selected- { color: var(--color-white); }
.jt-datepicker .air-datepicker-cell.-selected- .air-datepicker-cell-inner { background: var(--color-black); }
.jt-datepicker .air-datepicker-cell:not(.-selected-).-other-month- { color: var(--color-gray-500); }
.jt-datepicker .air-datepicker-cell:not(.-selected-).-disabled- { color: var(--color-gray-500); pointer-events: none; }
.jt-datepicker .air-datepicker-body--cells.-days- { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.jt-datepicker .air-datepicker-body--cells.-days- .air-datepicker-cell { width: 32rem; }
.jt-datepicker .air-datepicker-body--cells.-months- { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jt-datepicker .air-datepicker-body--cells.-years- { grid-template-columns: repeat(4, minmax(0, 1fr)); }



/* **************************************** *
 * CATEGORY
 * **************************************** */
.jt-category { position: relative; text-align: center; margin: 0 auto 80rem; border-radius: 99rem; opacity: 0; visibility: hidden; overflow: hidden; }
.jt-category__list { display: inline-flex; max-width: 100%; padding: 10rem 12rem; border-radius: 99rem; background: rgba(248, 248, 248, 0.8); backdrop-filter: blur(20rem); -webkit-backdrop-filter: blur(20rem); }
.jt-category__list > li { position: relative; }
.jt-category__list > li > a { display: block; padding: 12rem 40rem; border-radius: 99rem; color: var(--color-gray-800); white-space: nowrap; transition: color .3s, background .3s; }
.jt-category__list > li.jt-category--active > a { color: var(--color-white); background: var(--color-secondary) }

/* STICKY */
.jt-category--sticky { position: sticky; top: calc(var(--header-height) - var(--minimize-height) + 20rem); z-index: 2; }



/* **************************************** *
 * PAGINATION
 * **************************************** */
.jt-pagination { display: flex; gap: 16rem; justify-content: center; margin-top: 80rem; text-align: center; }
.jt-pagination:empty { margin-top: 0; }

.jt-pagination .jt-pagination__numbers { position: relative; display: flex; align-items: center; justify-content: center; min-width: 28rem; height: 28rem; font-size: var(--font-size-primary-10); line-height: 1; font-weight: 500; letter-spacing: var(--letter-spacing-02); color: var(--color-gray-700); transition: color .3s; }
.jt-pagination .jt-pagination__numbers:after { content: ''; display: block; width: 16rem; height: 2rem; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); box-sizing: border-box; }
.jt-pagination .jt-pagination__numbers .jt-icon { width: 16rem;}
.jt-pagination .jt-pagination__numbers.jt-pagination--prev { margin-left: 0; margin-right: -6rem; }
.jt-pagination .jt-pagination__numbers.jt-pagination--next { margin-left: -6rem; margin-right: 0; }
.jt-pagination .jt-pagination__numbers.jt-pagination--first { margin-left: 0; margin-right: -6rem; }
.jt-pagination .jt-pagination__numbers.jt-pagination--last { margin-left: -6rem; margin-right: 0; }

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



/* **************************************** *
 * LOADMORE
 * **************************************** */
.jt-loadmore { position: relative; }
.jt-loadmore__loading { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 8rem; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.jt-loadmore__loading span { width: 8rem; height: 8rem; background: var(--color-gray-500); border-radius: 100%; animation: bounce-delay 1.4s infinite ease-in-out both; }
.jt-loadmore__loading span:nth-child(2) { animation-delay: 0.16s; }
.jt-loadmore__loading span:nth-child(3) { animation-delay: 0.32s; }
.jt-loadmore--loading .jt-loadmore__loading { opacity: 1; visibility: visible; }
.jt-loadmore--loading .jt-loadmore__btn { pointer-events: none; }
.jt-loadmore--loading .jt-loadmore__btn > span { opacity: 0; visibility: hidden; }



/* **************************************** *
 * LIST COMPONENT
 * **************************************** */
/* NOTHING */
.jt-list-nothing { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16rem; max-width: 1200rem; margin: 0 auto; height: 480rem; padding: 40rem; text-align: center; background: var(--color-gray-100); border-radius: 16rem; overflow: hidden; }
.jt-list-nothing:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2rem dashed var(--color-gray-400); border-radius: inherit; box-sizing: border-box; }
.jt-list-nothing b { display: block; }
.jt-list-nothing p { color: var(--color-gray-800); }



/* **************************************** *
 * SINGLE LAYOUT
 * **************************************** */
/* LAYOUT */
.jt-single { overflow: hidden; }
.jt-single__header { margin-bottom: 80rem; text-align: center; overflow-wrap: anywhere; }
.jt-single__footer { margin-top: 200rem; }

.jt-single__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30rem; margin-bottom: 16rem; }
.jt-single__meta span { color: var(--color-primary); }

.jt-single__desc { margin-top: 8rem; color: var(--color-gray-800); }

/* SHARE */
.jt-single__share { display: flex; align-items: center; justify-content: center; gap: 28rem; margin-top: 24rem; }
.jt-single__share > * { position: relative; display: flex; align-items: center; gap: 6rem; color: var(--color-gray-800); transition: color .3s; }
.jt-single__share > * + *:before { content: ''; position: absolute; left: -14rem; top: 50%; transform: translate(-50%, -50%); width: 4rem; height: 4rem; border-radius: 50%; background: var(--color-gray-500); }
.jt-single__share .jt-icon { width: 16rem; }
.jt-single__share .jt-icon path { fill: currentColor; }

/* EXCERPT */
.jt-single__excerpt { max-width: 780rem; margin: 0 auto 80rem; }
.jt-single__excerpt-container { background: var(--color-gray-100); border-radius: 16rem; padding: 28rem 32rem; }
.jt-single__excerpt-title { display: flex; align-items: center; gap: 6rem; margin-bottom: 16rem; }
.jt-single__excerpt-icon { width:24rem; }
.jt-single__excerpt-icon svg { width: 100%; }

.jt-single__excerpt p { color: var(--color-gray-800); }

/* CONTROL */
.jt-single__control { margin-top: 120rem; font-size: 0; text-align: center; }
.jt-single__control a { display: inline-block; min-width: 215rem; padding: 14rem 40rem; border-radius: 8rem; color: var(--color-white); background: var(--color-gray-800); transition: background .3s; }

/* RELATED */
.jt-single__related { margin-top: 200rem; }
.jt-single__related-head { margin-bottom: 40rem; }
.jt-single__related .jt-board__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }



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



/* **************************************** *
 * TOOLTIP
 * **************************************** */
.jt-tooltip { padding: 16rem 40rem; position: fixed; left: 50rem; left: 50%; bottom: 40rem; background: var(--color-black); border-radius: 8rem; z-index: 100; transform: translate(-50%, 0); opacity: 0; visibility: hidden; }
.jt-tooltip p { color: var(--color-white); white-space: nowrap; }



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

.swiper-buttons { width: 100%; }
.swiper-control { display: inline-flex; align-items: center; justify-content: center; gap: 10rem; position: absolute; left: 0; bottom: 12rem; width: 100%; 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 {  position: relative; width: auto; height: auto; margin: 0 6rem;background: transparent; opacity: 1; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before { content: ''; display: block; width: 8rem; height: 8rem; background: rgba(255, 255, 255, 0.6); border-radius: 4rem; transition: width .3s; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active:before { width: 48rem; }
.swiper-control .swiper-pagination-bullet__progress { position: absolute; inset: 0; border-radius: 4rem; overflow: hidden; }
.swiper-control .swiper-pagination-bullet__progress > span { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: var(--color-white); }

/* STATE */
.swiper-state { position: relative; width: 36rem; height: 36rem; }
.swiper-state button { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; font-size: 0; }
.swiper-state .jt-icon { width: 14rem; }
.swiper-state .jt-icon path { fill: var(--color-white); }

.swiper-state--play .swiper-state__play { display: none; }
.swiper-state--play .swiper-state__pause { display: block; }
.swiper-state--pause .swiper-state__play { display: block; }
.swiper-state--pause .swiper-state__pause { display: none; }

/* NAVIGATION */
.swiper-navigation { display: flex; gap: 12rem; justify-content: flex-end; margin-top: 40rem; opacity: 0; visibility: hidden; display: none; }
.swiper-navigation .swiper-button { position: relative; inset: auto; width: 40rem; height: 40rem; margin-top: 0; padding: 0; background: var(--color-gray-300); border: none; border-radius: 50%; transition: opacity .3s, background .3s; }
.swiper-navigation .swiper-button:after { display: none; }
.swiper-navigation .swiper-button .jt-icon { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.swiper-navigation .swiper-button .jt-icon path { fill: var(--color-gray-800); }
.swiper-navigation .swiper-button-disabled { opacity: .4; }
.swiper-navigation .swiper-button-lock { display: block; }



/* **************************************** *
 * 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: 82rem; height: 82rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url(../images/icon/icon-play.svg) no-repeat center center / cover; transition: transform .3s; }

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

/* NATIVE VIDEO */
.jt-native-video { position: absolute; inset: 0; }
.jt-native-video video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; }
.jt-native-video__poster { position: absolute; inset: 0; background: no-repeat center center / cover; cursor: pointer; }
.jt-native-video__poster:before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .2); }
.jt-native-video__poster:after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 82rem; height: 82rem; background: url(../images/icon/icon-play.svg) no-repeat center center / cover; transition: transform .3s; }
.jt-native-video--loading .jt-native-video__poster:after { width: 64rem; height: 64rem; border-radius: 50%; border: 5rem solid transparent; border-top-color: var(--color-white); border-bottom-color: var(--color-white); background: none; animation: loading-spinner 1s linear infinite; }

/* 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 { display: flex; flex-wrap: wrap; row-gap: 20rem; }
.jt-accordion__item { width: 100%; background: var(--color-gray-200); border-radius: 16rem; transition: background .3s; }

.jt-accordion__head { padding: 48rem 120rem 48rem 60rem; position: relative; cursor: pointer; }
.jt-accordion__control { width: 26rem; height: 26rem; position: absolute; top: calc((var(--font-size-primary-06) * var(--font-lineheight-primary-06) / 2) + 35rem); right: 60rem; transition: transform .3s; }
.jt-accordion__control .jt-icon { display: block; width: 100%; }
.jt-accordion__control .jt-icon path { fill: var(--color-black); }

.jt-accordion__content { margin-top: -24rem; margin-bottom: 24rem; position: relative; overflow: hidden; }
.jt-accordion__content-inner { padding: 0 60rem 48rem; margin-bottom: -24rem; color: var(--color-gray-700) }

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

/* BLOCKS */
.jt-accordion__content-inner .jt-blocks > * { margin-left: 0; margin-right: 0; }

/* ACTIVE */
.jt-accordion__item.jt-accordion--active { background: #E0EEF5; }
.jt-accordion__item.jt-accordion--active .jt-accordion__control { transform: rotate(-180deg); }

@media print {

    .jt-accordion__control { transform: rotate(-180deg); }
    .jt-accordion__content-inner { display: block !important; }

}



/* **************************************** *
 * JT FLOAT
 * **************************************** */
.jt-float { position: fixed; bottom: 20rem; left: 50%; transform: translate(-50%, 100%); z-index: 200; opacity: 0; visibility: hidden; backdrop-filter: blur(20rem); -webkit-backdrop-filter: blur(20rem); }
.jt-float:before { content: ''; position: absolute; inset: 0; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(98deg, #004FFF, #99E1FF) border-box; box-shadow: 0 0 10rem rgba(0, 0, 0, .1); border-radius: 8rem; opacity: .8; }
.jt-float__inner { position: relative; display: flex; align-items: center; gap: 28rem; margin: 1px; padding: 12rem 36rem; min-height: 84rem; }
.jt-float__content { flex: 1; display: flex; gap: 28rem; align-items: center; justify-content: center; }
.jt-float__close button { width: 44rem; height: 44rem; border: 0; padding: 0; background: none; font-size: 0; cursor: pointer; margin-left: -10rem; margin-right: -10rem; }
.jt-float__close .jt-icon { width: 24rem; }
.jt-float__close .jt-icon path { fill: var(--color-gray-500); }



/* **************************************** *
 * BOARD
 * **************************************** */
/* HIGHLIGHT */
.jt-board__highlight { margin-bottom: 100rem; }
.jt-board__highlight-item > a { display: flex; gap: 12rem; }
.jt-board__highlight-thumb { width: 807rem; border-radius: 16rem; overflow: hidden; }
.jt-board__highlight-thumb .jt-lazyload { padding-top: 58.48%; }
.jt-board__highlight-thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-board__highlight-content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40rem; background: #A0E1FD; border-radius: 16rem; padding: 48rem 40rem; }
.jt-board__highlight-category { display: block; color: var(--color-secondary); margin-bottom: 10rem; }
.jt-board__highlight-title { color: var(--color-black); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.jt-board__highlight-date { color: var(--color-gray-800); }

.jt-board__highlight .swiper-navigation { margin-top: 16rem; }

/* GRID */
.jt-board__grid:not(.jt-board__grid--slider) { display: grid; gap: 100rem 20rem; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 20rem; }
.jt-board__grid-thumb { position: relative; border-radius: 16rem; overflow: hidden; }
.jt-board__grid-thumb .jt-lazyload { padding-top: 58.46%; transition: transform 1s; }
.jt-board__grid-thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-board__grid-status { position: absolute; left: 20rem; top: 20rem; padding: 4rem 16rem; border-radius: 99rem; background: #00B4FF; color: var(--color-white); }
.jt-board__grid-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60rem; height: 60rem; border-radius: 50%; background: rgba(0, 0, 0, .5); }
.jt-board__grid-play:after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50%; height: 50%; background: url(../images/icon/icon-play.svg) no-repeat center center / cover; }
.jt-board__grid-content { margin-top: 32rem; }
.jt-board__grid-category { display: flex; gap: 8rem; flex-wrap: wrap; margin-bottom: 12rem; color: var(--color-primary); }
.jt-board__grid-title { color: var(--color-black); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.jt-board__grid-desc { margin-top: 8rem; color: var(--color-gray-800); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.jt-board__grid.jt-board__grid--secondary { column-gap: 24rem; }
.jt-board__grid--secondary .jt-board__grid-thumb { border-radius: 8rem; }
.jt-board__grid--secondary .jt-board__grid-thumb .jt-lazyload { padding-top: 58.33%; }

.jt-board__grid--slider { margin: 0 -10rem; }
.jt-board__grid--slider .jt-board__grid-item { width: calc(33.33% - 20rem); margin: 0 10rem; }

/* FLEX */
.jt-board__flex { display: flex; flex-direction: column; gap: 20rem; }
.jt-board__flex > li > a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16rem; padding: 48rem 40rem; border-radius: 8rem; background: var(--color-gray-200); transition: background .3s; }
.jt-board__flex-category { width: 124rem; }
.jt-board__flex-category > span { display: inline-block; padding: 5rem 17rem; background: var(--color-primary); color: var(--color-white); border-radius: 99rem; }
.jt-board__flex-title { position: relative; flex: 1; display: flex; align-items: flex-start; gap: 8rem; }
.jt-board__flex-title > h2 { color: var(--color-black); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.jt-board__flex-title > span { position: relative; flex: 1; color: #00B4FF; top: calc(var(--font-size-primary-06) * var(--font-lineheight-primary-06) / 2); transform: translate(0, -50%); }
.jt-board__flex-date { color: var(--color-gray-700); width: 100rem; text-align: right; }

.jt-board__flex > li > a:has(.jt-board__flex-status) { background: #E0EEF5; }

/* WEBZINE */
.jt-board__webzine { display: flex; flex-wrap: wrap; gap: 20rem; }
.jt-board__webzine > li { width: 100%; }
.jt-board__webzine > li > a { display: flex; align-items: center; gap: 40rem; padding: 16rem; border-radius: 12rem; background: var(--color-gray-100); transition: background .3s; }
.jt-board__webzine-thumb { width: 320rem; border-radius: 8rem; overflow: hidden; }
.jt-board__webzine-thumb .jt-lazyload { padding-top: 62.5%; }
.jt-board__webzine-thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-board__webzine-content { flex: 1; }
.jt-board__webzine-title { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: var(--color-black); }
.jt-board__webzine-desc { margin-top: 28rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: var(--color-gray-800); }
.jt-board__webzine-date { display: block; margin-top: 8rem; color: var(--color-gray-700); }

/* CONTROL */
.jt-board__control { margin-top: 100rem; text-align: center; font-size: 0; }
.jt-board__control > a { display: inline-block; padding: 4rem 0; color: var(--color-black); box-shadow: inset 0 -2px 0 0 currentColor; transition: color .3s; }

/* CTA */
.jt-board__cta { position: relative; border-radius: 16rem; aspect-ratio: 1 / 0.3; overflow: hidden; }
.jt-board__cta-bg { position: absolute; inset: 0; }
.jt-board__cta-bg:after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.jt-board__cta-content { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24rem; height: 100%; padding: 40rem; text-align: center; }
.jt-board__cta-content .jt-btn__basic { min-width: 260rem; }
.jt-board__cta-title { color: var(--color-white); }

/* COUNT */
.jt-board__count { color: var(--color-gray-800); margin-bottom: 20rem; }



/* **************************************** *
 * SEARCH
 * **************************************** */
.jt-search { position: relative; max-width: 680rem; margin: 0 auto 100rem; }
.jt-search:after { content: ''; position: absolute; background: url(../images/icon/icon-point-14.svg) no-repeat center center / cover; width: 91rem; aspect-ratio: 1 / 1.2637; left: 100%; top: 25rem; }
.jt-search__bundle { position: relative; }
.jt-search__bundle:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3rem; background: var(--color-black); border-radius: 99rem; }
.jt-search__field { position: relative; }
.jt-search__input { border: 0; width: 100%; height: 51rem; padding: 0 60rem 19rem 44rem; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 500; letter-spacing: var(--letter-spacing-02); color: var(--color-black); }
.jt-search__label { position: absolute; left: 44rem; top: 50%; transform: translate(0, -50%); margin-top: -9rem; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 500; letter-spacing: var(--letter-spacing-02); color: var(--color-gray-600); cursor: text; transition: opacity .3s, visibility .3s; }
.jt-search__submit { position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 32rem; height: 32rem; margin-top: -9rem; background: none; border: 0; padding: 0; cursor: pointer; }
.jt-search__submit .jt-icon { width: 100%; }
.jt-search__reset { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); width: 24rem; height: 24rem; margin-top: -9rem; background: none; border-radius: 50%; border: 0; padding: 0; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.jt-search__reset:before { content: ''; position: absolute; inset: 1px; background: var(--color-gray-600); border-radius: 50%; transition: background .3s; }
.jt-search__reset .jt-icon { position: relative; width: 100%; }
.jt-search__reset .jt-icon path { fill: var(--color-gray-400); }

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

.jt-search--highlight { color: var(--color-black); background: #A4FF35; }



/* **************************************** *
 * CONTACT
 * **************************************** */
.jt-contact { display: flex; border-radius: 8rem; overflow: hidden; }
.jt-contact__image { width: 50%; }
.jt-contact__image .jt-lazyload { height: 100%; }
.jt-contact__image .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-contact__content { width: 50%; background: #FFE05B; padding: 120rem 80rem; }
.jt-contact__title { display: block; }
.jt-contact__list { margin-top: 24rem; color: var(--color-gray-700); }
.jt-contact__list > li + li { margin-top: 6rem; }
.jt-contact__list > li a { color: inherit; transition: color .3s; }
.jt-contact__control { margin-top: 60rem; }
.jt-contact__control a { display: inline-block; padding: 10rem 30rem; border: 2rem solid var(--color-black); color: var(--color-gray-800); border-radius: 8rem; transition: color .3s, background .3s; }



/* **************************************** *
 * WIDECARD
 * **************************************** */
.jt-widecard { max-width: 1330rem; margin: 0 auto; }
.jt-widecard__banner { position: relative; padding-top: 46.61%; overflow: hidden; }
.jt-widecard__bg { position: absolute; inset: 0; } 
.jt-widecard__bg--mobile { display: none; }
.jt-widecard__picture { position: absolute; inset: 0; background: no-repeat center center / cover; }
.jt-widecard__content { max-width: 680rem; margin: 80rem auto 0; }
.jt-widecard__title { margin-bottom: 40rem; }



/* **************************************** *
 * POPUP
 * **************************************** */
.jt-popup { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20rem; z-index: 1000; opacity: 0; visibility: hidden;}
.jt-popup__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.jt-popup__container { position: relative; max-height: 100%; display: flex; }
.jt-popup__container::-webkit-scrollbar { display: none; }
.jt-popup__inner { position: relative; width: 480rem; padding: 60rem 40rem 48rem; background: var(--color-white); border-radius: 16rem; overflow: auto; overscroll-behavior: none; scrollbar-width: none; }
.jt-popup__head { margin-bottom: 30rem; }
.jt-popup__title { text-align: center; }
.jt-popup__title:after { content: ''; position: absolute; width: 124rem; aspect-ratio: 1 / 0.0483; background: url(../images/icon/icon-point-18.svg) no-repeat center center / 100%; transform: translate(-174rem, 34rem); }
.jt-popup__desc { text-align: center; margin-top: 8rem; color: var(--color-gray-700); }
.jt-popup__close { position: absolute; top: 16rem; right: 16rem; width: 32rem; height: 32rem; border: 0; padding: 0; background: none; cursor: pointer; }
.jt-popup__close .jt-icon { width: 28rem; }
.jt-popup__close .jt-icon path { fill: var(--color-gray-600); }

/* FORM */
.jt-popup .jt-form { gap: 0; }
.jt-popup .jt-form__fieldset { gap: 8rem; }
.jt-popup .jt-agreement { margin-top: 4rem; }
.jt-popup .jt-agreement .jt-checkbox label > span:before { top: -1rem; }
.jt-popup .jt-agreement .jt-checkbox label > span:after { top: 3rem; }
.jt-popup .jt-agreement + .jt-form__valid { margin-top: 8rem; }
.jt-popup .jt-form__control { margin-top: 32rem; }
.jt-popup .jt-form__control button { width: 100%; }

/* FORM EXPLAIN */
.jt-popup__explain { display: flex; align-items: center; gap: 8rem; color: var(--color-gray-700); transition: color .3s; }
.jt-popup__explain span { display: inline-block; box-shadow: inset 0 -1px 0 0 currentColor; }
.jt-popup__explain .jt-icon { width: 20rem; }
.jt-popup__explain .jt-icon path { fill: var(--color-gray-600); }
.jt-popup__explain-content { display: flex; flex-direction: column; gap: 40rem; overflow-wrap: anywhere; }
.jt-popup__explain-item b { display: block; margin-bottom: 12rem; }
.jt-popup__explain-list > li { position: relative; padding-left: 16rem; color: var(--color-gray-700); }
.jt-popup__explain-list > li:before { content: ''; position: absolute; left: 0; top: calc(var(--font-size-primary-09) * var(--font-lineheight-primary-09) / 2); width: 4rem; height: 4rem; margin-top: -2rem; border-radius: 50%; background: currentColor; }
.jt-popup__explain-list > li + li { margin-top: 8rem; }

#form-explain .jt-popup__inner { width: 1000rem; padding: 56rem 50rem; }
#form-explain .jt-popup__inner .jt-blocks * { margin-left: 0; margin-right: 0; max-width: inherit; }



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

/* VIDEO LOADING SPINNER */
@keyframes loading-spinner {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}



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

    /* BUTTON */
    .jt-btn__basic:hover { transition: none; }
    .jt-btn__basic:hover:before { opacity: 0; }
    .jt-btn__basic.jt-btn--type-01:hover { background: var(--color-primary); }
    .jt-btn__basic.jt-btn--type-02:hover { background: #55E451; }

    .jt-btn__round.jt-btn--type-01:hover { color: var(--color-primary); }

    /* FORM */
    .jt-form__field:hover { border-color: var(--color-black); }
    .jt-form__radiobox label:hover { border-color:var(--color-gray-500); }

    .jt-agreement label > span > a:hover { box-shadow: inset 0 -2px 0 0 currentColor; }

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

    .jt-datepicker .air-datepicker-nav--action:hover .air-datepicker-nav--inner { background: var(--color-gray-200); }
    .jt-datepicker .air-datepicker-cell:not(.-selected-):hover .air-datepicker-cell-inner { background: var(--color-gray-200); }

    /* CATEGORY */
    .jt-category a:hover { color: #00B4FF; }

    /* LOADMORE */
    .jt-loadmore__btn:hover { color: var(--color-primary); }

    /* SINGLE LAYOUT */
    .jt-single__share a:hover { color: var(--color-primary); }
    .jt-single__control a:hover { background: var(--color-primary); }

    /* VIDEO */
    .jt-embed-video__overlay:hover .jt-embed-video__overlay-btn { transform: translate(-50%, -50%) scale(0.9); }
    .jt-native-video:not(.jt-native-video--loading) .jt-native-video__poster:hover:after { transform: translate(-50%, -50%) scale(0.9); }

    /* SWIPER */
    .swiper-navigation .swiper-button:hover { background: var(--color-gray-400); }

    /* ACCORDION */
    .jt-accordion__item:has(.jt-accordion__head:hover) { background: #A0E1FD; }

    /* JT FLOAT */
    .jt-float__close:hover .jt-icon path { fill: var(--color-black); }

    /* BOARD */
    .jt-board__grid > li > a:hover .jt-board__grid-thumb .jt-lazyload { transform: scale(1.05); }
    .jt-board__flex > li > a:hover { background: #A0E1FD; }
    .jt-board__webzine > li > a:hover { background: #A0E1FD; }
    .jt-board__control > a:hover { color: var(--color-primary); }

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

    /* CONTACT */
    .jt-contact__control a:hover { background: var(--color-black); color: #FFE05B; }

    /* POPUP */
    .jt-popup__close:hover .jt-icon path { fill: var(--color-black); }
    .jt-popup__explain:hover { color: var(--color-black); }
    .jt-popup__explain:hover .jt-icon path { fill: var(--color-black); }

}