@charset "utf-8";

/*
 * File    : sub-sustainability.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * 녹색경영
 * 사회공헌
 * 윤리경영
 * 지속가능경영보고서
 * HOVER
 */



/* **************************************** *
 * 녹색경영
 * **************************************** */
body.page-template-green .main-container { padding-top: 0; }

/* PROLOGUE */
.green-prologue { --progress: 0; --clip-horizontal-space: 50%; --clip-vertical-space: 50%; --clip-radius: 16rem; --typo-padding: 50rem; height: calc(var(--section-fvh) * 5); position: relative; }
.green-prologue__inner { height: var(--section-fvh); position: sticky; top: 0; overflow: hidden; }

.green-prologue__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; -webkit-clip-path: inset(var(--clip-vertical-space) var(--clip-horizontal-space) var(--clip-vertical-space) var(--clip-horizontal-space) round var(--clip-radius)); clip-path: inset(var(--clip-vertical-space) var(--clip-horizontal-space) var(--clip-vertical-space) var(--clip-horizontal-space) round var(--clip-radius)); opacity: 0; z-index: 2; }
.green-prologue__bg-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; opacity: 0; }
.green-prologue__bg-item:first-child { opacity: 1; }
.green-prologue__bg-item .jt-lazyload { width: 100%; height: 100%; }
.green-prologue__bg-item .jt-lazyload img { width: 100%; height: 100%; object-fit: cover; }

.green-prologue__typo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.green-prologue__typo-item { --transform-ratio: 1; --mask-half-width: calc(50vw - var(--clip-horizontal-space)); width: fit-content; will-change: transform; }
.green-prologue__typo-item > b { white-space: nowrap; color: var(--color-primary); }
.green-prologue__typo--left { --offset: min(0rem, calc(var(--typo-center-offset) - var(--mask-half-width) * var(--transform-ratio))); padding-right: 1.05em; transform-origin: 100% 50%; transform: translateX(calc(var(--offset) * var(--progress))) translateX(calc(var(--typo-padding) * var(--progress) * var(--transform-ratio) * -1)); }
.green-prologue__typo--left > b { text-align: right; }
.green-prologue__typo--right { --offset: max(0rem, calc(var(--typo-center-offset) + var(--mask-half-width) * var(--transform-ratio))); padding-left: 1.05em; transform-origin: 0 50%; transform: translateX(calc(var(--offset) * var(--progress))) translateX(calc(var(--typo-padding) * var(--progress) * var(--transform-ratio))); }
.green-prologue__typo--right > b { text-align: left; }

.green-prologue__content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; }
.green-prologue__content-item { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; color: var(--color-white); opacity: 0; }

/* TASK */
.green-task { position: relative; }

.green-task__head { display: grid; grid-template-columns: 1fr 1.04fr; gap: 30rem; }
.green-task__head-item { display: flex; flex-direction: column; gap: 20rem; }
.green-task__head ul { display: flex; flex-direction: column; gap: 4rem; }

/* CLIMATE */
.green-climate { padding-top: 101rem; padding-bottom: 196rem; }
.green-climate .green-task__head { margin-bottom: 81rem; }

.green-climate__chart { height: 718rem; position: relative; background: var(--color-bg-200); border-radius: var(--border-radius-04); overflow: hidden; }
.green-climate__chart-lottie svg { display: block; width: 100%; height: auto; }
.green-climate__chart-content { position: absolute; top: 59rem; left: 60rem; }
.green-climate__chart-content > * { display: block; }
.green-climate__chart-content > b { color: var(--color-secondary); }
.green-climate__chart-content > p { margin-top: 12rem; }
.green-climate__chart-content > span { margin-top: 8rem; color: var(--color-gray-800); }

.green-climate__score { display: grid; grid-template-columns: 150rem 1fr 219rem; align-items: center; gap: 40rem; margin-top: 40rem; padding: 48rem 60rem; background: var(--color-gray-200); border-radius: var(--border-radius-04); }
.green-climate__score-logo .jt-lazyload { padding-top: 100%; }
.green-climate__score-text > * + * { margin-top: 16rem; }
.green-climate__score-link > a { display: block; padding: 20rem 32rem; color: var(--color-white); background: var(--color-primary); border-radius: var(--border-radius-02); transition: color .3s, background-color .3s; }

/* RESOURCE */
.green-resource { padding: 120rem 0; position: relative; background: var(--color-bg-100); }

