@charset "utf-8";

/*
 * File       : jt-strap.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.0
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 01) A11Y
 * 02) TYPOGRAPHY
 * 03) JT EDIT UI
 * 04) JT GUIDE
 * 05) BUTTON
 * 06) FORM
 * 07) CATEGORY
 * 08) PAGINATION
 * 09) LOADMORE
 * 10) LIST COMPONENT
 * 11) SINGLE LAYOUT
 * 12) TAGS
 * 13) BREADCRUMBS
 * 14) SHARE
 * 15) SWIPER
 * 16) LAZYLOAD
 * 17) VIDEO
 * 18) JT BOARD LIST
 * 19) JT ACCORDION LIST
 * 20) JT THUMB LIST
 * 21) JT SLIDER LIST
 * 22) JT LAST LIST
 * 23) JT VIEW GALLERY
 * 24) MAP
 * 25) ANIMATIOM KEYFRAME
 */



/* **************************************** *
 * 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: 18rem 0; position: fixed; top: 0; left: 0; font-size: 16rem; line-height: 1; text-align: center; font-weight: bold; color: var(--wp--preset--color--white); background: var(--wp--preset--color--black); z-index: 999; }

.use-mouse, 
.use-mouse select, 
.use-mouse input[type=text], 
.use-mouse input[type=tel], 
.use-mouse input[type=email], 
.use-mouse input[type=password], 
.use-mouse input[type=url], 
.use-mouse input[type=number], 
.use-mouse input[type=search], 
.use-mouse textarea, 
.use-mouse input[type=submit], 
.use-mouse input[type=button], 
.use-mouse button, 
.use-mouse a:focus { outline: none; }



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



/* **************************************** *
 * JT EDIT UI
 * **************************************** */
.jt-edit__btn { display: block; padding: 2rem 12rem; position: absolute; top: 0; right: 0; color: var(--wp--preset--color--white); background: var(--wp--preset--color--gray-600); border-radius: 50rem; opacity: 0; visibility: hidden; transition: all .3s; }
html.desktop .jt-edit__btn:hover { background: var(--wp--preset--color--gray-700) }
html.desktop .article:hover .jt-edit__btn { opacity: 1; visibility: visible; }



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



/* **************************************** *
 * BUTTON
 * **************************************** */
/**
    <a href="#" class="jt-btn__basic jt-btn--type-01 jt-btn--icon-more">
        <span>더보기</span>
        <i class="jt-icon"><?php echo jt_icon('jt-more'); ?></i>
    </a>

    <a href="#" class="jt-btn__basic jt-btn--type-01 jt-btn--icon-arrow">
        <span>자세히 보기</span>
        <i class="jt-icon"><?php echo jt_icon('jt-self'); ?></i>
    </a>

    <a href="#" class="jt-btn__basic jt-btn--type-01 jt-btn--icon-outlink">
        <span>자세히 보기</span>
        <i class="jt-icon"><?php echo jt_icon('jt-blank'); ?></i>
    </a>
**/
/* Basic Button */
.jt-btn__basic { display: inline-block; vertical-align: middle; padding: 10rem 48rem; position: relative; font-size: 0; text-align: center; background: transparent; border: 2px solid var(--wp--preset--color--black); border-radius: 999rem; transition: background-color .3s, border .3s; }
.jt-btn__basic > span { display: inline-block; vertical-align: middle; font-size: var(--wp--preset--font-size--jt-09); line-height: var(--jt-font-lineheight-09); font-weight: 700; letter-spacing: var(--jt-font-letterspacing-01); color: var(--wp--preset--color--black); transition: color .3s; }
.jt-btn__basic > .jt-icon { width: 12rem; margin-left: 5rem; position: relative; vertical-align: middle; top: 0; }

html.desktop .jt-btn__basic.jt-btn--type-01:hover { background: var(--wp--preset--color--black); }
html.desktop .jt-btn__basic.jt-btn--type-01:hover > span { color: var(--wp--preset--color--white); }
html.desktop .jt-btn__basic.jt-btn--type-01:hover > .jt-icon path { fill: var(--wp--preset--color--white); }

