@charset "utf-8";

/*
 * File    : jt-strap.css
 * Author  : STUDIO-JT (KMS)
 *
 * SUMMARY :
 * A11Y
 * TYPOGRAPHY
 * JT GUIDE
 * BUTTON
 * FORM
 * CATEGORY
 * SEARCH
 * PAGINATION
 * LIST COMPONENT
 * SINGLE LAYOUT
 * SHARE
 * SWIPER
 * LAZYLOAD
 * VIDEO
 * ACCORDION LIST
 * JT CONFIRM
 * JT MARQUEE
 * JT CTA
 * JT 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--secondary { font-family: var(--font-secondary); }

.jt-typo--01 { font-size: var(--font-size-primary-01); line-height: var(--font-lineheight-primary-01); font-weight: 700; 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-03); line-height: var(--font-lineheight-primary-03); font-weight: 500; letter-spacing: var(--letter-spacing); }
.jt-typo--05 { font-size: var(--font-size-primary-04); line-height: var(--font-lineheight-primary-04); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--06 { font-size: var(--font-size-primary-04); line-height: var(--font-lineheight-primary-04); font-weight: 500; letter-spacing: var(--letter-spacing); }
.jt-typo--07 { font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--08 { font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); font-weight: 500; letter-spacing: var(--letter-spacing); }
.jt-typo--09 { font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--10 { font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); font-weight: 500; letter-spacing: var(--letter-spacing); }
.jt-typo--11 { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--12 { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 500; letter-spacing: var(--letter-spacing); }
.jt-typo--13 { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--14 { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 500; letter-spacing: var(--letter-spacing); }
.jt-typo--15 { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 700; letter-spacing: var(--letter-spacing); }
.jt-typo--16 { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 500; 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 Button */
.jt-btn__basic { display: inline-block; position: relative; vertical-align: middle; text-align: center; padding: 12rem 60rem; min-width: 218rem; font-size: 0; color: var(--color-white); background: var(--color-primary); border-radius: 99rem; cursor: pointer; transition: background .3s; }
.jt-btn__basic > span { position: relative; vertical-align: middle; font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); letter-spacing: var(--letter-spacing); font-weight: 700; }
.jt-btn__basic .jt-icon { width: 16rem; height: 16rem; vertical-align: middle; margin-left: 8rem; }
.jt-btn__basic .jt-icon path { fill: currentColor; }

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

/* Arrow Button */
.jt-btn__arrow { display: inline-block; position: relative; vertical-align: middle; font-size: 0; color: var(--color-gray-800); cursor: pointer; transition: color .3s; }
.jt-btn__arrow > span { position: relative; vertical-align: middle; font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); letter-spacing: var(--letter-spacing); font-weight: 700; }
.jt-btn__arrow > span:before { content: ''; display: block; width: 0; height: 2rem; position: absolute; bottom: -2rem; right: 0; left: auto; background: currentColor; transition: width .4s cubic-bezier(0.165, 0.840, 0.440, 1.000); }
.jt-btn__arrow .jt-icon { width: 20rem; height: 20rem; vertical-align: middle; margin-left: 6rem; }
.jt-btn__arrow .jt-icon path { fill: currentColor; }

/* Stroke Button */
.jt-btn__stroke { display: inline-block; position: relative; vertical-align: middle; padding: 14rem 60rem; font-size: 0; color: var(--color-black); background: transparent; border-radius: 99rem; border: 3rem solid var(--color-black); cursor: pointer; transition: color .3s, background .3s; }
.jt-btn__stroke > span { position: relative; vertical-align: middle; font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); letter-spacing: var(--letter-spacing); font-weight: 700; }
.jt-btn__stroke .jt-icon { width: 12rem; height: 12rem; vertical-align: middle; margin-left: 8rem; }
.jt-btn__stroke .jt-icon path { fill: currentColor; }



/* **************************************** *
 * FORM
 * **************************************** */
/* Layout */
.jt-form { display: flex; flex-wrap: wrap; gap: 80rem; }
.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; color: var(--color-gray-900); }
.jt-form--required .jt-form__label:after { content: ''; display: inline-block; vertical-align: super; width: 6rem; height: 6rem; margin-left: 4rem; background: var(--color-primary); border-radius: 50%; }

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

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