.green-resource__square { width: 760rem; margin: 0 auto; position: relative; aspect-ratio: 1 / 1; }
.green-resource__square-bg { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.green-resource__square-bg svg { display: block; width: 100%; height: auto; }
.green-resource__square-content { display: flex; flex-direction: column; gap: 20rem; width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }

.green-resource__value { display: flex; justify-content: space-between; width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.green-resource__value-item { padding: 0 12rem; position: relative; }
.green-resource__value-item > * { display: block; text-align: center; }
.green-resource__value-name { margin-bottom: 20rem; }
.green-resource__value-number { display: flex; justify-content: center; align-items: flex-end; gap: 8rem; color: var(--color-secondary); }
.green-resource__value-number > b { font-weight: 500; } 
.green-resource__value-note { margin-top: 4rem; color: var(--color-gray-800); }

/* WATER */
.green-water { padding: 200rem 0; background: var(--color-gray-200); }
.green-water .green-task__head { margin-bottom: 60rem; }

.green-water__effect { display: flex; gap: 20rem; }
.green-water__effect-item { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; border-radius: var(--border-radius-04); overflow: hidden; aspect-ratio: 1 / 1; }
.green-water__effect-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.green-water__effect-bg:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .1); pointer-events: none; }
.green-water__effect-bg .jt-motion-zoom { height: 100%; }
.green-water__effect-bg .jt-lazyload { padding-top: 100%; }
.green-water__effect-content { display: flex; flex-direction: column; gap: 20rem; position: relative; text-align: center; color: var(--color-white); pointer-events: none; }

/* IMPACT */
.green-impact { padding-top: 120rem; }

.green-impact__head { margin-bottom: 60rem; text-align: center; }
.green-impact__head > p { margin-top: 32rem; }

.green-impact__gallery { display: flex; justify-content: center; gap: 32rem; position: relative; overflow: hidden; }
.green-impact__gallery-row { flex-shrink: 0; display: flex; flex-direction: column; gap: 32rem; }
.green-impact__gallery-cell { position: relative; border-radius: var(--border-radius-04); overflow: hidden; }
.green-impact__gallery .jt-lazyload { width: 100%; height: 100%; }
.green-impact__gallery-row:nth-child(1),
.green-impact__gallery-row:nth-child(5) { width: 300rem; margin-top: 36rem; }
.green-impact__gallery-row:nth-child(1) .green-impact__gallery-cell,
.green-impact__gallery-row:nth-child(5) .green-impact__gallery-cell { aspect-ratio: 300 / 258; }
.green-impact__gallery-row:nth-child(2),
.green-impact__gallery-row:nth-child(4) { width: 360rem; }
.green-impact__gallery-row:nth-child(2) .green-impact__gallery-cell,
.green-impact__gallery-row:nth-child(4) .green-impact__gallery-cell { aspect-ratio: 360 / 390; }
.green-impact__gallery-row:nth-child(3) { width: 614rem; margin-top: 122rem; }
.green-impact__gallery-row:nth-child(3) .green-impact__gallery-cell { height: 700rem; }

/* INFORM */
.green-inform { padding-top: 160rem; }

.green-inform__title { margin-bottom: 40rem; text-align: center; }



/* **************************************** *
 * 사회공헌
 * **************************************** */
/* CSR */
.community-csr__strategy { background: var(--color-bg-200); }

/* ACE */
.community-ace { padding: 39rem 0 160rem; background: var(--color-bg-200); }

.community-ace__video { width: 730rem; margin: 0 auto; aspect-ratio: 1 / 1; position: relative; overflow: hidden; }
.community-ace__video video { filter: brightness(1.0001); }

.community-ace__keyword { display: flex; gap: 95rem; margin-top: 144rem; padding: 0 65rem; }
.community-ace__keyword > li { flex: 1; position: relative; }
.community-ace__keyword > li:not(:last-child):after { content: ''; width: 1px; height: 100%; position: absolute; top: 0; right: -52rem; background: var(--color-primary); opacity: .2; }
.community-ace__keyword > li > * { display: block; }
.community-ace__keyword > li > b { color: var(--color-gray-500); }
.community-ace__keyword > li > span { margin-top: 8rem; color: var(--color-primary); }
.community-ace__keyword > li > p { margin-top: 24rem; }

/* ACTIVITY */
.community-activity { padding-top: 160rem; overflow: hidden; }