.jt-btn__basic.jt-btn--type-02 { border-color: var(--wp--preset--color--white); }
.jt-btn__basic.jt-btn--type-02 > span { color: var(--wp--preset--color--white); }
.jt-btn__basic.jt-btn--type-02 > .jt-icon path { fill: var(--wp--preset--color--white); }
html.desktop .jt-btn__basic.jt-btn--type-02:hover { color: var(--wp--preset--color--jt-primary); background: var(--wp--preset--color--white); }
html.desktop .jt-btn__basic.jt-btn--type-02:hover > span { color: var(--wp--preset--color--jt-primary); }
html.desktop .jt-btn__basic.jt-btn--type-02:hover > .jt-icon path { fill: var(--wp--preset--color--jt-primary); }

html.ios .jt-btn__basic > .jt-icon { top: -1rem; }

/**
    <a href="#" class="jt-btn__point jt-btn--type-01 jt-btn--icon-arrow">
        <span>자세히 보기</span>
        <div class="jt-btn__point-circle"><i class="jt-icon"><?php echo jt_icon('jt-chevron-right-mini-2px-square'); ?></i></div>
    </a>

    <a href="#" class="jt-btn__point jt-btn--type-01 jt-btn--icon-outlink">
        <span>자세히 보기</span>
        <div class="jt-btn__point-circle"><i class="jt-icon"><?php echo jt_icon('jt-blank'); ?></i></div>
    </a>
**/
/* Point Button */
.jt-btn__point { display: inline-block; vertical-align: middle; padding-right: 23rem; position: relative; font-size: var(--wp--preset--font-size--jt-07); line-height: var(--jt-font-lineheight-07); font-weight: 700; letter-spacing: var(--jt-font-letterspacing-01); color: var(--wp--preset--color--gray-700); background: transparent; border: none; transition: color .3s; }
.jt-btn__point-circle { width: 18rem; height: 18rem; margin-top: -9rem; position: absolute; right: 0; top: 50%; background: var(--wp--preset--color--gray-200); border-radius: 50%; transition: background-color .3s; }
.jt-btn__point-circle .jt-icon { display: block; width: 12rem; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.jt-btn__point-circle .jt-icon path { fill: var(--wp--preset--color--gray-500); }

.jt-btn__point.jt-btn--large { font-size: var(--wp--preset--font-size--jt-06); line-height: var(--jt-font-lineheight-06); }

.jt-btn__point.jt-btn--icon-outlink .jt-icon { width: 10rem; top: calc(50% + 2rem); left: calc(50% + 1rem); }

html.desktop .jt-btn__point.jt-btn--type-01:hover { color: var(--wp--preset--color--jt-primary); }
html.desktop .jt-btn__point.jt-btn--type-01:hover .jt-btn__point-circle { background: var(--wp--preset--color--jt-primary); }
html.desktop .jt-btn__point.jt-btn--type-01:hover .jt-btn__point-circle .jt-icon path { fill: var(--wp--preset--color--white); }

.jt-btn__point.jt-btn--type-02 { color: var(--wp--preset--color--white); }
.jt-btn__point.jt-btn--type-02 .jt-btn__point-circle { background: var(--wp--preset--color--white); }
.jt-btn__point.jt-btn--type-02 .jt-btn__point-circle .jt-icon path { fill: var(--wp--preset--color--jt-primary); }
html.desktop .jt-btn__point.jt-btn--type-02:hover { color: rgba(255,255,255,0.7); }
html.desktop .jt-btn__point.jt-btn--type-02:hover .jt-btn__point-circle { background: rgba(255,255,255,0.7); }

html.ios .jt-btn__point-circle .jt-icon { left: calc(50% + 0.5px); }



/* **************************************** *
 * FORM
 * **************************************** */
/* Selectric */
.jt-selectric__wrap { width: 228rem; position: relative; }

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

.selectric { text-align: left; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--gray-300); }
.selectric .label { height: 56rem; margin: 0 46rem 0 18rem; font-size: var(--wp--preset--font-size--jt-08); line-height: 57rem; font-weight: 400; letter-spacing: var(--jt-font-letterspacing-01); color: var(--wp--preset--color--black); }
.selectric .button { width: 12rem; height: 12rem; margin-top: -6rem; top: 50%; right: 18rem; background: transparent url(../images/icon/jt-select.svg) no-repeat center center; background-size: 12rem auto; transform-origin: center center; }
.selectric .button:after { display: none; }
.selectric-items { top: calc(100% - 1px); background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--gray-300); box-shadow: none; opacity: 0; transition: all .4s; }
.selectric-items ul, .selectric-items li { width: 100%; }
.selectric-items li { padding: 14rem 19rem; transition: color .3s; }
.selectric-items li > span { font-size: var(--wp--preset--font-size--jt-08); line-height: var(--jt-font-lineheight-08); font-weight: 400; letter-spacing: var(--jt-font-letterspacing-01); color: var(--wp--preset--color--gray-500); transition: color .3s; }
.selectric-items li.selected { background: transparent; }
html.desktop .selectric-items li:hover { background: var(--wp--preset--color--gray-100); }
html.desktop .selectric-items li:hover > span { color: var(--wp--preset--color--black); }
.selectric-hover .selectric, .selectric-focus .selectric, .selectric-open .selectric { border-color: var(--wp--preset--color--gray-300); }
.selectric-open .selectric .button { transform: rotate(-180deg); }
.selectric-open .selectric-items { opacity: 1; }
.selectric-above.selectric-open .selectric-items { bottom: calc(100% - 1px); }

