@charset "utf-8";

/*
 * File    : sub-mission.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * MISSION
 * ABOUT
 * READERSHIP
 * HOVER
 */

 

/* **************************************** *
 * MISSION
 * **************************************** */
.mission-banner { margin-top: 60rem; }
.mission-banner .jt-lazyload { padding-top: 48.71%; }

.mission-philosophy__item { flex: 1; margin-right: 40rem; height: auto; }
.mission-philosophy__item:last-child { margin-right: 0; }
.mission-philosophy__content { display: flex; gap: 30rem; flex-direction: column; align-items: center; min-height: 280rem; height: 100%; text-align: center; padding: 137rem 60rem; background: var(--color-gray-100); }
.mission-philosophy__desc { color: var(--color-gray-900); }

.mission-pma__list > li { position: relative; border-top: 1px solid var(--color-gray-400); }
.mission-pma__list > li:last-child { border-bottom: 1px solid var(--color-gray-400); }
.mission-pma__list > li:last-child .mission-pma__title { align-self: start; }
.mission-pma__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center / cover; opacity: 0; transition: opacity .3s; }
.mission-pma__bg:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--color-black); opacity: .5; }
.mission-pma__inner { display: flex; align-items: center; gap: 40rem; min-height: 240rem; padding: 80rem 0; }
.mission-pma__title { width: 27.94%; transition: color .3s; }
.mission-pma__desc { flex: 1; color: var(--color-gray-900); transition: color .3s; }
.mission-pma__desc > span { display: block; }
.mission-pma__desc > span + span { margin-top: 4rem; }

.mission-credo { padding-top: 0; }
.mission-credo__list { counter-reset: list; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32rem; }
.mission-credo__content { counter-increment: list; display: flex; gap: 20rem; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center;  padding: 60rem 30rem; position: relative; border: 1px solid var(--color-gray-400); }
.mission-credo__content:before { content: '0'counter(list); position: absolute; left: 24rem; top: 24rem; font-size: var(--font-size-ko-07); line-height: var(--font-lineheight-ko-07); letter-spacing: var(--letter-spacing-02); font-weight: 700; color: var(--color-gray-900); }
.mission-credo__content .jt-icon { width: 120rem; }
.mission-credo__content .jt-icon svg { overflow: visible; }
.mission-credo__content .jt-icon svg path { fill: none; stroke: var(--color-primary); }
.mission-credo__content-title { min-height: calc(var(--font-lineheight-ko-07) * 2); }
.mission-credo__content-title span { color: var(--color-gray-900); }



/* **************************************** *
 * ABOUT
 * **************************************** */
 /* INFO */
.about-info__container { background: no-repeat center center / cover; padding: 80rem 0 100rem; }
.about-info__item { display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; gap: 20rem; width: calc(20% - 12.8rem); height: auto; position: relative; background: rgba(255, 255, 255, 0.5); padding: 40rem 24rem 70rem; margin-right: 16rem; }
.about-info__item:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid var(--color-gray-400); box-sizing: border-box; pointer-events: none; }
.about-info__item:last-child { margin-right: 0; }
.about-info__item-icon { width: 120rem; height: 120rem; }
.about-info__item-icon .jt-lazyload { padding-top: 100%; }
.about-info__item-title { color: var(--color-gray-900); }
.about-info__item-desc { margin-top: 8rem; color: var(--color-gray-900); }

.about-info__data { margin-top: 60rem; }
.about-info__data-list { display: flex; flex-wrap: wrap; gap: 2rem 184rem; padding: 20rem 0; border-top: 1px solid var(--color-black); border-bottom: 1px solid var(--color-gray-400); margin-top: 10rem; }
.about-info__data-list > li { position: relative; width: 500rem; color: var(--color-gray-900); padding-left: 20rem; }
.about-info__data-list > li:before { content: ''; position: absolute; left: 4rem; top: calc(var(--font-lineheight-ko-07) / 2); margin-top: -2rem; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-gray-700); }

/* VISION */
.about-vision__container { display: flex; gap: 80rem; align-items: center; justify-content: space-between; }
.about-vision__content { flex: 1; }
.about-vision__image { width: 38.7%; max-width: 572rem; }
.about-vision__image .jt-lazyload { padding-top: 111.89%; }
.about-vision__list > li + li { margin-top: 40rem; }
.about-vision__list > li > b { display: block; }
.about-vision__list > li > p { margin-top: 16rem; color: var(--color-gray-900); }

