@charset "utf-8";
b { font-weight: 700; }
.inner { max-width: 1280px; }

/* Sub Header */
header { background: transparent; }
header .logo { background: url("/resources/img/logo_w.png") no-repeat center/contain; }
header .header_inner nav > ul > li > a { color:white; }
header .language a { color:white; }
header .btn_hamburger { background: white; }
header .btn_hamburger span { background: var(--key-blue-deep-color); }

/* Hover · Scroll */
header:has(.header_gnb nav > ul > li:hover) .header_inner nav > ul > li > a { color:var(--main-black); }
header:has(.header_gnb nav > ul > li:hover) .language a { color:var(--main-black); }
header:has(.header_gnb nav > ul > li:hover) .btn_hamburger { background:var(--key-blue-deep-color); }
header:has(.header_gnb nav > ul > li:hover) .btn_hamburger span { background:white; }

header.scroll { background: white; }
header.scroll .logo { background: url("/resources/img/logo.png") no-repeat center/contain; }
header.scroll .header_inner nav > ul > li > a { color:var(--main-black); }
header.scroll .language a { color:var(--main-black); }
header.scroll .btn_hamburger { background:var(--key-blue-deep-color); }
header.scroll .btn_hamburger span { background:white; }


/* ESG 추진전략 */
.about_esg { padding: 10rem 0 16rem; }
.about_esg h3 { margin-top: 0; font-weight: 700; font-size: var(--font-size-32); background: url("/resources/img/sub/ctf_sub_sp.png") -43px 9px no-repeat; }
.about_esg .hero_content { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 40rem; padding: 10.5rem; border-radius: 1.6rem; overflow: hidden; background: var(--key-green-light-color) url("/resources/img/sub/about_esg_bg.jpg") no-repeat center/cover; color:white; font-size: var(--font-size-56); }
.about_esg .hero_content::before { content: ''; display: block; width: fit-content; height: 4.5rem; margin-bottom:.5rem; aspect-ratio: 57/45; background: url('/resources/img/sub/hero_deco_2.png') no-repeat center/contain; }
.about_esg .hero_content p { line-height: 1.3; }
.about_esg .hero_description { margin-top: 2.4rem; font-size: var(--font-size-20); font-weight: 500; }

.about_esg .mission_section { padding-top: 7rem; padding-bottom: 8rem; }
.about_esg .mission_section ul { display: grid; grid-template-columns: repeat(2, 1fr); gap:2rem; }
.about_esg .mission_section ul li { position: relative; display: flex; justify-content: center; align-items: center; min-height: 26rem; padding: 4rem; border-radius: 2.4rem; overflow: hidden; }
.about_esg .mission_section ul li p { line-height: 1.3; }
.about_esg .mission_section ul li::after { content: attr(data-deco); font-size: 8rem; font-weight: 900; position: absolute; right: -1%; bottom:0; opacity: .03; line-height: .7; }
.about_esg .mission_section ul li:nth-child(1) { border:1px solid var(--key-green-deep-color); color:var(--key-green-deep-color); }
.about_esg .mission_section ul li:nth-child(2) { border:1px solid var(--key-blue-light-color); color:var(--key-blue-light-color); }
.about_esg .mission_section p:nth-child(1) { position: absolute; left:4rem; top:4rem; font-weight: 700; font-size: var(--font-size-24); opacity: .8; }
.about_esg .mission_section p:nth-child(2) { text-align: center; font-weight: 800; font-size: var(--font-size-32); }

