@charset "utf-8";

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



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

    /* VISUAL */
    .main-visual__content { bottom: 105rem; }
    .main-visual__typo-dot { width: 11rem; height: 11rem; }

    .main-visual .swiper-control { max-width: calc(100% - 80rem); left: 40rem; bottom: 40rem; transform: none; }

    /* INTRO */
    .main-intro__content-item { padding: 45rem 0; }
    .main-intro__content-item h2 + p { margin-top: 30rem; }

    /* TECHNOLOGY */
    .main-technology__title { width: calc(100% - 80rem); left: 40rem; }
    .main-technology__title-dot { width: 11rem; height: 11rem; }

    .main-technology__content { bottom: 58rem; left: 40rem; }

    /* NEWS */
    .main-news { padding-top: 100rem; }

    .main-news__title { margin-bottom: 75rem; }

    .main-news__column { gap: 0 52rem; }

    .main-news__list { gap: 0 35rem; }
    .main-news__list-content { gap: 18rem; padding: 32rem 0; }
    .main-news__list-icon { width: 66rem; height: 66rem; }
    .main-news__list-icon .jt-accent-icon { width: 24rem; }

}



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

    /* VISUAL */
    .main-visual__content { bottom: 100rem; }
    .main-visual__typo-dot { width: 8rem; height: 8rem; margin-left: 8rem; }

    .main-visual .swiper-control { max-width: calc(100% - 72rem); left: 36rem; bottom: 36rem; }

    /* INTRO */
    .main-intro__content-item { padding: 40rem 0; }
    .main-intro__content-item p br { display: none; }
    .main-intro__content-item h2 + p,
    .main-intro__content-item p:only-child { max-width: 800rem; }
    .main-intro__content-item b + p { max-width: 400rem; }

    /* TECHNOLOGY */
    .main-technology__title { width: calc(100% - 72rem); top: 50rem; left: 36rem; }
    .main-technology__title-dot { width: 8rem; height: 8rem; margin-left: 8rem; }

    .main-technology__content { width: 800rem; bottom: 50rem; left: 36rem; }
    .main-technology__content-desc { margin-top: 16rem; margin-bottom: 20rem; }

    /* NEWS */
    .main-news { padding-top: 85rem; }

    .main-news__title { margin-bottom: 70rem; }

    .main-news__column { gap: 0 48rem; }
    .main-news__column + .main-news__column { margin-top: 70rem; }
    .main-news__column-head { margin-bottom: 26rem; }

    .main-news__list { gap: 0 25rem; }
    .main-news__list-content { gap: 17rem; }
    .main-news__list-icon { width: 58rem; height: 58rem; }
    .main-news__list-icon .jt-accent-icon { width: 22rem; }

}



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

    /* VISUAL */
    .main-visual__bg .jt-background-video__poster--large { display: none; }
    .main-visual__bg .jt-background-video__poster--small { display: block; }
    .main-visual__picture--large { display: none; }
    .main-visual__picture--small { display: block; }

    .main-visual__content { bottom: 82rem; }
    .main-visual__content .jt-btn__text { margin-bottom: -4rem; }
    .main-visual__typo-dot { width: 7rem; height: 7rem; margin-left: 6rem; top: -1rem; }

    .main-visual .swiper-control { max-width: calc(100% - 48rem); left: 24rem; bottom: 26rem; }
    .main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets { height: 32rem; }

    /* INTRO */
    .main-intro__background .jt-background-video { width: calc(100% + 4px); height: calc(100% + 4px); top: -2px; left: -2px; }

    .main-intro__content-item { padding: 50rem 0; }
    .main-intro__content-item h2 + p { max-width: 100%; margin-top: 26rem; }
    .main-intro__content-item b + p { margin-top: 26rem; }
    .main-intro__content-item p:only-child { max-width: 100%; }

    /* TECHNOLOGY */
    .main-technology__title { width: 100%; padding: 60rem 24rem 50rem; position: relative; top: inherit; left: inherit; }
    .main-technology__title-dot { width: 7rem; height: 7rem; margin-left: 6rem; top: 3rem; }

    .main-technology__content { width: 100%; padding: 50rem 24rem 56rem; position: relative; bottom: inherit; left: inherit; }
    .main-technology__content-desc { margin-top: 20rem; margin-bottom: 24rem; }

    .main-technology .swiper-navigation .swiper-button { margin-top: 0; top: calc(49.688vw - 50rem); }

    .main-technology__item .main-technology__bg:after { background: transparent; }

    /* NEWS */
    .main-news { padding-top: 80rem; }

    .main-news__title { margin-bottom: 62rem; }

    .main-news__column { gap: 0 24rem; }
    .main-news__column + .main-news__column { margin-top: 62rem; }
    .main-news__column-head { margin-bottom: 20rem; }

    .main-news__column:has(.main-news__list) .main-news__column-head { margin-bottom: 0; padding-bottom: 20rem; border-bottom: 1px solid var(--color-black); }
    .main-news__list { display: block; margin: 0 -24rem; font-size: 0; white-space: nowrap; overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: none; }
    .main-news__list-item { display: inline-block; vertical-align: top; width: 330rem; margin-right: 16rem; white-space: normal; }
    .main-news__list-item:first-child { margin-left: 24rem; }
    .main-news__list-item:last-child { margin-right: 24rem; }
    .main-news__list-content { padding: 28rem 0; gap: 16rem; }
    .main-news__list-play { width: 48rem; height: 48rem; }
    .main-news__list-play svg { width: 18rem; }
    .main-news__list-icon { width: 50rem; height: 50rem; }
    .main-news__list-icon .jt-accent-icon { width: 18rem; }
    html.win .main-news__list { padding-bottom: 4rem; overflow: overlay; }
    html.win .main-news__list::-webkit-scrollbar { height: 4rem; background: transparent; }
    html.win .main-news__list::-webkit-scrollbar-track { background: var(--color-gray-200); border-radius: 99rem }
    html.win .main-news__list::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 99rem; }

}



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

    /* VISUAL */
    .main-visual__content { bottom: 76rem; }
    .main-visual__content .jt-btn__text { margin-top: 12rem; }
    .main-visual__typo-dot { width: 5rem; height: 5rem; margin-left: 5rem; top: 0; }
    .main-visual__typo--large { display: none; }
    .main-visual__typo--small { display: inline; }

    .main-visual .swiper-control { max-width: calc(100% - 40rem); left: 20rem; }

    /* INTRO */
    .main-intro__content-item h2 + p { margin-top: 20rem; }
    .main-intro__content-item b + p { max-width: 100%; margin-top: 20rem; }

    /* TECHNOLOGY */
    .main-technology__title { padding-left: 20rem; padding-right: 20rem; }
    .main-technology__title-dot { width: 5rem; height: 5rem; margin-left: 5rem; top: 1rem; }

    .main-technology__content { padding-left: 20rem; padding-right: 20rem; }

    /* NEWS */
    .main-news { padding-top: 60rem; }

    .main-news__title { margin-bottom: 45rem; }

    .main-news__column { display: flex; flex-direction: column; gap: 60rem; }
    .main-news__column + .main-news__column { margin-top: 60rem; }

    .main-news__column:has(.main-news__list) .main-news__column-head { margin-bottom: 15rem; }
    .main-news__list { display: flex; flex-direction: column; gap: 40rem; margin: 0; }
    .main-news__list-item { display: block; width: 100%; margin-right: 0; }
    .main-news__list-item:first-child { margin-left: 0; }
    .main-news__list-item:last-child { margin-right: 0; }
    .main-news__list-content { padding: 20rem 0; }
    .main-news__list-title { height: inherit; -webkit-line-clamp: 3; }

}