@charset "utf-8";

/*
 * File       : rwd-strap.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.0
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) 1480px
 * 02) 1200px
 * 03) 1023px
 * 04) 781px
 * 05) 540px
 */



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

    /* SWIPER */
    .swiper-navigation .swiper-button-prev { left: -80rem; }
    .swiper-navigation .swiper-button-next { right: -80rem; }

    .swiper-navigation.swiper-navigation--secondary .swiper-button-prev { left: 46rem; }
    .swiper-navigation.swiper-navigation--secondary .swiper-button-next { right: 46rem; }

    /* JT SLIDER LIST */
    .jt-slider-list-wrap .swiper-navigation .swiper-button-prev { left: -62rem; }
    .jt-slider-list-wrap .swiper-navigation .swiper-button-next { right: -62rem; }

}



/* **************************************** *
 * 1200px
 * **************************************** */
@media (max-width: 1200px){

    /* BUTTON */
    .jt-btn__basic { padding: 10rem 42rem; }
    .jt-btn__basic > .jt-icon { width: 11rem; }
    html.ios .jt-btn__basic.jt-btn--icon-more > .jt-icon { top: -1rem; }

    /* BREADCRUMBS */
    .jt-breadcrumb { margin-bottom: 42rem; }

    /* SHARE */
    .jt-share { margin-top: 42rem; }

    /* CATEGORY */
    .jt-category-outer { padding-top: 30rem; margin-bottom: 32rem; }

    /* PAGINATION */
    .jt-pagination { margin-top: 52rem; }

    /* LOADMORE */
    .jt-loadmore { margin-top: 68rem; }

    /* SWIPER */
    .swiper-control { margin-top: 42rem; }

    .swiper-navigation { display: none; }

    .swiper-navigation.swiper-navigation--secondary .swiper-button { width: 42rem; height: 42rem; }
    .swiper-navigation.swiper-navigation--secondary .swiper-button .jt-icon { width: 18rem; }

    /* LIST COMPONENT */
    .jt-list-nothing.jt-list-nothing--secondary { padding-bottom: 26rem; }

    /* JT SLIDER LIST */
    .jt-slider-list-wrap { margin: 0 -16rem; }
    .jt-slider-list__item { padding: 0 16rem; }
    .jt-slider-list__content { padding-top: 22rem; }
    .jt-slider-list__decorate { margin-top: 10rem; }

    .jt-slider-list-wrap .swiper-navigation,
    .jt-slider-list-wrap.jt-slider--run .swiper-navigation { display: none; }

    /* JT BOARD LIST */
    .jt-board-list__link { padding: 28rem 0; }
    .jt-board-list__new { width: 14rem; height: 14rem; }

    /* JT ACCORDION LIST */
    .jt-accordion-list__head { padding: 25rem 76rem 25rem 32rem; }
    .jt-accordion-list__control { width: 18rem; height: 18rem; top: 31rem; right: 32rem; }
    .jt-accordion-list__content { margin-top: -13rem; margin-bottom: 13rem; }
    .jt-accordion-list__content-inner { padding: 0 32rem 25rem; margin-bottom: -13rem; }
    
    /* JT THUMB LIST */
    .jt-thumb-list { gap: 48rem 32rem; }
    .jt-thumb-list__content { padding-top: 22rem; }

    /* JT LAST LIST */
    .jt-last-list__link { gap: 20rem; }

    /* SINGLE LAYOUT */
    .jt-single__container { padding-right: 120rem; }
    .jt-single__header { padding-bottom: 45rem; margin-bottom: 70rem; }
    .jt-single__date { margin-top: 14rem; }

    .jt-single__sidebar-inner { padding-top: 70rem; }
    .jt-single__sidebar-title { margin-bottom: 25rem; }

    .jt-single__tags { margin-top: 100rem; }

    .jt-single__profile { margin-top: 100rem; }

    /* MAP */
    .jt-map { height: 400rem; }
    .jt-map-wrap .jt-btn__basic { margin-top: 32rem; }

    /* JT VIEW GALLERY */
    .jt-view-gallery__thumb-wrap { margin-top: 32rem; }

}

@media (max-width: 1200px) and (orientation: landscape) {

    /* BUTTON */
    html.ios .jt-btn__basic > .jt-icon { top: 0; }
    html.ios .jt-btn__basic.jt-btn--icon-more > .jt-icon { top: 0; }

}