.community-activity__title { margin-bottom: 80rem; text-align: center; }

.community-activity__slider { margin: 0 -12rem; overflow: visible; }
.community-activity__slider > .swiper-wrapper { align-items: stretch; }
.community-activity__item { width: 100%; height: auto; padding: 0 12rem; display: flex; flex-direction: column; }
.community-activity__image { position: relative; border-radius: var(--border-radius-04) var(--border-radius-04) 0 0; overflow: hidden; }
.community-activity__image .jt-lazyload { padding-top: 48.33%; }
.community-activity__label { display: block; padding: 6rem 16rem; position: absolute; top: 0; left: 0; color: var(--color-white); background: var(--color-secondary); border-radius: 0 0 var(--border-radius-04) 0; z-index: 2; }
.community-activity__content { display: grid; grid-template-columns: 200rem 1fr; gap: 160rem; padding: 36rem 40rem; background: var(--color-bg-200); border-radius: 0 0 var(--border-radius-04) var(--border-radius-04); flex: 1; }
.community-activity__content > b { color: var(--color-primary); }
.community-activity__content > p { color: var(--color-gray-800); }

.community-activity .swiper-control { margin-top: 35rem; }
.community-activity .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:before { border-color: var(--color-black); }
.community-activity .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { background: var(--color-black); }



/* **************************************** *
 * 윤리경영
 * **************************************** */
.ethics-section { padding: 160rem 0; position: relative; }

.ethics-section__head { display: grid; grid-template-columns: 1fr 1.04fr; gap: 30rem; margin-bottom: 80rem; }
.ethics-section__head p + p { margin-top: 32rem; }

/* RULE */
.ethics-rule { background: var(--color-bg-200); }

.ethics-rule .ethics-section__head { margin-bottom: 120rem; }

.ethics-rule__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16rem; counter-reset: item; }
.ethics-rule__list > li { display: flex; flex-direction: column; justify-content: space-between; min-height: 260rem; gap: 58rem; padding: 28rem; position: relative; background: var(--color-white); border-radius: var(--border-radius-03); }
.ethics-rule__list > li:before { content: counter(item); counter-increment: item; font-family: var(--font-secondary); font-size: var(--font-size-secondary-08); line-height: var(--font-lineheight-secondary-08); font-weight: 700; letter-spacing: var(--letter-spacing-01); color: var(--color-primary); }
.ethics-rule__list > li:nth-child(-n+9):before { content: '0'counter(item); }
.ethics-rule__list-desc { color: var(--color-gray-800); }
.ethics-rule__list-icon { width: 58rem; position: absolute; top: 28rem; right: 16rem; }
.ethics-rule__list-icon .jt-lazyload { padding-top: 100%; }

/* ACTIVITY */
.ethics-activity { background: var(--color-primary); }

.ethics-activity .ethics-section__head { color: var(--color-white); }

.ethics-activity__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24rem; }
.ethics-activity__list > li { display: flex; flex-direction: column; gap: 40rem; padding: 48rem 40rem; background: var(--color-bg-200); -webkit-backdrop-filter: blur(15rem); backdrop-filter: blur(15rem); border-radius: var(--border-radius-03); }
.ethics-activity__list-title { display: flex; align-items: center; gap: 8rem; color: var(--color-primary); }
.ethics-activity__list-icon { width: 32rem; flex-shrink: 0; }
.ethics-activity__list-icon .jt-lazyload { padding-top: 100%; }
.ethics-activity__list-detail { display: flex; flex-direction: column; gap: 8rem; }
.ethics-activity__list-detail > li { padding-left: 14rem; position: relative; color: var(--color-gray-800); }
.ethics-activity__list-detail > li:before { content: ''; width: 4rem; height: 4rem; position: absolute; left: 0; top: 13rem; background: var(--color-primary); border-radius: 50%; }

/* COUNSEL */
.ethics-counsel { background: var(--color-bg-200); }

.ethics-counsel__group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20rem; }
.ethics-counsel__group-item { padding: 32rem 40rem; background: var(--color-white); border-radius: var(--border-radius-03); }
.ethics-counsel__group--process { grid-column: 2; grid-row: 1 / span 3; }

.ethics-counsel__group-item > h3 { margin-bottom: 24rem; }
.ethics-counsel__group-item > b { display: block; margin-bottom: 12rem; }
.ethics-counsel__group-item > p { color: var(--color-gray-800); }