.about_esg .task_content { padding-top: 13rem; }
.about_esg .task_content > ul { display: grid; grid-template-columns: repeat(3, 1fr); gap:2rem; }
.about_esg .task_content > ul > li { display: flex; flex-direction: column; position: relative; border-radius: 2.4rem; overflow: hidden; }
.about_esg .task_content > ul dl { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 7rem 4rem 6rem; text-align: center; color:white; }
.about_esg .task_content > ul > li:nth-child(1) dl { background: url("/resources/img/sub/task_deco_1.jpg") no-repeat center/cover; }
.about_esg .task_content > ul > li:nth-child(2) dl { background: url("/resources/img/sub/task_deco_2.jpg") no-repeat center/cover; }
.about_esg .task_content > ul > li:nth-child(3) dl { background: url("/resources/img/sub/task_deco_3.jpg") no-repeat center/cover; }
.about_esg .task_content > ul > li:nth-child(1) ul { border:2px solid var(--key-green-light-color); }
.about_esg .task_content > ul > li:nth-child(2) ul { border:2px solid var(--key-blue-light-color); }
.about_esg .task_content > ul > li:nth-child(3) ul { border:2px solid var(--key-blue-deep-color); }
.about_esg .task_content > ul dt { font-weight: 800; font-size: var(--font-size-26); }
.about_esg .task_content > ul dd { margin-top: 1.8rem; font-weight: 400; font-size: var(--font-size-22); line-height: 1.4; }
.about_esg .task_content > ul ul { flex:1; display: flex; flex-direction: column; gap:2rem; padding: 3.6rem; background: #F9F9F9; border-radius: 0 0 2.4rem 2.4rem; border-top:none !important; }
.about_esg .task_content > ul ul li { position: relative; padding-left: 1.6rem; line-height: 1.3; font-size: var(--font-size-22); }
.about_esg .task_content > ul ul li::before { content: ''; position: absolute; left:0; top:1.1rem; width: 4px; aspect-ratio: 1/1; background: var(--key-blue-light-color); }
.about_esg .task_content .icon { display:none; width: 16rem; position: absolute; left:50%; top:0; transform: translate(-50%,-50%); }
.about_esg .task_content .icon img { width: 100%; }

@media screen and (max-width:1200px){
	.about_esg .hero_content { min-height: 30rem; padding: 8rem; }
}
@media screen and (max-width:1024px){
	.about_esg .hero_content { min-height: 27rem; padding: 6rem; }
	.about_esg .task_content .icon { width: 14rem; margin: 2rem auto; position: initial; transform: none; }
	.about_esg .task_content > ul { display: flex; flex-direction: column; }
	.about_esg .task_content > ul dl { padding: 5rem 4rem 4rem; }
}
@media screen and (max-width:768px){
	.about_esg h3 { background: url("/resources/img/sub/ctf_sub_sp.png") -43px 4px no-repeat; }
	.about_esg .hero_content { padding: 4rem; }
	.about_esg .task_content { padding-top: 5rem; }
	.about_esg .task_content > ul ul { padding: 3rem; }

	.about_esg .mission_section ul li { padding: 3rem; }
	.about_esg .mission_section ul li::after { font-size: 7rem; }
	.about_esg .mission_section p:nth-child(1) { left: 3rem; top:3rem; }
}
@media screen and (max-width:550px){
	.about_esg .mission_section ul { display: flex; flex-direction: column; }
	.about_esg .mission_section ul li { min-height: 22rem; }
}


/* 환경(E) */
.environment { padding: 12rem 0 16rem; }
.environment h3 { margin-top: 0; font-weight: 700; font-size: var(--font-size-32); background: url("/resources/img/sub/ctf_sub_sp.png") -43px 9px no-repeat; }
.environment .hero_title { position: relative; width: fit-content; padding: 8.4rem 0 7.4rem; margin:0 auto; text-align: center; font-weight: 600; font-size: var(--font-size-40); }
.environment .hero_title::before { content: ''; position: absolute; left:0; top:0; height: 5.4rem; aspect-ratio: 72/54; background: url('/resources/img/sub/hero_deco.png') no-repeat center/contain; }
.environment .hero_title::after { content: ''; position: absolute; right: 0; bottom:0; height: 5.4rem; aspect-ratio: 72/54; background: url('/resources/img/sub/hero_deco.png') no-repeat center/contain; transform: scaleX(-1) scaleY(-1); }

.environment .task_section { padding-top: 12rem; padding-bottom: 12rem; }
.environment .task_section h3 { margin-bottom: 4rem; }
.environment .task_content > ul { display: grid; grid-template-columns: repeat(3, 1fr); gap:2rem; }
.environment .task_content > ul > li { display: flex; flex-direction: column; gap:2rem; }
.environment .task_content > ul > li .task_title { display: grid; grid-template-columns: 7.2rem 1fr; gap:1.2rem; align-items: center; padding: 2.4rem; border-radius: 10rem; color:white; font-size: var(--font-size-24); font-weight: 700; }
.environment .task_content > ul > li .task_title img { max-width: 68%; }
.environment .task_content > ul > li .task_title p { line-height: 1.4; }
.environment .task_content > ul > li .task_title .icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; background-color: white; border-radius: 50%; outline:4px solid rgba(255, 255, 255, .6); }
.environment .task_content > ul ul { flex:1; display: flex; flex-direction: column; gap:2rem; padding: 4.8rem 4rem; border-radius: 2.4rem; background: #F9F9F9; }
.environment .task_content > ul ul li { position: relative; padding-left: 1.6rem; line-height: 1.3; font-size: var(--font-size-22); }
.environment .task_content > ul ul li::before { content: ''; position: absolute; left:0; top:1.1rem; width: 4px; aspect-ratio: 1/1; background: var(--key-blue-light-color); }
.environment .task_content > ul > li:nth-child(1) .task_title { background: var(--key-green-light-color); }
.environment .task_content > ul > li:nth-child(1) ul { border: 2px solid rgba(143, 198, 77, 0.60); }
.environment .task_content > ul > li:nth-child(2) .task_title { background: var(--key-blue-light-color); }
.environment .task_content > ul > li:nth-child(2) ul { border: 2px solid rgba(31, 97, 180, 0.60); }
.environment .task_content > ul > li:nth-child(3) .task_title { background: var(--key-blue-deep-color); }
.environment .task_content > ul > li:nth-child(3) ul { border: 2px solid rgba(18, 45, 97, 0.60); }

.environment .poster_section h3 { margin-bottom: 6rem; }
.environment .poster_section ul { display: grid; grid-template-columns: repeat(4, 1fr); gap:2rem; }
.environment .poster_section li { border: 1px solid #AAAAAA; border-radius: 1.2rem; overflow: hidden; }
.environment .poster_section li img { width: 100%; height: 100%; object-fit: cover; }

@media screen and (max-width:1280px){
	.environment .task_content > ul { grid-template-columns: repeat(2, 1fr); }
	.environment .task_content > ul > li:nth-child(3) { grid-column: 1/3; }
	.environment .task_content > ul ul { padding: 4rem 3.2rem; }
	.environment .task_content > ul > li .task_title { padding: 1.8rem; }
}

@media screen and (max-width:768px){
	.inner { width: 100%; padding: 0 24px; }
	
	.environment { padding: 10rem 0 12rem; }
	.environment h3 { background: url("/resources/img/sub/ctf_sub_sp.png") -43px 4px no-repeat; }
	.environment .hero_title { padding: 6.4rem 0 5.4rem; }
	.environment .hero_title::before { height: 3.4rem; }
	.environment .hero_title::after { height: 3.4rem; }
	
	.environment .task_section { padding-top: 10rem; padding-bottom: 10rem; }
	.environment .task_content > ul { display: flex; flex-direction: column; gap:3rem; }
	.environment .task_content > ul > li { gap:1.2rem; }

	.environment .poster_section h3 { margin-bottom: 4rem; }
	.environment .poster_section ul { grid-template-columns: repeat(2, 1fr); gap:1.2rem; }
}


/* 지배구조(G) */
.governance { padding: 12rem 0 16rem; }
.governance .desc_section { position: relative; margin-top: 15rem; margin-bottom: 11rem; }
.governance .desc_section .desc_bg { height: 56rem; background: url('/resources/img/sub/governance_bg.jpg') no-repeat center/ cover; background-attachment: fixed; }
.governance .desc_section .inner { position: absolute; inset: 0; }
.governance .desc_section .desc_content { position: absolute; right:0; top:-6rem; display: flex; flex-direction: column; gap:1.2rem; width: 64%; padding: 5rem 6rem; background: var(--key-blue-deep-color); color:white; font-weight: 500; font-size: var(--font-size-26); }

.governance .hero_content { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 40rem; padding: 10.5rem; border-radius: 1.6rem; overflow: hidden; background: url("/resources/img/sub/governance_bg.jpg") no-repeat center/cover; color:white; font-size: var(--font-size-56); }
.governance .hero_content::before { content: ''; display: block; width: fit-content; height: 4.5rem; margin-bottom:.5rem; aspect-ratio: 57/45; background: url('/resources/img/sub/hero_deco_2.png') no-repeat center/contain; }
.governance .hero_content p { line-height: 1.3; }
.governance .hero_description { margin-top: 2.4rem; font-size: var(--font-size-20); font-weight: 500; }

.governance .governance_section { padding-top: 8rem; }
.governance .governance_content > ul { display: grid; grid-template-columns: repeat(3, 1fr); gap:1.5rem; }
.governance .governance_content > ul > li { position: relative; overflow: hidden; padding-top:10px; background: linear-gradient(to bottom, var(--key-blue-light-color) 0%, #F8FAFC 100%); border-radius: 3rem; }
.governance .governance_content > ul > li > div { height: 100%; padding: 6rem 2.3rem; border: 1px solid #CCCCCC; pointer-events: none; border-radius: 3rem; background: linear-gradient(to bottom, #FFFFFF 0%, #F8FAFC 100%); }
.governance .governance_content > ul > li .list_title { display: flex; gap:1.8rem; align-items: center; padding: 0 0 3rem; line-height: 1; font-size: var(--font-size-32); font-weight: 600; color:var(--key-blue-light-color); }
.governance .governance_content > ul ul { display: flex; flex-direction: column; gap:1rem; padding: .4rem; }
.governance .governance_content > ul ul li { position: relative; padding-left: 1.6rem; line-height: 1.3; font-size: var(--font-size-20); }
.governance .governance_content > ul ul li::before { content: ''; position: absolute; left:0; top:1.1rem; width: 4px; aspect-ratio: 1/1; border-radius: 50%; background: var(--key-green-deep-color); }

@media screen and (max-width:1200px){
	.governance .hero_content { min-height: 30rem; padding: 8rem; }
}
@media screen and (max-width:1024px){
	.governance .hero_content { min-height: 27rem; padding: 6rem; }
	.governance .governance_content > ul > li .list_title img { width: 44px; }
	.governance .governance_content > ul { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width:768px){
	.governance .hero_content { padding: 4rem; }
}
@media screen and (max-width:540px){
	.governance .governance_content > ul { grid-template-columns: repeat(1, 1fr); }
}


/* 연구 사업 */
.list_content > ul { display: flex; flex-direction: column; gap:4rem; }
.list_content > ul > li { display: flex; align-items: center; border:1px solid #DDDDDD; border-radius: 2.4rem; overflow: hidden; }
.list_content > ul > li:nth-child(even) { flex-direction: row-reverse; }
.list_content > ul > li .list_img { width: 53%; height: -webkit-fill-available; }
.list_content > ul > li .list_img img { width: 100%; height: 100%; object-fit: cover; }
.list_content > ul > li .list_desc { width: 47%; padding: 6rem; }
.list_content > ul > li .list_title { z-index: 1; position: relative; font-weight: 700; font-size: var(--font-size-40); }
.list_content > ul > li .list_title::before { content: ''; z-index: -1; position: absolute; left:0; top:0; transform: translate(-50%,20%); width: 2.4rem; aspect-ratio: 1/1; border-radius: 50%; background: rgba(143, 198, 77, 0.50); }
.list_content > ul ul { display: flex; flex-direction: column; gap:1rem; margin-top: 5.2rem; }
.list_content > ul ul li { position: relative; padding-left: 1.6rem; line-height: 1.3; font-size: var(--font-size-20); }
.list_content > ul ul li::before { content: ''; position: absolute; left:0; top:1.1rem; width: 4px; aspect-ratio: 1/1; background: var(--key-green-deep-color); border-radius: 50%; }

@media screen and (max-width:1200px){
	.list_content > ul > li .list_desc { padding: 4rem; }
	.list_content > ul ul { margin-top: 3.2rem; }
}
@media screen and (max-width:768px){
	.governance { padding: 10rem 0 12rem; }
	.governance .desc_section .desc_content { padding: 3rem 4rem; top: -3rem; width: 80%; }
	.list_content > ul > li { flex-direction: column; align-items: start; }
	.list_content > ul > li:nth-child(even) { flex-direction: column; }
	.list_content > ul > li .list_img { width: 100%; height: 30rem; }
	.list_content > ul > li .list_desc { width: 100%; }
}
@media screen and (max-width:500px){
	.governance .desc_section { margin-top: 10rem; }
	.governance .desc_section .desc_content { top:3rem; width: 90%; }
	.governance .desc_section .desc_bg { height: 82rem; }
	.list_content > ul > li .list_desc { padding: 2.4rem 3rem; }
	.list_content > ul ul { margin-top: 1.2rem; }
}


/* 사회공헌 게시판 */
.sc-board { padding-top: 8rem; }
.sc-board .hero_title { position: relative; width: fit-content; padding: 8.4rem 0 7.4rem; margin:0 auto; text-align: center; font-weight: 600; font-size: var(--font-size-40); }
.sc-board .hero_title::before { content: ''; position: absolute; left:0; top:0; height: 5.4rem; aspect-ratio: 72/54; background: url('/resources/img/sub/hero_deco.png') no-repeat center/contain; }
.sc-board .hero_title::after { content: ''; position: absolute; right: 0; bottom:0; height: 5.4rem; aspect-ratio: 72/54; background: url('/resources/img/sub/hero_deco.png') no-repeat center/contain; transform: scaleX(-1) scaleY(-1); }

@media screen and (max-width:768px){	
	.environment .hero_title { padding: 6.4rem 0 5.4rem; }
	.environment .hero_title::before { height: 3.4rem; }
	.environment .hero_title::after { height: 3.4rem; }
}