@charset "utf-8";

/*
 * File    : jt-strap.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * A11Y
 * TYPOGRAPHY
 * JT GUIDE
 * BUTTON
 * FORM
 * PAGINATION
 * LIST COMPONENT
 * SINGLE
 * TAG
 * SHARE
 * QUICKNAV
 * SWIPER
 * LAZYLOAD
 * VIDEO
 * GRID LIST
 * CARD LIST
 * DOWNLOAD LIST
 * STACK CARD
 * SLIDE CARD
 * UTILITY
 * MOTION
 * 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-11); 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-02); }
.jt-typo--02 { font-size: var(--font-size-primary-02); line-height: var(--font-lineheight-primary-02); font-weight: 700; letter-spacing: var(--letter-spacing-02); }
.jt-typo--03 { font-size: var(--font-size-primary-03); line-height: var(--font-lineheight-primary-03); font-weight: 700; letter-spacing: var(--letter-spacing-02); }
.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-02); }
.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-02); }
.jt-typo--06 { font-size: var(--font-size-primary-05); line-height: var(--font-lineheight-primary-05); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--07 { font-size: var(--font-size-primary-06); line-height: var(--font-lineheight-primary-06); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--08 { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--09 { font-size: var(--font-size-primary-07); line-height: var(--font-lineheight-primary-07); font-weight: 400; letter-spacing: var(--letter-spacing-01); }
.jt-typo--10 { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--11 { font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); font-weight: 400; letter-spacing: var(--letter-spacing-01); }
.jt-typo--12 { font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--13 { font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 400; letter-spacing: var(--letter-spacing-01); }
.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-01); }
.jt-typo--15 { font-size: var(--font-size-primary-11); line-height: var(--font-lineheight-primary-11); font-weight: 400; letter-spacing: var(--letter-spacing-01); }
.jt-typo--16 { font-size: var(--font-size-primary-12); line-height: var(--font-lineheight-primary-12); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo--17 { font-size: var(--font-size-primary-12); line-height: var(--font-lineheight-primary-12); font-weight: 400; letter-spacing: var(--letter-spacing-01); }

.jt-typo-secondary--01 { font-size: var(--font-size-secondary-01); line-height: var(--font-lineheight-secondary-01); font-weight: 700; letter-spacing: var(--letter-spacing-02); }
.jt-typo-secondary--02 { font-size: var(--font-size-secondary-02); line-height: var(--font-lineheight-secondary-02); font-weight: 700; letter-spacing: var(--letter-spacing-02); }
.jt-typo-secondary--03 { font-size: var(--font-size-secondary-03); line-height: var(--font-lineheight-secondary-03); font-weight: 700; letter-spacing: var(--letter-spacing-02); }
.jt-typo-secondary--04 { font-size: var(--font-size-secondary-03); line-height: var(--font-lineheight-secondary-03); font-weight: 500; letter-spacing: var(--letter-spacing-02); }
.jt-typo-secondary--05 { font-size: var(--font-size-secondary-04); line-height: var(--font-lineheight-secondary-04); font-weight: 700; letter-spacing: var(--letter-spacing-02); }
.jt-typo-secondary--06 { font-size: var(--font-size-secondary-05); line-height: var(--font-lineheight-secondary-05); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo-secondary--07 { font-size: var(--font-size-secondary-06); line-height: var(--font-lineheight-secondary-06); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo-secondary--08 { font-size: var(--font-size-secondary-07); line-height: var(--font-lineheight-secondary-07); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo-secondary--09 { font-size: var(--font-size-secondary-07); line-height: var(--font-lineheight-secondary-07); font-weight: 400; letter-spacing: var(--letter-spacing-01); }
.jt-typo-secondary--10 { font-size: var(--font-size-secondary-08); line-height: var(--font-lineheight-secondary-08); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo-secondary--11 { font-size: var(--font-size-secondary-09); line-height: var(--font-lineheight-secondary-09); font-weight: 400; letter-spacing: var(--letter-spacing-01); }
.jt-typo-secondary--12 { font-size: var(--font-size-secondary-10); line-height: var(--font-lineheight-secondary-10); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo-secondary--13 { font-size: var(--font-size-secondary-10); line-height: var(--font-lineheight-secondary-10); font-weight: 400; letter-spacing: var(--letter-spacing-01); }
.jt-typo-secondary--14 { font-size: var(--font-size-secondary-11); line-height: var(--font-lineheight-secondary-11); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo-secondary--15 { font-size: var(--font-size-secondary-11); line-height: var(--font-lineheight-secondary-11); font-weight: 400; letter-spacing: var(--letter-spacing-01); }
.jt-typo-secondary--16 { font-size: var(--font-size-secondary-12); line-height: var(--font-lineheight-secondary-12); font-weight: 700; letter-spacing: var(--letter-spacing-01); }
.jt-typo-secondary--17 { font-size: var(--font-size-secondary-12); line-height: var(--font-lineheight-secondary-12); font-weight: 400; letter-spacing: var(--letter-spacing-01); }



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



/* **************************************** *
 * BUTTON
 * **************************************** */
