@charset "utf-8";

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



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

    /* ABOUT COMMON COMPONENT */
    .about-intro { margin-bottom: 72rem; }

    .about-intro__space { margin-bottom: 42rem; }

    /* PURPOSE & VALUES */
    .purpose-prologue__bg { clip-path: inset(0 86rem round 0); }

    .purpose-value.purpose-section { padding-bottom: 100rem; }
    .purpose-value__list-image-word { width: 220rem; }

    .purpose-recent.purpose-section { padding-top: 100rem; padding-bottom: 100rem; }
    .purpose-recent .purpose-section__head { margin-bottom: 100rem; }
    .purpose-recent__group { gap: 100rem; }
    .purpose-recent__group-title { margin-bottom: 54rem; }
    .purpose-recent__list-number { width: 74rem; height: 74rem; }

    .purpose-commitment { padding: 100rem 0 470rem; }
    .purpose-commitment__content { max-width: 640rem; }

    /* HISTORY */
    .history-change { padding-top: 72rem; }

    .history-report { margin-top: 92rem; }
    .history-report__title { margin-bottom: 120rem; }
    .history-report__group-content { gap: 130rem; }
    .history-report__list { gap: 72rem; }

    /* BRAND ASSETS */
    .assets-system { padding-top: 180rem; }
    .assets-system__logo { width: 960rem; }
    .assets-system__info { margin-top: 180rem; }

    .assets-guide { margin-top: 120rem; }
    .assets-guide__item + .assets-guide__item { margin-top: 100rem; padding-top: 100rem; }
    .assets-guide__head { margin-bottom: 45rem; }
    .assets-guide__logo-preview { height: 320rem; }
    .assets-guide__logo-preview .jt-lazyload { width: 450rem; }

    /* GLOBAL NETWORK */
    .network-banner__icon { height: 142rem; }
    .network-banner__icon.network-banner__icon--o { height: 149rem; }
    .network-banner__icon--n { left: 3%; }
    .network-banner__icon--h { left: 16.7%; }
    .network-banner__icon--a { left: 30.8%; }
    .network-banner__icon--n2 { right: 18.1%; }
    .network-banner__icon--o { right: 3%; }

    .network-information__data > li > b:after { top: -1rem; }

}



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

    /* ABOUT COMMON COMPONENT */
    .about-intro { margin-bottom: 62rem; }
    .about-intro__inner { gap: 25rem; }
    .about-intro br { display: none; }

    .about-intro__columns { gap: 32rem; }

    .about-intro__space { margin-bottom: 37rem; }

    /* PURPOSE & VALUES */
    .purpose-section { padding: 85rem 0; }
    .purpose-section__head { margin-bottom: 65rem; }
    .purpose-section__head br { display: none; }
    .purpose-section__sub { margin-top: 36rem; }
    .purpose-section__sub + .purpose-section__desc { margin-top: 36rem; }

    .purpose-prologue__bg { clip-path: inset(0 36rem round 0); }
    .purpose-prologue__content-col { padding: 38rem 40rem; }

    .purpose-future .purpose-section__head { margin-bottom: 50rem; }
    .purpose-future__card { gap: 32rem; }

    .purpose-product.purpose-section { padding-top: 70rem; }
    .purpose-product__card { gap: 32rem; }
    .purpose-product__card > li { gap: 50rem; padding: 42rem 24rem 60rem; }
    .purpose-product__card-icon { width: 140rem; }

    .purpose-value.purpose-section { padding-bottom: 90rem; }
    .purpose-value__list-image-word { width: 182rem; }
    .purpose-value__card-contet > p { margin-top: 30rem; }
    .purpose-value__card-contet > p br { display: none; }
    .purpose-value__list-item:nth-child(odd) .purpose-value__card-contet { padding-left: 50rem; }
    .purpose-value__list-item:nth-child(even) .purpose-value__card-contet { padding-right: 50rem; }

    .purpose-recent.purpose-section { padding-top: 88rem; padding-bottom: 80rem; }
    .purpose-recent .purpose-section__head { margin-bottom: 85rem; }
    .purpose-recent__group { gap: 88rem; }
    .purpose-recent__group-title { margin-bottom: 40rem; }
    .purpose-recent__list { gap: 32rem; }
    .purpose-recent__list-number { width: 65rem; height: 65rem; }

    .purpose-commitment { padding: 80rem 0 350rem; }
    .purpose-commitment__content { max-width: 600rem; }
    .purpose-commitment__content > p { margin-top: 30rem; }
    .purpose-commitment__content > b { margin-top: 20rem; }

    /* HISTORY */
    .history-change { padding-top: 62rem; padding-bottom: 150rem; }
    .history-change__title { margin-bottom: 100rem; }
    .history-change__list { gap: 100rem; gap: 32rem; }
    .history-change__list-item { --motion-y: 68rem; }
    .history-change__list-inner { gap: 100rem; padding: 32rem; }
    .history-change__list-bottom p br { display: none; }
    .history-change__list > li:nth-child(1) .history-change__list-logo { width: 39.8%; } 
    .history-change__list > li:nth-child(2) .history-change__list-bottom { gap: 25rem; }
    .history-change__list > li:nth-child(2) .history-change__list-logo { width: 90%; }
    .history-change__list > li:nth-child(3) .history-change__list-bottom { gap: 30rem; }
    .history-change__list > li:nth-child(3) .history-change__list-logo { width: 86.73%; }

    .history-report { margin-top: 85rem; }
    .history-report__title { margin-bottom: 100rem; }
    .history-report__group { gap: 35rem; }
    .history-report__group-content { gap: 110rem; }
    .history-report__list { gap: 60rem; }
    .history-report__list-data > li { padding: 28rem 0 27rem; }

    /* BRAND ASSETS */
    .assets-system { padding-top: 150rem; }
    .assets-system__logo { width: 880rem; }
    .assets-system__info { gap: 32rem; margin-top: 150rem; }
    .assets-system__info > li { padding: 30rem 32rem; }

    .assets-guide { margin-top: 108rem; }
    .assets-guide__item + .assets-guide__item { margin-top: 95rem; padding-top: 95rem; }
    .assets-guide__head { gap: 32rem; margin-bottom: 40rem; }
    .assets-guide__logo { gap: 32rem; }
    .assets-guide__logo-preview { height: 300rem; }
    .assets-guide__logo-preview .jt-lazyload { width: 400rem; }
    .assets-guide__color > li { height: 280rem; }
    .assets-guide__color > li > p br { display: none; }

    /* GLOBAL NETWORK */
    .network-banner__icon { height: 114rem; }
    .network-banner__icon.network-banner__icon--o { height: 120rem; }
    .network-banner__icon--h { left: 18.7%; }
    .network-banner__icon--a { left: 32.8%; }
    .network-banner__icon--n2 { right: 20.1%; }

    .network-information__list { gap: 32rem; }
    .network-information__list > li { gap: 70rem; padding: 42rem 30rem 40rem 48rem; }
    .network-information__area:before { width: 13rem; height: 13rem; }
    
}



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

    /* ABOUT COMMON COMPONENT */
    .about-intro { margin-bottom: 55rem; }
    .about-intro__inner { gap: 20rem; }

    .about-intro__space { margin-bottom: 35rem; }

    /* PURPOSE & VALUES */
    .purpose-section { padding: 80rem 0; }
    .purpose-section__head { margin-bottom: 60rem; }
    .purpose-section__sub { margin-top: 32rem; }
    .purpose-section__sub + .purpose-section__desc { margin-top: 32rem; }

    .purpose-prologue__bg { clip-path: inset(0 24rem round 0); }
    .purpose-prologue__content-item { flex-direction: column; }
    .purpose-prologue__content-col:nth-child(1) { padding: 26rem 32rem; }
    .purpose-prologue__content-col:nth-child(2) { padding: 32rem; }

    .purpose-future__card { grid-template-columns: repeat(2, 1fr); gap: 16rem; }

    .purpose-product.purpose-section { padding-top: 65rem; }
    .purpose-product__card { grid-template-columns: repeat(2, 1fr); gap: 16rem; }

    .purpose-value__list { display: flex; flex-direction: column; gap: 60rem; }
    .purpose-value__list-image-word { width: 118rem; }
    .purpose-value__card-contet > p { margin-top: 20rem; }
    .purpose-value__list-item:nth-child(odd) .purpose-value__card-contet { padding-left: 35rem; }
    .purpose-value__list-item:nth-child(even) .purpose-value__card-contet { padding-right: 35rem; }

    .purpose-recent.purpose-section { padding-top: 80rem; }
    .purpose-recent .purpose-section__head { margin-bottom: 80rem; }
    .purpose-recent__group { gap: 80rem; }
    .purpose-recent__group-title { margin-bottom: 32rem; }
    .purpose-recent__list { gap: 32rem 16rem; }
    .purpose-recent__list-number { width: 50rem; height: 50rem; }
    .purpose-recent__list-name { margin-top: 16rem; }

    .purpose-commitment { padding: 60rem 0 320rem; }
    .purpose-commitment__content { max-width: 480rem; }

    /* HISTORY */
    .history-change { padding-top: 55rem; padding-bottom: 80rem; }
    .history-change__title { margin-bottom: 40rem; }
    .history-change__list { gap: 16rem; margin: 0 -24rem; padding: 0 24rem; overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .history-change__list-item { width: 320rem; transform: none !important; opacity: 1 !important; visibility: visible !important; }
    .history-change__list-inner { gap: 80rem; padding: 30rem; }
    html.win .history-change__list { padding-bottom: 4rem; overflow: overlay; }
    html.win .history-change__list::-webkit-scrollbar { height: 4rem; background: transparent; }
    html.win .history-change__list::-webkit-scrollbar-track { background: var(--color-gray-200); border-radius: 99rem }
    html.win .history-change__list::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: 99rem; }

    .history-report { margin-top: 80rem; }
    .history-report__title { margin-bottom: 80rem; }
    .history-report__group-head { display: none; }
    .history-report__group-title:not(:first-child) { position: relative; top: inherit; left: inherit; opacity: 1; visibility: visible; }
    .history-report__group-title > p { margin-top: 16rem; }
    .history-report__group-title > p br { display: none; }
    .history-report__group-content .history-report__group-title { display: block; }
    .history-report__group-title + .history-report__group-content-item { margin-top: -65rem; }
    .history-report__list { gap: 55rem; }
    .history-report__list-data > li { padding: 24rem 0 23rem; }

    /* BRAND ASSETS */
    .assets-system { padding-top: 130rem; }
    .assets-system__logo { width: 80%; }
    .assets-system__info { grid-template-columns: repeat(2, 1fr); gap: 16rem; margin-top: 130rem; }
    .assets-system__info > li { padding: 28rem 30rem; }
    .assets-system__info > li > b { margin-bottom: 16rem; }
    .assets-system__info > li > ul > li:before { top: 8rem; }

    .assets-guide { margin-top: 80rem; }
    .assets-guide__item + .assets-guide__item { margin-top: 80rem; padding-top: 80rem; }
    .assets-guide__head { flex-direction: column; gap: 20rem; margin-bottom: 30rem; }
    .assets-guide__logo { gap: 20rem; }
    .assets-guide__logo .jt-btn__box { margin-top: 20rem; }
    .assets-guide__logo-preview { height: 220rem; }
    .assets-guide__logo-preview .jt-lazyload { width: 250rem; }
    .assets-guide__color { display: flex; flex-wrap: wrap; }
    .assets-guide__color > li { height: 250rem; }
    .assets-guide__color > li:nth-child(-n+2) { width: 50%; }
    .assets-guide__color > li:nth-child(n+3):nth-child(-n+5) { width: 20.66%; }
    .assets-guide__color > li:nth-child(6) { width: 38%; }

    /* GLOBAL NETWORK */
    .network-banner .jt-lazyload { padding-top: 40%; }
    .network-banner .jt-lazyload img { height: 100%; object-fit: cover; }
    .network-banner__icon { height: 91rem; }
    .network-banner__icon.network-banner__icon--o { height: 96rem; }

    .network-information { margin-top: 72rem; }
    .network-information__title { margin-bottom: 30rem; }
    .network-information__list { grid-template-columns: 1fr; gap: 16rem; }
    .network-information__list > li { gap: 64rem; padding: 40rem 30rem 35rem 46rem; }

    .network-contact { margin-top: 72rem; }
    .network-contact__title { margin-bottom: 30rem; }

}



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

    /* ABOUT COMMON COMPONENT */
    .about-intro { margin-bottom: 48rem; }

    .about-intro__columns { grid-template-columns: 1fr; gap: 20rem; }

    .about-intro__space { margin-bottom: 28rem; }

    /* PURPOSE & VALUES */
    .purpose-section { padding: 60rem 0; }
    .purpose-section__head { margin-bottom: 40rem; }
    .purpose-section__sub { margin-top: 25rem; }
    .purpose-section__sub + .purpose-section__desc { margin-top: 25rem; }

    .purpose-prologue__bg { clip-path: inset(0 20rem round 0); }
    .purpose-prologue__content-col:nth-child(1) { padding: 18rem 24rem; }
    .purpose-prologue__content-col:nth-child(2) { padding: 25rem 24rem; }

    .purpose-future .purpose-section__head { margin-bottom: 40rem; }
    .purpose-future__card { grid-template-columns: 1fr; }

    .purpose-product.purpose-section { padding-top: 50rem; }
    .purpose-product__card { grid-template-columns: 1fr; }
    .purpose-product__card > li { gap: 45rem; padding: 40rem 24rem 55rem; }
    .purpose-product__card-icon { width: 125rem; }

    .purpose-value.purpose-section { padding-bottom: 60rem; }
    .purpose-value__list-item { flex-direction: column; gap: 30rem; }
    .purpose-value__list-item > * { width: 100%; }
    .purpose-value__card-contet > p { margin-top: 16rem; }
    .purpose-value__list-item:nth-child(odd) .purpose-value__card-contet { padding-left: 0; }
    .purpose-value__list-item:nth-child(even) .purpose-value__list-image { order: 0; }
    .purpose-value__list-item:nth-child(even) .purpose-value__card-contet { padding-right: 0; }

    .purpose-recent.purpose-section { padding-top: 60rem; padding-bottom: 60rem; }
    .purpose-recent .purpose-section__head { margin-bottom: 60rem; }
    .purpose-recent__group { gap: 60rem; }
    .purpose-recent__list { grid-template-columns: 1fr; gap: 30rem; }
    .purpose-recent__group-title { margin-bottom: 25rem; }
    .purpose-recent__list-number { width: 44rem; height: 44rem; }

    .purpose-commitment { padding: 40rem 0 210rem; background-size: 150vw auto; background-position: center bottom; }
    .purpose-commitment__content { max-width: 100%; }
    .purpose-commitment__content > p { margin-top: 20rem; }
    .purpose-commitment__content > b { margin-top: 16rem; }

    /* HISTORY */
    .history-change { padding-top: 48rem; padding-bottom: 70rem; }
    .history-change__title { margin-bottom: 30rem; }
    .history-change__list { margin: 0 -20rem; padding: 0 20rem; }
    .history-change__list-inner { gap: 75rem; padding: 24rem; }
    .history-change__list > li:nth-child(2) .history-change__list-bottom { gap: 20rem; }
    .history-change__list > li:nth-child(3) .history-change__list-bottom { gap: 25rem; }
    
    .history-report { margin-top: 60rem; }
    .history-report__title { margin-bottom: 60rem; }
    .history-report__group-content { gap: 100rem; }
    .history-report__list-data > li { padding: 22rem 0 21rem; }

    /* BRAND ASSETS */
    .assets-system { padding-top: 100rem; }
    .assets-system__info { grid-template-columns: 1fr; margin-top: 100rem; }
    .assets-system__info > li { padding: 24rem; }
    .assets-system__info > li > b { margin-bottom: 15rem; }
    .assets-system__info > li > ul > li:before { top: 7rem; }

    .assets-guide { margin-top: 60rem; }
    .assets-guide__item + .assets-guide__item { margin-top: 60rem; padding-top: 60rem; }
    .assets-guide__logo { flex-direction: column; gap: 40rem; }
    .assets-guide__logo .jt-btn__box { display: flex; margin-top: 16rem; }
    .assets-guide__logo-preview { height: 200rem; }
    .assets-guide__logo-preview .jt-lazyload { width: 240rem; }
    .assets-guide__color > li:nth-child(-n+2) { width: 100%; height: 220rem; }
    .assets-guide__color > li:nth-child(n+3):nth-child(-n+6) { width: 50%; height: 175rem; }

    /* GLOBAL NETWORK */
    .network-banner .jt-lazyload { padding-top: 56.25%; }
    .network-banner__icon { height: 64rem; }
    .network-banner__icon.network-banner__icon--o { height: 67rem; }
    .network-banner__icon--n { left: -20rem; }
    .network-banner__icon--h { left: 11.2%; }
    .network-banner__icon--a { top: 46.7%; left: 31.8%; }
    .network-banner__icon--n2 { top: 24.7%; right: 11.1%; }
    .network-banner__icon--o { right: -25rem; }

    .network-information { margin-top: 60rem; }
    .network-information__list > li { gap: 45rem; padding: 32rem 30rem 30rem; }
    .network-information__area:before { width: 15rem; height: 15rem; top: -32rem; left: -30rem; }

    .network-contact { margin-top: 60rem; }

}