@charset "utf-8";

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



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

    .main-section { padding-top: 180rem; }
    .main-section--secondary { padding-bottom: 180rem; }

}



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

    .main-section { padding-top: 160rem; }
    .main-section--secondary { padding-bottom: 160rem; }

    .main-intro__content { gap: 60rem; }
    .main-intro__desc { margin-top: 12rem; }

    .main-bank__slide { max-width: 1136rem; }
    .main-bank__popup-container-inner { max-width: 1136rem; }

    .main-data .main-section__title span:after { width: 260rem; transform: translate(-252rem, 70rem); }
    .main-data__container { justify-content: center; }
    .main-data__number-icon { width: 26rem; }

    .main-review__slide { max-width: 720rem; }
    .main-review__inner { height: 660rem; }

    .main-cta__title span:after { width: 180rem; transform: translate(-516rem, -12rem); }

    .main-epilogue { height: 760rem; }
    .main-epilogue__desc { margin-top: 20rem; }

}



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

    .main-section { padding-top: 140rem; }
    .main-section--secondary { padding-bottom: 140rem; }
    .main-section__head { margin-bottom: 70rem; }

    .main-intro__visual { margin-top: 50rem; }
    .main-intro__column:last-child { flex: 1; width: auto; }
    .main-intro__title br { display: none; }
    .main-intro__desc br { display: none; }
    .main-intro__controls { margin-top: 28rem; }

    .main-bank .main-section__title span:after { width: 40rem; }
    .main-bank__slide { max-width: 896rem; }
    .main-bank__more { right: 40rem; bottom: 40rem; width: 48rem; height: 48rem; }

    .main-bank__popup { --top-gap: 80rem; --close-gap: 36rem; --close-size: 48rem; }
    .main-bank__popup-container-inner { max-width: 896rem; }
    .main-bank__popup-content { padding-bottom: 140rem; }
    .main-bank__popup-control { padding: 40rem 0 60rem; }
    .main-bank__popup-control-inner { padding-right: 76rem; }
    .main-bank__popup-control-inner .jt-icon { width: 36rem; height: 36rem; }
    .main-bank__popup-close .jt-icon { width: 22rem; }

    .main-solution .main-section__title span:after { width: 48rem; }
    .main-solution__back-inner { padding: 36rem; }
    .main-solution__back-icon { width: 80rem; }
    .main-solution__back-desc { margin: 36rem 0; }

    .main-data .main-section__title span:after { width: 240rem; transform: translate(-230rem, 64rem); }
    .main-data__container { gap: 80rem; }
    .main-data__number-icon { width: 24rem; }

    .main-review .main-section__title span:after { width: 100rem; }

    .main-cta__motion-item { border-radius: 16rem; }
    .main-cta__title span:after { width: 170rem; transform: translate(-480rem, -12rem); }
    .main-cta__control { margin-top: 40rem; }

    .main-epilogue { height: 720rem; }
    .main-epilogue__desc { margin-top: 16rem; }

}



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

    .main-section { padding-top: 120rem; }
    .main-section--secondary { padding-bottom: 120rem; }
    .main-section__head { margin-bottom: 60rem; }

    .main-intro__content { flex-direction: column; gap: 32rem; }
    .main-intro__desc { margin-top: 0; }
    .main-intro__controls { margin-top: 24rem; }
    .main-intro__visual { margin-top: 40rem; }
    .main-intro__link { padding-top: 46.61% }

    .main-bank .main-section__title span:after { width: 36rem; transform: translate(-7rem, -18rem); }
    .main-bank__slide { max-width: 636rem; margin: 0 8rem; }
    .main-bank__more { width: 40rem; height: 40rem; right: 30rem; bottom: 30rem; }

    .main-bank__popup { --top-gap: 0rem; --close-gap: 30rem; --close-size: 40rem; }
    .main-bank__popup-container { padding: 0; }
    .main-bank__popup-container-inner { border-radius: 0; box-shadow: none; }
    .main-bank__popup-content { border-radius: 0; padding-bottom: 100rem; }
    .main-bank__popup-control { border-radius: 0; padding: 40rem 0; }
    .main-bank__popup-control-inner { padding-right: 72rem; }
    .main-bank__popup-control-inner .jt-icon { width: 32rem; height: 32rem; }
    .main-bank__popup-close .jt-icon { width: 20rem; }

    .main-solution .main-section__title span:after { width: 40rem; }
    .main-solution__item { width: 346rem; margin-right: 16rem; }
    .main-solution__back-inner { padding: 32rem; }
    .main-solution__back-icon { width: 72rem; }
    .main-solution__back-desc { margin: 24rem 0; }

    .main-data.main-section { padding: 100rem 0; }
    .main-data .main-section__title span:after { width: 220rem; transform: translate(-210rem, 58rem); }
    .main-data__container { flex-direction: column; gap: 40rem; }
    .main-data__numbers { justify-content: center; gap: 8rem; }

    .main-review .main-section__title span:after { width: 80rem; transform: translate(-35rem, 35rem); }
    .main-review__slider { padding-top: 0; }
    .main-review__slide { margin: 0 8rem; max-width: 580rem; }
    .main-review__inner { height: 543rem; }
    .main-review__content { padding: 30rem 30rem 50rem; }
    .main-review__meta { margin-bottom: 20rem; }

    .main-cta__motion { gap: 16rem; margin: 0 -300rem; }
    .main-cta__motion-column { gap: 16rem; }
    .main-cta__content { margin-top: 60rem; }
    .main-cta__title span:after { width: 154rem; transform: translate(-440rem, -10rem); }

    .main-epilogue { height: 680rem; }
    .main-epilogue__desc { margin-top: 12rem; }

}



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

    .main-section { padding-top: 100rem; }
    .main-section--secondary { padding-bottom: 100rem; }
    .main-section__head { margin-bottom: 40rem; }
    .main-section__title br { display: none; }
    .main-section__desc br { display: none; }

    .main-intro__controls a { flex: 1; }
    .main-intro__link { padding-top: 177.58% }
    .main-intro__visual-bg--desktop {  display: none; }
    .main-intro__visual-bg--mobile { display: block; }

    .main-bank .main-section__title span:after { display: none; }
    .main-bank__slider { max-width: 318rem; margin: 0 auto; }
    .main-bank__slide { max-width: inherit; margin: 0 6rem; }
    .main-bank__link { border-radius: 8rem; padding-top: 144.65%; }
    .main-bank__bg--desktop { display: none; }
    .main-bank__bg--mobile { display: block; }
    .main-bank__more { width: 36rem; height: 36rem; right: 16rem; bottom: 16rem; }

    .main-bank__popup { --close-gap: 16rem; --close-size: 36rem; }
    .main-bank__popup-content { padding-bottom: 80rem; }
    .main-bank__popup-control { padding: 32rem 21rem; }
    .main-bank__popup-control-inner { padding-right: 68rem; }
    .main-bank__popup-control-inner span { margin-bottom: 8rem; }
    .main-bank__popup-control-inner .jt-icon { width: 28rem; height: 28rem; }
    .main-bank__popup-close .jt-icon { width: 18rem; }

    .main-solution .main-section__title span:after { width: 31rem; transform: translate(10rem, 16rem); }
    .main-solution__item { width: 258rem; margin-right: 14rem; }
    .main-solution__front { border-radius: 8rem; }
    .main-solution__back { border-radius: 8rem; }
    .main-solution__back-inner { padding: 28rem; }
    .main-solution__back-icon { width: 47rem; }
    .main-solution__back-desc { margin: 16rem 0; }
    .main-solution__back-more { box-shadow: inset 0 -1rem 0 0 currentColor; }

    .main-data { --number-size: 42rem; }
    .main-data__bg--desktop { display: none; }
    .main-data__bg--mobile { display: block; }
    .main-data .main-section__title span:after { width: 184rem; transform: translate(-181rem, 49rem); }
    .main-data__container { padding-top: 40rem; }

    .main-review .main-section__title span:after { width: 56rem; transform: translate(-24rem, 28rem); }
    .main-review__slider { max-width: 320rem; margin: 0 auto; }
    .main-review__slide { max-width: inherit; margin: 0 6rem; }
    .main-review__inner { height: 335rem; border-radius: 10rem; }
    .main-review__video { margin: 8rem 8rem 0; border-radius: 6rem; }
    .main-review__content { padding: 20rem 20rem 24rem; }
    .main-review__category { padding: 2rem 14rem; }
    .main-review__meta { margin-bottom: 12rem; }
    .main-review__tag { margin-top: 6rem; }

    .main-cta__motion { gap: 12rem; margin: 0 -180rem; }
    .main-cta__motion-column { gap: 12rem; }
    .main-cta__motion-item { border-radius: 8rem; }
    .main-cta__content { margin-top: 40rem; }
    .main-cta__title span:after { transform: translate(-184rem, -112rem); }
    .main-cta__control { flex-direction: column; align-items: center; gap: 8rem; }
    .main-cta__control a { width: 183rem; }
    
    .main-epilogue__bg--desktop { display: none; }
    .main-epilogue__bg--mobile { display: block; }
    .main-epilogue__desc { margin-top: 8rem; }

}