/* TEXT */
.jt-btn__text { display: inline-flex; align-items: center; gap: 4rem; position: relative; font-size: var(--font-size-primary-11); line-height: var(--font-lineheight-primary-11); font-weight: 700; letter-spacing: var(--letter-spacing-01); color: var(--color-secondary); cursor: pointer; }
.jt-btn__text:after { content: ''; display: block; width: 100%; height: 2rem; position: absolute; left: 0; bottom: 0; background: currentColor; transform-origin: 100% 50%; transform: scale3d(0, 1, 1); transition: transform .3s; }
.jt-btn__text > .jt-icon { flex-shrink: 0; width: 16rem; }
.jt-btn__text > .jt-icon svg path { fill: currentColor; }

/* OUTLINE */
.jt-btn__outline { display: inline-block; vertical-align: middle; position: relative; min-width: 155rem; padding: 9rem 37rem; font-family: var(--font-secondary); font-size: var(--font-size-secondary-11); line-height: var(--font-lineheight-secondary-11); font-weight: 700; letter-spacing: var(--letter-spacing-01); color: var(--color-primary); border: 3rem solid var(--color-primary); border-radius: var(--border-radius-06); cursor: pointer; transition: background-color .3s, border-color .3s; }
.jt-btn__outline > span { position: relative; }

.jt-btn__outline.jt-btn--type-02 { color: var(--color-white); border-color: var(--color-white); }

/* FILL */
.jt-btn__fill { display: inline-flex; align-items: center; gap: 6rem; padding: 12rem 40rem; position: relative; font-size: var(--font-size-primary-10); line-height: var(--font-lineheight-primary-10); font-weight: 700; letter-spacing: var(--letter-spacing-01); color: var(--color-white); background: var(--color-primary); border-radius: var(--border-radius-06); cursor: pointer; transition: color .3s, background-color .3s; }
.jt-btn__fill:has(.jt-icon) { padding-right: 36rem; }
.jt-btn__fill > .jt-icon { flex-shrink: 0; width: 24rem; }
.jt-btn__fill > .jt-icon svg path { fill: currentColor; }

/* UNDERLINE */
.jt-btn__underline { display: inline-block; vertical-align: middle; position: relative; padding: 4rem 0; font-size: var(--font-size-primary-11); line-height: var(--font-lineheight-primary-11); font-weight: 700; letter-spacing: var(--letter-spacing-01); color: var(--color-primary); cursor: pointer; }
.jt-btn__underline > span { display: inline-block; position: relative; }
.jt-btn__underline > span:before,
.jt-btn__underline > span:after { content: ''; display: block; height: 1px; position: absolute; bottom: 1rem; background: currentColor; transition: width .4s; transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); }
.jt-btn__underline > span:before { width: 100%; right: 0; transition-delay: .2s; }
.jt-btn__underline > span:after { width: 0; left: 0; transition-delay: 0s; }



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

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