/* Validity */
.jt-form__valid { display: block; margin-top: 6rem; color: #F03F3F; }
.jt-form__valid:empty { display: none; }

/* Checkbox, Radio */
.jt-checkbox, .jt-radiobox { display: flex; flex-wrap: wrap; gap: 0 24rem; position: relative; }
.jt-checkbox input, .jt-radiobox input { position: absolute; opacity: 0; cursor: pointer; }
.jt-checkbox label, .jt-radiobox label { font-size: 0; cursor: pointer; }
.jt-checkbox label > span, .jt-radiobox label > span { padding-left: 26rem; position: relative; 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-checkbox label > span:before, .jt-radiobox label > span:before { content: ''; display: block; width: 18rem; height: 18rem; position: absolute; top: 2rem; 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 { border-radius: 2rem; }
.jt-checkbox label > span:after { width: 5rem; height: 9rem; left: 7rem; top: 5rem; border: solid var(--color-white); border-width: 0 2rem 2rem 0; rotate: 45deg }
.jt-radiobox label > span:before { border-radius: 50%; }
.jt-radiobox label > span:after { width: 8rem; height: 8rem; left: 5rem; top: 7rem; background: var(--color-white); border-radius: 50%; }
.jt-checkbox input:checked + span, .jt-radiobox input:checked + span { color: var(--color-black); }
.jt-checkbox input:checked + span:before, .jt-radiobox input:checked + span:before { background: var(--color-primary); border-color: var(--color-primary); }
.jt-checkbox input:disabled + span:before, .jt-radiobox input:disabled + span:before, .jt-checkbox input:disabled:checked + span:before, .jt-radiobox input:disabled:checked + span:before { border-color: var(--color-gray-300); background: var(--color-gray-300); }
.jt-checkbox input:checked + span:after, .jt-radiobox input:checked + span:after { display: block; }
.jt-checkbox input:disabled + span:before, .jt-radiobox input:disabled + span:before, .jt-checkbox input:disabled:checked + span:before, .jt-radiobox input:disabled:checked + span:before { border-color: var(--color-gray-300); background: var(--color-gray-300); }
.jt-checkbox input:disabled + span:after { border-color: var(--color-gray-500); }
.jt-radiobox input:disabled + span:after { background: var(--color-gray-500); }

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

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

.choices { margin-bottom: 0; font-size: var(--font-size-primary-08); }
.choices__inner { display: flex; align-items: center; min-height: inherit; padding: 0 52rem 0 14rem; height: 52rem; 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); background: var(--color-white); border: 2px solid var(--color-gray-400); border-radius: 6rem; 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: 52rem; height: 100%; margin: 0; right: 0; top: 0; border: none; background: url(../images/icon/icon-select.svg) no-repeat center center; background-size: 16rem auto; opacity: .4; transition: rotate .4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity .4s; }
.choices[data-type*=select-one].is-open::after { opacity: 1; }

.choices__list--single { padding: 0; vertical-align: middle; }

.choices__list--dropdown, .choices__list[aria-expanded] { border: 2px solid var(--color-black); border-radius: 0 0 6rem 6rem; margin-top: -2px; }
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { 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); transition: background-color .3s, color .3s; }

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

.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; rotate: -180deg; }

.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] { border-color: inherit; }
.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] { border-radius: 6rem 6rem 0 0; margin-bottom: -2px; }

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

html.mobile .jt-choices__wrap { background: var(--color-white); border-radius: 6rem; overflow: hidden; }
html.mobile .jt-choices__wrap:before { content: ''; width: 16rem; height: 16rem; position: absolute; top: 50%; right: 19rem; background: url(../images/icon/icon-select.svg) no-repeat center center; background-size: contain; translate: 0 -50%; opacity: .4; }
html.mobile .jt-choices__wrap > select { appearance: none; width: 100%; margin: 0; height: 52rem; padding: 0 52rem 0 14rem; position: relative; font-family: var(--font-primary); font-size: var(--font-size-primary-08); line-height: 48rem; font-weight: 500; letter-spacing: var(--letter-spacing); color: var(--color-black); background: transparent; border: 2px solid var(--color-gray-400); border-radius: inherit; outline: none; box-shadow: none; opacity: 1; box-sizing: border-box;  transition: border-color .3s; }
html.mobile .jt-choices__wrap > select:focus { border-color: var(--color-black); }