.selectric-items .selectric-scroll { -ms-scroll-chaining: none; overscroll-behavior: none; }
html.win .selectric-items .selectric-scroll { overflow: overlay; }
html.win .selectric-items .selectric-scroll::-webkit-scrollbar { width: 4rem; background: transparent; }
html.win .selectric-items .selectric-scroll::-webkit-scrollbar-track { background: var(--wp--preset--color--gray-300); }
html.win .selectric-items .selectric-scroll::-webkit-scrollbar-thumb { background: var(--wp--preset--color--black); }

html.mobile .jt-selectric__wrap { background: var(--wp--preset--color--white); overflow: hidden; }
html.mobile .jt-selectric__wrap:before { content: ''; width: 12rem; height: 12rem; position: absolute; margin-top: -6rem; top: 50%; right: 18rem; background: url(../images/icon/jt-select.svg) no-repeat center center; background-size: 12rem auto; }
html.mobile .jt-selectric__wrap > select { appearance: none; width: 100%; margin: 0; height: 56rem; padding: 0 46rem 0 18rem; font-size: var(--wp--preset--font-size--jt-08); line-height: 55rem; font-weight: 400; letter-spacing: var(--jt-font-letterspacing-01); color: var(--wp--preset--color--black); background: transparent; border: 1px solid var(--wp--preset--color--gray-300); border-radius: 0; outline: none; box-shadow: none; opacity: 1; box-sizing: border-box; }



/* **************************************** *
 * CATEGORY
 * **************************************** */
.jt-category-outer { padding-top: 34rem; margin-bottom: 36rem; border-top: 2rem solid var(--wp--preset--color--black); }
.jt-category ul { display: flex; flex-wrap: wrap; gap: 4rem 0; margin: 0 -22rem; }
.jt-category ul li { position: relative; }
.jt-category ul li:not(:last-child):after { content: ''; display: block; width: 1px; height: 13rem; margin-top: -7rem; position: absolute; top: 50%; right: -1rem; background: var(--wp--preset--color--gray-300); }
.jt-category ul li a { display: block; padding: 0 22rem; color: var(--wp--preset--color--gray-500); transition: color .3s; }
.jt-category ul li.jt-category--active a,
html.desktop .jt-category ul li a:hover { color: var(--wp--preset--color--black); }

html.ios .jt-category ul li:not(:last-child):after,
html.mac.chrome .jt-category ul li:not(:last-child):after { margin-top: -6rem; }



/* **************************************** *
 * PAGINATION
 * **************************************** */