.choices { margin-bottom: 0; font-size: var(--font-size-primary-11); font-feature-settings: 'tnum'; }
.choices__inner { display: block; min-height: inherit; padding: 12rem 28rem; font-size: var(--font-size-primary-11); line-height: var(--font-lineheight-primary-11); font-weight: 400; letter-spacing: var(--letter-spacing-01); color: var(--color-black); background: var(--color-white); border: none; border-radius: 0; }
.choices__placeholder { color: var(--color-black); opacity: 1; }

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

.choices__list--single { display: block; padding: 0; }

.choices__list--dropdown, 
.choices__list[aria-expanded] { border: 1px solid var(--color-gray-500); border-radius: var(--border-radius-01); }

.choices__list--dropdown .choices__list, 
.choices__list[aria-expanded] .choices__list { max-height: 220rem; }
html.win .choices__list--dropdown .choices__list,
html.win .choices__list[aria-expanded] .choices__list { overflow: overlay; }
html.win .choices__list--dropdown .choices__list::-webkit-scrollbar,
html.win .choices__list[aria-expanded] .choices__list::-webkit-scrollbar { width: 5rem; background: transparent; }
html.win .choices__list--dropdown .choices__list::-webkit-scrollbar-track,
html.win .choices__list[aria-expanded] .choices__list::-webkit-scrollbar-track { background: var(--color-gray-200); }
html.win .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb,
html.win .choices__list[aria-expanded] .choices__list::-webkit-scrollbar-thumb { background: var(--color-gray-400); }

.choices__list--dropdown .choices__item, 
.choices__list[aria-expanded] .choices__item { padding: 10rem 20rem 10rem 28rem; font-size: var(--font-size-primary-11); line-height: var(--font-lineheight-primary-11); font-weight: 400; letter-spacing: var(--letter-spacing-01); color: var(--color-black); transition: color .3s; }

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

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

.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded] { border-color: var(--color-gray-500); }

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

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: calc(50% - 1rem); right: 0; background: url(../images/icon/icon-select.svg) no-repeat center center; background-size: contain; transform: translate(0, -50%); }
html.mobile .jt-choices__wrap > select { appearance: none; width: 100%; margin: 0; height: 48rem; padding: 12rem 28rem; position: relative; font-family: var(--font-primary); font-size: var(--font-size-primary-11); line-height: var(--font-lineheight-primary-11); font-weight: 400; letter-spacing: var(--letter-spacing-01); color: var(--color-black); background: transparent; border: none; border-radius: 0; outline: none; box-shadow: none; opacity: 1; box-sizing: border-box; }



/* **************************************** *
 * 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-family: var(--font-secondary); font-size: var(--font-size-secondary-11); line-height: var(--font-lineheight-secondary-11); font-weight: 400; letter-spacing: var(--letter-spacing-01); color: var(--color-gray-700); transition: color .3s; }
.jt-pagination .jt-pagination__numbers:after { content: ''; display: block; width: 60%; height: 2rem; position: absolute; bottom: 2rem; left: 50%; transform: translate(-50%, 0); box-sizing: border-box; }
.jt-pagination .jt-pagination__numbers .jt-icon { width: 16rem; position: absolute; top: calc(50% - 1rem); left: 50%; transform: translate(-50%, -50%); }
.jt-pagination .jt-pagination__numbers.jt-pagination--prev { margin-left: 4rem; margin-right: 2rem; }
.jt-pagination .jt-pagination__numbers.jt-pagination--next { margin-left: 2rem; margin-right: 4rem; }
.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-primary); }
.jt-pagination .jt-pagination__numbers.jt-pagination--current:after { background: var(--color-primary); }



/* **************************************** *
 * LIST COMPONENT
 * **************************************** */
/* NOTHING */
.jt-list-nothing { display: flex; flex-direction: column; justify-content: center; gap: 16rem; min-height: 480rem; padding: 100rem 48rem; text-align: center; background: var(--color-bg-200); }
.jt-list-nothing b { color: var(--color-primary); }
.jt-list-nothing b > span { color: var(--color-secondary); word-break: break-all; }
.jt-list-nothing p { color: var(--color-gray-800); }



