@charset "utf-8";

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



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

    /* BRAND STORY */
    .main-brand-story__webgl-area { width: 1244px; height: 600px; }
    
    /* SOLUTION */
    .main-solution__data-thumb { width: 28.29%; }

}



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

    /* MARQUEE */
    .main-marquee__text { font-size: 30rem; line-height: 50rem; }

    /* BRAND STORY */
    .main-brand-story { padding-top: 140rem; }
    .main-brand-story__webgl-area > span { width: 160rem; height: 160rem; }

    /* SOLUTION */
    .main-solution { padding: 140rem 0; }
    
    /* ACTIVITY */
    .main-activity { padding: 140rem 0 240rem; }
    .main-activity__marquee-text { font-size: 82rem; }

}



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

    /* GLOBAL */
    .main-title p { margin-top: 12rem; }

    /* VISUAL */
    .main-visual { padding-top: 145rem; }
    .main-visual__title b { margin-top: 12rem; }
    .main-visual__screen { margin-top: 60rem; }

    /* MARQUEE */
    .main-marquee__text { font-size: 26rem; line-height: 44rem; }

    /* BRAND STORY */
    .main-brand-story { padding-top: 120rem; }
    .main-brand-story__more { margin-top: 30rem; }

    /* SOLUTION */
    .main-solution { padding: 120rem 0; }
    .main-solution__tab { margin-top: 48rem; }
    .main-solution__tab-train { min-width: 120rem; }
    .main-solution__tab-list { margin-bottom: 48rem; }
    .main-solution__tab-list a { min-width: 120rem; }
    .main-solution__data-item > a { padding: 48rem 0; gap: 48rem; }
    .main-solution__data-title .jt-icon { width: 28rem; height: 28rem; margin-left: 16rem; }

    /* ACTIVITY */
    .main-activity { padding: 120rem 0 200rem; }
    .main-activity__stage { margin-top: 70rem; }
    .main-activity__item-content { padding: 24rem; }
    .main-activity__item-reverse { padding: 24rem; }
    .main-activity__item-desc { -webkit-line-clamp: 6; }
    .main-activity__item-btn { bottom: 24rem; }
    
    .main-activity__marquee-text { font-size: 70rem; }

}



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

    /* GLOBAL */
    body.jt-background--dark .main-solution__data-desc { color: var(--color-gray-500); }

    /* MARQUEE */
    .main-marquee { padding: 12rem 0; border-bottom: 1px solid var(--color-gray-300); }
    .main-marquee__text { font-size: 22rem; line-height: 36rem; letter-spacing: .05em; margin-right: 24rem; }

    /* BRAND STORY */
    .main-brand-story { padding-top: 100rem; overflow: hidden; }
    .main-brand-story__webgl { height: 500rem; margin-top: -50rem; }

    /* SOLUTION */
    .main-solution { padding: 100rem 0; }
    .main-solution__data-item > a { grid-template-columns: none; align-items: start; gap: 12rem; }
    .main-solution__data-thumb { left: 75%; }
    .main-solution__data-desc { text-align: left; }

    /* ACTIVITY */
    .main-activity { padding: 100rem 0 180rem; }

    .main-activity__marquee-text { font-size: 62rem; }

    .main-activity__slider { display: none; }
    .main-activity__slider-mobile { display: block; }

    .main-activity__slider-mobile .main-activity__item { max-width: calc((100% - 60rem) * .5); width: 100%; pointer-events: none; }
    .main-activity__slider-mobile .main-activity__item + .main-activity__item { margin-left: 0; }
    .main-activity__slider-mobile .main-activity__item.swiper-slide-active { pointer-events: all; }
    .main-activity__slider-mobile .main-activity__item-inner { transform: scale(0.82); }
    .main-activity__slider-mobile .main-activity__item-title { margin-bottom: 16rem; }

    .main-activity__slider-mobile:not(.main-activity__slider--init) .main-activity__slider-control { visibility: hidden; }
    .main-activity__slider-mobile.main-activity__slider--init .main-activity__slider-control { opacity: 1; visibility: visible; }
}



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

    /* GLOBAL */
    .main-title p { font-size: 15rem; line-height: 23rem; font-weight: 500; }

    /* VISUAL */
    .main-visual { padding-top: 127rem; }
    .main-visual__title P { font-size: 15rem; line-height: 23rem; }
    .main-visual__title b { margin-top: 8rem; }
    .main-visual__screen { margin-top: 36rem; }
    .main-visual__screen-inner { clip-path: inset(0 calc((100% - 295rem) / 2) round 20rem) }

    /* MARQUEE */
    .main-marquee__text { font-size: 18rem; line-height: 28rem; margin-right: 20rem; }

    /* BRAND STORY */
    .main-brand-story { padding-top: 80rem; }
    .main-brand-story__more { margin-top: 24rem; }
    .main-brand-story__webgl { height: 400rem; margin-top: -30rem; }

    /* SOLUTION */
    .main-solution { padding: 80rem 0 100rem; }
    .main-solution__tab { margin-top: 40rem; }
    .main-solution__tab-list-inner { padding: 6rem; }
    .main-solution__tab-list { margin-bottom: 40rem; }
    .main-solution__tab-list a { min-width: 86rem; padding: 4rem 16rem; }
    .main-solution__tab-list a > span { font-size: 14rem; line-height: 20rem; }
    .main-solution__tab-train { top: 6rem; bottom: 6rem; left: 6rem; min-width: 86rem; }

    .main-solution__data-item > a { padding: 28rem 0; gap: 8rem; }
    .main-solution__data-title > span { font-size: 25rem; line-height: 36rem; }
    .main-solution__data-title .jt-icon { width: 20rem; height: 20rem; margin-left: 10rem; }
    .main-solution__data-desc > span { font-size: 14rem; line-height: 21rem; font-weight: 500; }
    
    /* ACTIVITY */
    .main-activity { padding: 80rem 0 140rem; }
    .main-activity__stage { margin-top: 40rem; }
    .main-activity__marquee-text { font-size: 52rem; }
    .main-activity__slider-mobile .main-activity__item { max-width: 280rem; }
    .main-activity__slider-mobile .main-activity__item-content { padding: 24rem 20rem; }
    .main-activity__slider-mobile .main-activity__item-reverse { padding: 24rem 20rem; }
    .main-activity__slider-mobile .main-activity__item-category { margin-bottom: 2rem; }
    .main-activity__slider-mobile .main-activity__item-title { margin-bottom: 10rem; }
    .main-activity__slider-mobile .main-activity__item-desc { font-weight: 500; }
    .main-activity__slider-mobile .main-activity__slider-control { padding-top: 20rem; }
    
}