.jt-pagination { margin-top: 60rem; 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: 26rem; height: 30rem; margin: 0 8rem; position: relative; font-size: var(--wp--preset--font-size--jt-08); line-height: 30rem; font-weight: 700; letter-spacing: var(--jt-font-letterspacing-01); color: var(--wp--preset--color--gray-500); transition: color .3s; }
.jt-pagination .jt-pagination__numbers:after { content: ''; display: block; width: 47%; height: 2rem; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); box-sizing: border-box; }
.jt-pagination .jt-pagination__numbers .jt-icon { width: 24rem; 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: 7rem; }
.jt-pagination .jt-pagination__numbers.jt-pagination--next { margin-left: 7rem; 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; }

html.desktop .jt-pagination .jt-pagination__numbers:hover,
.jt-pagination .jt-pagination__numbers.jt-pagination--current { color: var(--wp--preset--color--black); }
.jt-pagination .jt-pagination__numbers.jt-pagination--current:after { background: var(--wp--preset--color--black); }



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

.jt-loadmore__spinner { display: none; width: 70rem; height: 10rem; margin: 0; position: absolute; top: 50%; left: 50%; margin-left: -35rem; margin-top: -5rem; font-size: 0; line-height: 1; text-align: center; }
.jt-loadmore__spinner > div { display: inline-block; width: 10rem; height: 10rem; margin: 0 6rem; background-color: var(--wp--preset--color--gray-300); border-radius: 100%; animation: bounce-delay 1.4s infinite ease-in-out both; }
.jt-loadmore__spinner .jt-loadmore__spinner_ball_01 { animation-delay: -0.32s; }
.jt-loadmore__spinner .jt-loadmore__spinner_ball_02 { animation-delay: -0.16s; }

.jt-loadmore.jt-loadmore--loading .jt-loadmore__btn > span,
.jt-loadmore.jt-loadmore--loading .jt-loadmore__btn > .jt-icon { visibility: hidden; }
.jt-loadmore.jt-loadmore--loading .jt-loadmore__btn .jt-loadmore__spinner { display: block; }



/* **************************************** *
 * LIST COMPONENT
 * **************************************** */
/* Nothing */
.jt-list-nothing { padding: 80rem 65rem; text-align: center; border-top: 1px solid var(--wp--preset--color--gray-300); border-bottom: 1px solid var(--wp--preset--color--gray-300); }
.jt-list-nothing b { display: block; }
.jt-list-nothing p { padding-top: 4rem; color: var(--wp--preset--color--gray-600); }
.jt-list-nothing p span { color: var(--wp--preset--color--jt-primary); }

.jt-list-nothing.jt-list-nothing--secondary { padding: 0; text-align: left; border: none; }
.jt-list-nothing.jt-list-nothing--secondary b { color: var(--wp--preset--color--black); }
.jt-list-nothing.jt-list-nothing--secondary p { padding-top: 8rem; color: var(--wp--preset--color--gray-700); }



/* **************************************** *
 * SINGLE LAYOUT
 * **************************************** */
.jt-single__split { display: flex; flex-wrap: nowrap; position: relative; }

/* CONTENTS */
.jt-single__container { width: calc(100% - 320rem); padding-right: 160rem; }

.jt-single__header { padding-bottom: 48rem; margin-bottom: 80rem; border-bottom: 1px solid var(--wp--preset--color--gray-300); }
.jt-single__title { color: var(--wp--preset--color--black); }
.jt-single__date { display: block; margin-top: 16rem; color: var(--wp--preset--color--gray-700); }

.jt-single__tags { margin-top: 120rem; }

.jt-single__profile { margin-top: 120rem; }

/* SIDEBAR */
.jt-single__sidebar { width: 320rem; position: relative; }
.jt-single__sidebar-inner { width: 320rem; padding-top: 79rem; }
.jt-single__sidebar-title { margin-bottom: 28rem; color: var(--wp--preset--color--black); }

.jt-single__sidebar-inner.sticky { position: fixed; top: 50rem; }
.jt-single__sidebar-inner.sticky.clear { position: absolute; top: inherit; bottom: 0; }