/* **************************************** *
 * SINGLE
 * **************************************** */
/* RESET */
body.single:has(.jt-single__related) .main-container { padding-bottom: 0; }

/* HEADER */
.jt-single__header { margin-bottom: 60rem; text-align: center; }

.jt-single__date { display: block; margin-top: 28rem; color: var(--color-primary); opacity: .5; }

/* TOOLS */
.jt-single__tools { display: flex; justify-content: center; gap: 16rem; margin-top: 40rem; }
.jt-single__tools-item { width: 48rem; height: 48rem; margin: 0; padding: 0; position: relative; background: transparent; border: none; cursor: pointer; }
.jt-single__tools-item > .jt-icon { width: 24rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.jt-single__tooltip { padding: 20rem 72rem; position: fixed; left: 50rem; left: 50%; bottom: 40rem; background: var(--color-secondary); z-index: 501; transform: translate(-50%, 0); opacity: 0; visibility: hidden; }
.jt-single__tooltip p { color: var(--color-white); }

/* NOTICE */
.jt-single__notice { margin-top: 40rem; padding: 32rem 40rem; background: var(--color-bg-200); }
.jt-single__notice > p { color: var(--color-gray-800); }

/* TAG */
.jt-single__tag { margin-top: 40rem; }

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

/* RELATED */
.jt-single__related { margin-top: 200rem; padding: 100rem 0; border-top: 1px solid var(--color-gray-500); }

.jt-single__related-head { margin-bottom: 40rem; position: relative; }
.jt-single__related-control { position: absolute; top: 50%; right: -4rem; transform: translateY(-50%); }



/* **************************************** *
 * TAG
 * **************************************** */
/* PRIMARY */
.jt-tags { display: flex; flex-wrap: wrap; margin: -4rem -6rem; }
.jt-tags a { display: block; padding: 4rem 6rem; color: inherit; transition: color .3s; }

/* SECONDARY */
.jt-tags.jt-tags--secondary { justify-content: center; gap: 6rem; margin: 0; }
.jt-tags.jt-tags--secondary a { padding: 4rem 20rem; background: var(--color-bg-200); border-radius: var(--border-radius-06); transition: background-color .3s; }



/* **************************************** *
 * SHARE
 * **************************************** */
.jt-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 28rem; }
.jt-share__icon { width: 62rem; height: 62rem; position: relative; background: var(--color-white); border-radius: 50%; transition: background-color .3s; }
.jt-share__icon .jt-icon { width: 24rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.jt-share__name { display: block; margin-top: 12rem; text-align: center; }

/* POPUP */
.jt-share-popup { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; z-index: 999; }
.jt-share-popup__inner { width: 90%; max-width: 392rem; padding: 40rem; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); background: var(--color-bg-200); box-shadow: 0 10rem 30rem 0 rgba(0, 0, 0, .25); }

.jt-share-popup__title { display: block; margin-bottom: 24rem; text-align: center; }

.jt-share-popup__close { display: block; width: 32rem; height: 32rem; margin: 0; padding: 0; position: absolute; top: 18rem; right: 16rem; background: transparent; border: none; box-sizing: border-box; cursor: pointer; z-index: 2; }
.jt-share-popup__close .jt-icon { width: 16rem; transition: transform .3s; }



/* **************************************** *
 * QUICKNAV
 * **************************************** */
.jt-quicknav { position: sticky; top: 0; background: var(--color-white); overflow: hidden; z-index: 1; transition: top .3s; }
body.jt-header--show .jt-quicknav { top: 96rem; }

.jt-quicknav__list { display: flex; }
.jt-quicknav__list > li > a { display: block; padding: 32rem 12rem; color: var(--color-gray-500); transition: color .3s; }
.jt-quicknav__list > li:first-child > a { padding-left: 0; }
.jt-quicknav__list > li:last-child > a { padding-right: 0; }
.jt-quicknav__list > li.jt-quicknav--active > a { color: var(--color-primary); }



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

