@charset "utf-8";

/*
 * File    : sub-esg.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * ESG
 * QUALITY
 * IR
 * HOVER
 */

 

/* **************************************** *
 * ESG
 * **************************************** */
.article.esg .article__visual-sticky .article__visual-content { background: rgba(0, 0, 0, .2);}
.esg-container { display: flex; flex-direction: column; gap: 80rem; }
.esg-group { display: flex; gap: 102rem; align-items: center; justify-content: space-between; }
.esg-group:nth-child(even) { flex-direction: row-reverse; }
.esg-group__image { width: 46.55%; max-width: 688rem; }
.esg-group__image .jt-lazyload { padding-top: 87.21%; }
.esg-group__content { flex: 1; }
.esg-group__title { margin-bottom: 40rem; }
.esg-group__desc { color: var(--color-gray-900); }
.esg-group__desc p + p { margin-top: 16rem; }

 

/* **************************************** *
 * QUALITY
 * **************************************** */
.quality-banner { margin-bottom: 120rem; }
.quality-banner .jt-lazyload { padding-top: 40.59%; }
.quality-container { display: flex; justify-content: space-between; gap: 80rem; }
.quality-title { flex: 1; }
.quality-content { width: 59.14%; max-width: 874rem; }
.quality-list { counter-reset: item; }
.quality-list > li { position: relative; padding: 40rem 0 40rem 70rem; border-bottom: 1px solid var(--color-gray-400); }
.quality-list > li:before { counter-increment: item; content: '0'counter(item)'. '; position: absolute; left: 0; color: var(--color-primary); font-size: var(--font-size-ko-06); line-height: var(--font-lineheight-ko-06); font-weight: 700; letter-spacing: var(--letter-spacing-02); }
.quality-list > li:first-child { padding-top: 20rem; }
.quality-explain { margin-top: 30rem; color: var(--color-primary); }



/* **************************************** *
 * IR
 * **************************************** */
.ir-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32rem; }
.ir-list > li > a { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20rem; height: 100%; min-height: 260rem; padding: 30rem 40rem; }
.ir-list > li > a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid var(--color-gray-400); box-sizing: border-box; pointer-events: none; transition: border-color .3s;  }
.ir-item__head { color: var(--color-black); overflow-wrap: anywhere; }
.ir-item__data { display: flex; align-items: center; justify-content: space-between; gap: 20rem; }
.ir-item__date { position: relative; font-size: 0; color: var(--color-gray-800); }
.ir-item__date span { display: inline-block; }
.ir-item__date time { position: relative; display: inline-block; margin-left: 6rem; padding-left: 7rem; }
.ir-item__date time:before { content: ''; position: absolute; left: 0; top: 5rem; width: 1px; height: 10rem; background: var(--color-gray-500);}
.ir-item__icon { display: flex; align-items: center; justify-content: center; width: 40rem; height: 40rem; border-radius: 2rem; background: var(--color-black); }
.ir-item__icon .jt-icon { width: 24rem; height: 24rem; }
.ir-item__icon .jt-icon svg path { fill: var(--color-white); }



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

    /* IR */ 
    .ir-list > li > a:hover:before { border: 2rem solid var(--color-black); }

}