/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px){

    /* BUTTON */
    .jt-btn__basic { padding: 10rem 38rem; }
    .jt-btn__basic > .jt-icon { width: 10rem; }

    .jt-btn__point-circle { width: 16rem; height: 16rem; margin-top: -8rem; }
    .jt-btn__point-circle .jt-icon { width: 9rem; }

    /* BREADCRUMBS */
    .jt-breadcrumb { margin-bottom: 38rem; }
    .jt-breadcrumb .jt-breadcrumb--home .jt-icon { width: 18rem; }

    /* SHARE */
    .jt-share { margin-top: 38rem; }

    .jt-share .jt-share__item { width: 44rem; height: 44rem; }
    .jt-share .jt-share__item .jt-icon { width: 22rem; }
    
    /* CATEGORY */
    .jt-category-outer { padding-top: 26rem; margin-bottom: 28rem; }
    .jt-category ul { margin: 0 -20rem; }
    .jt-category ul li a { padding: 0 20rem; }

    /* PAGINATION */
    .jt-pagination { margin-top: 48rem; }
    .jt-pagination .jt-pagination__numbers { min-width: 24rem; margin: 0 7rem; }
    .jt-pagination .jt-pagination__numbers .jt-icon { width: 22rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--prev { margin-left: 3rem; margin-right: 6rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--next { margin-left: 6rem; margin-right: 3rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--first,
    .jt-pagination .jt-pagination__numbers.jt-pagination--last { margin-left: 3rem; margin-right: 3rem; }

    /* LOADMORE */
    .jt-loadmore { margin-top: 60rem; }
    .jt-loadmore__spinner { margin-top: -4rem; }
    .jt-loadmore__spinner > div { width: 8rem; height: 8rem; margin: 0 5rem; }

    /* SWIPER */
    .swiper-control { margin-top: 36rem; }

    /* TAGS */
    .jt-tags a { padding-left: 14rem; padding-right: 14rem; }
    html.ios .jt-tags a { padding-top: 3rem; }

    /* LIST COMPONENT */
    .jt-list-nothing { padding: 68rem 48rem; }
    .jt-list-nothing.jt-list-nothing--secondary { padding-bottom: 24rem; }

    /* JT SLIDER LIST */
    .jt-slider-list-wrap { margin: 0 -15rem; }
    .jt-slider-list__item { padding: 0 15rem; }

    /* JT ACCORDION LIST */
    .jt-accordion-list__head { padding: 23rem 72rem 23rem 30rem; }
    .jt-accordion-list__control { top: 28rem; right: 30rem; }
    .jt-accordion-list__content { margin-top: -9rem; margin-bottom: 9rem; }
    .jt-accordion-list__content-inner { padding: 0 30rem 23rem; margin-bottom: -9rem; }

    /* JT THUMB LIST */
    .jt-thumb-list { gap: 46rem 30rem; }
    .jt-thumb-list__content { padding-top: 20rem; }

    /* JT LAST LIST */
    .jt-last-list__link { gap: 18rem; padding: 20rem 0; }
    .jt-last-list__thumb { width: 102rem; }

    /* SINGLE LAYOUT */
    .jt-single__container { width: calc(100% - 280rem); padding-right: 90rem; }
    .jt-single__header { margin-bottom: 64rem; }

    .jt-single__sidebar { width: 280rem; }
    .jt-single__sidebar-inner { width: 280rem; padding-top: 64rem; }
    .jt-single__sidebar-title { margin-bottom: 22rem; }

    .jt-single__tags { margin-top: 90rem; }

    .jt-single__profile { margin-top: 90rem; }

    /* MAP */
    .jt-map { height: 360rem; }
    .jt-map-wrap .jt-btn__basic { margin-top: 30rem; }

    /* FORM */
    .selectric .label { height: 52rem; line-height: 53rem; }
    .selectric-items li { padding-top: 12rem; padding-bottom: 12rem; }

    html.mobile .jt-selectric__wrap > select { height: 52rem; line-height: 52rem; }

    /* JT VIEW GALLERY */
    .jt-view-gallery__slider figure figcaption { padding: 82rem 22rem 22rem; }

}




/* **************************************** *
 * 781px
 * **************************************** */
@media (max-width: 781px){

    /* BUTTON */
    .jt-btn__basic > .jt-icon { width: 9rem; }
    .jt-btn__basic.jt-btn--icon-outlink > .jt-icon { top: -1rem; }
    html.ios .jt-btn__basic { padding-top: 11rem; padding-bottom: 9rem; }
    html.ios .jt-btn__basic > .jt-icon { top: -1rem; }

    html.ios .jt-btn__point-circle { margin-top: -9.5rem; }

    /* BREADCRUMBS */
    .jt-breadcrumb { gap: 3rem; }

    /* CATEGORY */
    .jt-category-outer { margin-bottom: 20rem; padding-top: 20rem; }
    .jt-category { height: 48rem; margin: 0 -24rem; position: relative; overflow: hidden; }
    .jt-category:before, .jt-category:after { content: ''; width: 48rem; height: 100%; position: absolute; top: 0; opacity: 0; visibility: hidden; z-index: 2; transition: opacity .2s; }
    .jt-category:before { left: 0; background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60%,rgba(255,255,255,0) 100%); }
    .jt-category:after { right: 0; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%); }
    .jt-category:not(.jt-category--start):before { opacity: 1; visibility: visible; }
    .jt-category:not(.jt-category--end):after { opacity: 1; visibility: visible; }
    .jt-category ul { height: 58rem; margin: 0; flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; opacity: 0; transition: opacity .15s; }
    .jt-category ul li a { padding-top: 10rem; padding-bottom: 10rem; }
    .jt-category ul li:first-child a { padding-left: 24rem; }
    .jt-category ul li:last-child a { padding-right: 24rem; }
    .jt-category ul li:not(:last-child):after { margin-top: -11rem; }
    .jt-category ul.loaded { opacity: 1; }

    html.win .jt-category ul { overflow: overlay; }
    html.win .jt-category ul::-webkit-scrollbar { height: 4rem; background: transparent; }
    html.win .jt-category ul::-webkit-scrollbar-track { background: var(--wp--preset--color--gray-200); border-radius: 99rem }
    html.win .jt-category ul::-webkit-scrollbar-thumb { background: var(--wp--preset--color--gray-300); border-radius: 99rem; }

    html.ios .jt-category ul li:not(:last-child):after,
    html.mac.chrome .jt-category ul li:not(:last-child):after { margin-top: -13rem; }

    /* PAGINATION */
    html.ios .jt-pagination .jt-pagination__numbers .jt-icon { top: calc(50% - 2rem); }

    /* LOADMORE */
    .jt-loadmore { margin-top: 56rem; }

    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 72rem; height: 72rem; margin-top: -36rem; margin-left: -36rem; }

    /* SWIPER */
    .swiper-state { width: 34rem; height: 34rem; margin-left: 3rem; }

    .swiper-navigation.swiper-navigation--secondary .swiper-button { width: 40rem; height: 40rem; }
    .swiper-navigation.swiper-navigation--secondary .swiper-button .jt-icon { width: 15rem; }

    /* LIST COMPONENT */
    .jt-list-nothing.jt-list-nothing--secondary { padding-bottom: 0; border-bottom: none; }

    /* JT SLIDER LIST */
    .jt-slider-list-wrap { margin: 0 -8rem; }
    .jt-slider-list__item { padding: 0 8rem; }
    .jt-slider-list__content { padding-top: 18rem; }
    .jt-slider-list__decorate { margin-top: 8rem; }

    /* JT BOARD LIST */
    .jt-board-list__link { padding: 26rem 0; }
    html.ios .jt-board-list__link { padding-top: 27rem; padding-bottom: 25rem; }

    /* JT ACCORDION LIST */
    .jt-accordion-list__head { padding: 20rem 65rem 20rem 24rem; }
    .jt-accordion-list__control { top: 26rem; right: 25rem; width: 16rem; height: 16rem; }
    .jt-accordion-list__content { margin-top: -6rem; margin-bottom: 6rem; }
    .jt-accordion-list__content-inner { padding: 0 24rem 20rem; margin-bottom: -6rem; }
    .jt-accordion-list__content-inner .jt-blocks > *, 
    .jt-accordion-list__content-inner .jt-blocks > *.alignwide { margin-left: 0; margin-right: 0; }
    
    html.ios .jt-accordion-list__head { padding-top: 21rem; padding-bottom: 19rem; }
    html.ios .jt-accordion-list__control { top: 25rem; }

    /* JT THUMB LIST */
    .jt-thumb-list { gap: 42rem 16rem; }
    .jt-thumb-list__content { padding-top: 18rem; }
    .jt-thumb-list__date { margin-top: 5rem; }

    /* SINGLE LAYOUT */
    .jt-single__split { flex-wrap: wrap; }

    .jt-single__container { width: 100%; padding-right: 0; }
    .jt-single__content .jt-blocks { margin: 0 -24rem; }

    .jt-single__sidebar { width: calc(100% + 48rem); margin: 90rem -24rem 0; padding-top: 90rem; border-top: 8rem solid var(--wp--preset--color--gray-200); }
    .jt-single__sidebar:before { content: ''; width: 100%; height: 1px; position: absolute; top: -8rem; left: 0; background: var(--wp--preset--color--gray-300); }
    .jt-single__sidebar-inner { width: calc(100% - 48rem); margin: 0 auto; padding-top: 0; }
    .jt-single__sidebar-title { margin-bottom: 32rem; }

    .jt-single .article__related { padding-top: 98rem; }
    .jt-single .article__related:before { content: ''; width: 100%; height: 1px; position: absolute; top: 0; left: 0; background: var(--wp--preset--color--gray-300); }
    .jt-single .article__related:after { content: ''; width: 100%; height: 8rem; position: absolute; top: 1px; left: 0; background: var(--wp--preset--color--gray-200); }

    /* MAP */
    .jt-map-wrap .jt-btn__basic { margin-top: 24rem; }

    /* JT VIEW GALLERY */
    .jt-view-gallery__slider figure figcaption { padding: 68rem 20rem 20rem; }

    .jt-view-gallery__thumb-wrap { margin-top: 24rem; }
    .jt-view-gallery__thumb .swiper-slide.swiper-slide-active:after { border-width: 4rem; }

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    /* BUTTON */
    .jt-btn__basic { padding: 8rem 32rem; }
    .jt-btn__basic > .jt-icon { margin-left: 3rem; }
    .jt-btn__basic.jt-btn--icon-outlink > .jt-icon { top: 0; }
    html.ios .jt-btn__basic { padding-top: 9rem; padding-bottom: 8rem; }
    html.ios .jt-btn__basic.jt-btn--icon-more > .jt-icon { top: -0.5rem; }
    html.ios .jt-btn__basic.jt-btn--icon-outlink > .jt-icon { top: -1rem; }

    html.ios .jt-btn__point-circle .jt-icon { left: 50%; }

    /* BREADCRUMBS */
    .jt-breadcrumb { gap: 2rem; margin-bottom: 24rem; }
    .jt-breadcrumb .jt-breadcrumb--separator { padding: 0 3rem; }
    .jt-breadcrumb .jt-breadcrumb--home .jt-icon { width: 16rem; }

    /* SHARE */
    .jt-share { gap: 8rem; margin-top: 24rem; }
    .jt-share .jt-share__item { width: 40rem; height: 40rem; }
    .jt-share .jt-share__item .jt-icon { width: 18rem; }

    .jt-share__tooltip { width: calc(100% - 48rem); text-align: center; }

    /* CATEGORY */
    .jt-category-outer { margin-bottom: 12rem; padding-top: 10rem; }
    .jt-category { height: 44rem; }
    .jt-category ul { height: 54rem; }
    .jt-category ul li a { padding: 8rem 15rem; }
    .jt-category ul li:not(:last-child):after { height: 12rem; margin-top: -12rem; }

    html.ios .jt-category-outer { margin-bottom: 8rem; padding-top: 11rem; }

    /* PAGINATION */
    .jt-pagination { margin-top: 38rem; }
    .jt-pagination .jt-pagination__numbers { min-width: 22rem; margin: 0 5rem; }
    .jt-pagination .jt-pagination__numbers .jt-icon { top: 50%; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--prev { margin-left: 2rem; margin-right: 5rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--next { margin-left: 5rem; margin-right: 2rem; }
    .jt-pagination .jt-pagination__numbers.jt-pagination--first,
    .jt-pagination .jt-pagination__numbers.jt-pagination--last { margin-left: 2rem; margin-right: 2rem; }
    html.ios .jt-pagination .jt-pagination__numbers .jt-icon { top: calc(50% - 1rem); }

    /* LOADMORE */
    .jt-loadmore { margin-top: 42rem; }
    
    /* VIDEO */
    .jt-embed-video__overlay-btn { width: 60rem; height: 60rem; margin-top: -30rem; margin-left: -30rem; }
    .jt-embed-video__overlay-btn:after { margin-top: -6rem; margin-left: -3rem; border-top-width: 6rem; border-bottom-width: 6rem; border-left-width: 9rem; }

    /* SWIPER */
    .swiper-control { margin-top: 28rem; }

    .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { width: 6rem; height: 6rem; }
    .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after { width: 18rem; }

    .swiper-navigation.swiper-navigation--secondary .swiper-button { width: 36rem; height: 36rem; }
    .swiper-navigation.swiper-navigation--secondary .swiper-button .jt-icon { width: 14rem; }

    .swiper-state__btn .jt-icon { transform: scale(0.85); }
    
    /* TAGS */
    .jt-tags { gap: 8rem 4rem; }
    .jt-tags a { padding: 1rem 12rem; }
    html.ios .jt-tags a { padding-top: 2rem; }

    /* LIST COMPONENT */
    .jt-list-nothing { padding: 48rem 16rem; }

    /* JT SLIDER LIST */
    .jt-slider-list-wrap { margin: 0 -6rem; }
    .jt-slider-list-wrap .swiper { overflow: visible; }
    .jt-slider-list__item { width: 270rem; padding: 0 6rem; }
    .jt-slider-list__content { padding-top: 16rem; }
    .jt-slider-list__desc { margin-top: 6rem; }
    .jt-slider-list__sup { margin-bottom: 1rem; }
    .jt-slider-list__decorate { margin-top: 6rem; }

    /* JT BOARD LIST */
    .jt-board-list__link { padding: 20rem 0; }
    .jt-board-list__date { margin-top: 2rem; }
    .jt-board-list__new { width: 12rem; height: 12rem; margin-left: 5rem; }
    html.ios .jt-board-list__link { padding-top: 21rem; padding-bottom: 19rem; }

    /* JT ACCORDION LIST */
    .jt-accordion-list { row-gap: 8rem; }
    .jt-accordion-list__head { padding: 16rem 48rem 16rem 20rem; }
    .jt-accordion-list__control { top: 22rem; right: 22rem; width: 14rem; height: 14rem; }
    .jt-accordion-list__content-inner { padding: 0 20rem 16rem; }

    html.ios .jt-accordion-list__head { padding-top: 17rem; padding-bottom: 16rem; }
    html.ios .jt-accordion-list__control { top: 22rem; }

    /* JT THUMB LIST */
    .jt-thumb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36rem 12rem; }
    .jt-thumb-list__content { padding-top: 15rem; }
    .jt-thumb-list__date { margin-top: 4rem; }

    /* JT LAST LIST */
    .jt-last-list__link { gap: 15rem; }

    /* SINGLE LAYOUT */
    .jt-single__header { padding-bottom: 36rem; margin-bottom: 48rem; }
    .jt-single__date { margin-top: 10rem; }

    .jt-single__sidebar { margin-top: 72rem; padding-top: 72rem; }
    .jt-single__sidebar-title { margin-bottom: 24rem; }

    .jt-single__tags { margin-top: 72rem; }

    .jt-single__profile { margin-top: 72rem; }

    .jt-single .article__related { padding-top: 80rem; }

    /* MAP */
    .jt-map { height: 230rem; }

    /* FORM */
    .jt-selectric__wrap { width: 210rem; }
    .selectric .label { height: 48rem; margin: 0 43rem 0 16rem; line-height: 49rem; }
    .selectric .button { width: 10rem; height: 10rem; margin-top: -5rem; right: 16rem; background-size: 10rem auto; }
    .selectric-items li { padding: 11rem 16rem; }

    html.mobile .jt-selectric__wrap > select { height: 48rem; padding: 0 43rem 0 16rem; line-height: 49rem; }
    html.mobile .jt-selectric__wrap:before { width: 10rem; height: 10rem; margin-top: -5rem; right: 16rem; background-size: 10rem auto; }
    html.ios.mobile .jt-selectric__wrap > select { line-height: 47rem; }
    html.android.mobile .jt-selectric__wrap > select { line-height: 48rem; }

    /* JT VIEW GALLERY */
    .jt-view-gallery__slider figure figcaption { padding: 32rem 15rem 8rem; }

    .jt-view-gallery__thumb-wrap { margin-top: 16rem; }
    .jt-view-gallery__thumb .swiper-slide.swiper-slide-active:after { border-width: 3rem; }

}