.swiper-control { position: absolute; right: 54rem; top: 50%; translate: 0 -50%; z-index: 2; }
.swiper-control.swiper-control--horizontal { position: relative; top: auto; right: auto; translate: none; }

/* PAGINATION */
.swiper-control .swiper-pagination.swiper-pagination-bullets { display: flex; flex-direction: column; gap: 32rem; width: auto; position: relative; top: auto; right: auto; bottom: auto; left: auto; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { width: 20rem; height: 20rem; margin: 0; position: relative; background: transparent; opacity: 1; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before,
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { content: ''; width: 12rem; height: 12rem; position: absolute; top: 50%; left: 50%; border-radius: 50%; translate: -50% -50%; box-sizing: border-box; transition: opacity .3s; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before { border: 2rem solid var(--color-white); opacity: .5; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { background: var(--color-white); opacity: 0; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after { opacity: 1; }

.swiper-control.swiper-control--horizontal .swiper-pagination.swiper-pagination-bullets { flex-direction: row; justify-content: center; }

/* NAVIGATION */
.swiper-navigation { display: flex; gap: 8rem; }
.swiper-navigation .swiper-button { width: 32rem; height: 32rem; margin: 0; padding: 0; position: relative; background: transparent; border: none; transition: opacity .3s; }
.swiper-navigation .swiper-button:after { display: none; }
.swiper-navigation .swiper-button-prev { left: inherit; }
.swiper-navigation .swiper-button-next { right: inherit; }
.swiper-navigation .swiper-button .jt-icon { width: 24rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.swiper-navigation .swiper-button.swiper-button-disabled { opacity: .2; }

/* PLAY & PAUSE STATE */
.swiper-state { display: block; width: 30rem; height: 30rem; position: absolute; right: 20rem; bottom: 20rem; z-index: 2; }
.swiper-state__btn { display: block; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; top: 0; left: 0; background: var(--color-gray-700); border: none; border-radius: 50%; cursor: pointer; opacity: 0; visibility: hidden; transition: background-color .3s, opacity .3s; cursor: pointer; }
.swiper-state__btn .jt-icon { display: block; width: 16rem; margin: 0 auto; }
.swiper-state__btn .jt-icon path { fill: var(--color-white); }
.swiper-state.swiper-state--play .swiper-state__btn--play { opacity: 1; visibility: visible; }
.swiper-state.swiper-state--pause .swiper-state__btn--pause { opacity: 1; visibility: visible; }



/* **************************************** *
 * 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-bg-200); }
.jt-lazyload.jt-lazyload--loaded .jt-lazyload__color-preview { background: transparent; transition: background-color .1s; transition-delay: .3s; }



/* **************************************** *
 * VIDEO
 * **************************************** */
/* EMBED VIDEO */
.jt-embed-video { margin-left: auto; margin-right: auto; position: relative; } 
.jt-embed-video__inner { position: relative; width: 100%; padding-top: 56.25%; } 
.jt-embed-video__inner iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; box-sizing: content-box; background: #000 url(../images/layout/spin.png) no-repeat center center; background-size: 32rem 32rem; }
.jt-embed-video__poster { width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer; z-index: 1; }
.jt-embed-video__poster .jt-embed-video__img { display: block; width: 100%; margin: 0; }
.jt-embed-video__overlay { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .4); }
.jt-embed-video__overlay-btn { display: block; width: 74rem; height: 74rem; margin-top: -37rem; margin-left: -37rem; position: absolute; top: 50%; left: 50%; background: var(--color-white); border-radius: 50%; box-sizing: border-box; opacity: 0.8; transform: scale(1); transition: opacity .5s cubic-bezier(.165, .84, .44, 1), transform 1s cubic-bezier(.23, 1, .32, 1); }
.jt-embed-video__overlay-btn:after { content: ''; width: auto; height: auto; display: block; position: absolute; top: 50%; left: 50%; margin-top: -7rem; margin-left: -4rem; font-style: normal; border-top: 7rem solid transparent; border-bottom: 7rem solid transparent; border-left: 10rem solid var(--color-primary); transition: transform 1s cubic-bezier(.23, 1, .32, 1); }

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

/* NATIVE BACKGROUND VIDEO */
.jt-background-video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.jt-background-video__vod { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; transform: translateZ(0); }
.jt-background-video__vod:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.jt-background-video__vod video { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; }
.jt-background-video__poster { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center center; background-size: cover; }
.jt-background-video__poster--small { display: none; }
.jt-background-video__image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center center; background-size: cover; opacity: 0; }



/* **************************************** *
 * GRID LIST
 * **************************************** */
.jt-grid-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60rem 40rem; }

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

.jt-grid-list__thumb { position: relative; border-radius: var(--border-radius-03); overflow: hidden; }
.jt-grid-list__thumb .jt-lazyload { padding-top: 59.58%; transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1); }

.jt-grid-list__label { padding: 6rem 16rem; position: absolute; top: 0; left: 0; background: var(--color-secondary); border-radius: var(--border-radius-03) 0; color: var(--color-white); }

.jt-grid-list__content { padding-top: 20rem; }
.jt-grid-list__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.jt-grid-list__date { display: block; margin-top: 8rem; color: var(--color-primary); opacity: .5; }



/* **************************************** *
 * CARD LIST
 * **************************************** */
.jt-card-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40rem; }
.jt-card-list__link { display: block; padding: 36rem 36rem 80rem; aspect-ratio: 480 / 364; position: relative; color: inherit; background: var(--color-bg-200); border-radius: var(--border-radius-03); transition: background-color .3s; }
.jt-card-list__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; margin-top: 16rem; color: var(--color-gray-800); }
.jt-card-list__date { position: absolute; left: 36rem; bottom: 36rem; color: var(--color-primary); opacity: .5; }



