@import url('sub.css'); 

/* ESG경영방침 - 핵심가치 */
.esg-value-style{display:flex; gap:30px; width:100%;}
.esg-value-style dl{flex:1; min-width:0; display:flex; flex-direction:column; border:1px solid var(--border); box-sizing:border-box;}
.esg-value-style dl dt{position:relative; aspect-ratio: 510/370; overflow:hidden; background:var(--black);}
.esg-value-style dl dt > img{display:block; width:100%; height:100%; object-fit:cover;}
.esg-value-badge{position:absolute; right:20px; top:20px; z-index:2; width:94px; height:94px;}
.esg-value-badge__ring{position:absolute; left:50%; top:50%; width:94px; height:94px; margin-left:-47px; margin-top:-47px; border-radius:50%; border:1px solid rgba(255,255,255,0.35); box-sizing:border-box;}
.esg-value-badge__letter{position:absolute; left:50%; top:50%; display:flex; align-items:center; justify-content:center; width:78px; height:78px; margin-left:-39px; margin-top:-39px; border-radius:50%; background:rgba(255,255,255,0.2); backdrop-filter:blur(17.5px); -webkit-backdrop-filter:blur(17.5px); font-weight:700;}
.esg-value-badge__letter.fs42{color:var(--white); font-family:var(--eng); letter-spacing:var(--letter-spacing-none); line-height:128.571%;}
.esg-value-style dl dd{position:relative; padding:40px; box-sizing:border-box; display:flex; flex-direction:column; gap:12px; align-items:flex-start;}
.esg-value-icon{position:absolute; right:26px; top:40px; width:82px; height:82px; pointer-events:none;}
.esg-value-icon img{display:block; width:100%; height:100%; object-fit:contain; filter:brightness(0); opacity:0.2;}
.esg-value-style dl dd .fs28{font-weight:700; color: var(--black); line-height:142.857%; width:100%;}




/* 환경경영 */
.environmental-info{display:flex; flex-direction:column; gap:20px; position: relative;}
.environmental-info::after{content: ''; display: block; position: absolute; right: 50px; top:0; width: 164px; height: 194px; background: url('/esg/img/environmental-icon.png') no-repeat center/contain;}
.environmental-info p{color:var(--black); font-weight:400;}
.environmental-info p br{display: block;}

.environmental-practice-list{display: grid; grid-template-columns: repeat(5, 1fr); grid-gap:30px; position: relative; z-index: 3;}
.environmental-practice-item{display:flex; flex-direction:column; gap:15px;}
.environmental-practice-img{aspect-ratio: 294/294; overflow:hidden; background:var(--black);}
.environmental-practice-img img{display:block; width:100%; height:100%; object-fit:cover;}
.environmental-practice-list{counter-reset:environmental-practice-num;}
.environmental-practice-txt{display:flex; gap:10px; align-items:flex-start; width:100%;}
.environmental-practice-txt::before{counter-increment:environmental-practice-num; content:counter(environmental-practice-num); flex-shrink:0; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:3px; box-sizing:border-box; background:var(--main); font-family:var(--eng); font-size:0.8888888888888889rem; font-weight:700; line-height:175%; color:var(--white);}
.environmental-practice-txt .fs18{color:var(--black); font-weight: 700; line-height: 165%;}

/* 사회경영 */
.social-policy-list{display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:30px;}
.social-policy-item{display:flex; gap:35px; align-items:flex-start; box-sizing:border-box; padding:50px; background:var(--grayBg);}
.social-policy-icon{flex-shrink:0; display:flex; align-items:flex-start; justify-content:center; width:76px;}
.social-policy-icon img{display:block; width:100%; height:auto;}
.social-policy-txt{display:flex; flex-direction:column; gap:12px; flex:1; min-width:0;}
.social-policy-txt .fs20{color:var(--black); font-weight:700; line-height:160%;}
.social-policy-txt .fs18{color:var(--basic); line-height:166.667%;}

