@charset "utf-8";

/*
 * File    : rwd-platform.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 1480px
 * 1200px
 * 860px
 * 540px
 */



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

    .platform-visual__webgl-anchor { width: 60%; }

    .platform-architecture__content { width: 380rem; }
    .platform-architecture__content-feature li { padding-left: 20rem; }
    .platform-architecture__content-feature li:before { left: 4rem; }

    .platform-architecture { --margin-gap: -100rem; }
    .platform-architecture__image { width: 600rem; }

}



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

    .platform-architecture { padding: 100rem 0 160rem; --margin-gap: -20rem; }
    .platform-architecture__image { width: 440rem; }
    .platform-architecture__content { width: 320rem; }
    .platform-architecture__content-category { margin-bottom: 24rem; }
    .platform-architecture__content-desc { margin-bottom: 16rem; }
    .platform-architecture__content-control .jt-icon { width: 12rem; }

    .platform-promise { padding: 100rem 0; }
    
    .platform-beforeafter__row:nth-child(1) { height: 120rem; }

    .platform-adopt { padding: 100rem 0; }
    .platform-adopt__head { padding-right: 100rem; }
    .platform-adopt__item { padding: 30rem 0; }
    .platform-adopt__item > b { margin-bottom: 24rem; }

}



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

    .platform-visual { padding-bottom: 20rem; }
    .platform-visual__desc { margin-top: 16rem; }
    .platform-visual__desc br { display: none; }

    .platform-architecture { min-height: var(--full-height, 100vh); padding: 80rem 0; --margin-gap: 10rem; }
    .platform-architecture__item { flex-direction: column; }
    .platform-architecture__image { width: 400rem; }
    .platform-architecture__content { position: relative; width: 440rem; margin: 40rem 0; }
    .platform-architecture__content-category { margin-bottom: 20rem; }
    .platform-architecture__content-title { margin-bottom: 6rem; }
    .platform-architecture__content-desc { margin-bottom: 12rem; }
    .platform-architecture__content-control .jt-icon { width: 10rem; }

    .platform-promise { padding: 80rem 0; }

    .platform-beforeafter { padding: 80rem 0; }
    .platform-beforeafter__container { flex-direction: column; }
    .platform-beforeafter__row .jt-icon { width: 20rem; margin-right: 6rem; }

    .platform-adopt { padding: 80rem 0; }
    .platform-adopt__container { flex-direction: column; }
    .platform-adopt__head { padding-right: 0; padding-bottom: 40rem; }
    .platform-adopt__content { width: auto; }

}



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

    .platform-visual { padding-top: 60rem; padding-bottom: 40rem; }
    .platform-visual__desc { margin-top: 12rem; }
    .platform-visual__webgl { margin-top: 32rem; }
    .platform-visual__webgl-anchor { width: 80%; }

    .platform-architecture { padding: 60rem 0; }
    .platform-architecture__image { width: 300rem; }
    .platform-architecture__content { width: auto; margin: 32rem 0; }
    .platform-architecture__content-category { MARGIN-BOTTOM: 16rem; }
    .platform-architecture__content-feature li { padding-left: 16rem; }

    .platform-promise { padding: 60rem 0; }

    .platform-beforeafter { padding: 60rem 0; }
    .platform-beforeafter__row { height: 68rem; }
    .platform-beforeafter__row:nth-child(1) { height: 100rem; }

    .platform-adopt { padding: 60rem 0; }
    .platform-adopt__head { padding-bottom: 32rem; }
    .platform-adopt__title br { display: none; }
    .platform-adopt__item { padding: 20rem 0; }
    .platform-adopt__item > span { margin-bottom: 6rem; }
    .platform-adopt__item > b { margin-bottom: 20rem; }
    .platform-adopt__item .jt-btn__basic { width: 100%; }

}