/* **************************************** *
 * DOWNLOAD LIST
 * **************************************** */
.jt-download-list { display: flex; flex-direction: column; gap: 16rem; }
.jt-download-list__link { display: flex; align-items: center; justify-content: space-between; gap: 40rem; padding: 48rem 68rem 48rem 60rem; color: var(--color-primary); background: var(--color-bg-200); border-radius: var(--border-radius-04); transition: background-color .3s; }
.jt-download-list__icon { flex-shrink: 0; width: 32rem; }



/* **************************************** *
 * STACK CARD
 * **************************************** */
.jt-stack-card { height: calc(var(--section-fvh) * 2); position: relative; }
.jt-stack-card__inner { height: var(--section-fvh); position: sticky; top: 0; }
.jt-stack-card .wrap-full { height: 100%; }

.jt-stack-card__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center / cover; overflow: hidden; }

.jt-stack-card__content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 60rem 0; }
.jt-stack-card__title { order: 2; text-align: center; }
.jt-stack-card__desc { display: flex; flex-direction: column; gap: 35rem; text-align: center; }
.jt-stack-card__desc > p + p { margin-top: -15rem; }
.jt-stack-card__explain { position: absolute; right: 58rem; bottom: 79rem; text-align: right; color: var(--color-gray-500) }

/* PRIMARY */
.jt-stack-card--primary { background: var(--color-white); }
.jt-stack-card--primary .jt-stack-card__content { color: var(--color-primary); }

/* SECONDARY */
.jt-stack-card--secondary { background: var(--color-black); }
.jt-stack-card--secondary .jt-stack-card__content { color: var(--color-white); }



/* **************************************** *
 * SLIDE CARD
 * **************************************** */
.jt-slide-card { margin-left: -40rem; margin-right: -40rem; padding-left: 40rem; padding-right: 40rem; }
.jt-slide-card__slider { margin-left: -12rem; margin-right: -12rem; overflow: visible; }

.jt-slide-card__item { width: 544rem; padding: 0 12rem; }
.jt-slide-card__item-inner { position: relative; aspect-ratio: 520 / 672; border-radius: var(--border-radius-04); overflow: hidden; }

.jt-slide-card__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center / cover; }

.jt-slide-card__content { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 54rem 42rem 42rem; position: relative; color: var(--color-white); user-select: none; }
.jt-slide-card__note { display: flex; flex-direction: column; gap: 12rem; }



