@charset "utf-8";

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



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

    .solutions-banner__content { padding: 60rem; }

    .solutions-intro { padding: 120rem 0; }

    .solutions-product__container { padding-bottom: 40rem; }

    .solutions-package { padding: 120rem 0; }

    .solutions-preview { padding: 60rem; gap: 60rem; }
    .solutions-preview__images { width: 65%; }

    .solutions-service__column:first-child { width: 20%; }

    .solutions-lineup .article__section-title { max-width: 360rem; }
    .solutions-lineup__links-inner { gap: 80rem; max-width: 800rem; }
    .solutions-lineup__inner { gap: 80rem; padding: 50rem 0; min-height: 494rem; }
    .solutions-lineup__content { gap: 50rem; }
    .solutions-lineup__content-subject br { display: none; }
    .solutions-lineup__content-desc br { display: none; }
    .solutions-lineup__thumb { width: 50%; }

    .solutions-industry { padding: 120rem 0; }
    .solutions-industry__list { margin-top: 80rem; }
    .solutions-industry__list > li { gap: 80rem; padding: 32rem 40rem; }
    .solutions-industry__thumb { width: 40%; }
    .solutions-industry__title { margin-bottom: 24rem; }

    .solutions-specifications__list b { width: 180rem; }

}



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

    .solutions-banner__content { padding: 40rem; }

    .solutions-intro { padding: 100rem 0; }

    .solutions-slogan__desc { margin-top: 60rem; }

    .solutions-product__container { padding-bottom: 80rem; }
    .solutions-product__tabs { width: 100%; padding: 0 40rem; overflow: auto; scrollbar-width: none; }
    .solutions-product__tabs::-webkit-scrollbar { display: none; }

    .solutions-feature { padding: 100rem 0; }

    .solutions-package { padding: 100rem 0; }

    .solutions-preview { padding: 40rem; gap: 40rem; }
    
    .solutions-package .jt-feature__content-title { min-height: 50rem; margin-bottom: 40rem; }

    .solutions-service { padding: 100rem 0; }
    .solutions-service__list > li { padding: 28rem 20rem; min-height: inherit; }

    .solutions-lineup { padding: 100rem 0; }
    .solutions-lineup .article__section-title { max-width: inherit; }
    .solutions-lineup__links { position: relative; top: auto; transform: none; margin-top: 60rem; }
    .solutions-lineup__links:before,
    .solutions-lineup__links:after { width: 80rem; background: linear-gradient(90deg, var(--color-black) 50%, transparent); }
    .solutions-lineup__links:before { left: -40rem; }
    .solutions-lineup__links:after { right: -40rem; }
    .solutions-lineup__links-inner { max-width: inherit; gap: 60rem; margin: 0 -40rem; padding: 0 40rem; }
    .solutions-lineup__inner { padding: 40rem 0; gap: 60rem; min-height: 395rem; }
    .solutions-lineup__content { gap: 40rem; }

    .solutions-industry { padding: 60rem 0 100rem; }
    .solutions-industry__list { margin-top: 60rem; }
    .solutions-industry__list > li { gap: 40rem; }
    .solutions-industry__number { width: 100rem; }
    .solutions-industry__title { margin-bottom: 20rem; }

    .solutions-specifications__list b { width: 120rem; }
    .solutions-specifications__source-mark { max-width: 160rem; }

}



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

    .solutions-banner__content { padding: 30rem; }
    .solutions-banner__desc { margin-top: 6rem; }

    .solutions-intro { padding: 80rem 0; }
    .solutions-intro__title { margin-bottom: 16rem; }

    .solutions-slogan__head { gap: 24rem; }
    .solutions-slogan__head--mobile { display: flex; }
    .solutions-slogan__head--desktop { display: none; }
    .solutions-slogan__desc { margin-top: 40rem; }

    .solutions-product__container { padding-bottom: 120rem; }
    .solutions-product__content { aspect-ratio: 1 / .6; }
    .solutions-product__tabs { padding: 0 30rem; }

    .solutions-feature { padding: 80rem 0; }

    .solutions-package { padding: 80rem 0; }

    .solutions-preview { padding: 10rem 30rem; margin-top: 30rem; }
    .solutions-preview__images { display: none; }
    .solutions-preview__list a { padding-right: 40rem; }
    .solutions-preview__list a:before { content: ''; position: absolute; top: 50%; right: 9rem; width: 2px; height: 12rem; background: var(--color-black); transform: translate(0, -50%); transition: all .3s; }
    .solutions-preview__list a:after { content: ''; position: absolute; top: 50%; right: 4rem; width: 12rem; height: 2px; background: var(--color-black); transform: translate(0, -50%); transition: all .3s; }
    .solutions-preview__list .solutions-preview__image { position: relative; inset: 0; opacity: 1; visibility: visible; border-radius: 0; margin-bottom: 16rem; }
    .solutions-preview__list .solutions-preview__image .jt-lazyload { padding-top: 56.15%; }
    .solutions-preview__list > li:first-child .solutions-preview__image { display: block; }
    
    .solutions-preview--active a:before { transform: translate(0, -50%) rotate(90deg); }

    .solutions-package .jt-feature { margin-top: 30rem; }
    .solutions-package .jt-feature__content-title { min-height: 40rem; padding-right: 90rem; margin-bottom: 24rem; }
    .solutions-package .jt-feature__icon { top: 30rem; right: 30rem; }

    .solutions-service { padding: 80rem 0; }
    .solutions-service__list > li { flex-direction: column; gap: 8rem; padding: 24rem 0; align-items: flex-start; }
    .solutions-service__column:first-child { width: auto; }

    .solutions-lineup { padding: 40rem 0 80rem; }
    .solutions-lineup__links { margin-top: 40rem; }
    .solutions-lineup__links:before,
    .solutions-lineup__links:after { width: 60rem; }
    .solutions-lineup__links:before { left: -30rem; }
    .solutions-lineup__links:after { right: -30rem; }
    .solutions-lineup__links-inner { gap: 40rem; margin: 0 -30rem; padding: 0 30rem; }
    .solutions-lineup__inner { gap: 40rem; flex-direction: column; justify-content: flex-start; min-height: 633rem; }
    .solutions-lineup__content { gap: 30rem; flex: none; }
    .solutions-lineup__content-title { margin-bottom: 10rem; }
    .solutions-lineup__content-desc { margin-top: 16rem; }
    .solutions-lineup__thumb { width: 100%; max-width: 532rem; }

    .solutions-industry { padding: 80rem 0; }
    .solutions-industry__list { margin-top: 0; }
    .solutions-industry__list > li { flex-direction: column; gap: 20rem; padding: 30rem 0; }
    .solutions-industry__number { width: auto; }
    .solutions-industry__thumb { width: 100%; max-width: 532rem; }
    .solutions-industry__title { margin-bottom: 16rem; }

    .solutions-specifications { padding-top: 80rem; }
    .solutions-specifications__container { flex-direction: column; }
    .solutions-specifications__image { width: 100%; }
    .solutions-specifications__content { width: 100%; }
    .solutions-specifications__source-mark { max-width: 120rem; }

}



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

    .solutions-banner__bg { padding-top: 74.28%; }
    .solutions-banner__bg:before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .75) 100%); }
    .solutions-banner__bg--mobile { display: block; }
    .solutions-banner__bg--desktop { display: none; }
    .solutions-banner__content { padding: 20rem; }

    .solutions-intro { padding: 60rem 0; }
    .solutions-intro__title { margin-bottom: 16rem; }

    .solutions-slogan__desc { margin-top: 32rem; }
    
    .solutions-product__container { padding-bottom: 160rem; }
    .solutions-product__content { aspect-ratio: 1 / .8; }
    .solutions-product__tabs { padding: 0 20rem; }
    .solutions-product__tabs a { gap: 6rem; }

    .solutions-feature { padding: 60rem 0; }

    .solutions-package { padding: 60rem 0; }

    .solutions-preview { padding: 0 20rem; margin-top: 20rem; }

    .solutions-package .jt-feature { grid-template-columns: 1fr; gap: 10rem; margin-top: 20rem; }
    .solutions-package .jt-feature__content-title { padding-right: 80rem; margin-bottom: 16rem; }
    .solutions-package .jt-feature__icon { top: 20rem; right: 20rem; }

    .solutions-service { padding: 60rem 0; }
    .solutions-service__list > li { padding: 20rem 0; }

    .solutions-lineup { padding: 20rem 0 60rem; }
    .solutions-lineup__links { margin-top: 20rem; }
    .solutions-lineup__links:before,
    .solutions-lineup__links:after { width: 40rem; }
    .solutions-lineup__links:before { left: -20rem; }
    .solutions-lineup__links:after { right: -20rem; }
    .solutions-lineup__links-inner { gap: 24rem; margin: 0 -20rem; padding: 0 20rem; }
    .solutions-lineup__inner { padding: 30rem 0; min-height: 452rem; }
    .solutions-lineup__content { gap: 20rem; }
    .solutions-lineup__content-title { margin-bottom: 6rem; }
    .solutions-lineup__content-desc { margin-top: 12rem; }
    .solutions-lineup__thumb { width: auto; }

    .solutions-industry { padding: 60rem 0; }
    .solutions-industry__title { margin-bottom: 12rem; }

    .solutions-specifications { padding-top: 60rem; }
    .solutions-specifications__content { gap: 20rem; }
    .solutions-specifications__list li { flex-direction: column; gap: 6rem; }
    .solutions-specifications__list b { width: 100%; }
    .solutions-specifications__source { gap: 16rem; }
    .solutions-specifications__source-mark { max-width: 100rem; }

}