/* HISTORY */
.about-history.article__section { --about-history-gutter: 120rem; --about-history-diff: 40rem; --about-history-width: 762rem; padding-bottom: 0; }
.about-history__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/sub/mission/about-history.jpg) no-repeat center center / cover; }
.about-history__bg:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-black); opacity: .65; }
.about-history__container { position: relative; display: flex; justify-content: space-between; gap: 40rem; }
.about-history__sticky { position: sticky; top: 0; padding-top: var(--about-history-gutter); }
.about-history__title { color: var(--color-white); }
.about-history__content { position: relative; flex: 1; color: var(--color-white); height: 100vh; }
.about-history__content-inner { overflow-y: hidden; height: 100%; }
.about-history__content-list > li { position: relative; display: flex; align-items: stretch; }
.about-history__content-list > li + li { margin-top: calc(var(--about-history-diff) * -1); }
.about-history__content-year { position: relative; padding-top: var(--about-history-gutter); flex: 1; text-align: right; white-space: nowrap; }
.about-history__content-year:before { content: ''; position: absolute; right: 0; top: 0; bottom: var(--about-history-diff); width: 1px; background: var(--color-white); opacity: .5; }
.about-history__content-year > b { position: sticky; top: var(--about-history-gutter); display: block; padding-right: 35rem; margin-bottom: var(--about-history-diff); }
.about-history__content-year > b:after { content: ''; position: absolute; width: 10rem; height: 10rem; left: 100%; top: 50%; background: var(--color-white); border-radius: 50%; translate: -50% -50%; transition: background .3s; }
.about-history__content-sublist { position: relative; width: var(--about-history-width); padding-left: 39rem; padding-top: var(--about-history-gutter); opacity: 0; visibility: hidden; }
.about-history__content-sublist > li { padding-top: 12rem; }
.about-history__content-sublist > li + li { margin-top: 28rem; }
.about-history__content-sublist > li > b { display: block; }
.about-history__content-sublist > li > p { opacity: .9; margin-top: 4rem; }

.about-history__content-list > li:last-child .about-history__content-year:before { bottom: 0; }
.about-history__content-list > li:last-child .about-history__content-sublist { padding-bottom: var(--about-history-gutter); }

.about-history__content-list > li.about-history--active .about-history__content-year > b:after { background: var(--color-primary); }

.about-history__control { position: absolute; right: 0; width: var(--about-history-width); padding-left: 39rem; z-index: 2; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.about-history__control--visible { visibility: visible; opacity: 1; }
.about-history__control--up { top: 0; }
.about-history__control--down { bottom: 0; }
.about-history__control a { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; padding: 30rem 0; opacity: .5; transition: opacity .3s; z-index: 1; }
.about-history__control .jt-icon { width: 36rem; height: 36rem; }
.about-history__control .jt-icon svg path { fill: var(--color-white); }

.about-history__navigator { position: absolute; top: 50%; right: 0; translate: 0 -50%; }
.about-history__navigator a { position: relative; display: block; text-align: right; color: var(--color-white); padding-right: 28rem; }
.about-history__navigator a + a { margin-top: 8rem; }
.about-history__navigator a:after { content: ''; position: absolute; top: 50%; right: 0; width: 20rem; height: 3rem; background: var(--color-white); opacity: .5; clip-path: inset(0 10rem 0 0 round 99rem); transition: background .3s, opacity .3s, clip-path .3s; }
.about-history__navigator a > span { opacity: .3; transition: opacity .3s; }
.about-history__navigator a.about-history--active:after { background: var(--color-primary); clip-path: inset(0 0rem 0 0 round 99rem 0 0 99rem); opacity: 1; }
.about-history__navigator a.about-history--active > span { opacity: 1; }

.about-history--clone { position: absolute; right: 0; top: 0; bottom: 0; overflow: hidden; mask-image: linear-gradient(0deg, transparent 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 87.5%, transparent 100%); }
.about-history--clone .about-history__content-year { display: none; }
.about-history--clone .about-history__content-sublist { opacity: 1; visibility: visible; }

/* CLIENT */
.about-client { --about-client-width: 233.2rem; padding-top: 160rem; }
.about-client .article__section-title { text-align: center; }
.about-client__container { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--about-client-width), auto)); }

.about-client__group { width: var(--about-client-width); }
.about-client__group:nth-child(1) { grid-column: auto / span 3; width: calc(var(--about-client-width) * 3); }
.about-client__group:nth-child(2) { grid-row: auto / span 2; }
.about-client__group:nth-child(3) { grid-row: auto / span 2; width: 100%; }
.about-client__group:nth-child(4) { grid-row: auto / span 2; }