/* **************************************** *
 * UTILITY
 * **************************************** */
/* SCROLL DOWN */
.scroll-down { width: 40rem; height: 40rem; position: absolute; right: 40rem; bottom: 40rem; z-index: 10; cursor: default; pointer-events: none; }
.scroll-down .jt-icon { display: block; }
.scroll-down .jt-icon svg path { fill: var(--color-white); }



/* **************************************** *
 * MOTION
 * **************************************** */
/* 화면 높이 기반 모션 대응값 */
body { --section-fvh: 100vh; }

/* IMAGE ZOOM */
.jt-motion-zoom { position: relative; border-radius: inherit; overflow: hidden; }
.jt-motion-zoom > * { transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1); }

/* TEXT SCRAMBLE */
.jt-motion-slotmachine { display: inline-block; vertical-align: top; height: 1em; position: relative; line-height: 1; font-feature-settings: 'tnum'; }
.jt-motion-slotmachine > * { display: inline-block; vertical-align: top; }
.jt-motion-slotmachine .slotmachine-number-wrap { height: 100%; overflow: hidden; }
.jt-motion-slotmachine .slotmachine-number-wrap > span { display: block; position: relative; top: 0; }

/* TEXT SHAKER */
.jt-motion-shaker { font-size: 0; }
.jt-motion-shaker__word { display: inline-flex !important; height: 1.1em; padding: 0 .087em; white-space: nowrap; overflow: hidden; }
.jt-motion-shaker__char { display: inline-block !important; position: relative; line-height: 1; }
.jt-motion-shaker__char > span:last-child { position: absolute; top: -100%; left: 0; }

/* MARQUEE */
.jt-drag-marquee { display: block; font-size: 0; white-space: nowrap; overflow: hidden; }
.jt-drag-marquee__wrapper,
.jt-drag-marquee__inner,
.jt-drag-marquee__item { display: inline-block; vertical-align: top; }



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

    /* BUTTON */
    .jt-btn__text:hover:after { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); }
    
    .jt-btn__outline:hover { color: var(--color-white); background: var(--color-secondary); border-color: var(--color-secondary); }

    .jt-btn__fill:hover { color: var(--color-gray-800); background: var(--color-gray-300); }

    .jt-btn__underline:hover > span:before { width: 0; transition-delay: 0s; }
    .jt-btn__underline:hover > span:after { width: 100%; transition-delay: .2s; }

    /* FORM */
    .choices__list--dropdown .choices__item--selectable:hover, 
    .choices__list[aria-expanded] .choices__item--selectable:hover { color: var(--color-secondary); }

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

    /* SINGLE */
    .jt-single__tools-item:hover > .jt-icon svg path { fill: var(--color-gray-500); }

    /* TAG */
    .jt-tags--primary a:hover { color: var(--color-gray-600); }

    .jt-tags--secondary a:hover { background: var(--color-gray-400); }

    /* SHARE */
    .jt-share__item:hover .jt-share__icon { background: var(--color-gray-300); }
    
    .jt-share-popup__close:hover .jt-icon { transform: rotate(90deg); }

    /* QUICKNAV */
    .jt-quicknav__list > li:not(.jt-quicknav--active) > a:hover { color: var(--color-gray-800); }

    /* SWIPER */
    .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:hover:before { opacity: 1; }

    .swiper-state__btn:hover { background: var(--color-gray-500); }

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

    /* GRID LIST */
    .jt-grid-list__link:hover .jt-grid-list__thumb .jt-lazyload { transform: scale(1.03) rotate(0.01deg); }

    /* CARD LIST */
    .jt-card-list__link:hover { background: var(--color-gray-100); }

    /* DOWNLOAD LIST */
    .jt-download-list__link:hover { background: var(--color-gray-200); }
    .jt-download-list__link:hover .jt-icon svg path { fill: var(--color-black); }

    /* MOTION */
    .jt-motion-zoom:hover > * { transform: scale(1.03); }

}