/* Other */
.jt-choices__wrap + .jt-form__field { display: none; margin-top: 6rem; }

/* Email Autocomplete */
.jt-automail { position: relative; }

.jt-automail__list { width: 100%; position: absolute; top: calc(100% - 2px); left: 0; background: var(--color-white); border: 2px solid var(--color-black); border-radius: 0 0 6rem 6rem; overflow: hidden; z-index: 1; }
.jt-automail__list > li { padding: 10rem 18rem; 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-color .3s; }
.jt-automail__list > li > span { color: var(--color-primary); }
.jt-automail__list > li.jt-automail--focus { background: var(--color-gray-100); color: var(--color-gray-800); }
.jt-automail--open .jt-automail__input { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Agreement */
.jt-agreement .jt-checkbox label > span { padding-left: 32rem; color: var(--color-gray-800); }
.jt-agreement .jt-checkbox label > span:before { width: 24rem; height: 24rem; border-radius: 4rem; border-width: 2px; top: -1rem; }
.jt-agreement .jt-checkbox label > span:after { width: 8rem; height: 12rem; left: 8rem; top: 3rem; }
.jt-agreement .jt-checkbox label > a { margin-left: 8rem; color: var(--color-gray-800); text-decoration: underline; text-underline-position: under; transition: color .3s; }
.jt-agreement .jt-form__valid { margin-top: 8rem; }

/* Control */
.jt-form__control { display: flex; gap: 12rem; justify-content: center; }
.jt-form__control input, .jt-form__control button { display: inline-block; min-width: 218rem; padding: 12rem 60rem; position: relative; vertical-align: middle; font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 700; letter-spacing: var(--letter-spacing); background: var(--color-black); color: var(--color-white); text-align: center; border: 0; border-radius: 30rem; box-sizing: border-box; transition: color .3s, background-color .3s; cursor: pointer; overflow: hidden; }
.jt-form__control .jt-form__action { background: var(--color-primary); }

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

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



/* **************************************** *
 * CATEGORY
 * **************************************** */
.jt-category { margin-bottom: 60rem; }
.jt-category ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6rem; text-align: center; }
.jt-category ul li { position: relative; margin: 0 4rem; }
.jt-category ul a { display: block; padding: 10rem 32rem; border-radius: 99rem; text-align: center; color: var(--color-gray-700); transition: color .3s, background .3s; }
.jt-category ul li.jt-category--active a { background: var(--color-primary); color: var(--color-white); }



/* **************************************** *
 * SEARCH
 * **************************************** */
.jt-search { display: flex; }

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

.jt-search__field { position: relative; }
.jt-search__input { display: block; width: 100%; height: 84rem; margin: 0; padding: 0 76rem; font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); font-weight: 500; letter-spacing: var(--letter-spacing); text-overflow: ellipsis; color: var(--color-gray-900); background: var(--color-gray-200); border: 0; border-radius: 8rem; outline: none; opacity: 1; box-sizing: border-box; transition: border .3s; }
html.ios .jt-search__input { padding-top: 2rem; }
html.mac .jt-search__input { padding-top: 5rem; }

.jt-search__label { position: absolute; top: 24rem; left: 76rem; font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); font-weight: 500; letter-spacing: var(--letter-spacing); color: var(--color-gray-700); transition: opacity .3s; pointer-events: none; }

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

/* SUBMIT */
.jt-search__submit { display: block; width: 32rem; height: 32rem; margin: 0; padding: 0; position: absolute; left: 32rem; top: 50%; background: none; border: none; cursor: pointer; translate: 0 -50% }
.jt-search__submit .jt-icon { position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; translate: -50% -50%; }
.jt-search__submit .jt-icon path { fill: var(--color-black); }

