@charset "utf-8";

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



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

    /* BANNER */
    .main-banner__title { font-size: var(--font-size-primary-03); line-height: var(--font-lineheight-primary-03); }
    .main-banner__content { padding: 0 80rem 0 50%; }

}



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

    /* HEADER */
    .main-header__desc { margin-top: 0; }

    /* LATEST */
    .main-latest__resource { gap: 20rem; }

    /* BANNER */
    .main-banner__content { padding: 0 60rem 0 50%; }

}



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

    /* HEADER */
    .main-header { flex-direction: column; gap: 20rem; padding-bottom: 0; margin-bottom: -10rem; }
    .main-header__desc { max-width: inherit; }

    /* VISUAL */
    .main-visual { aspect-ratio: 1 / 0.7076; margin-left: -24rem; margin-right: -24rem; }
    .main-visual__content { padding: 0 24rem; bottom: 48rem; }
    .main-visual__more { margin-top: 16rem; }
    .main-visual .swiper-control { padding: 0 24rem; }
    .main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets { gap: 6rem; height: 32rem; }

    /* SCHEDULE */
    .main-schedule .jt-grid-list__item:nth-child(n+3) { display: none; }

    /* LATEST */
    .main-latest { padding: 20rem 0 0; margin-left: -24rem; margin-right: -24rem; }
    .main-latest__inner { padding: 48rem 24rem; }
    .main-latest__resource { gap: 16rem; margin-top: 32rem; }
    .main-latest__resource .jt-grid-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .main-latest__resource-title { margin-bottom: 12rem; }

    /* BANNER */
    .main-banner__bg-picture { background-position: 32%; }
    .main-banner__content { padding: 0 40rem 0 45%; }

}



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

    /* HEADER */
    .main-header { gap: 16rem; margin-bottom: -20rem; }
    .main-header__title br { display: none; }

    /* VISUAL */
    .main-visual { margin-left: -14rem; margin-right: -14rem; }
    .main-visual__content { padding: 0 16rem; bottom: 40rem; }
    .main-visual__more { padding: 5rem 11rem; }
    .main-visual .swiper-control { padding: 0 16rem; }
    .main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets { gap: 4rem; height: 22rem; }
    .main-visual .swiper-control .swiper-pagination-bullet__progress { height: 2rem; }

    /* FAVORITE */
    .main-favorite .jt-grid-list { gap: 30rem 16rem; }

    /* LATEST */
    .main-latest { padding: 0; margin-left: -14rem; margin-right: -14rem; }
    .main-latest__inner { padding: 40rem 14rem; }
    .main-latest__title { margin-bottom: 30rem; }
    .main-latest .jt-grid-list__content { padding: 16rem 12rem; }
    .main-latest__resource { grid-template-columns: 1fr; }
    .main-latest__resource-item { border: 1px solid var(--color-gray-300); background: var(--color-white); transition: border .3s; }
    .main-latest__resource-title { padding: 15rem 49rem 15rem 15rem; margin-bottom: 0; cursor: pointer; }
    .main-latest__resource-title:after { content: ''; position: absolute; width: 18rem; height: 18rem; margin: 0; right: 16rem; top: 50%; transform: translate(0, -50%); background: url('../images/icon/select.svg') no-repeat center center / cover; transition: transform .3s; }
    .main-latest__resource-list { border-top: 0; display: none; }
    .main-latest__resource-list > li .jt-accent-icon { display: none; }
    .main-latest__resource-list > li + li { margin-top: 0; }
    .main-latest__resource-list > li > a { padding: 12rem 15rem; border: 0; transition: color .3s; }
    .main-latest__resource-list > li:first-child > a { padding-top: 8rem; }
    .main-latest__resource-list > li:last-child > a { padding-bottom: 23rem; }
    .main-latest__resource--active { border-color: var(--color-black); }
    .main-latest__resource--active .main-latest__resource-title:after { transform: translate(0, -50%) rotate(-180deg); }

    /* TRAINING */
    .main-training .jt-grid-list { gap: 30rem 16rem; }

    /* BANNER */
    .main-banner__bg--mobile { display: block; }
    .main-banner__bg--desktop { display: none; background-position: center center; }
    .main-banner__content { padding: 0 20rem 0 157rem; transform: translate(0, -10rem); }
    .main-banner__desc { font-size: var(--font-size-primary-09); }
    .main-banner__desc br { display: none; }
    .main-banner__links { flex-direction: column; }
    
    /* HOVER */
    @media (hover: hover) and (pointer: fine) {

        /* LATEST */
        .main-latest__resource-item:hover { border-color: var(--color-black); }
        .main-latest__resource-list > li > a:hover { background: transparent; color: var(--color-primary); }

    }

}