.social-activity-list{display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:30px;}
.social-activity-item{display:flex; flex-direction:column; box-sizing:border-box; border:1px solid var(--border);}
.social-activity-img{aspect-ratio:375/281; overflow:hidden; background:var(--black); width:100%;}
.social-activity-img img{display:block; width:100%; height:100%; object-fit:cover;}
.social-activity-txt{display:flex; flex-direction:column; gap:12px; align-items:center; padding:30px 25px; box-sizing:border-box; text-align:center; width:100%;}
.social-activity-txt .fs20{color:var(--black); font-weight:700; line-height:130%;}
.social-activity-txt .fs18{color:var(--basic); line-height:166.667%;}



/* 품질경영 */
.quality-policy-list{display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:30px;}
.quality-policy-item{display:flex; flex-direction:column; gap:30px; box-sizing:border-box; padding-bottom:30px; background:var(--grayBg);}
.quality-policy-icon{display:flex; align-items:center; justify-content:center; width:100%; padding:30px 20px; box-sizing:border-box;}
.quality-policy-icon--main{background:var(--main);}
.quality-policy-icon--sub{background:var(--sub);}
.quality-policy-icon--sub2{background:var(--sub2);}
.quality-policy-icon img{display:block; height:82px; width:auto;}
.quality-policy-txt{display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; box-sizing: border-box; padding: 0 20px;}
.quality-policy-txt .fs20{color:var(--black); font-weight:400; line-height:170%;}

.quality-certification{display: grid; grid-template-columns: repeat(5, 1fr); grid-gap:30px;}
.quality-certification dl{text-align: center; display: flex; flex-direction: column; gap:15px;}
.quality-certification dl dt{aspect-ratio: 294/403; overflow: hidden; position: relative;}
.quality-certification dl dt::after{content: ''; display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid var(--border); position: absolute; left: 0; top:0;}
.quality-certification dl dt img{display: block; width: 100%; height: 100%; object-fit: contain;}
.quality-certification dl dd p{color: var(--black);}



/* 윤리경영 */
.ethics-code-list{display:flex; flex-direction:column; width:100%;}
.ethics-code-item{display:flex; gap:60px; box-sizing:border-box; border-bottom:1px solid var(--border); padding-bottom:30px;}
.ethics-code-item + .ethics-code-item{padding-top:30px;}
.ethics-code-img{max-width:510px; aspect-ratio: 510/330; overflow:hidden;}
.ethics-code-img img{display:block; width:100%; height:100%; object-fit:cover;}
.ethics-code-txt{display:flex; flex-direction:column; justify-content: center; gap:12px; flex:1; min-width:0;}
.ethics-code-txt .fs28{font-weight:700; line-height:142.857%; color:var(--black);}

/* 사회공헌 */
.social-contribution{display:flex; gap:30px; width:100%; background:var(--grayBg); box-sizing:border-box;}
.social-contribution-img{max-width: 780px; aspect-ratio: 780/420; overflow:hidden; background:var(--black);}
.social-contribution-img img{display:block; width:100%; height:100%; object-fit:cover;}
.social-contribution-txt{flex:1; min-width:0; display:flex; flex-direction:column; justify-content: center; gap:40px; align-items:flex-start; padding:50px; box-sizing:border-box;}
.social-contribution-icon{display:flex; align-items:flex-start; justify-content:center; width:73px;}
.social-contribution-icon img{display:block; width:100%; height:auto; object-fit:contain;}
.social-contribution-txt .fs28{font-weight:700; line-height:142.857%; color:var(--black); }
.social-contribution-txt .fs28 span{display: inline; letter-spacing: inherit; line-height: inherit; font-weight: inherit;}



/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){


/* 사회공헌 */
.social-contribution{gap:0;}
.social-contribution-img{max-width: 60%; }



}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/* 환경경영 */
.environmental-practice-list{grid-template-columns: repeat(3, 1fr);}
.environmental-info::after{right: 0;}

/* 사회경영 */
.social-activity-list{grid-template-columns:repeat(2, 1fr);}

/* 품질경영 */
.quality-certification{grid-template-columns: repeat(4, 1fr);}


/* 윤리경영 */
.ethics-code-item{gap:40px;}
.ethics-code-img{max-width:40%;}