.about-client__group-title { position: relative; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--color-white); background: var(--color-primary); height: 52rem; padding: 0 6rem; }
.about-client__group-title:after { content: ''; position: absolute; right: 0; width: 1px; top: 0; bottom: 0; background: rgba(255, 255, 255, .3); }
.about-client__group-list { position: relative; display: flex; height: 100%; }
.about-client__group-list:after { content: ''; position: absolute; right: 0; width: 1px; top: 0; bottom: 0; background: var(--color-gray-300); }
.about-client__group-item { position: relative; width: 100%; padding: 0 6rem 80rem 6rem; }
.about-client__group-subtitle { position: relative; display: flex; gap: 20rem; padding: 0 20rem; justify-content: center; align-items: center; text-align: center; color: var(--color-gray-900); background: var(--color-gray-100); height: 80rem; margin-top: 6rem; }
.about-client__group-subtitle span { display: block; width: 1px; height: 40rem; background: var(--color-gray-500); }
.about-client__group-subitem { padding: 40rem 24rem 0; }
.about-client__group-subitem > ul > li { color: var(--color-gray-800); line-height: 22rem; }
.about-client__group-subitem > ul > li + li { margin-top: 10rem; }
.about-client__group-category { display: block; margin-bottom: 16rem; }

.about-client__group:nth-child(1) .about-client__group-item { width: 33.33%; }
.about-client__group:nth-child(1) .about-client__group-item:after { content: ''; position: absolute; right: 0; width: 1px; top: 0; bottom: 0; background: var(--color-gray-300); }
.about-client__group:nth-child(1) .about-client__group-item:nth-child(1) { padding-left: 0; }
.about-client__group:nth-child(1) .about-client__group-item:nth-child(1) .about-client__group-subtitle svg { width: 108rem; }
.about-client__group:nth-child(1) .about-client__group-item:nth-child(2) .about-client__group-subtitle svg { width: 110rem; }
.about-client__group:nth-child(1) .about-client__group-item:last-child:after { display: none; }
.about-client__group:nth-child(3) .about-client__group-subtitle svg:nth-child(1) { width: 70rem; }
.about-client__group:nth-child(3) .about-client__group-subtitle svg:nth-child(2) { width: 60rem; }
.about-client__group:nth-child(4) .about-client__group-list { flex-direction: column; }
.about-client__group:nth-child(4) .about-client__group-item { padding-right: 0; }
.about-client__group:nth-child(4) .about-client__group-list:after { display: none; }
.about-client__group:nth-child(4) .about-client__group-item + .about-client__group-item .about-client__group-subtitle { margin-top: 0; }
.about-client__group:nth-child(5) .about-client__group-item { padding-left: 0; }



/* **************************************** *
 * READERSHIP
 * **************************************** */
.readership-ceo__container { display: grid; align-items: center; justify-content: space-between; gap: 0 100rem; grid-template-columns: 43.17% auto; }
.readership-ceo__image { max-width: 638rem; grid-row: 1 / 3; grid-column: 1 / 2; }
.readership-ceo__image .jt-lazyload { padding-top: 112.85%; }
.readership-ceo__head { padding-right: 40rem; grid-row: 1 / 2; grid-column: 2 / 3; align-self: flex-end; }
.readership-ceo__content { padding-right: 40rem; grid-row: 2 / 3; grid-column: 2 / 3; align-self: flex-start; }
.readership-ceo__scripture { color: var(--color-gray-900); margin-bottom: 30rem; }
.readership-ceo__desc { color: var(--color-gray-900); }
.readership-ceo__name { margin-top: 60rem; text-align: right; }
.readership-ceo__name span { display: block; color: var(--color-gray-900); }
.readership-ceo__name b { display: block; margin-top: 4rem; }

.readership-strategy__container { display: grid; align-items: center; justify-content: space-between; gap: 0 100rem; grid-template-columns: auto 46%; }
.readership-strategy__head { grid-row: 1 / 2; grid-column: 1 / 2; align-self: flex-end; }
.readership-strategy__content { grid-row: 2 / 3; grid-column: 1 / 2; align-self: flex-start; }
.readership-strategy__list > li + li  { margin-top: 40rem; }
.readership-strategy__list > li > b { display: block; }
.readership-strategy__list > li > b > span { color: var(--color-primary); }
.readership-strategy__list > li > p { margin-top: 12rem; color: var(--color-gray-900); }
.readership-strategy__image { max-width: 680rem; grid-column: 2 / 3; grid-row: 1 / 3; }
.readership-strategy__image .jt-lazyload { padding-top: 126.47%; }



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

    /* MISSION */
    .mission-pma__list > li.jt-hoverintent--allow:hover .mission-pma__bg { opacity: 1; }
    .mission-pma__list > li.jt-hoverintent--allow:hover .mission-pma__title { color: var(--color-white); }
    .mission-pma__list > li.jt-hoverintent--allow:hover .mission-pma__desc { color: var(--color-white); }

    /* ABOUT */
    .about-history__control a:hover { opacity: 1; }
    .about-history__navigator a:hover > span { opacity: 1; }

}