/* CLEAR */
.jt-search__reset { display: block; width: 32rem; height: 32rem; margin: 0; padding: 0; position: absolute; right: 32rem; top: 50%; background: none; border: none; cursor: pointer; translate: 0 -50%; opacity: 0; transition: opacity .15s; }
.jt-search__reset:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--color-gray-400); border-radius: 50%; transition: background-color .3s; }
.jt-search__reset .jt-icon { display: block; width: 14rem; height: 14rem; position: absolute; top: 50%; left: 50%; 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-black); }

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

/* RESULT */
.search-form .jt-search { margin-bottom: 100rem; }
.jt-search-list > li + li { margin-top: 24rem; }
.jt-search-list > li > a { display: block; background: var(--color-gray-200); padding: 40rem 60rem; border-radius: 16rem; transition: background .3s; }
.jt-search-list__category { margin-bottom: 12rem; text-transform: capitalize; }
.jt-search-list__title { color: var(--color-black); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* HIGHLIGHT */
.jt-search--highlight { background: var(--color-primary); color: var(--color-white); }



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

.jt-pagination .jt-pagination__numbers { display: inline-block; vertical-align: top; min-width: 28rem; height: 28rem; margin: 0 8rem; position: relative; 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-600); transition: color .3s; }
.jt-pagination .jt-pagination__numbers:after { content: ''; display: block; width: 57.14%; height: 2rem; position: absolute; bottom: 0; left: 50%; translate: -50% 0; box-sizing: border-box; }
.jt-pagination .jt-pagination__numbers .jt-icon { width: 14rem; position: absolute; top: 50%; left: 50%; translate: -50% -50%; }
.jt-pagination .jt-pagination__numbers.jt-pagination--prev,
.jt-pagination .jt-pagination__numbers.jt-pagination--next,
.jt-pagination .jt-pagination__numbers.jt-pagination--first,
.jt-pagination .jt-pagination__numbers.jt-pagination--last { margin-left: 4rem; margin-right: 4rem; }

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



/* **************************************** *
 * LIST COMPONENT
 * **************************************** */
/* Nothing */
.jt-list-nothing { padding: 80rem 0 40rem; text-align: center; }
.jt-list-nothing b { display: block; }
.jt-list-nothing p { padding-top: 8rem; color: var(--color-gray-700); }

/* Count */
.jt-list-count { margin-bottom: 24rem; font-size: 0; color: var(--color-gray-800); }
.jt-list-count > span { color: var(--color-primary); font-feature-settings: 'tnum'; }

/* Reset */
.jt-list-reset { display: flex; gap: 4rem; align-items: center; color: var(--color-gray-700); transition: color .3s; }
.jt-list-reset .jt-icon { width: 24rem; height: 24rem; }
.jt-list-reset .jt-icon path { fill: currentColor; }



/* **************************************** *
 * SINGLE LAYOUT
 * **************************************** */
/* LAYOUT */
.jt-single__header { position: relative; padding-bottom: 60rem; padding-right: 60rem; border-bottom: 2px solid var(--color-gray-400); }

.jt-single__category { display: flex; flex-wrap: wrap; margin-bottom: 12rem; }
.jt-single__category span { color: var(--color-primary); }

.jt-single__category--secondary { gap: 8rem; }
.jt-single__category--secondary span { padding: 4rem 20rem; border-radius: 18rem; background: var(--color-gray-200); color: var(--color-gray-800); }

.jt-single__meta { display: flex; gap: 0 24rem; margin-top: 24rem; }
.jt-single__meta > * { display: block; position: relative; color: var(--color-gray-700); }
.jt-single__meta > * + *:before { content: ''; position: absolute; top: calc(var(--font-lineheight-primary-07) / 2); left: -12rem; width: 4rem; height: 4rem; border-radius: 50%; background: currentColor; translate: -50% -2rem; }
.jt-single__meta time { white-space: nowrap; }
.jt-single__meta-period { font-size: 0; }
.jt-single__meta-period time + time:before { content: '-'; display: inline-block; margin: 0 4rem; }

.jt-single__content { padding-top: 60rem; }

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

/* CONTROL */
.jt-single__control { display: flex; flex-wrap: wrap; gap: 8rem; justify-content: center; border-top: 1px solid var(--color-gray-400); padding-top: 40rem; margin-top: 120rem; }

