@charset "utf-8";

/*
 * File    : rwd-strap.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * 1480px
 * 1200px
 * 860px
 * 540px
 */



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

    /* GRID LIST */
    .jt-grid-list { gap: 48rem 20rem; }
    .jt-grid-list .swiper-wrapper { gap: 48rem 20rem; }

    /* FILTER */
    .jt-filter { gap: 60rem; }

    /* SINGLE LAYOUT */
    .jt-single { margin: 0 40rem; }
    .jt-single__inner { margin: 0 auto; }
    .jt-single__like-toast { position: fixed; bottom: 40rem; padding: 12rem 24rem; z-index: 9999; }
    .jt-single__like-toast:before { display: none; }
    .jt-single__like-toast > span { font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); }

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    /* FORM */
    .jt-form__valid { margin-top: 10rem; }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 56rem; height: 56rem; }

    /* BOARD LIST */
    .jt-board-list__link { height: 80rem; }
    .jt-board-list__content { flex-direction: column; gap: 6rem; }
    .jt-board-list__meta { width: auto; gap: 12rem; }
    .jt-board-list__date { width: 92rem; }

    /* GRID LIST */
    .jt-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60rem 16rem; }
    .jt-grid-list .swiper-wrapper { gap: 40rem 16rem; }
    .jt-grid-list--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* ACCORDION */
    .jt-accordion__head { min-height: 80rem; }
    .jt-accordion__content-inner { padding-bottom: 36rem; }

    /* BREADCRUMB */
    .jt-breadcrumb { margin-bottom: 18rem; gap: 6rem; }

    /* CATEGORY */
    .jt-category { width: 100%;}
    .jt-category ul { display: block; opacity: 0; white-space: nowrap; font-size: 0; margin: 0 -24rem; padding: 0 24rem; overflow: auto; scrollbar-width: none; }
    .jt-category ul::-webkit-scrollbar { display: none; }
    .jt-category ul li { display: inline-block; margin-right: 6rem; }
    .jt-category ul li:last-child { margin-right: 0; }
    .jt-category ul a { padding: 6rem 20rem; }

    /* FILTER */
    .jt-filter { flex-direction: column; gap: 40rem; }
    .jt-filter__sorting { display: flex; width: 100%; justify-content: flex-end; }

    /* SINGLE LAYOUT */
    .jt-single { display: block; margin: 0; overflow: hidden; }
    .jt-single__inner { margin: 0 24rem; }

    .jt-single__header-nav { height: 52rem; margin-top: 16rem; }

    .jt-single__like-toast { bottom: 30rem; }

    body.single-resources .jt-single__nav,
    body.single-training .jt-single__nav { display: none; }
    body.single-resources .jt-single__header-nav,
    body.single-training .jt-single__header-nav { display: block; }

    .jt-single__nav-mobile { position: relative; background: var(--color-white); opacity: 0; padding-top: 14rem; visibility: hidden; z-index: 1; }
    .jt-single__nav-mobile .jt-single__nav-title { position: relative; display: block; padding: 13rem 49rem 13rem 15rem; border: 1px solid var(--color-gray-300); cursor: pointer; transition: border .3s; }
    .jt-single__nav-mobile .jt-single__nav-title:after { content: ''; position: absolute; width: 18rem; height: 18rem; right: 16rem; top: 50%; transform: translate(0, -50%); background: url(../images/icon/select.svg) no-repeat center center / cover; transition: transform .3s; }
    .jt-single__nav-mobile .jt-single__nav-list { position: absolute; left: 0; top: 100%; width: 100%; margin-top: -1px; border: 1px solid var(--color-black); background: var(--color-white); padding: 16rem; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
    .jt-single__nav-mobile--active .jt-single__nav-title { border-color: var(--color-black); }
    .jt-single__nav-mobile--active .jt-single__nav-title:after { transform: translate(0, -50%) rotate(-180deg); }
    .jt-single__nav-mobile--active .jt-single__nav-list { visibility: visible; opacity: 1; }
    .jt-single__nav-mobile--sticky { position: fixed; top: var(--header-height); left: 0; right: 0; padding: 14rem 24rem 0; margin-top: 0; }

    .jt-single__control { padding: 60rem 0 30rem; }

    /* NODATA */
    .jt-nodata { height: 480rem; }
    .jt-nodata__icon { width: 72rem; height: 72rem; }
    .jt-nodata__desc { margin-top: 16rem; }

    /* JT ALERT */
    .jt-alert__container { width: 400rem; }

    /* TABLE */
    .wp-block-table:has(.jt-table) { margin-left: -24rem; margin-right: -24rem; }
    .wp-block-table:has(.jt-table) .jt-table { overflow-x: auto; padding: 0 24rem; scrollbar-width: none; }
    .wp-block-table:has(.jt-table) .jt-table::-webkit-scrollbar { display: none; }
    .wp-block-table:has(.jt-table) .jt-table table { display: inline-table; min-width: 100%; width: auto; }
    .wp-block-table:has(.jt-table) .jt-table + figcaption { padding: 0 24rem; }
    html.win .wp-block-table:has(.jt-table) .jt-table { scrollbar-width: thin; }

    .jt-single__related .jt-grid-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

        /* SINGLE LAYOUT */
        .jt-single__nav-mobile .jt-single__nav-title:hover { border-color: var(--color-black); }

    }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    /* BUTTON */
    .jt-btn__basic { padding: 6rem 22rem; }

    /* FORM */
    .jt-form__field { height: 42rem; }
    .jt-form__valid { margin-top: 8rem; }
    .jt-form__action { padding: 6rem 22rem; }

    .jt-checkbox label > span:before, .jt-radiobox label > span:before { top: -2rem; }
    .jt-checkbox label > span:after { top: 1rem; }
    .jt-radiobox label > span:after { top: 4rem; }

    html.ios .jt-form__field { padding-bottom: 1rem; }
    html.ios .jt-checkbox label > span:before, html.ios .jt-radiobox label > span:before { top: -1rem; }
    html.ios .jt-checkbox label > span:after { top: 2rem; }
    html.ios .jt-radiobox label > span:after { top: 5rem; }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 48rem; height: 48rem; }

    /* BOARD LIST */
    .jt-board-list__link { height: 72rem; gap: 32rem; }
    .jt-board-list__meta { gap: 8rem; }
    .jt-board-list__date { width: 86rem; }

    /* GRID LIST */
    .jt-grid-list { gap: 48rem 16rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jt-grid-list .swiper-wrapper { gap: 30rem 16rem; }
    .jt-grid-list__content { height: 140rem; }
    .jt-grid-list__info { flex-direction: column; gap: 2rem; margin-bottom: 6rem; height: calc(var(--font-size-primary-10) * var(--font-lineheight-primary-10) * 2 + 2rem); }
    .jt-grid-list__tag { margin-top: 6rem; }
    .jt-grid-list__thumb figure { padding-top: 86.7%; }
    .jt-grid-list__item:has(.jt-grid-list__icon) figure {  padding-top: 49.72%; }

    .jt-grid-list--secondary .jt-grid-list__thumb figure { padding-top: 86.7%; }

    .jt-grid-list.swiper { display: block; margin: 0 -14rem; }
    .jt-grid-list.swiper .swiper-wrapper { gap: 0; }
    .jt-grid-list.swiper .jt-grid-list__item { margin: 0 14rem; width: calc(100% - 28rem); }

    .jt-grid-list .swiper-control { display: block; opacity: 0; visibility: hidden; }

    .jt-grid-list:has(.jt-grid-list__icon) { grid-template-columns: 1fr; gap: 40rem; }
    .jt-grid-list__item:has(.jt-grid-list__icon) .jt-grid-list__content { padding-bottom: 16rem; }
    .jt-grid-list__item:has(.jt-grid-list__icon) .jt-grid-list__info { margin-bottom: 8rem; height: auto; }

    /* ACCORDION */
    .jt-accordion__head { min-height: 76rem; gap: 40rem; }
    .jt-accordion__content-inner { padding-bottom: 24rem; }
    .jt-accordion__item.jt-accordion--active .jt-accordion__head { gap: 8rem; }

    /* BREADCRUMB */
    .jt-breadcrumb { margin-bottom: 16rem; gap: 4rem; }
    html.ios .jt-breadcrumb__separator { top: 2rem; }
    html.mobile .jt-breadcrumb__separator { top: 1rem; }

    /* CATEGORY */
    .jt-category ul { margin: 0 -14rem; padding: 0 14rem; }
    .jt-category ul a { padding: 4rem 16rem; }

    /* FILTER */
    .jt-filter { margin-bottom: 30rem; gap: 30rem; }
    .jt-filter--center { margin-top: 30rem; }

    /* PAGINATION */
    .jt-pagination { margin-top: 40rem; }
    .jt-pagination__numbers { min-width: 24rem; }
    .jt-pagination--first, 
    .jt-pagination--last, 
    .jt-pagination--next, 
    .jt-pagination--prev { min-width: 30rem; }

    /* SINGLE LAYOUT */
    .jt-single__inner { margin: 0 14rem; }

    .jt-single__header { margin: 30rem 0; }
    .jt-single__header-top { gap: 20rem; margin-bottom: 20rem; }
    .jt-single__header-nav { height: 50.5rem; margin-top: 6rem; }

    .jt-single__like-toast { bottom: 20rem; padding: 10rem 20rem; }

    .jt-single__nav-mobile .jt-single__nav-list { padding: 16rem; }
    .jt-single__nav-mobile .jt-single__nav-list li > ul > li > a { padding-left: 12rem; }
    .jt-single__nav-mobile--sticky { padding: 14rem 14rem 0; margin-top: 0; }

    .jt-single__control { padding: 50rem 0 20rem; }

    .jt-single__related .jt-grid-list__item:has(.jt-grid-list__icon) figure { padding-top: 49.72%; }
    .jt-single__related .swiper-control { display: none; }

    /* NODATA */
    .jt-nodata { height: 320rem; }
    .jt-nodata__icon { width: 60rem; height: 60rem; }
    .jt-nodata__desc { margin-top: 12rem; }

    /* JT ALERT */
    .jt-alert__container { width: 362rem; gap: 20rem; min-height: 200rem; }
    .jt-alert__actions { gap: 12rem; }
    .jt-alert__btn { height: 36rem; min-width: 80rem; max-width: 140rem; }

    /* TABLE */
    .wp-block-table:has(.jt-table) { margin-left: -14rem; margin-right: -14rem; }
    .wp-block-table:has(.jt-table) .jt-table { padding: 0 14rem; }
    .wp-block-table:has(.jt-table) .jt-table + figcaption { padding: 0 14rem; }

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

        .jt-board-list__link:hover { gap: 0; }

        .jt-accordion__item:hover .jt-accordion__head:hover { gap: 8rem; }

    }

}