/* **************************************** *
 * TAGS
 * **************************************** */
.jt-tags { display: flex; flex-wrap: wrap; gap: 10rem 4rem; }
.jt-tags a { display: block; padding: 2rem 16rem; color: var(--wp--preset--color--gray-700); background: var(--wp--preset--color--gray-100); border-radius: 100rem; transition: color .3s, background-color .3s; }
html.desktop .jt-tags a:hover { color: var(--wp--preset--color--white); background: var(--wp--preset--color--jt-primary); }



/* **************************************** *
 * BREADCRUMBS
 * **************************************** */
.jt-breadcrumb { display: flex; align-items: center; gap: 4rem; margin-bottom: 48rem; }
.jt-breadcrumb .jt-icon { display: block; }
.jt-breadcrumb span, .jt-breadcrumb a { color: var(--wp--preset--color--gray-700); transition: color .3s; }

.jt-breadcrumb .jt-breadcrumb--home .jt-icon { width: 20rem; position: relative; }

.jt-breadcrumb .jt-breadcrumb--separator { padding: 0 5rem; }
.jt-breadcrumb .jt-breadcrumb--separator .jt-icon { width: 12rem; }
.jt-breadcrumb .jt-breadcrumb--separator .jt-icon path { fill: var(--wp--preset--color--gray-500); }

html.desktop .jt-breadcrumb a:hover span { color: var(--wp--preset--color--jt-primary); }
html.desktop .jt-breadcrumb .jt-breadcrumb--home a:hover .jt-icon path { fill: var(--wp--preset--color--jt-primary); }



/* **************************************** *
 * SHARE
 * **************************************** */
.jt-share { display: flex; gap: 12rem; margin-top: 48rem; }
.jt-share .jt-share__item { display: block; width: 46rem; height: 46rem; position: relative; text-align: center; background: var(--wp--preset--color--gray-200); border-radius: 50%; transition: background-color .3s; }
.jt-share .jt-share__item .jt-icon { width: 24rem; position: relative; top: 50%; transform: translateY(-50%); }
html.desktop .jt-share .jt-share__item:hover { background: var(--wp--preset--color--jt-primary); }
html.desktop .jt-share .jt-share__item:hover .jt-icon svg path { fill: var(--wp--preset--color--white); }

html.android.kakao .jt-share .jt-share__item.jt-share--url { display: none; }

/* CLIPBOARD */
.jt-share__tooltip { padding: 12rem 36rem; position: fixed; left: 50rem; left: 50%; bottom: 40rem; background: var(--wp--preset--color--black); z-index: 501; transform: translateX(-50%); opacity: 0; visibility: hidden; }
.jt-share__tooltip p { color: var(--wp--preset--color--white); }



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

/* PAGINATION */
.swiper-control { width: 100%; margin-top: 48rem; font-size: 0; text-align: center; z-index: 1; }