/* PREV, NEXT POST */
.jt-single__post { border-top: 1px solid var(--color-gray-400); margin-top: 120rem; }
.jt-single__post-item { display: flex; align-items: center; gap: 60rem; padding: 32rem 0; border-bottom: 1px solid var(--color-gray-400); }
.jt-single__post-item:last-child { border-bottom: 0; }
.jt-single__post-label { white-space: nowrap; width: 46rem; }
.jt-single__post-data { flex: 1; }
.jt-single__post-data > span, .jt-single__post-data > a { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.jt-single__post-data > span { color: var(--color-gray-600); }
.jt-single__post-data > a { vertical-align: top; position: relative; color: var(--color-gray-900); text-decoration: underline; text-decoration-thickness: 2rem; text-decoration-color: transparent; text-underline-offset: 6rem; transition: text-decoration-color .3s; }
.jt-single__post + .jt-single__control { margin-top: 0; }



/* **************************************** *
 * SHARE
 * **************************************** */
.jt-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 12rem; }
.jt-share .jt-share__item { display: block; width: 48rem; height: 48rem; position: relative; background: var(--color-gray-600); border-radius: 50%; transition: background .3s; }
.jt-share .jt-share__item .jt-icon { display: block; width: 24rem; margin: 0 auto; position: relative; top: 50%; translate: 0 -50%; }
.jt-share .jt-share__item .jt-icon path { fill: var(--color-white); }

/* Clipboard */
.jt-share__tooltip { padding: 14rem 40rem; position: fixed; left: 50%; left: 50%; bottom: 40rem; background: var(--color-black); border-radius: 8rem; z-index: 501; translate: -50% 0; opacity: 0; visibility: hidden; }
.jt-share__tooltip p { color: var(--color-white); white-space: nowrap; }



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

.swiper-control { display: none; margin-top: 38rem; margin-bottom: -10rem; }
.swiper-initialized .swiper-control { display: block; }

