@charset "utf-8";

/*
 * File    : sub-company.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * COMPANY
 * HOVER
 */

 

/* **************************************** *
 * COMPANY
 * **************************************** */
/* ABOUT */
.company-about { padding: 160rem 0; }
.company-about__head { text-align: center; padding-bottom: 160rem; }
.company-about__desc { margin-top: 20rem; }
.company-about__vision { display: flex; border-top: 1px solid var(--color-gray-700); border-bottom: 1px solid var(--color-gray-700); }
.company-about__vision-item { flex: 1; border-right: 1px solid var(--color-gray-700); padding: 40rem; }
.company-about__vision-item:last-child { border-right: none; }
.company-about__vision-thumb { border-radius: 2rem; overflow: hidden; }
.company-about__vision-thumb .jt-lazyload { padding-top: 62.65%; }
.company-about__vision-content { padding: 50rem 0; }
.company-about__vision-desc { margin-top: 20rem; }
.company-about__future { display: flex; padding: 160rem 0 120rem; }
.company-about__future-column { flex: 1; }
.company-about__future-desc { margin-top: 12rem; }
.company-about__future-content p + p { margin-top: 20rem; }

/* JOURNEY */
.company-journey { padding: 160rem 0; background-color: var(--color-gray-200); }
.company-journey__head { text-align: center; padding-bottom: 60rem; }
.company-journey__desc { margin-top: 12rem; }
.company-journey__accordion { border-top: 1px solid var(--color-gray-700); }
.company-journey__accordion > li { border-bottom: 1px solid var(--color-gray-700); transition: background-color .3s; }
.company-journey__accordion-head > a { display: flex; padding: 40rem; gap: 80rem; color: var(--color-black); }
.company-journey__accordion-number { width: 80rem; }
.company-journey__accordion-title { flex: 1; }
.company-journey__accordion-title p { margin-top: 8rem; }
.company-journey__accordion-control { display: flex; align-items: center; justify-content: flex-end; }
.company-journey__accordion-control > i { position: relative; display: block; width: 40rem; height: 40rem; }
.company-journey__accordion-control > i:before { content: ''; position: absolute; top: 50%; left: 50%; width: 50%; height: 2rem; background: var(--color-black); transform: translate(-50%, -50%); }
.company-journey__accordion-control > i:after { content: ''; position: absolute; top: 50%; left: 50%; width: 2rem; height: 50%; background: var(--color-black); transform: translate(-50%, -50%); transition: transform .3s; }
.company-journey__accordion-body { display: none; padding: 0 40rem 40rem 200rem; }
.company-journey__accordion-content { display: flex; gap: 100rem; margin-top: -20rem; }
.company-journey__accordion-thumb { width: 500rem; padding-top: 40rem; }
.company-journey__accordion-thumb b { display: block; margin-top: 20rem; }
.company-journey__accordion-thumb p { margin-top: 8rem; }
.company-journey__accordion-image { border-radius: 2rem; overflow: hidden; }
.company-journey__accordion-image .jt-lazyload { padding-top: 64%; }
.company-journey__accordion-image .jt-lazyload__color-preview { background-color: var(--color-gray-300); }
.company-journey__accordion-list { flex: 1; }
.company-journey__accordion-list > li { display: flex; gap: 16rem; padding: 40rem 0; }
.company-journey__accordion-list > li + li { border-top: 1px solid var(--color-gray-400); }
.company-journey__accordion-list time { display: block; width: 120rem; }
.company-journey__accordion-list ul { flex: 1; padding-right: 80rem; }
.company-journey__accordion-list ul > li + li { margin-top: 16rem; }

.company-journey__accordion-content:nth-child(2) .company-journey__accordion-list > li { border-top: 1px solid var(--color-gray-400); }

.company-journey__accordion--active { background: var(--color-gray-100); }
.company-journey__accordion--active .company-journey__accordion-control > i:after { transform: translate(-50%, -50%) rotate(90deg); }

/* BRAND */
.company-brand { padding: 160rem 0; }
.company-brand__head { text-align: center; margin-bottom: 60rem; }
.company-brand__desc { margin-top: 20rem; }
.company-brand__ci { background: var(--color-black); border-radius: 2rem; padding: 0 50rem; }
.company-brand__ci-image { display: flex; justify-content: center; align-items: center; height: 668rem; }
.company-brand__ci-image svg { width: 600rem; height: auto; }
.company-brand__ci-image path { fill: var(--color-white); }
.company-brand__ci-content { display: flex; justify-content: space-between; align-items: center; gap: 20rem; border-top: 1px solid var(--color-gray-800); color: var(--color-white); }
.company-brand__ci-inner { flex: 1; }
.company-brand__ci-desc { margin-top: 20rem; }
.company-brand__ci-bird { width: 520rem; }
.company-brand__ci-bird .jt-lazyload { padding-top: 75%; }
.company-brand__assets { margin-top: 80rem; }

/* PARTNERS */
.company-partners { padding: 160rem 0; }
.company-partners__head { text-align: center; padding-bottom: 160rem; }
.company-partners__desc { margin-top: 20rem; }

.company-partners__gallery { padding: 60rem 0; }
.company-partners__gallery-head { padding-bottom: 60rem; }
.company-partners__gallery-desc { margin-top: 20rem; }
.company-partners__gallery-track { display: flex; gap: 20rem; }
.company-partners__gallery-item { position: relative; width: 840rem; flex-shrink: 0; }
.company-partners__gallery-item b { position: absolute; bottom: 0; left: 0; right: 0; padding: 40rem; color: var(--color-white); }
.company-partners__gallery-thumb { position: relative; border-radius: 2rem; overflow: hidden; }
.company-partners__gallery-thumb:after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); }
.company-partners__gallery-thumb .jt-lazyload { padding-top: 61.9%; }

.company-partners__logo { padding-top: 60rem; --gap: 10rem; --minimize-height: calc((360rem * 0.7222 * 3) + (2 * var(--gap))); }
.company-partners__logo-content { height: var(--minimize-height); overflow: hidden; }
.company-partners__logo-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.company-partners__logo-list li { background: rgba(255, 255, 255, .05); border-radius: 2rem; }
.company-partners__logo-list .jt-lazyload { padding-top: 72.22%; }
.company-partners__logo-more { text-align: center; margin-top: 60rem; }
.company-partners__logo-more a { min-width: 240rem; }

.company-partners__logo--hide { display: none; }
.company-partners__logo--loaded .company-partners__logo--hide { display: block; }
.company-partners__logo--loaded .company-partners__logo--show { display: none; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* JOURNEY */
    .company-journey__accordion > li:hover { background: var(--color-gray-100); }

}