.swiper-control .swiper-pagination.swiper-pagination-bullets { display: inline-block; vertical-align: middle; width: auto; position: relative; bottom: auto; left: auto; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet { width: auto; height: auto; padding: 2rem 0; margin: 0 4rem; position: relative; background: transparent; opacity: 1; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:first-child { margin-left: 0; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:last-child { margin-right: 0; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { content: ''; display: block; width: 8rem; height: 8rem; background: var(--wp--preset--color--gray-300); border-radius: 50rem; transition: background-color .3s; }
.swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after { width: 22rem; background: var(--wp--preset--color--black); }

/* PLAY & PAUSE STATE */
.swiper-state { display: inline-block; vertical-align: middle; width: 36rem; height: 36rem; margin-left: 4rem; position: relative; }
.swiper-state__btn { display: block; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; top: 0; left: 0; background: transparent; border: none; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s; cursor: pointer; }
.swiper-state__btn .jt-icon { display: block; margin: -1rem auto 0; }
.swiper-state__btn.swiper-state__btn--play .jt-icon { width: 10rem; }
.swiper-state__btn.swiper-state__btn--pause .jt-icon { width: 15rem; }
.swiper-state__btn .jt-icon path { fill: var(--wp--preset--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; }

/* NAVIGATION */
.swiper-navigation .swiper-button { width: 62rem; height: 62rem; margin-top: 0; top: 50%; transform: translateY(-50%); transition: opacity .3s; }
.swiper-navigation .swiper-button:after { display: none; }
.swiper-navigation .swiper-button-prev { left: -100rem; }
.swiper-navigation .swiper-button-next { right: -100rem; }
.swiper-navigation .swiper-button .jt-icon { display: block; width: 100%; position: relative; }
.swiper-navigation .swiper-button .jt-icon path { fill: var(--wp--preset--color--gray-300); }
.swiper-navigation .swiper-button.swiper-button-disabled { opacity: 0; }
html.desktop .swiper-navigation .swiper-button:hover .jt-icon path { fill: var(--wp--preset--color--black); }

.swiper-navigation.swiper-navigation--secondary .swiper-button { width: 46rem; height: 46rem; background: var(--wp--preset--color--gray-100); border-radius: 50%; }
.swiper-navigation.swiper-navigation--secondary .swiper-button-prev { left: 52rem; }
.swiper-navigation.swiper-navigation--secondary .swiper-button-next { right: 52rem; }
.swiper-navigation.swiper-navigation--secondary .swiper-button .jt-icon { width: 20rem; }
.swiper-navigation.swiper-navigation--secondary .swiper-button .jt-icon path { fill: var(--wp--preset--color--gray-600); }



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

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

/* Color preview */
.jt-lazyload__color-preview { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--wp--preset--color--gray-300); }
.jt-lazyload.jt-lazyload--loaded .jt-lazyload__color-preview { background: transparent; transition: background .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.gif) 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; margin-top: -41rem; margin-left: -41rem; position: absolute; top: 50%; left: 50%; background: var(--wp--preset--color--white); border-radius: 50%; box-sizing: border-box; opacity: 0.8; transform: scale(1) translateZ(0); 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(--wp--preset--color--jt-primary); transition: transform 1s cubic-bezier(.23, 1, .32, 1); }

html.desktop .jt-embed-video__poster:hover .jt-embed-video__overlay-btn { opacity: 1; transform: scale(1.2) translateZ(0); }
html.desktop .jt-embed-video__poster:hover .jt-embed-video__overlay-btn:after { transform: scale(0.8) translateZ(0); }

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



/* **************************************** *
 * JT BOARD LIST
 * **************************************** */
.jt-board-list { border-top: 2rem solid var(--wp--preset--color--black); }
.jt-board-list__item { border-bottom: 1px solid var(--wp--preset--color--gray-300); }
.jt-board-list__link { display: block; padding: 30rem 0; color: inherit; }
.jt-board-list__title { font-size: 0; }
.jt-board-list__title > b { color: var(--wp--preset--color--black); border-bottom: 1px solid transparent; transition: border .3s; } 
.jt-board-list__new { display: inline-block; vertical-align: top; width: 15rem; height: 15rem; margin-left: 8rem; position: relative; top: 2rem; }
.jt-board-list__new .jt-icon { width: 100%; }
.jt-board-list__new .jt-icon path { fill: var(--wp--preset--color--jt-secondary); }
.jt-board-list__date { display: block; margin-top: 4rem; color: var(--wp--preset--color--gray-700); }
html.desktop .jt-board-list__link:hover .jt-board-list__title > b { border-bottom-color: var(--wp--preset--color--black); }



/* **************************************** *
 * JT ACCORDION LIST
 * **************************************** */
.jt-accordion-list { display: flex; flex-wrap: wrap; row-gap: 12rem; }
.jt-accordion-list__item { width: 100%; background: var(--wp--preset--color--gray-100); border-radius: 8rem; }

.jt-accordion-list__head { padding: 28rem 80rem 28rem 36rem; position: relative; cursor: pointer; }
.jt-accordion-list__title { color: var(--wp--preset--color--black); }
.jt-accordion-list__control { width: 20rem; height: 20rem; position: absolute; top: 34rem; right: 36rem; transition: color .3s, transform .3s; }
.jt-accordion-list__control .jt-icon { display: block; width: 100%; }
.jt-accordion-list__control .jt-icon path { fill: var(--wp--preset--color--gray-500); }

.jt-accordion-list__content { margin-top: -16rem; margin-bottom: 16rem; position: relative; overflow: hidden; }
.jt-accordion-list__content-inner { padding: 0 36rem 28rem; margin-bottom: -16rem; }

.jt-accordion-list .jt-accordion-list__item:not(:first-child) .jt-accordion-list__content .jt-accordion-list__content-inner { display: none; }

/* ACTIVE */
html.desktop .jt-accordion-list__head:hover .jt-accordion-list__control .jt-icon path,
.jt-accordion--active .jt-accordion-list__control .jt-icon path { fill: var(--wp--preset--color--black); }
.jt-accordion--active .jt-accordion-list__control { transform: rotate(-180deg); }

/* WITH BLOCKS - Dry (TODO :: creat last custom post template block) */
.jt-blocks .jt-last-post .jt-accordion-list__item { padding-left: 0; }
.jt-blocks .jt-last-post .jt-accordion-list__item:before { display: none; }
.jt-blocks .jt-last-post .jt-accordion-list__title { margin: 0; font-size: var(--wp--preset--font-size--jt-07); line-height: var(--jt-font-lineheight-07); font-weight: 700; letter-spacing: var(--jt-font-letterspacing-01); color: var(--wp--preset--color--black); }
.jt-blocks .jt-last-post .jt-accordion-list__content-inner > *:last-child { margin-bottom: 0; }
.jt-blocks .jt-last-post li.jt-accordion-list__item .jt-accordion-list__content-inner > ul,
.jt-blocks .jt-last-post li.jt-accordion-list__item .jt-accordion-list__content-inner > ol { margin-top: var(--wp--preset--spacing--jt-xlarge); margin-bottom: var(--wp--preset--spacing--jt-xlarge); margin-left: 0; }
.jt-blocks .jt-last-post li.jt-accordion-list__item .jt-accordion-list__content-inner > ul:first-child,
.jt-blocks .jt-last-post li.jt-accordion-list__item .jt-accordion-list__content-inner > ol:first-child { margin-top: 0; }
.jt-blocks .jt-last-post li.jt-accordion-list__item .jt-accordion-list__content-inner > ul:last-child,
.jt-blocks .jt-last-post li.jt-accordion-list__item .jt-accordion-list__content-inner > ol:last-child { margin-bottom: 0; }



/* **************************************** *
 * JT THUMB LIST
 * **************************************** */
.jt-thumb-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52rem 36rem; }
.jt-thumb-list__link { display: block; }
.jt-thumb-list__thumb.jt-lazyload { padding-top: 69.14%; }
.jt-thumb-list__thumb img { transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1); }
.jt-thumb-list__content { padding-top: 24rem; }
.jt-thumb-list__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; color: var(--wp--preset--color--black); }
.jt-thumb-list__title > span { border-bottom: 1px solid transparent; transition: border .3s; }
.jt-thumb-list__date { display: block; margin-top: 8rem; color: var(--wp--preset--color--gray-700); }