/* PAGINATION */
.swiper-control .swiper-pagination.swiper-pagination-bullets { position: relative; bottom: auto; left: auto; width: 100%; font-size: 0; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { display: inline-flex; align-items: center; justify-content: center; vertical-align: top; width: auto; height: auto; padding: 10rem; background: transparent; margin: 0; opacity: 1; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { content: ''; display: block; width: 10rem; height: 10rem; background: rgba(0, 0, 0, .2); border-radius: 5rem; transition: background-color .3s, width .3s; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after { width: 28rem; background: var(--color-black); }

/* NAVIGATION */
.swiper-button { width: 52rem; height: 52rem; background: var(--color-gray-700); border-radius: 50%; translate: 0 -50%; margin-top: 0; border: none; padding: 0; cursor: pointer; transition: background .3s, opacity .3s; }
.swiper-button:after { display: none; }
.swiper-button .jt-icon { width: 20rem; height: 20rem; }
.swiper-button .jt-icon path { fill: var(--color-white); }
.swiper-button-prev { left: 0; }
.swiper-button-next { right: 0; }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0; }



/* **************************************** *
 * LAZYLOAD
 * **************************************** */
[data-unveil] { background-color: var(--color-gray-100); background-image: url(../images/layout/blank.gif); transition: background-image .3s; }
img[data-unveil] { background-color: transparent; background-image: none; 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: 100rem; height: 100rem; position: absolute; top: 50%; left: 50%; translate: -50% -50%; opacity: 0.8; transition: opacity .5s cubic-bezier(.165, .84, .44, 1); }
.jt-embed-video__overlay-btn:after { content: ''; display: block; height: 100%; background: no-repeat center center / cover; background-image: url(../images/icon/icon-play.svg); transition: scale 1s cubic-bezier(.23, 1, .32, 1); }

/* Native Background Video */
.jt-background-video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.jt-background-video__vod { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; transform: translateZ(0); }
.jt-background-video__vod:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.jt-background-video__vod video { display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; translate: -50% -50%; object-fit: cover; }
.jt-background-video__poster { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center center; background-size: cover; }
.jt-background-video__error { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; }
.jt-background-video__error-btn { display: block; width: 100rem; height: 100rem; position: absolute; top: 50%; left: 50%; translate: -50% -50%; opacity: 0.8; transition: opacity .5s cubic-bezier(.165, .84, .44, 1); }
.jt-background-video__error-btn:after { content: ''; display: block; height: 100%; background: no-repeat center center / cover; background-image: url(../images/icon/icon-play.svg); transition: scale 1s cubic-bezier(.23, 1, .32, 1); }



/* **************************************** *
 * ACCORDION LIST
 * **************************************** */
.jt-accordion { display: flex; flex-wrap: wrap; row-gap: 16rem; }
.jt-accordion__item { width: 100%; background: var(--color-gray-200); border-radius: 16rem; transition: background .3s; }

.jt-accordion__head { padding: 40rem 104rem 40rem 60rem; position: relative; cursor: pointer; }
.jt-accordion__control { width: 24rem; height: 24rem; position: absolute; top: 49rem; right: 60rem; transition: rotate .3s; }
.jt-accordion__control-icon { display: block; width: 100%; height: 100%; position: relative; }
.jt-accordion__control-icon:before { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 2px; background: var(--color-black); translate: -50% -50%; }
.jt-accordion__control-icon:after { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 100%; background: var(--color-black); translate: -50% -50%; transition: rotate .3s; }

.jt-accordion__content { margin-top: -20rem; margin-bottom: 20rem; position: relative; overflow: hidden; }
.jt-accordion__content-inner { padding: 0 60rem 40rem; margin-bottom: -20rem; }
.jt-accordion__content-inner p { color: var(--color-gray-900); }

.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:hover { background: var(--color-gray-300); }
.jt-accordion__item.jt-accordion--active .jt-accordion__control-icon:after { rotate: 90deg; }

@media print {

    .jt-accordion__control-icon:after { rotate: 90deg; }
    .jt-accordion__content-inner { display: block !important; }

}



/* **************************************** *
 * BOARD LIST
 * **************************************** */
/* News */
.jt-board .jt-search { max-width: 880rem; margin: 0 auto 100rem; }
.jt-board-list { border-top: 2px solid var(--color-black); }
.jt-board-list > li > a { display: block; color: var(--color-black); padding: 32rem 0; border-bottom: 1px solid var(--color-gray-400); }
.jt-board-list__category { display: flex; gap: 8rem; margin-bottom: 12rem; }
.jt-board-list__category > span { color: var(--color-primary); }
.jt-board-list__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .3s; }
.jt-board-list__data { display: flex; gap: 24rem; margin-top: 32rem; }
.jt-board-list__data > * { position: relative; color: var(--color-gray-700); }
.jt-board-list__data > * + *:before { content: ''; position: absolute; top: 50%; left: -12rem; translate: -50% -50%; width: 4rem; height: 4rem; border-radius: 50%; background: currentColor; }

/* Event */
.jt-event-list > li > a { display: flex; color: var(--color-black); border-radius: 16rem; overflow: hidden; }
.jt-event-list > li + li { margin-top: 24rem; }
.jt-event-list__thumb { width: 33.06%; max-width: 390rem; padding: 12rem; background: var(--color-gray-300); transition: background .3s; }
.jt-event-list__thumb .jt-lazyload { height: 100%; border-radius: 8rem; overflow: hidden; }
.jt-event-list__thumb .jt-lazyload img { height: 100%; object-fit: cover; }
.jt-event-list__content { flex: 1; background: var(--color-gray-200); padding: 40rem; transition: background .3s; }
.jt-event-list__category { display: flex; gap: 8rem; margin-bottom: 12rem; }
.jt-event-list__category > span { color: var(--color-primary); }
.jt-event-list__title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: calc(var(--font-lineheight-primary-05) * 2); }
.jt-event-list__data { display: flex; gap: 24rem; margin-top: 32rem; }
.jt-event-list__data > * { position: relative; color: var(--color-gray-700); }
.jt-event-list__data > * + *:before { content: ''; position: absolute; top: 50%; left: -12rem; translate: -50% -50%; width: 4rem; height: 4rem; border-radius: 50%; background: currentColor; }
.jt-event-list__data time { white-space: nowrap; }
.jt-event-list__data-period { font-size: 0; }
.jt-event-list__data-period time + time:before { content: '-'; display: inline-block; margin: 0 4rem; }