/* 사회공헌 */
.social-contribution-txt .fs28 br{display: none;}



}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


/* ESG경영방침 - 핵심가치 */
.esg-value-style{gap:20px;}
.esg-value-badge{right:10px; top:10px; width:70px; height:70px;}
.esg-value-badge__ring{width:70px; height:70px; margin-left:-35px; margin-top:-35px;}
.esg-value-badge__letter{width:50px; height:50px; margin-left:-25px; margin-top:-25px; font-size:2rem;}
.esg-value-style dl dd{padding:30px; gap:6px;}
.esg-value-icon{right:15px; top:20px; width:50px; height:50px;}




/* 환경경영 */
.environmental-info{gap:15px;}
.environmental-info p br{display: none;}

.environmental-practice-list{grid-gap:30px 20px;}
.environmental-practice-txt::before{width:24px; height:24px;}

/* 사회경영 */
.social-policy-list{grid-template-columns:repeat(1, 1fr); grid-gap:20px;}
.social-policy-item{gap:25px; padding:30px;}
.social-policy-icon{width:60px;}
.social-policy-txt{gap:8px;}

.social-activity-list{grid-gap:20px;}
.social-activity-txt{gap:8px; padding:25px 20px;}


/* 품질경영 */
.quality-policy-list{grid-gap:20px;}
.quality-policy-item{gap:20px; padding-bottom:20px;}
.quality-policy-icon{padding:20px;}
.quality-policy-icon img{height:60px; width:auto;}

.quality-certification{grid-template-columns: repeat(2, 1fr); grid-gap:20px;}
.quality-certification dl{gap:10px;}


/* 윤리경영 */
.ethics-code-item{gap:30px; padding-bottom:20px;}
.ethics-code-item + .ethics-code-item{padding-top:20px;}
.ethics-code-txt{gap:8px;}


/* 사회공헌 */
.social-contribution-txt{gap:20px; padding:50px 30px;}
.social-contribution-icon{width:60px;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

    

/* ESG경영방침 - 핵심가치 */
.esg-value-style{gap:10px; flex-direction: column;}
.esg-value-badge{width:50px; height:50px;}
.esg-value-badge__ring{width:50px; height:50px; margin-left:-25px; margin-top:-25px;}
.esg-value-badge__letter{width:40px; height:40px; margin-left:-20px; margin-top:-20px; font-size:1.5rem;}
.esg-value-style dl dd{padding:20px;}



/* 환경경영 */
.environmental-info{gap:10px;}
.environmental-info::after{width: 100px; height: 118px;}

.environmental-practice-list{grid-template-columns: repeat(2, 1fr); grid-gap:20px;}
.environmental-practice-item{gap:10px;}
.environmental-practice-txt{gap:5px;}
.environmental-practice-txt::before{width:22px; height:22px;}


/* 사회경영 */
.social-policy-list{grid-gap:10px;}
.social-policy-item{gap:15px; padding:20px;}
.social-policy-icon{width:50px;}
.social-policy-txt{gap:4px;}


.social-activity-list{grid-gap:10px;}
.social-activity-txt{gap:4px; padding:15px 10px;}

/* 품질경영 */
.quality-policy-list{grid-template-columns:repeat(1, 1fr); grid-gap:10px;}
.quality-policy-item{gap:15px; padding-bottom:15px;}
.quality-policy-icon{padding:15px;}
.quality-policy-icon img{height:40px; width:auto;}

.quality-certification{grid-gap:20px 10px;}

/* 윤리경영 */
.ethics-code-item{gap:15px; flex-wrap: wrap; padding-bottom:15px;}
.ethics-code-item + .ethics-code-item{padding-top:15px;}
.ethics-code-img{max-width:100%;}
.ethics-code-txt{gap:4px;}


/* 사회공헌 */
.social-contribution{flex-direction: column;}
.social-contribution-img{max-width: 100%; }
.social-contribution-txt{flex:1; gap:15px; padding:30px; align-items: center; text-align: center;}
.social-contribution-icon{width:45px;}

}