html.desktop .jt-thumb-list__link--scale:hover .jt-thumb-list__thumb img { transform: scale(1.05) rotate(0.01deg); }
html.desktop .jt-thumb-list__link:hover .jt-thumb-list__title > span { border-bottom-color: var(--wp--preset--color--black); }



/* **************************************** *
 * JT SLIDER LIST
 * **************************************** */
.jt-slider-list-wrap { margin: 0 -18rem; position: relative; }
.jt-slider-list { font-size: 0; }
.jt-slider-list__item { display: inline-block; width: 33.333333%; padding: 0 18rem; }
.jt-slider-list__link { display: block; color: inherit; }

.jt-slider-list__thumb.jt-lazyload { padding-top: 69.14%; }
.jt-slider-list__thumb img { transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1); }

.jt-slider-list__content { padding-top: 24rem; }
.jt-slider-list__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; color: var(--wp--preset--color--black); }
.jt-slider-list__title > span { border-bottom: 1px solid transparent; transition: border .3s; }
.jt-slider-list__sup { display: block; margin-bottom: 2rem; color: var(--wp--preset--color--jt-primary); }
.jt-slider-list__desc { margin-top: 8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; }
.jt-slider-list__decorate { margin-top: 12rem; }

html.desktop .jt-slider-list__link--scale:hover .jt-slider-list__thumb img { transform: scale(1.05) rotate(0.01deg); }
html.desktop .jt-slider-list__link:hover .jt-slider-list__title > span { border-bottom-color: var(--wp--preset--color--black); }