/* Control */
.jt-board-list__control { text-align: center; margin-top: 120rem; }



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

.jt-confirm__content { min-height: 150rem; padding: 80rem 80rem 48rem; }
.jt-confirm__content b { display: block; font-size: var(--font-size-primary-04); line-height: var(--font-lineheight-primary-04); letter-spacing: var(--letter-spacing); font-weight: 700; word-wrap: break-word; word-break: keep-all; }
.jt-confirm__content p { font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); letter-spacing: var(--letter-spacing); font-weight: 500; word-wrap: break-word; word-break: keep-all; color: var(--color-gray-800); }
.jt-confirm__content b + p { margin-top: 24rem; }
.jt-confirm__content .jt-icon { width: 48rem; height: 48rem; margin-bottom: 16rem; }
.jt-confirm__content .jt-icon:empty { display: none; }

.jt-confirm__actions { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8rem; padding-bottom: 60rem; }
.jt-confirm__btn { padding: 12rem 60rem; min-width: 218rem; font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 700; letter-spacing: var(--letter-spacing); color: var(--color-white); background: var(--color-primary); border: solid var(--color-gray-400); border-radius: 30rem; border: 0; cursor: pointer; transition: .3s; }

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



/* **************************************** *
 * JT MARQUEE
 * **************************************** */
.jt-marquee__wrap { font-size: 0; white-space: nowrap; overflow: hidden; }
.jt-marquee { display: inline-block; vertical-align: top; font-size: 0; white-space: nowrap; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-name: Marquee; animation-name: Marquee; }
.jt-marquee__item { position: relative; display: inline-block; vertical-align: top; }
.jt-marquee--mobile { display: none; }

/* Reverse */
.jt-marquee--reverse { -webkit-animation-name: MarqueeReverse; animation-name: MarqueeReverse; }

/* Vertical */
.jt-marquee--vertical { display: block; -webkit-animation-name: MarqueeVertical; animation-name: MarqueeVertical; }
.jt-marquee--vertical .jt-marquee__item { display: block; }

/* Customer component */
.jt-customer__list .jt-marquee__wrap { padding-top: 20rem; }
.jt-customer__list .jt-marquee__item { position: relative; width: 280rem; border-radius: 16rem; margin-left: 20rem; background: var(--color-white); }
.jt-customer__list .jt-marquee__item:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #D9D9D9; border-radius: inherit; box-sizing: border-box; z-index: 1; }
.jt-customer__list .jt-marquee__item .jt-lazyload { padding-top: 50%; }



/* **************************************** *
 * JT CTA
 * **************************************** */
.jt-cta { position: relative; display: flex; justify-content: center; align-items: center; text-align: center; padding: 120rem 0; min-height: 600rem; overflow: hidden; }
.jt-cta__bg { position: absolute; left: -1rem; top: -1rem; width: calc(100% + 2rem); height: calc(100% + 2rem); background: no-repeat center center / cover; }
.jt-cta__bg--mobile { display: none; }
.jt-cta__desc { margin-top: 24rem; }
.jt-cta__control { margin-top: 60rem; }
.jt-cta__btn-list { display: flex; gap: 20rem; flex-wrap: wrap; justify-content: center; padding-top: 20rem; }
.jt-cta__btn-list > a { display: flex; align-items: center; justify-content: space-between; gap: 20rem; width: 430rem; height: 116rem; background: rgba(255, 255, 255, .5); border-radius: 16rem; padding: 20rem 40rem; color: var(--color-gray-900); transition: background .3s; }
.jt-cta__btn-list > a > b { flex: 1; display: flex; gap: 6rem; align-items: center; }
.jt-cta__btn-list > a .jt-icon { width: 32rem; height: 32rem; background: var(--color-gray-900); border-radius: 50%; }
.jt-cta__btn-list > a .jt-icon path { fill: var(--color-white); }



/* **************************************** *
 * JT POPUP
 * **************************************** */