.ethics-counsel__dot-list { display: flex; flex-direction: column; gap: 8rem; }
.ethics-counsel__dot-list > li { padding-left: 14rem; position: relative; color: var(--color-gray-800); }
.ethics-counsel__dot-list > li:before { content: ''; width: 4rem; height: 4rem; position: absolute; left: 0; top: 13rem; background: var(--color-primary); border-radius: 50%; }

.ethics-counsel__split-list { display: flex; flex-direction: column; gap: 4rem; }
.ethics-counsel__split-list > li { display: flex; gap: 10rem; }
.ethics-counsel__split-list > li > b { flex-shrink: 0; width: 100rem; }
.ethics-counsel__split-list > li > span { color: var(--color-gray-800); }

.ethics-counsel__step-list { counter-reset: item; }
.ethics-counsel__step-list > li { display: flex; flex-direction: column; gap: 8rem; padding: 0 0 32rem 44rem; position: relative; }
.ethics-counsel__step-list > li:last-child { padding-bottom: 0; }
.ethics-counsel__step-list > li:after { content: counter(item); counter-increment: item; width: 28rem; height: 28rem; position: absolute; left: 0; top: 0; font-size: var(--font-size-primary-11); line-height: 28rem; font-weight: 700; letter-spacing: var(--letter-spacing-01); text-align: center; color: var(--color-white); background: var(--color-tertiary); border-radius: 50%; }
.ethics-counsel__step-list > li:not(:last-child):before { content: ''; width: 2rem; height: 100%; position: absolute; top: 0; left: 13rem; background: var(--color-bg-200); }

/* INFORM */
.ethics-inform.ethics-section { padding-bottom: 0; }

.ethics-inform__title { text-align: center; margin-bottom: 40rem; }



/* **************************************** *
 * 지속가능경영보고서
 * **************************************** */
body.page-template-report .main-container { padding-bottom: 0; }

/* PROLOGUE */
.report-prologue { padding: 160rem 0; background: var(--color-white); overflow: hidden; }

.report-prologue__head { display: grid; grid-template-columns: 1fr 1.04fr; gap: 30rem; margin-bottom: 120rem; }

.report-prologue__gallery-item { width: 400rem; padding: 0 10rem; }
.report-prologue__gallery-item .jt-lazyload { padding-top: 126.31%; border-radius: var(--border-radius-04); overflow: hidden; }

/* DATA */
.report-data { padding: 160rem 0 var(--main-container-pb); background: var(--color-bg-200); }

.report-data__highlight { display: grid; grid-template-columns: 1.24fr 1fr; gap: 80rem; margin-bottom: 80rem; }
.report-data__highlight-thumb { align-self: flex-start; border-radius: var(--border-radius-04); overflow: hidden; }
.report-data__highlight-thumb .jt-lazyload { padding-top: 62.9%; }
.report-data__highlight-content { align-self: center; }
.report-data__highlight-type { display: block; margin-bottom: 8rem; }
.report-data__highlight-btn { margin-top: 48rem; display: flex; gap: 12rem; }

.report-data__list { display: flex; flex-direction: column; gap: 12rem; }
.report-data__list > li { display: flex; align-items: center; justify-content: space-between; gap: 40rem; padding: 24rem 40rem; background: var(--color-white); border-radius: var(--border-radius-04); }
.report-data__list-button { display: flex; gap: 8rem; }
.report-data__list-button .jt-btn__fill { padding: 8rem 20rem; gap: 10rem; background: transparent; color: var(--color-primary); }

.report-data__contact { margin-top: 40rem; display: flex; align-items: center; gap: 25rem; }
.report-data__contact > * { color: var(--color-gray-700); }
.report-data__contact > b { display: block; position: relative; }
.report-data__contact > b:after { content: ''; display: block; width: 1px; height: 12rem; position: absolute; top: 5rem; right: -14rem; background: var(--color-black); opacity: .5; }
.report-data__contact > a { text-decoration: underline; text-underline-offset: 2rem; transition: color .3s; }



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

    /* 녹색경영 */
    .green-climate__score-link > a:hover { color: var(--color-primary); background: var(--color-gray-400); }

    /* 지속가능경영보고서 */
    .report-data__list-button .jt-btn__fill:hover { color: var(--color-gray-800); }

    .report-data__contact > a:hover { color: var(--color-black); }

}