/* SECONDARY TYPE */
.jt-slider-list--secondary .jt-slider-list__thumb.jt-lazyload { padding-top: 133.51%; }

/* NAVIGATION */
.jt-slider-list-wrap .swiper-navigation .swiper-button { top: 99rem; transform: none; }
.jt-slider-list-wrap .swiper-navigation .swiper-button-prev { left: -80rem; }
.jt-slider-list-wrap .swiper-navigation .swiper-button-next { right: -80rem; }

.jt-slider-list-wrap .swiper-navigation, .jt-slider-list-wrap .swiper-control { display: none; }
.jt-slider-list-wrap.jt-slider--run .swiper-navigation, .jt-slider-list-wrap.jt-slider--run .swiper-control { display: block; }



/* **************************************** *
 * JT LAST LIST
 * **************************************** */
.jt-last-list__item { border-bottom: 1px solid var(--wp--preset--color--gray-300); }
.jt-last-list__item:last-child { border-bottom: none; }

.jt-last-list__link { display: flex; flex-wrap: nowrap; align-items: center; gap: 24rem; padding: 24rem 0; }
.jt-last-list__item:first-child .jt-last-list__link { padding-top: 0; }
.jt-last-list__item:last-child .jt-last-list__link { padding-bottom: 0; }

.jt-last-list__thumb { width: 117rem; }
.jt-last-list__thumb .jt-lazyload { padding-top: 76.93%; }

.jt-last-list__item--media .jt-last-list__content { width: calc(100% - 141rem); }
.jt-last-list__item--typo .jt-last-list__content { width: 100%; }

.jt-last-list__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; color: var(--wp--preset--color--black); }
.jt-last-list__title > span { border-bottom: 1px solid transparent; transition: border .3s; }
.jt-last-list__date { display: block; margin-top: 4rem; color: var(--wp--preset--color--gray-800); }
html.desktop .jt-last-list__link:hover .jt-last-list__title > span { border-bottom-color: var(--wp--preset--color--black); }



/* **************************************** *
 * JT VIEW GALLERY
 * **************************************** */
.jt-view-gallery__slider figure { position: relative; }
.jt-view-gallery__slider figure img { display: block; width: 100%; height: auto; }
.jt-view-gallery__slider figure figcaption { width: 100%; padding: 94rem 24rem 24rem; position: absolute; left: 0; bottom: 0; color: var(--wp--preset--color--white); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); box-sizing: border-box; }

.jt-view-gallery__thumb-wrap { margin-top: 36rem; position: relative; }
.jt-view-gallery__thumb-wrap .swiper-navigation .swiper-button { width: 46rem; height: 46rem; }
.jt-view-gallery__thumb img { display: block; width: 100%; height: auto; }
.jt-view-gallery__thumb .swiper-slide:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0rem solid var(--wp--preset--color--jt-primary); box-sizing: border-box; opacity: 0; cursor: pointer; transition: opacity .3s; }
.jt-view-gallery__thumb .swiper-slide.swiper-slide-active:after { border-width: 5rem; opacity: 1; }



/* **************************************** *
 * MAP
 * **************************************** */
.jt-map-wrap { position: relative; }

.jt-map { height: 420rem; position: relative; background: var(--wp--preset--color--gray-100); overflow: hidden; }
html.mobile .jt-map:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 10; }

.jt-map-wrap .jt-btn__basic {
    margin-top: 36rem;
}



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