.jt-popup { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; align-items: center; justify-content: center; overflow: auto; padding: 20rem; display: none; opacity: 0; visibility: hidden; }
.jt-popup__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .4); }
.jt-popup__container { position: relative; max-width: 780rem; max-height: 100%; }
.jt-popup__container:after { content: ''; display: block; height: 20rem; }
.jt-popup__container-inner { background: var(--color-white); padding: 60rem; border-radius: 16rem; }

.jt-popup--open { display: flex; }



/* **************************************** *
 * ANIMATION KEYFRAME
 * **************************************** */
/* JT MARQUEE */
@keyframes Marquee {
    from { -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); }
    to { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
}

@keyframes MarqueeReverse {
    from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@keyframes MarqueeVertical {
    from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
}

/* FORM LOADING */
@keyframes LoadingBounce {
    0% { transform: translate3d(0, 0, 0); }
    20% { transform: translate3d(0, -5rem, 0); }
    40% { transform: translate3d(0, 0, 0); }
}



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

    /* BUTTON */
    .jt-btn__basic:hover { background: #5465AD; }
    .jt-btn__basic.jt-btn--type-02:hover { background: #2F2F2F; }
    
    .jt-btn__arrow:hover { color: var(--color-black); }
    .jt-btn__arrow:hover > span:before { width: 100%; left: 0; right: auto; }

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

    /* FORM */
    .jt-form__field:hover { border-color: var(--color-black); }
    .jt-form__field:disabled:hover, .jt-form__field:read-only:hover { border-color: var(--color-gray-300); }

    .jt-checkbox label:hover > span, .jt-radiobox label:hover > span { color: var(--color-black); }
    .jt-checkbox label:not(:has(input:checked)):hover > span:before, .jt-radiobox label:not(:has(input:checked)):hover > span:before { border-color: var(--color-black); }
    
    .choices:hover .choices__inner { border-color: var(--color-black); }

    .jt-automail__list > li:hover { background: var(--color-gray-100); color: var(--color-gray-800); }

    .jt-customfile__input:hover + .jt-customfile__button { background: var(--color-gray-900); }
    .jt-customfile__delete:hover .jt-icon svg path { fill: var(--color-primary); }

    .jt-form__control input:hover, .jt-form__control button:hover { background: #2F2F2F; }
    .jt-form__control .jt-form__action:hover { background: #5465AD; }

    .jt-agreement .jt-checkbox label > a:hover { color: var(--color-black); }

    /* CATEGORY */
    .jt-category ul a:hover { background: var(--color-gray-300); }

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

    .jt-search-list > li > a:hover { background: var(--color-gray-300); }

    /* PAGINATION */
    .jt-pagination .jt-pagination__numbers:hover { color: var(--color-black); }

    /* LIST COMPONENT */
    .jt-list-reset:hover { color: var(--color-black); }

    /* SINGLE LAYOUT */
    .jt-single__post-data > a:hover { text-decoration-color: currentColor; }

    /* SHARE */
    .jt-share .jt-share__item:hover { background: var(--color-gray-800); }

    /* SWIPER */
    .swiper-navigation .swiper-button:hover { background: var(--color-gray-800); }
    .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover:after { background: rgba(0, 0, 0, .6); }

    /* VIDEO */
    .jt-embed-video__poster:hover .jt-embed-video__overlay-btn { opacity: 1; }
    .jt-embed-video__poster:hover .jt-embed-video__overlay-btn:after { scale: 0.9; }
    .jt-background-video__error:hover .jt-background-video__error-btn { opacity: 1; }
    .jt-background-video__error:hover .jt-background-video__error-btn:after { scale: 0.9; }

    /* ACCORDION LIST */
    .jt-accordion__head:hover .jt-accordion__control .jt-icon path { fill: var(--color-black); }

    /* BOARD LIST */
    .jt-board-list > li > a:hover .jt-board-list__title { color: var(--color-primary); }
    .jt-event-list > li > a:hover .jt-event-list__content { background: var(--color-gray-300); }
    .jt-event-list > li > a:hover .jt-event-list__thumb { background: var(--color-gray-400); }

    /* JT CONFIRM */
    .jt-confirm__btn:hover { background: #5465AD; }

    /* JT CTA */
    .jt-cta__btn-list > a:hover { background: var(--color-white); }

}