/* 서브 비주얼 이미지 */
#visual .bg1{ background: url("/img/sub/about_bg.jpg") no-repeat center left 60% / cover; }
#visual .bg2{ background: url("/img/sub/pipeline_bg.jpg") no-repeat center left 70% / cover; }
#visual .bg3{ background: url("/img/sub/business_bg.jpg") no-repeat center center / cover; }
#visual .bg4{ background: url("/img/sub/esg_bg.jpg") no-repeat center center / cover; }
#visual .bg5{ background: url("/img/sub/ir_bg.jpg") no-repeat center center / cover; }
#visual .bg6{ background: url("/img/sub/pr_bg01.jpg") no-repeat center center / cover; }
#visual .bg7{ background: url("/img/sub/policy_bg.jpg") no-repeat center center / cover; }

/* visual */
#visual{ position: relative; overflow: hidden; }
#visual .bg{ padding-bottom: 672px; max-height: 100vh; }
#visual .flex-box{ display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 100px; position: relative; overflow: hidden; }
#visual .flex-box::before{ content: ""; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.2); position: absolute; bottom: 0; left: 0; }
#visual .text-box{ position: absolute; bottom: 0; left: 0; right: 0; }
#visual .text-box *{ color: #fff; }
#visual .text-box h2{ font-family: var(--engFont); font-size: 9rem; font-weight: 600; letter-spacing: -0.02em; }
#visual .text-box h2 span{ display: inline-block; animation: textBlur 1s both; }

/* lnb */
#lnb{ display: flex; align-items: center; margin-bottom: -17px; margin-right: -17px; }
#lnb li{ position: relative; }
#lnb li::after{ content: ""; width: 4px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translate(-100%, -50%); }
#lnb li:first-of-type::after{ display: none; }
#lnb li a{ display: inline-block; font-family: var(--engFont); font-size: 1.7rem; font-weight: 500; letter-spacing: -0.02em; padding: 17px; padding-right: 21px; position: relative; text-transform: uppercase; }
#lnb li:last-of-type a{ font-weight: 600; }
#lnb li a::before{ content: ""; width: 4px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
#lnb li a:first-of-type::before{ display: none; }

/* common */
.sub-content{ --pt: 177px; --pb: 180px; padding: var(--pt) 0 calc(var(--pb) + 12.087%); position: relative; }
.sub-content::before{ content: ""; width: 100%; padding-bottom: 12.087%; background: url("/img/sub/bottom_text.svg") no-repeat bottom center / contain; margin: 0 auto; position: absolute; bottom: 0; left: 50%; z-index: -1; transform: translateX(-50%); }
.sub-content::after{ content: ""; width: 100%; height: 100%; background: #000; position: absolute; top: 0; left: 0; z-index: 500; opacity: 1; transition: opacity 1s; }
.sub-bottom{ background: var(--subBottom); padding-bottom: calc(var(--pb) + 12.087% + 10px); position: absolute; bottom: -5px; left: 0; right: 0; z-index: -50; }
.secLine{ border-bottom: 1px solid #EEE; }

body.wb .sub-content::after{ opacity: 0; pointer-events: none; }

/* 간격 */
.pt200{ padding-top: 200px; }
.pb200{ padding-bottom: 200px; }
.pt180{ padding-top: 180px; }
.pb180{ padding-bottom: 180px; }
.pt120{ padding-top: 120px; }
.pb120{ padding-bottom: 120px; }
.pt100{ padding-top: 100px; }
.pb100{ padding-bottom: 100px; }

/* page-title */
.page-title{ margin-bottom: 100px; }
.page-title h3{ font-size: 7rem; font-weight: 600; color: #111; letter-spacing: -0.02em; text-align: center; transition: color 1s; --letterSpacing: -0.02em; }
/* .page-title h3.eng{ font-weight: 700; } */
 
.page-title.z h3{ position: relative; z-index: 600; color: #fff; animation: spacingBlur 1.3s 1s both; }
body.wb .page-title.z h3{ color: #111; }

/* sec-title */
.sec-title h4{ font-size: 4.8rem; font-weight: 600; color: #111; letter-spacing: -0.01em; }

/* logo-span */ 
.logo-span{ display: block; height: 35px; background: url("/img/sub/about/logo_span.svg") no-repeat center left / contain; margin-bottom: 30px; }

/* cirDeco */
.cirDeco{ position: relative; }
.cirDeco::before{ content: ""; width: 200px; height: 200px; border-radius: 50%; background: var(--mainColor); box-shadow: 0 0 150px 150px var(--mainColor); opacity: 0.11; position: absolute; top: 0; left: 0; z-index: -1; }

/* sticky-tab */
.sticky-tab{ background: #fff; border-radius: 20px; box-shadow: 5px 5px 30px 0px rgba(15, 41, 107, 0.08); padding: 20px; position: sticky; top: calc(var(--headerH) + 20px); left: 0; z-index: 100; margin-bottom: 100px; }
.sticky-tab ul{ display: grid; margin: -10px; }
.sticky-tab ul li{ min-height: 80px; display: flex; justify-content: center; align-items: center; background: #F5F5F5; border-radius: 20px; font-family: var(--engFont); font-size: 2.4rem; font-weight: 500; color: #BBB; letter-spacing: -0.02em; text-align: center; padding: 10px; position: relative; transition: background 0.5s, color 0.5s; cursor: pointer; margin: 10px; }
.sticky-tab ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }
.sticky-tab ul li.on{ background: var(--mainColor); color: #fff; }

.sticky-tab ul.two{ grid-template-columns: repeat(2, 1fr); }
.sticky-tab ul.three{ grid-template-columns: repeat(3, 1fr); }

/* orangeDot */
.orangeDot{ padding-left: 18px; position: relative; text-align: left !important; }
.orangeDot *{ text-align: left !important; }
.orangeDot::before{ content: ""; width: 8px; height: 8px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 0; left: 0; }

/* viewmore */
.viewmore{ --circle: 50px; max-width: max-content; width: 100%; height: var(--circle); display: flex; align-items: center; font-family: var(--engFont); font-size: 1.8rem; font-weight: 500; color: #555; letter-spacing: -0.02em; line-height: 1.3; padding: 15px; padding-right: 20px; position: relative; z-index: 10; transition: color 0.5s; box-sizing: content-box; }
.viewmore::before{ content: ""; width: 7px; height: 7px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 50%; left: 0; z-index: -5; transform: translateY(-50%); transition: width 0.5s, height 0.5s; }
.viewmore::after{ content: ""; width: 11px; height: 11px; background: url("/img/sub/viewmore.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 0; transform: translateY(-50%); opacity: 0.6; transition: opacity 0.5s; }
.viewmore.download::after{ height: 15px; background: url("/img/sub/download_icon.svg") no-repeat center center / contain; }

@media screen and (hover: hover){
	.viewmore:hover{ color: #111; }
	.viewmore:hover::before{ width: var(--circle); height: var(--circle); }
	.viewmore:hover::after{ opacity: 1; }
}

/* 스크롤바 커스텀 */
.scroll-x{ overflow-x: auto; overflow-y: clip; }
.scroll-y{ overflow-x: clip; overflow-y: auto; }
.scroll-x::-webkit-scrollbar, .scroll-y::-webkit-scrollbar{ width: 24px; height: 24px; }
.scroll-x::-webkit-scrollbar-thumb, .scroll-y::-webkit-scrollbar-thumb{ background: var(--mainColor); background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }
.scroll-x::-webkit-scrollbar-track, .scroll-y::-webkit-scrollbar-track{ background: #E9E9E9; background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }

@media screen and (max-width: 1700px){
	/* visual */
	#visual .flex-box{ padding-bottom: 70px; }
	#visual .text-box h2{ font-size: 7.5rem; }

	/* common */
	.sub-content{ --pt: 120px; --pb: 140px; }

	/* 간격 */
	.pt200{ padding-top: 160px; }
	.pb200{ padding-bottom: 160px; }
	.pt180{ padding-top: 140px; }
	.pb180{ padding-bottom: 140px; }

	/* page-title */
	.page-title{ margin-bottom: 80px; }
	.page-title h3{ font-size: 5.5rem; }

	/* sec-title */
	.sec-title h4{ font-size: 3.8rem; }

	/* logo-span */ 
	.logo-span{ height: 30px; }

	/* sticky-tab */
	.sticky-tab{ margin-bottom: 70px; }
	.sticky-tab ul li{ min-height: 70px; font-size: 2rem; }

	/* viewmore */
	.viewmore{ --circle: 45px; font-size: 1.6rem; }
}

@media screen and (max-width: 1280px){
	/* visual */
	#visual .flex-box{ padding-bottom: 40px; }
	#visual .text-box h2{ font-size: 6rem; }

	/* lnb */
	#lnb li a{ font-size: 1.6rem; }

	/* common */
	.sub-content{ --pt: 60px; --pb: 80px; }

	/* 간격 */
	.pt200{ padding-top: 120px; }
	.pb200{ padding-bottom: 120px; }
	.pt180{ padding-top: 100px; }
	.pb180{ padding-bottom: 100px; }
	.pt120{ padding-top: 90px; }
	.pb120{ padding-bottom: 90px; }
	.pt100{ padding-top: 80px; }
	.pb100{ padding-bottom: 80px; }

	/* page-title */
	.page-title{ margin-bottom: 40px; }
	.page-title h3{ font-size: 4rem; }

	/* sec-title */
	.sec-title h4{ font-size: 3.5rem; }

	/* logo-span */ 
	.logo-span{ height: 25px; margin-bottom: 15px; }

	/* sticky-tab */
	.sticky-tab{ padding: 10px; margin-bottom: 40px; }
	.sticky-tab ul{ margin: -5px; }
	.sticky-tab ul li{ min-height: 60px; font-size: 1.8rem; margin: 5px; }

	/* orangeDot */
	.orangeDot{ padding-left: 15px; position: relative; }
	.orangeDot::before{ content: ""; width: 5px; height: 5px; }

	/* viewmore */
	.viewmore{ --circle: 40px; font-size: 1.5rem; }
}

@media screen and (max-width: 900px){
	/* visual */
	#visual .flex-box{ flex-direction: column; }
	#visual .text-box h2{ width: 100%; font-size: 4.5rem; margin-bottom: 20px; }

	/* 간격 */
	.pt120{ padding-top: 70px; }
	.pb120{ padding-bottom: 70px; }
	.pt100{ padding-top: 60px; }
	.pb100{ padding-bottom: 60px; }

	/* page-title */
	.page-title h3{ font-size: 3.5rem; }
	.page-title.z h3{ animation: textClip 1s 1s both; }

	/* sec-title */
	.sec-title h4{ font-size: 2.8rem; }

	/* sticky-tab */
	.sticky-tab ul li{ min-height: 50px; font-size: 1.6rem; padding: 10px 5px; }
}


/* table-box */
.table-box{ text-align: center; overflow-x: auto; overflow-y: clip; }
.table-box::-webkit-scrollbar{ width: 24px; height: 24px; }
.table-box::-webkit-scrollbar-thumb{ background: var(--mainColor); background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }
.table-box::-webkit-scrollbar-track{ background: #E9E9E9; background-clip: padding-box; border: 7px solid transparent; border-radius: 100px; }

.table-box *{ letter-spacing: -0.02em; }
.table-box colgroup col{ width: 100%; }
.table-box td{ font-size: 1.9rem; font-weight: 300; color: #333; }
.table-box td.left{ text-align: left; }
.table-box .bold td{ font-weight: 600; }
.table-box td.noPadding{ padding: 0 !important; }

.table-box thead td.space{ padding-bottom: 20px; }
.table-box thead tr:first-of-type > *:first-of-type{ border-radius: 20px 0 0 0; }
.table-box thead tr:first-of-type > *:last-of-type{ border-radius: 0 20px 0 0; }
.table-box thead tr:last-of-type > *:first-of-type{ border-radius: 0 0 0 20px; }
.table-box thead tr:last-of-type > *:last-of-type{ border-radius: 0 0 20px 0; }
.table-box thead tr:only-child > *:first-of-type{ border-radius: 20px 0 0 20px; }
.table-box thead tr:only-child > *:last-of-type{ border-radius: 0 20px 20px 0; }

.table-box thead th{ background: #F5F5F5; font-size: 2rem; font-weight: 600; color: #111; padding: 20px 10px; }

.table-box .lineL{ border-left: 1px solid #DDD; }
.table-box .lineR{ border-right: 1px solid #DDD; }

.table-box.border td{ border: 1px solid #DDD; }
.table-box.border tr:first-of-type > *{ border-top: none; }
.table-box.border tr > *:first-of-type{ border-left: none; }
.table-box.border tr > *:last-of-type{ border-right: none; }


/* dot-list */
.dot-list{ --color: #333; font-size: 1.8rem; }
.dot-list li{ font-size: inherit; font-weight: 300; color: var(--color); padding-left: 15px; position: relative; }
.dot-list li::before{ content: ""; width: 4px; height: 4px; background: var(--color); border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
.dot-list li strong{ font-weight: 500; }


/* bg-motion */
.bg-motion{ overflow: hidden; }
.bg-motion .wrap{ display: flex; flex-direction: column; position: relative; z-index: 10; opacity: 1; padding-top: 0; padding-bottom: calc(var(--top) + var(--bottom)); transition: padding 1.5s; }
.bg-motion .txt{ padding-bottom: 40px; transition: padding 1.5s; }
.bg-motion .overflow{ overflow: hidden; }
.bg-motion .sec-title strong{ font-weight: 800; }
.bg-motion .txt h4, .bg-motion .txt p{ transition: color 1s, transform 1s, opacity 1s; }
.bg-motion .txt p{ font-size: 2.4rem; font-weight: 200; color: #111; letter-spacing: -0.02em; line-height: 1.65; margin-top: 40px; }

.bg-motion .img{ width: 100%; height: calc(var(--top) + var(--bottom)); position: absolute; bottom: 0; left: 50%; z-index: -5; transform: translateX(-50%); transition: width 1.5s, height 1.5s, bottom 1.5s; }
.bg-motion .img::before{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1.5s; }

.bg-motion .wrap.aos-animate{ padding-top: var(--top); padding-bottom: var(--bottom); }
.bg-motion .wrap.aos-animate .txt{ padding-bottom: 0; }
.bg-motion .aos-animate .txt h4{ color: #fff !important; }
.bg-motion .aos-animate .txt p{ color: rgba(255, 255, 255, 0.8) !important; }
.bg-motion .aos-animate .img{ width: 100vw; height: 100%; }
.bg-motion .aos-animate .img::before{ opacity: 1; }


/* flex-layout */
.flex-layout{ display: flex; }
.flex-layout > div{ width: 50%; }
.flex-layout .tit-box{ padding-right: 100px; }
.flex-layout h6{ font-size: 3rem; font-weight: 600; color: #111; letter-spacing: -0.02em; }


@media screen and (max-width: 1700px){
	/* table-box */
	.table-box thead th{ font-size: 1.8rem; }
	.table-box td{ font-size: 1.7rem; padding: 20px; }

	/* dot-list */
	.dot-list{ font-size: 1.7rem; }

	/* bg-motion */
	.bg-motion .txt p{ font-size: 2.2rem; }

	/* flex-layout */
	.flex-layout h6{ font-size: 2.6rem; }
}

@media screen and (max-width: 1400px){
	/* flex-layout */
	.flex-layout .tit-box{ width: 40%; }
	.flex-layout .content-box{ width: 60%; }
}

@media screen and (max-width: 1280px){
	/* table-box */
	.table-box thead th{ font-size: 1.7rem; padding: 15px 10px; }
	.table-box td{ font-size: 1.6rem; padding: 10px; }

	/* dot-list */
	.dot-list{ font-size: 1.6rem; }

	/* bg-motion */
	.bg-motion .txt p{ font-size: 2rem; margin-top: 20px; }

	/* flex-layout */
	.flex-layout h6{ font-size: 2.2rem; }
}

@media screen and (max-width: 1200px){
	/* flex-layout */
	.flex-layout{ flex-direction: column; }
	.flex-layout > div{ width: 100% !important; }
	.flex-layout .tit-box{ padding-right: 0; padding-bottom: 20px; }
}

@media screen and (max-width: 900px){
	/* bg-motion */
	.bg-motion .txt p{ font-size: 1.8rem; }

	/* flex-layout */
	.flex-layout h6{ font-size: 2rem; }
}


/* ABOUT US - 회사개요 */
#overview{ overflow: hidden; }
#overview .overview .grid-box{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
#overview .overview .box{ border-radius: 20px; }
#overview .overview .box .txt{ padding: 50px; }
#overview .overview .box .sec-title h4{ color: #fff; }
#overview .overview .box .txt h5{ font-size: 4.4rem; font-weight: 600; color: #fff; letter-spacing: -0.01em; }

#overview .overview .box1{ background: url("/img/sub/about/overview_bg01.jpg") no-repeat center center / cover; grid-row: 1 / 3; }
#overview .overview .box2{ background: url("/img/sub/about/overview_bg02.jpg") no-repeat center center / cover; }
#overview .overview .box3{ background: url("/img/sub/about/overview_bg03.jpg") no-repeat center center / cover; grid-row: 2 / 3; }

#overview .overview .box2 figure{ width: 100%; text-align: center; padding: 95px 50px; }
#overview .overview .box3{ padding-top: 37.575%; }
#overview .overview .box3 .sec-title{ text-align: right; }

#overview .company{ position: relative; z-index: 10; padding-bottom: 270px; }
#overview .company::before{ content: url("/img/sub/about/overview_object1.png"); position: absolute; top: 0; right: 0; z-index: -5; }
#overview .company::after{ content: url("/img/sub/about/overview_object2.png"); position: absolute; bottom: 70px; left: 0; z-index: -5; }
#overview .company .sec-title{ margin-bottom: 60px; }
#overview .company .sec-text{ margin-top: 40px;  font-size: 1.8rem;}
#overview .company ul{ display: flex; flex-wrap: wrap; gap: 20px; }
#overview .company ul li{ width: calc((100% - 60px) / 4); position: relative; }
#overview .company ul li .squre{ width: 100%; padding-bottom: 100%; background: #fff; border: 1px solid #EEE; border-radius: 20px; }
#overview .company ul li .txt{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; padding: 0 20px; }
#overview .company .txt dl{ margin-top: 40px; }
#overview .company .txt dl dt{ font-size: 2rem; font-weight: 300; color: #333; letter-spacing: -0.02em; margin-bottom: 10px; }
#overview .company .txt dl dd{ font-size: 4.4rem; font-weight: 700; color: #111; letter-spacing: -0.02em; }

#overview .introduce.cirDeco::before{ top: unset; left: unset; bottom: 10%; right: 0; transform: translate(50%, 50%); }
#overview .introduce .flex-box{ display: flex; }
#overview .introduce .flex-box > div{ width: 50%; }
#overview .introduce .flex-box .title{ padding-right: 50px; }
#overview .introduce .content > *:not(:last-of-type){ margin-bottom: 40px; }
#overview .introduce p{ font-size: 2rem; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.65; }
#overview .introduce p strong{ font-weight: 600; color: var(--mainColor); line-height: inherit; }
#overview .introduce .dl{ margin-bottom: 40px; }
#overview .introduce .dl dl:not(:last-of-type){ margin-bottom: 20px; }
#overview .introduce dl{ padding: 30px; border: 1px solid #EEE; border-radius: 20px; }
#overview .introduce dl dt{ font-size: 2.2rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 15px; padding-left: 18px; position: relative; }
#overview .introduce dl dt::before{ content: ""; width: 8px; height: 8px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 0; left: 0; }
#overview .introduce dl dd{ font-size: 1.8rem; font-weight: 400; color: #555; letter-spacing: -0.02em; line-height: 1.65; }
#overview .introduce dl dd em{ color: var(--mainColor); }
#overview .introduce h6{ font-size: 3rem; font-weight: 600; color: #111; letter-spacing: -0.01em; }

#overview .introduce p.right{ text-align: right; margin-top: 100px; }
#overview .introduce p.right strong{ color: inherit; }

@media screen and (max-width: 1740px){
	#overview .introduce br{ display: none; }
}

@media screen and (max-width: 1700px){	
	#overview .overview .box .txt{ padding: 40px; }
	#overview .overview .box .txt h5{ font-size: 3.5rem; }

	#overview .overview .box2 figure{ padding: 65px 40px; }

	#overview .company{ padding-bottom: 180px; }
	#overview .company .txt dl dt{ font-size: 1.8rem; }
	#overview .company .txt dl dd{ font-size: 3rem; }

	#overview .introduce p{ font-size: 1.8rem; }
	#overview .introduce dl dt{ font-size: 2rem; }
	#overview .introduce dl dd{ font-size: 1.7rem; }
	#overview .introduce h6{ font-size: 2.6rem; }

	#overview .introduce p.right{ margin-top: 60px; }
}

@media screen and (max-width: 1280px){
	#overview .overview .box .txt{ padding: 30px; }
	#overview .overview .box .txt h5{ font-size: 3rem; }

	#overview .overview .box2 figure{ padding: 45px 30px; }

	#overview .company{ padding-bottom: 120px; }
	#overview .company .sec-title{ margin-bottom: 30px; }
	#overview .company .txt dl{ margin-top: 20px; }
	#overview .company .txt dl dt{ font-size: 1.7rem; }
	#overview .company .txt dl dd{ font-size: 2.6rem; }

	#overview .introduce .flex-box .title{ width: 40%; }
	#overview .introduce .flex-box .content{ width: 60%; }
	#overview .introduce .content > *:not(:last-of-type){ margin-bottom: 30px; }
	#overview .introduce p{ font-size: 1.7rem; }
	#overview .introduce .dl{ margin-bottom: 25px; }
	#overview .introduce dl{ padding: 25px 20px; }
	#overview .introduce dl dt{ font-size: 1.8rem; margin-bottom: 5px; padding-left: 15px; }
	#overview .introduce dl dt::before{ width: 5px; height: 5px; }
	#overview .introduce dl dd{ font-size: 1.6rem; }
	#overview .introduce h6{ font-size: 2.2rem; }

	#overview .introduce p.right{ margin-top: 40px; }
}

@media screen and (max-width: 1100px){
	#overview .company br{ display: none; }
	#overview .company ul li{ width: calc((100% - 20px) / 2); }
	#overview .company ul li .squre{ padding-bottom: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
	#overview .company ul li .txt{ position: static; transform: translateY(0); padding: 30px; }

	#overview .introduce .flex-box{ flex-direction: column; }
	#overview .introduce .flex-box .title{ width: 100%; padding-right: 0; padding-bottom: 20px; }
	#overview .introduce .flex-box .content{ width: 100%; }
}

@media screen and (max-width: 900px){
	#overview .overview .box .txt h5{ font-size: 2.6rem; }

	#overview .company .txt dl dd{ font-size: 2.4rem; }
}

@media screen and (max-width: 700px){
	#overview .overview .grid-box{ grid-template-columns: 1fr; }

	#overview .overview .box1{ grid-row: 1 / 2; padding-bottom: 27%; }
}


/* ABOUT US - 대표이사 메시지 */
#ceo{ overflow: hidden; }
#ceo .flex-box{ display: flex; }
#ceo .txt{ width: calc(100% - 540px); padding-right: 150px; }
#ceo .txt h6{ font-size: 3.6rem; font-weight: 600; color: #111; letter-spacing: -0.01; line-height: 1.65; margin-bottom: 40px; }
#ceo .txt p{ font-size: 2rem; font-weight: 300; color: #333; line-height: 1.65; letter-spacing: -0.02em; }
#ceo .txt p:not(:last-of-type){ margin-bottom: 15px; }
#ceo .txt p.ceo{ color: #555; text-align: right; margin-top: 70px; }
#ceo .txt p.ceo strong{ font-size: 3rem; font-weight: 600; color: #111; margin-left: 15px; }

#ceo .img{ width: 540px; }
#ceo .img .bg{ width: 100%; height: 100%; background: url("/img/sub/about/ceo_img.jpg") no-repeat center center / cover; border-radius: 20px; }
#ceo .img.cirDeco::before{ top: unset; bottom: -10%; left: -10%; transform: translate(-50%, 50%); }

@media screen and (max-width: 1700px){
	#ceo .txt h6{ font-size: 3rem; }
	#ceo .txt p{ font-size: 1.8rem; }
	#ceo .txt p.ceo{ margin-top: 50px; }
	#ceo .txt p.ceo strong{ font-size: 2.6rem; }
}

@media screen and (max-width: 1550px){
	#ceo .txt{ padding-right: 100px; }
}

@media screen and (max-width: 1500px){
	#ceo .txt br{ display: none; }
}

@media screen and (max-width: 1280px){
	#ceo .txt h6{ font-size: 2.6rem; margin-bottom: 20px; }
	#ceo .txt p{ font-size: 1.7rem; }
	#ceo .txt p:not(:last-of-type){ margin-bottom: 10px; }
	#ceo .txt p.ceo{ margin-top: 30px; }
	#ceo .txt p.ceo strong{ font-size: 2.4rem; }
}

@media screen and (max-width: 1200px){
	#ceo .txt{ width: calc(100% - 450px); }
	#ceo .img{ width: 450px; }
}

@media screen and (max-width: 1000px){
	#ceo .flex-box{ flex-direction: column-reverse; }
	#ceo .txt{ width: 100%; padding-right: 0; padding-top: 30px; }
	#ceo .img{ width: 100%; }
	#ceo .img .bg{ padding-bottom: 65%; }
}

@media screen and (max-width: 900px){
	#ceo .txt h6{ font-size: 2.4rem; }
	#ceo .txt p.ceo strong{ font-size: 2.2rem; }
}


/* ABOUT US - 사업전략 */
#strategy{ overflow: hidden; }
#strategy .item-box{ display: flex; }
#strategy .item{ width: calc(100% / 3); text-align: center; padding: 0 30px; position: relative; z-index: 10; }
#strategy .item *{ letter-spacing: -0.02em; }
#strategy .item .box{ padding: 15px 0; position: relative; z-index: 10; }
#strategy .item .icon{ position: relative; margin-bottom: 15px; }
#strategy .item h6{ font-family: var(--engFont); font-size: 3.2rem; font-weight: 700; color: #111; }
#strategy .item h6.eng{ font-weight: 600; }
#strategy .item p{ font-size: 1.8rem; font-weight: 300; color: #333; line-height: 1.65; margin-top: 15px; }
#strategy .item p strong{ font-weight: 600; }
#strategy .item .dot{ width: 2px; height: 45px; background: var(--dot); position: absolute; left: 50%; }
#strategy .item.long .dot{ height: 175px; z-index: -5; }
#strategy .item .dot::before{ content: ""; width: 11px; height: 11px; background: #fff; border: 2px solid var(--dot); border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%); box-sizing: border-box; }

#strategy .icon-box{ display: flex; justify-content: center; }
#strategy .icon-box .icon:not(:last-of-type){ padding-right: 54px; }
#strategy .icon-box .icon::after{ content: ""; width: 24px; height: 24px; background: url("/img/sub/about/strategy_plus.png") no-repeat center center / contain; position: absolute; top: 50%; right: calc(54px / 2); transform: translate(50%, -50%); }
#strategy .icon-box .icon:last-of-type::after{ display: none; }

#strategy .gradient h6{ font-size: 4rem; font-weight: 700; color: transparent; background: linear-gradient(to right, var(--mainColor), var(--blue)); background-clip: text; -webkit-background-clip: text; padding: 0 60px; position: relative; }
#strategy .gradient h6::before, #strategy .gradient h6::after{ content: ""; width: 30px; height: 25px; position: absolute; top: 50%; transform: translateY(-50%); }
#strategy .gradient h6::before{ background: url("/img/sub/about/strategy_prev.png") no-repeat center center / contain; left: 0; }
#strategy .gradient h6::after{ background: url("/img/sub/about/strategy_next.png") no-repeat center center / contain; right: 0; }

#strategy .orange{ padding-bottom: 70px; }
#strategy .orange .item .dot{ bottom: 0; transform: translate(-50%, 100%); }
#strategy .orange .item .dot::before{ bottom: 0; }

#strategy .blue{ padding-top: 35px; }
#strategy .blue .item .dot{ top: 0; transform: translate(-50%, -100%); }
#strategy .blue .item .dot::before{ top: 0; }

#strategy .tit.cirDeco::before{ top: unset; bottom: 0; left: 150px; }
#strategy .tit .sec-title{ display: flex; justify-content: flex-end; }

@media screen and (max-width: 1700px){
	#strategy .item h6{ font-size: 2.8rem; }
	#strategy .item p{ font-size: 1.7rem; }

	#strategy .gradient h6{ font-size: 3.5rem; }
}

@media screen and (max-width: 1550px){
	#strategy .item.long .dot{ height: 145px; }
}

@media screen and (max-width: 1280px){
	#strategy .item .icon{ margin-bottom: 10px; }
	#strategy .item h6{ font-size: 2.4rem; }
	#strategy .item p{ font-size: 1.6rem; margin-top: 10px; }

	#strategy .gradient h6{ font-size: 3rem; }
}

@media screen and (max-width: 1200px){
	#strategy .item.long .dot{ height: 120px; }
}

@media screen and (max-width: 1000px){
	#strategy .graph{ display: none; }
	#strategy .item-box{ display: block; }
	#strategy .item{ width: 100%; padding: 30px; padding-bottom: 50px; padding-left: 80px; }
	#strategy .item::before{ content: ""; width: 10px; height: 100%; background: var(--bg); border-radius: 990px; position: absolute; top: 0; left: 0; }
	#strategy .item-box .item:not(:last-of-type){ margin-bottom: -20px; }

	#strategy .item .box{ max-width: 450px; margin: 0 auto; padding: 40px 30px; background: #fff; border-radius: 20px; box-shadow: 5px 5px 30px 0px rgba(15, 41, 107, 0.1); }
	#strategy .item .dot{ width: 50%; height: 2px !important; top: 50% !important; bottom: unset !important; left: 30px; transform: translateY(-50%) !important; }
	#strategy .item .dot::before{ top: 50% !important; bottom: unset !important; left: 0; transform: translateY(-50%) !important; }
}

@media screen and (max-width: 900px){
	#strategy .item h6{ font-size: 2rem; }

	#strategy .gradient h6{ font-size: 2.4rem; }
}

@media screen and (max-width: 600px){
	#strategy .tit br{ display: none; }
}



/* ABOUT US - 연혁 */
#history .sticky-tab{ margin-bottom: 170px; }
#history .section-wrap{ position: relative; }
#history .section-wrap  section:not(:last-of-type){ padding-bottom: 240px; }
#history .flex-box{ display: flex; overflow: hidden; }
#history .flex-box > div{ width: 50%; }

#history .line{ --dot: 30px; --plus: 50px; width: 10px; height: 100%; background: linear-gradient(to bottom, #EEE 95%, rgba(238, 238, 238, 0)); position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
#history .line .bar{ width: 100%; height: 0; min-height: 250px; background: var(--mainColor); position: relative; }
#history .line .bar .dot{ width: var(--dot); height: var(--dot); background: var(--mainColor); border-radius: 50%; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 5%); }
#history .line .bar .dot::before, #history .line .bar .dot::after, #history .line .bar .dot .border{ border: 1px solid var(--mainColor); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#history .line .bar .dot::before, #history .line .bar .dot::after{ content: ""; }
#history .line .bar .dot::before{ width: calc(var(--dot) + var(--plus)); height: calc(var(--dot) + var(--plus)); opacity: 0.5; }
#history .line .bar .dot::after{ width: calc(var(--dot) + (var(--plus) * 2)); height: calc(var(--dot) + (var(--plus) * 2)); opacity: 0.3; }
#history .line .bar .dot .border{ width: calc(var(--dot) + (var(--plus) * 3)); height: calc(var(--dot) + (var(--plus) * 3)); opacity: 0.1; }

#history .img{ padding-right: 110px; }
#history .img .bg{ position: relative; padding-bottom: 81.083%; border-radius: 20px; overflow: hidden; }
#history .img .bg img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#history .img .bg span{ font-family: var(--engFont); font-size: 6.4rem; font-weight: 500; color: #fff; text-align: right; position: absolute; top: 0; right: 0; padding: 30px; }

#history .txt{ padding-left: 145px; }
#history .page-title{ margin-bottom: 60px; }
#history .txt .page-title h3{ text-align: left; }
#history .txt dl *{ font-size: 2rem; letter-spacing: -0.02em; line-height: 1.4; }
#history .txt dl{ display: flex; flex-wrap: wrap; }
#history .txt dl:not(:last-of-type){ margin-bottom: 60px; }
#history .txt dl dt, #history .txt dl dd span{ font-family: var(--engFont); }
#history .txt dl dt{ width: 80px; font-weight: 700; color: var(--mainColor); }
#history .txt dl dd{ width: calc(100% - 80px); margin-left: auto; padding-left: 50px; position: relative; }
#history .txt dl dd:not(:last-of-type){ margin-bottom: 30px; }
#history .txt dl dd span{ display: inline-block; font-weight: 600; color: #AAA; position: absolute; top: 0; left: 0; }
#history .txt dl dd p{ font-weight: 300; color: #333; }
#history .txt dl dd p:not(:last-of-type){ margin-bottom: 20px; }

@media screen and (max-width: 1700px){	
	#history .sticky-tab{ margin-bottom: 100px; }
	#history .section-wrap  section:not(:last-of-type){ padding-bottom: 180px; }

	#history .img .bg span{ font-size: 5rem; }

	#history .txt dl *{ font-size: 1.8rem; }
}

@media screen and (max-width: 1400px){
	#history .line{ --dot: 20px; --plus: 34px; width: 6px; }
	
	#history .txt{ padding-left: 110px; }
}

@media screen and (max-width: 1280px){
	#history .sticky-tab{ margin-bottom: 60px; }
	#history .section-wrap  section:not(:last-of-type){ padding-bottom: 100px; }

	#history .line .bar{ min-height: 180px; }

	#history .img{ padding-right: 80px; }
	#history .img .bg span{ font-size: 4rem; }

	#history .txt{ padding-left: 80px; }
	#history .page-title{ margin-bottom: 30px; }
	#history .txt dl:not(:last-of-type){ margin-bottom: 40px; }
	#history .txt dl dd:not(:last-of-type){ margin-bottom: 20px; }
	#history .txt dl dd p:not(:last-of-type){ margin-bottom: 10px; }
}

@media screen and (max-width: 1000px){
	#history .sticky-tab{ margin-bottom: 30px; }
	#history .flex-box{ flex-direction: column; }
	#history .flex-box > div{ width: 100%; }
	
	#history .line{ display: none; }

	#history .img{ padding-right: 0; }

	#history .txt{ padding-left: 0; margin-top: 20px; }
	#history .page-title{ margin-bottom: 20px; }
	#history .page-title h3{ font-size: 3rem; }
	#history .txt dl dt{ width: 60px; }
	#history .txt dl dd{ width: calc(100% - 60px); padding-left: 40px; }
}

@media screen and (max-width: 900px){
	#history .img .bg span{ font-size: 3rem; }
}


/* ABOUT US - 찾아오시는 길 */
#location{ overflow: hidden; }
#location .page-title{ margin-bottom: 50px; }
#location .page-title h3{ text-align: left; }
#location .page-title h3 span{ font-size: 3rem; font-weight: 700; color: var(--mainColor); margin-left: 20px; }
#location ul{ display: flex; flex-wrap: wrap; gap: 30px 0; position: relative; margin-bottom: -20px; }
#location ul::before{ content: ""; width: 6px; height: 100%; background: #EEE; position: absolute; top: 0; left: 0; }
#location ul li{ width: calc(100% / 4); padding-left: 30px; }
#location dl *{ font-size: 2rem; color: #333; letter-spacing: -0.02em; }
#location dl dt{ font-family: var(--engFont); font-weight: 700; }
#location dl dd{ font-weight: 300; line-height: 1.4; }

#location .map{ height: 600px; border-radius: 20px; overflow: hidden; margin-top: 50px; }
#location .map iframe{ width: 100%; height: 100%; }

@media screen and (max-width: 1700px){
	#location .page-title h3 span{ font-size: 2.6rem; }

	#location dl *{ font-size: 1.8rem; }
}

@media screen and (max-width: 1280px){
	#location .page-title{ margin-bottom: 25px; }
	#location .page-title h3 span{ font-size: 2.2rem; margin-left: 15px; }

	#location ul::before{ width: 4px; }
	#location ul li{ padding-left: 20px; }
	#location dl *{ font-size: 1.7rem; }
	#location dl dt{ margin-bottom: 10px; }

	#location .map{ height: 500px; }
}

@media screen and (max-width: 1120px){
	#location dl br{ display: none; }
}

@media screen and (max-width: 1000px){
	#location ul{ gap: 30px 5px; }
	#location ul li{ width: calc((100% - 5px) / 2); }

	#location .map{ height: 450px; }
}

@media screen and (max-width: 900px){
	#location .page-title h3 span{ font-size: 2rem; }

	#location ul li{ padding-left: 18px; }
	#location dl *{ font-size: 1.6rem; }
}

@media screen and (max-width: 500px){
	#location ul{ flex-direction: column; gap: 15px; }
	#location ul li{ width: 100%; }
	#location ul li br{ display: none; }
	#location dl dt{ margin-bottom: 0px; }
}


/* PIPELINE - 핵심 약효물질 */
#core{ overflow: hidden; }
#core .flex-box{ display: flex; justify-content: space-between; }
#core section:nth-of-type(even) .flex-box{ flex-direction: row-reverse; }

#core .diagram{ width: 50%; display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 20px; box-shadow: 5px 5px 30px 0px rgba(15, 41, 107, 0.08); padding: 70px 40px; }

#core .text{ width: calc(50% - 100px); display: flex; justify-content: center; align-items: center; padding-left: 30px; }
#core .text h4{ font-family: var(--engFont); font-size: 6rem; font-weight: 700; color: #000; letter-spacing: -0.01em; position: relative; }
#core .text h4::before{ content: ""; width: 8px; height: 8px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 0; left: -30px; }
#core .text p.color{ font-size: 2rem; font-weight: 600; color: var(--mainColor); letter-spacing: -0.01em; margin-top: 10px; }
#core .text .p-box{ margin-top: 50px; }
#core .text .p-box p{ font-size: 1.7rem; font-weight: 400; color: #333; letter-spacing: -0.01; line-height: 1.65; }
#core .text .p-box p:not(:last-of-type){ margin-bottom: 20px; }

#core .cirDeco::before{  transform: translate(-50%, 20%); }

@media screen and (max-width: 1700px){
	#core .text h4{ font-size: 5rem; }
	#core .text p.color{ font-size: 1.8rem; }
}

@media screen and (max-width: 1400px){
	#core .diagram{ padding: 40px; }
	#core .text{ width: calc(50% - 50px); }
}

@media screen and (max-width: 1280px){
	#core .pb100{ padding-bottom: 80px; }

	#core .text h4{ font-size: 4rem; }
	#core .text p.color{ font-size: 1.7rem; }
	#core .text .p-box{ margin-top: 30px; }
	#core .text .p-box p{ font-size: 1.6rem; }
}

@media screen and (max-width: 1200px){
	#core .flex-box{ flex-direction: column !important; }
	#core .diagram{ width: 100%; padding: 30px; }
	#core .text{ width: 100%; margin-top: 40px; }
}

@media screen and (max-width: 900px){
	#core .text{ padding-left: 15px; }
	#core .text h4{ font-size: 3rem; }
	#core .text h4::before{ left: -15px; }
}


/* PIPELINE - table 공통 */
#pipeline .blur-box{ border-radius: 20px; background: #fff; box-shadow: var(--blueShadow); }
#pipeline .padding-box{ padding: 30px; }

#pipeline .table-box{ padding-bottom: 1px; }
#pipeline .table-box table{ width: calc(100% - 1px); }
#pipeline .table-box colgroup col:nth-of-type(1){ width: 20%; }
#pipeline .table-box colgroup col:nth-of-type(2){ width: 30%; }
#pipeline .table-box colgroup col:nth-of-type(3){ width: 20%; }
#pipeline .table-box colgroup col:nth-of-type(4){ width: 40%; }

#pipeline .table-box .flex{ display: flex; }
#pipeline .table-box .flex span{ display: inline-block; width: calc(100% / 4); padding: 0 10px; }
#pipeline .table-box .radius0::before{ border-radius: 0 !important; }
#pipeline .table-box .radius20::before{ border-radius: var(--radius) !important; }
#pipeline .table-box .padding0{ padding: 0; }

#pipeline .table-box tbody tr{ opacity: 1; }
#pipeline .table-box tbody td{ font-size: 1.8rem; font-weight: 600; color: #333; position: relative; padding: 25px 10px; }
#pipeline .table-box tbody td::before{ content: ""; width: calc(100% + 1px); height: calc(100% + 1px); border: 1px solid #DDD; position: absolute; top: 0; left: 0; box-sizing: border-box; }
#pipeline .table-box tbody td span{ display: block; font-weight: 300; }

#pipeline .table-box tbody tr:first-of-type td:first-of-type::before{ border-radius: 20px 0 0 0; }
#pipeline .table-box tbody tr:first-of-type td:last-of-type::before{ border-radius: 0 20px 0 0; }
#pipeline .table-box tbody tr:last-of-type td:first-of-type::before{ border-radius: 0 0 0 20px; }
#pipeline .table-box tbody tr:last-of-type td:last-of-type::before{ border-radius: 0 0 20px 0; }
#pipeline .table-box tbody tr:only-child td:first-of-type::before{ border-radius: 20px 0 0 20px; }
#pipeline .table-box tbody tr:only-child td:last-of-type::before{ border-radius: 0 20px 20px 0; }

#pipeline .table-box ul li::before{ content: ""; width: 1px; height: 100%; background: #DDD; position: absolute; top: 50%; transform: translateY(-50%); }
#pipeline .table-box ul li:nth-of-type(1)::before{ left: 25%; }
#pipeline .table-box ul li:nth-of-type(2)::before{ left: 50%; }
#pipeline .table-box ul li:nth-of-type(3)::before{ left: 75%; }
#pipeline .table-box ul li:last-of-type::before{ display: none; }

#pipeline .table-box .gauge{ min-height: 100px; position: relative; }
#pipeline .table-box .gauge::before{ content: ""; width: 0; height: 30px; background: linear-gradient(to right, var(--mainColor), var(--blue)); border-radius: 0 20px 20px 0; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: width 1s; }
#pipeline .table-box tbody tr.aos-animate .gauge::before{ width: var(--gauge); }

#pipeline .table-box + .dot-list{ margin-top: 30px; }
#pipeline .table-box + .dot-list li:not(:last-of-type){ margin-bottom: 15px; }

#pipeline .table-box + .dot-list.half{ display: flex; flex-wrap: wrap; justify-content: space-between; }
#pipeline .table-box + .dot-list.half li{ width: calc((100% - 20px) / 2); }

@media screen and (max-width: 1700px){
	#pipeline .table-box tbody td{ font-size: 1.7rem; padding: 20px 10px; }

	#pipeline .table-box .gauge{ min-height: 80px; }
	#pipeline .table-box .gauge::before{ height: 25px; }
}

@media screen and (max-width: 1280px){
	#pipeline .padding-box{ padding: 20px; }

	#pipeline .table-box tbody td{ font-size: 1.6rem; padding: 15px 10px; }

	#pipeline .table-box .gauge::before{ height: 20px; }

	#pipeline .table-box + .dot-list{ margin-top: 20px; }
	#pipeline .table-box + .dot-list li{ font-size: 1.5rem; }
	#pipeline .table-box + .dot-list li:not(:last-of-type){ margin-bottom: 10px; }
}

@media screen and (max-width: 1120px){
	#pipeline .table-box table{ min-width: 1000px; }
}

@media screen and (max-width: 1000px){
	#pipeline .table-box + .dot-list.half li{ width: 100%; }
}


/* PIPELINE - 공통 */
#pipeline{ overflow: hidden; }
#pipeline .intro.cirDeco::before{ top: unset; bottom: 15%; left: unset; right: 5%; transform: translateY(50%); }
#pipeline .intro .flex-box{ display: flex; }
#pipeline .intro .flex-box > div{ width: 50%; }

#pipeline .intro .img .bg{ position: relative; height: 100%; padding-bottom: 44.706%; overflow: hidden; border-radius: 20px; }
#pipeline .intro .img .bg img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#pipeline .intro .text{ padding-left: 110px; display: flex; align-items: center; }
#pipeline .intro .p-box p{ font-size: 2rem; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.65; }
#pipeline .intro .p-box p:not(:last-of-type){ margin-bottom: 20px; }
#pipeline .intro p.ex{ font-size: 1.8rem; font-weight: 400; color: #777; letter-spacing: -0.02em; line-height: 1.65; padding-left: 45px; position: relative; padding-top: calc((30px - 1.65em) / 2); margin-top: 20px; }
#pipeline .intro p.ex::before{ content: "ex"; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 50%; font-family: var(--engFont); font-size: 1.5rem; font-weight: 600; color: #fff; position: absolute; top: 0; left: 0; }


#pipeline .clinical .blueBg{ background: rgba(15, 41, 107, 0.05); }
#pipeline .clinical h5{ font-size: 4.8rem; font-weight: 600; color: #111; letter-spacing: -0.02em; text-align: center; margin-bottom: 40px; }
#pipeline .clinical h6{ font-size: 2.4rem; font-weight: 600; color: #111; letter-spacing: -0.02em; }
#pipeline .clinical h6.mb20{ margin-bottom: 20px; }

#pipeline .clinical  .info{ padding: 20px 0; }
#pipeline .clinical .grid-box{ display: grid; grid-template-columns: repeat(4, 1fr); margin: -10px; }
#pipeline .clinical .grid-box.five{ grid-template-columns: repeat(5, 1fr); }
#pipeline .clinical .grid-box .item{ align-content: center; background: #fff; border: 1px solid #EEE; border-radius: 20px; padding: 25px; padding-top: 40px; text-align: center; margin: 10px; }
#pipeline .clinical .grid-box .item.orange{ border: 1px solid var(--mainColor); grid-column: auto / span 2; }
#pipeline .clinical .grid-box .item.text{ border: none; }
#pipeline .clinical .grid-box .item h6{ margin-bottom: 5px; }
#pipeline .clinical .grid-box .item p{ font-size: 1.8rem; font-weight: 300; color: #333; letter-spacing: -0.01em; margin-top: 15px; }
#pipeline .clinical .grid-box .item a{ margin: 0 auto; font-size: 1.6rem; }

#pipeline .clinical .mark{ padding: 20px 0; }
#pipeline .clinical .mark .grid-box{ grid-template-columns: repeat(5, 1fr); }
#pipeline .clinical .mark .grid-box .item{ padding: 15px; }
#pipeline .clinical .mark .grid-box .text{ grid-column: auto / span 3; display: flex; justify-content: center; align-items: center; text-align: left; }

@media screen and (max-width: 1700px){
	#pipeline .intro .p-box p{ font-size: 1.8rem; }
	#pipeline .intro p.ex{ font-size: 1.7rem; }

	#pipeline .clinical h5{ font-size: 4rem; }
	#pipeline .clinical h6{ font-size: 2.2rem; }
	#pipeline .clinical .grid-box .item p{ font-size: 1.7rem; }
	#pipeline .clinical .grid-box .item a{ font-size: 1.5rem; }
}

@media screen and (max-width: 1550px){
	#pipeline .intro br{ display: none; }
}

@media screen and (max-width: 1280px){
	#pipeline .intro .text{ padding-left: 70px; }
	#pipeline .intro .p-box p{ font-size: 1.7rem; }
	#pipeline .intro p.ex{ font-size: 1.6rem; }

	#pipeline .clinical h5{ font-size: 3.5rem; margin-bottom: 20px; }
	#pipeline .clinical h6{ font-size: 2rem; }

	#pipeline .clinical .grid-box.five{ grid-template-columns: repeat(3, 1fr); }
	#pipeline .clinical .grid-box .item{ padding: 20px 10px 10px; margin: 5px; }
	#pipeline .clinical .grid-box .item p{ font-size: 1.6rem; margin-top: 10px; }
	#pipeline .clinical .grid-box .item a{ font-size: 1.4rem; }
	
	#pipeline .clinical .mark .grid-box{ grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 1100px){
	#pipeline .intro .flex-box{ flex-direction: column; }
	#pipeline .intro .flex-box > div{ width: 100%; }
	#pipeline .intro .text{ padding-left: 0; padding-top: 30px; }
}

@media screen and (max-width: 1000px){
	#pipeline .clinical .grid-box{ grid-template-columns: repeat(2, 1fr); }
	#pipeline .clinical .grid-box .item.orange{ grid-column: unset; }
}

@media screen and (max-width: 900px){
	#pipeline .clinical h5{ font-size: 3rem; }
	#pipeline .clinical h6:not(.mb20){ font-size: 1.7rem; }

	#pipeline .clinical .grid-box.five{ grid-template-columns: repeat(2, 1fr); }
}


/* PIPELINE - 진행상황 */
#progress{ overflow: hidden; }
#progress .cirDeco::before{ transform: translate(-50%, -50%); }


/* BUSINESS - 사업소개 */
#business{ overflow: hidden; }

#business .video .iframe{ position: relative; overflow: hidden; padding-bottom: 50%; border-radius: 20px; }
#business .video .iframe iframe{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#business .bg-motion{ --top: 345px; --bottom: 345px; }
#business .bg-motion .txt h4{ font-weight: 500; }
#business .bg-motion .img{ background: url("/img/sub/business/introduce_bg.jpg") no-repeat center center / cover; }

#business .benefit .sec-title{ text-align: center; margin-bottom: 100px; }
#business .benefit ul li{ display: flex; }
#business .benefit ul li:nth-of-type(even){ flex-direction: row-reverse; }
#business .benefit ul li > div{ width: 50%; opacity: 0; opacity: transform 1s, opacity 1s; }

#business .benefit ul li .img .bg{ position: relative; padding-bottom: 44.706%; height: 100%; overflow: hidden; border-radius: 20px; }
#business .benefit ul li .img .bg img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#business .benefit ul li .text{ display: flex; align-items: center; }
#business .benefit ul li:nth-of-type(odd) .text{ padding-left: 110px; }
#business .benefit ul li:nth-of-type(even) .text{ padding-right: 110px; }

#business .benefit ul li:nth-of-type(odd) .img{ transform: translateX(var(--aosMinus)); }
#business .benefit ul li:nth-of-type(odd) .text{ transform: translateX(var(--aosPlus)); }
#business .benefit ul li:nth-of-type(even) .img{ transform: translateX(var(--aosPlus)); }
#business .benefit ul li:nth-of-type(even) .text{ transform: translateX(var(--aosMinus)); }

#business .benefit ul li > div.aos-animate{ opacity: 1; transform: translateX(0) !important; }

#business .benefit dl dt{ font-size: 3rem; font-weight: 600; color: #333; letter-spacing: -0.02em; }
#business .benefit dl dd{ font-size: 2rem; font-weight: 300; color: #555; letter-spacing: -0.02em; line-height: 1.65; margin-top: 20px; }

#business .process{ background: #F6F6F6; }
#business .process .sec-title{ text-align: center; margin-bottom: 125px; }
#business .process .flex-box{ display: flex; flex-wrap: wrap; margin-bottom: -65px; }
#business .process .item{ max-width: calc((100% - 240px) / 3); width: 200px; background: #fff; border-radius: 10px; text-align: center; padding: 30px; padding-top: 55px; position: relative; margin-bottom: 65px; }
#business .process .item::after{ content: ""; width: 26px; height: 40px; background: url("/img/sub/business/process_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; left: -40px; transform: translate(-50%, -50%); }
#business .process .item:first-of-type::after{ display: none; }
#business .process .item:not(:first-of-type){ margin-left: 80px; }
#business .process .item span{ width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; background: var(--mainColor); border-radius: 50%; font-size: 2rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }
#business .process .item p{ font-size: 2rem; font-weight: 600; color: #000; letter-spacing: -0.02em; line-height: 1.5; margin-top: 30px; }

#business .system .sec-title{ margin-bottom: 100px; text-align: center; }
#business .system .shadow{ box-shadow: 5px 5px 30px rgba(15, 41, 107, 0.08); border-radius: 20px; padding: 60px; }
#business .system .flex-box{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: -20px; }
#business .system .item{ width: calc((100% - 60px) / 4); border: 4px solid #F8F8F8; border-radius: 20px; padding: 60px 40px; text-align: center; margin-right: 20px; margin-bottom: 20px; }
#business .system .item:nth-of-type(4n){ margin-right: 0; }
#business .system .item p{ font-size: 3rem; font-weight: 700; color: #111; letter-spacing: -0.02em; margin: 40px 0 30px; }
#business .system .item .dot-list{ --color: #777; text-align: left; }
#business .system .item .dot-list li{ line-height: 1.5; }
#business .system .item .dot-list li:not(:last-of-type){ margin-bottom: 10px; }
#business .system .item .dot-list li::before{ top: calc(1.5em / 2); }


@media screen and (max-width: 1700px){
	#business .benefit .sec-title{ margin-bottom: 70px; }
	#business .bg-motion{ --top: 200px; --bottom: 200px; }

	#business .benefit ul li:nth-of-type(odd) .text{ padding-left: 90px; }
	#business .benefit ul li:nth-of-type(even) .text{ padding-right: 90px; }

	#business .benefit dl dt{ font-size: 2.6rem; }
	#business .benefit dl dd{ font-size: 1.8rem; }

	#business .process .sec-title{ margin-bottom: 90px; }
	#business .process .item span{ width: 40px; height: 40px; font-size: 1.8rem; }
	#business .process .item p{ font-size: 1.8rem; }

	#business .system .sec-title{ margin-bottom: 70px; }
	#business .system .shadow{ padding: 40px; }
	#business .system .item{ padding: 40px 30px; }
	#business .system .item p{ font-size: 2.6rem; margin: 30px 0 20px; }
}

@media screen and (max-width: 1350px){
	#business .system .item{ width: calc((100% - 40px) / 3); }
	#business .system .item:nth-of-type(4n){ margin-right: 20px; }
	#business .system .item:nth-of-type(3n){ margin-right: 0; }
}

@media screen and (max-width: 1280px){
	#business .benefit .sec-title{ margin-bottom: 40px; }
	#business .bg-motion{ --top: 100px; --bottom: 100px; }

	#business .benefit ul li:nth-of-type(odd) .text{ padding-left: 70px; }
	#business .benefit ul li:nth-of-type(even) .text{ padding-right: 70px; }

	#business .benefit dl dt{ font-size: 2.2rem; }
	#business .benefit dl dd{ font-size: 1.7rem; margin-top: 10px; }

	#business .process .sec-title{ margin-bottom: 40px; }
	#business .process .item{ padding-top: 40px; }
	#business .process .item span{ width: 35px; height: 35px; font-size: 1.7rem; }
	#business .process .item p{ font-size: 1.7rem; margin-top: 15px; }

	#business .system .sec-title{ margin-bottom: 30px; }
	#business .system .shadow{ padding: 25px; }
	#business .system .item{ padding: 30px 25px; }
	#business .system .item p{ font-size: 2.2rem; margin: 20px 0 10px; }
}

@media screen and (max-width: 1100px){
	#business .bg-motion br{ display: none; }
}

@media screen and (max-width: 1000px){
	#business .benefit ul li{ flex-direction: column !important; }
	#business .benefit ul li > div{ width: 100%; }
	#business .benefit ul li .text{ padding-top: 30px; }
	#business .benefit ul li:nth-of-type(odd) .text{ padding-left: 0; }
	#business .benefit ul li:nth-of-type(even) .text{ padding-right: 0; }
}

@media screen and (max-width: 900px){
	#business .benefit dl dt{ font-size: 2rem; }

	#business .process .flex-box{ margin-bottom: -40px; }
	#business .process .item{ max-width: calc((100% - 150px) / 3); width: 100%; margin-bottom: 40px; }
	#business .process .item:not(:first-of-type){ margin-left: 50px; }
	#business .process .item::after{ left: -25px; }

	#business .system .item{ width: calc((100% - 20px) / 2); }
	#business .system .item:nth-of-type(3n){ margin-right: 20px; }
	#business .system .item:nth-of-type(2n){ margin-right: 0; }
}

@media screen and (max-width: 600px){
	#business .system .item{ width: 100%; margin-right: 0 !important; }
}

@media screen and (max-width: 530px){
	#business .process .item{ max-width: 100%; width: calc((100% - 100px) / 2); padding: 20px 30px; padding-top: 40px; transition-delay: unset !important; }
	#business .process .item:nth-of-type(even){ transition-delay: 150ms !important; }
}


/* BUSINESS - 지역별 센터 */
#center .flex-box{ display: flex; }
#center .flex-box > div{ width: 50%; }

#center .sec-title span{ display: block; font-size: 2rem; font-weight: 600; color: var(--mainColor); }
#center .sec-title h4{ margin: 30px 0 10px; }
#center .sec-title p{ font-size: 3.6rem; font-weight: 500; color: #333; letter-spacing: -0.02em; line-height: 1.6; }
#center .sec-title p strong{ font-weight: 700; }

#center .map .sticky{ position: sticky; top: calc(var(--headerH) + 30px); left: 0; }
#center .map .shadow{ height: calc(100vh - var(--headerH) - 60px); display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 20px; box-shadow: var(--blueShadow); padding: 40px; }
#center .map .svg{ max-width: 100%; max-height: 100%; width: auto; height: auto; }
#center .map .svg text{ font-family: var(--baseFont); font-size: 20px; font-weight: 700; fill: #111; line-height: 1.3; }
#center .map .svg .pointer{ cursor: pointer; }
#center .map .svg .flag{ opacity: 0; pointer-events: none; transition: opacity 0.5s; }

#center .map .svg .areas.active .flag{ opacity: 1; pointer-events: auto; }

#center .area{ padding-left: 110px; }
#center .area .tab{ border-bottom: 1px solid #EEE; }
#center .area .tit{ padding: 40px 0; cursor: pointer; }
#center .area .tit h6{ font-size: 4rem; font-weight: 600; color: #111; padding-right: 40px; position: relative; }
#center .area .tit h6::after{ content: ""; width: 20px; height: 10px; background: url("/img/sub/business/center_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(0); transition: transform 0.5s; }

#center .area .active .tit h6::after{ transform: translateY(-50%) rotate(-180deg); }

#center .area .content{ padding-bottom: 40px; display: none; }
#center .area .content .dl dl{ display: flex; }
#center .area .content .dl dl.align{ align-items: center; }
#center .area .content .dl dl:not(:last-of-type){ margin-bottom: 20px; }
#center .area .content .dl dl *{ font-size: 2rem; letter-spacing: -0.02em; }
#center .area .content .dl dl dt{ width: 95px; font-weight: 700; color: #999; }
#center .area .content .dl dl dd{ width: calc(100% - 95px); font-weight: 300; color: #333; }

#center .area .content .icon-box{ display: flex; flex-wrap: wrap; margin-bottom: -10px; }
#center .area .content .icon-box .item{ width: calc((100% - 40px) / 5); margin-right: 10px; margin-bottom: 10px; text-align: center; }
#center .area .content .icon-box .item:nth-of-type(5n){ margin-right: 0; }
#center .area .content .icon-box .item p{ font-size: 1.8rem; margin-top: 15px; }

#center .area .content .gallery{ margin-top: 60px; }
#center .area .content .gallery ul{ display: grid; grid-template-columns: repeat(2, 1fr); margin: -10px; }
#center .area .content .gallery ul li{ margin: 10px; }
#center .area .content .gallery ul li figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 65%; border-radius: 20px; }
#center .area .content .gallery ul li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media screen and (max-width: 1700px){
	#center .sec-title span{ font-size: 1.8rem; }
	#center .sec-title h4{ margin: 20px 0 10px; }
	#center .sec-title p{ font-size: 3rem; }
	
	#center .area{ padding-left: 80px; }
	#center .area .tit{ padding: 30px 0; }
	#center .area .tit h6{ font-size: 3.5rem; }

	#center .area .content .dl dl *{ font-size: 1.8rem; }
	#center .area .content .icon-box .item p{ font-size: 1.6rem; }
}

@media screen and (max-width: 1280px){
	#center .sec-title span{ font-size: 1.7rem; }
	#center .sec-title h4{ margin: 10px 0 5px; }
	#center .sec-title p{ font-size: 2.6rem; }
	
	#center .area .tit{ padding: 20px 0; }
	#center .area .tit h6{ font-size: 3rem; }
	#center .area .tit h6::after{ width: 15px; }

	#center .area .content{ padding-bottom: 20px; }
	#center .area .content .dl dl:not(:last-of-type){ margin-bottom: 15px; }
	#center .area .content .dl dl *{ font-size: 1.7rem; }
	#center .area .content .dl dl dt{ width: 70px; }
	#center .area .content .dl dl dd{ width: calc(100% - 70px); }
	#center .area .content .icon-box .item p{ font-size: 1.5rem; }

	#center .area .content .gallery{ margin-top: 30px; }
}

@media screen and (max-width: 1200px){
	#center .flex-box{ flex-direction: column; }
	#center .flex-box > div{ width: 100%; }

	#center .map .shadow{ height: auto; }

	#center .area{ padding-left: 0; padding-top: 30px; }
	#center .area .content .icon-box{ grid-template-columns: repeat(auto-fill, minmax(100px, auto)) }
}

@media screen and (max-width: 900px){
	#center .sec-title span{ font-size: 1.6rem; }
	#center .sec-title p{ font-size: 2.2rem; }

	#center .area .tit h6{ font-size: 2.6rem; }
}

@media screen and (max-width: 700px){
	#center .sec-title br{ display: none; }
} 

@media screen and (max-width: 600px){
	#center .area .content .dl dl{ flex-direction: column; align-items: flex-start !important; }
	#center .area .content .dl dl dd{ width: 100%; padding-top: 5px; }

	#center .area .content .dl dl.align{ padding-top: 10px; }
	#center .area .content .dl dl.align dd{ padding-top: 10px; }

	#center .area .content .icon-box .item{ width: calc((100% - 30px) / 4); }
	#center .area .content .icon-box .item:nth-of-type(5n){ margin-right: 10px; }
	#center .area .content .icon-box .item:nth-of-type(4n){ margin-right: 0; }
	/* #center .area .content .icon-box{ grid-template-columns: repeat(5, 1fr); } */
}


/* IR행사 */
#ir{ overflow: hidden; }
#ir .grid-layout{ display: grid; grid-template-columns: 700px calc(100% - 700px); }
#ir .grid-layout .left{ padding-right: 100px; }

#ir dl dt{ background: #F5F5F5; border-radius: 10px; font-size: 2.2rem; font-weight: 600; color: #333; letter-spacing: -0.02em; text-align: center; padding: 20px; }
#ir dl dd{ border-bottom: 1px solid #DDD; padding: 50px; }
#ir dl dd h6{ font-size: 2.6rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 20px; }
#ir dl dd p{ font-size: 1.8rem; font-weight: 400; color: #555; letter-spacing: -0.02em; }
#ir dl dd strong{ display: inline-block; font-weight: 600; padding-right: 10px; }

@media screen and (max-width: 1700px){
	#ir .grid-layout{ grid-template-columns: 550px calc(100% - 550px); }

	#ir dl dt{ font-size: 2rem; }
	#ir dl dd{ padding: 40px; }
	#ir dl dd h6{ font-size: 2.3rem; }
	#ir dl dd p{ font-size: 1.7rem; }
}

@media screen and (max-width: 1280px){
	#ir .grid-layout{ grid-template-columns: 400px calc(100% - 400px); }

	#ir dl dt{ font-size: 1.9rem; padding: 12px; }
	#ir dl dd{ padding: 25px; }
	#ir dl dd h6{ font-size: 2.1rem; margin-bottom: 10px; }
	#ir dl dd p{ font-size: 1.6rem; }
}

@media screen and (max-width: 1200px){
	#ir .grid-layout{ display: block; }
	#ir .sec-title{ margin-bottom: 15px; }
}

@media screen and (max-width: 900px){
	#ir .sec-title h4{ font-size: 2.4rem; }

	#ir dl dt{ font-size: 1.8rem; }
	#ir dl dd{ padding: 20px 15px; }
	#ir dl dd h6{ font-size: 1.9rem; }
}


/* ESG - 대표이사 ESG 메시지 */
#message{ padding-bottom: 0; }
#message .message{ background: url("/img/sub/esg/message_bg.jpg") no-repeat left top / cover; padding-bottom: 345px; position: relative; }
#message .message *{ color: #fff !important; }
#message .message .flex-box{ display: flex; justify-content: flex-end; }
#message .message .sec-title{ margin-bottom: 50px; }
#message .message p{ font-size: 2rem; font-weight: 200; letter-spacing: -0.02em; line-height: 1.65; }
#message .message p.ceo{ text-align: right; margin-top: 50px; }
#message .message p.ceo strong{ font-size: 3rem; font-weight: 600; margin-left: 15px; }
#message .message .right p:not(:last-of-type){ margin-bottom: 15px; }

@media screen and (max-width: 1700px){
	#message .message{ padding-bottom: 200px; }
	#message .message p{ font-size: 1.8rem; }
	#message .message p.ceo strong{ font-size: 2.6rem; }
}

@media screen and (max-width: 1280px){
	#message .message{ padding-bottom: 140px; }
	#message .message .sec-title{ margin-bottom: 30px; }
	#message .message p{ font-size: 1.7rem; }
	#message .message p.ceo{ margin-top: 30px; }
	#message .message p.ceo strong{ font-size: 2.2rem; margin-left: 10px; }
	#message .message .right p:not(:last-of-type){ margin-bottom: 10px; }
}

@media screen and (max-width: 900px){
	#message .message::before{ content: ""; background: rgba(0, 0, 0, 0.4); position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
}

@media screen and (max-width: 800px){
	#message br{ display: none; }
}


/* ESG - ESG 추진 체계 */
#propulsion{ overflow: hidden; }
#propulsion .bg-motion{ --top: 220px; --bottom: 240px; }
#propulsion .bg-motion .img{ background: url("/img/sub/esg/propulsion_bg.jpg") no-repeat center center / cover; }

#propulsion .flex-layout h6{ font-size: 2.4rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 20px; }
#propulsion .flex-layout .dot-list li:not(:last-of-type){ margin-bottom: 10px; }

@media screen and (max-width: 1700px){
	#propulsion .flex-layout h6{ font-size: 2.2rem; }
}

@media screen and (max-width: 1350px){
	#propulsion br{ display: none; }
}

@media screen and (max-width: 1280px){
	#propulsion .bg-motion{ --top: 100px; --bottom: 100px; }

	#propulsion .flex-layout .tit-box{ padding-bottom: 10px; }
	#propulsion .flex-layout h6{ font-size: 2rem; margin-bottom: 10px; }
}

@media screen and (max-width: 900px){
	#propulsion .flex-layout h6{ font-size: 1.9rem; }
}


/* ESG - ESG 비전 및 핵심전략 과제 */
#vision .motion{ height: calc(var(--vh) * 2); position: relative; z-index: 10; opacity: 1; }
#vision .motion .sticky{ height: var(--vh); position: sticky; top: 0; left: 0; }
#vision .motion .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; color: #111; transition: color 1s; }
#vision .motion .text *{ opacity: 1; transition: unset; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
#vision .motion .text span{ display: block; font-size: 2.4rem; font-weight: 400; letter-spacing: -0.05em; }
#vision .motion .text h1{ font-size: 11rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 20px; }

#vision .motion .bg{ background: url("/img/sub/esg/vision_bg.jpg") no-repeat center center / cover; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -5; clip-path: circle(0% at 50% 100%); -webkit-clip-path: circle(0% at 50% 100%); transition: clip-path 3s; }

#vision .motion.aos-animate .text{ color: #fff; transition-delay: 1s; }
#vision .motion.aos-animate .text *{ animation: textClip 1s forwards; }
#vision .motion.aos-animate .bg{ clip-path: circle(200% at 50% 50%); -webkit-clip-path: circle(200% at 50% 50%); transition-delay: 1s; }

#vision .layout{ padding-top: 80px; }
#vision .layout section:not(.sticky){ overflow: hidden; }
#vision .layout .content-box .sec:not(:last-of-type){ margin-bottom: 90px; }
#vision .layout .sticky .sec-title{ position: sticky; top: calc(var(--headerH) + 80px); left: 0; }
#vision .layout p{ font-size: 2rem; font-weight: 300; color: #333; letter-spacing: -0.02em; margin-top: 20px; }

#vision .layout .gallery li:not(:last-of-type){ padding-bottom: 80px; }
#vision .layout .gallery figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 47.06%; border-radius: 20px; }
#vision .layout .gallery figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#vision .layout .gallery figure figcaption{ position: absolute; bottom: 0; left: 0; right: 0; font-size: 3.2rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; padding: 40px; }

@media screen and (max-width: 1700px){
	#vision .motion .text span{ display: block; font-size: 2.2rem; }
	#vision .motion .text h1{ font-size: 9rem; }

	#vision .layout p{ font-size: 1.8rem; }

	#vision .layout .gallery figure figcaption{ font-size: 2.8rem; padding: 30px; }
}

@media screen and (max-width: 1280px){
	#vision .motion .text span{ display: block; font-size: 2rem; }
	#vision .motion .text h1{ font-size: 7rem; margin-top: 10px; }

	#vision .layout{ padding-top: 60px; }
	#vision .layout .content-box .sec:not(:last-of-type){ margin-bottom: 40px; }
	#vision .layout p{ font-size: 1.7rem; margin-top: 10px; }

	#vision .layout .gallery li:not(:last-of-type){ padding-bottom: 60px; }
	#vision .layout .gallery figure figcaption{ font-size: 2.4rem; padding: 20px; }
}

@media screen and (max-width: 900px){
	#vision .pt100{ padding-top: 60px; }
	#vision .pb100{ padding-bottom: 60px; }

	#vision .motion .text span{ display: block; font-size: 1.8rem; }
	#vision .motion .text h1{ font-size: 5rem; }

	#vision .layout .gallery figure figcaption{ font-size: 2.2rem; }
}


/* ESG - 환경정책 */
#environment.sub-content::before{ opacity: 0.05; z-index: 100; }

#environment .layout{ overflow: hidden; }
#environment .icon-list ul li{ display: flex; align-items: center; }
#environment .icon-list ul li:not(:last-of-type){ margin-bottom: 30px; }
#environment .icon-list .icon{ display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; background: #F8F8F8; border-radius: 50%; padding: 20px; }
#environment .icon-list .icon img{ max-height: 100%; }
#environment .icon-list ul li p{ width: calc(100% - 100px); font-size: 2rem; font-weight: 300; color: #333; line-height: 1.4; padding-left: 15px; }

#environment .motion .sec-title{ margin-bottom: 80px; }
#environment .scroll-box{ --top: 275px; --bottom: 140px; position: relative; z-index: 10; padding-top: calc(100vh + var(--pt) + var(--pb)); }
#environment .scroll-box .img-bg{ width: 100%; height: calc(100% + var(--bottom) + 12.087%); position: absolute; top: 0; left: 0; /* padding-top: var(--top); */ z-index: -5; }
/* #environment .scroll-box .img-bg .shadow{ width: 100%; height: var(--top); position: absolute; top: 0; left: 0; z-index: 50; background: linear-gradient(to bottom, #fff, #000); }
#environment .scroll-box .img-bg .shadow::before{ content: ""; width: 100%; height: 50px; background: #001424; position: absolute; bottom: 0; left: 0; transform: translateY(50%); box-shadow: 0 0 100px 100px #001424; } */
#environment .scroll-box .img-bg .sticky{ --letterSpacing: -0.02em; height: 100vh; position: sticky; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background: #000 url("/img/sub/esg/envir_policy_motion_bg.png") no-repeat center center / cover; opacity: 1; border-radius: 20px 20px 0 0; }
#environment .scroll-box .img-bg .sticky h1{ font-family: var(--engFont); font-size: 20rem; font-weight: 600; color: #fff; letter-spacing: -0.02em; text-align: center; opacity: 0; }
#environment .scroll-box .img-bg .sticky.aos-animate h1{ animation: spacingBlur 1s forwards; }


#environment .list-box .item:not(:last-of-type){ margin-bottom: 40px; }
#environment .list-box .box{ max-width: 680px; width: 100%; background: #fff; border-radius: 20px; overflow: hidden; }
#environment .list-box .item:nth-of-type(even) .box{ margin-left: auto; }
#environment .list-box figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 70.59%; border-radius: inherit; }
#environment .list-box figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#environment .list-box .text{ padding: 30px; }
#environment .list-box .text h6{ font-size: 3rem; font-size: 3rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 20px; }
#environment .list-box .text .dot-list{ --color: #BBB; }
#environment .list-box .text .dot-list li{ font-weight: 400; color: #555; }
#environment .list-box .text ul li:not(:last-of-type){ margin-bottom: 10px; }


#environment .prod-box{ background: #000; position: relative; }
#environment .prod-box .overflow{ overflow: hidden; }
#environment .prod-box::before{ content: ""; width: 100%; height: var(--pb); background: linear-gradient(transparent 10%, #000); position: absolute; top: 0; left: 0; transform: translateY(-100%); }
#environment .prod-box .sec-title h4{ color: #fff; }
#environment .prod-box .flex-box{ display: flex; align-items: center; }
#environment .prod-box .img{ width: 300px; }
#environment .prod-box .img figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 93.334%; border-radius: 20px; box-shadow: var(--blueShadow); }
#environment .prod-box .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#environment .prod-box .text{ width: calc(100% - 300px); padding-left: 70px; }
#environment .prod-box .flex-layout h6{ color: #fff; margin-bottom: 20px; }
#environment .prod-box .flex-layout .dot-list{ --color: #fff; }
#environment .prod-box .flex-layout .dot-list li:not(:last-of-type){ margin-bottom: 15px; }

#environment .sub-bottom{ --subBottom: #000; z-index: 50; }

@media screen and (max-width: 1700px){
	#environment .icon-list ul li p{ font-size: 1.8rem; }

	#environment .motion .sec-title{ margin-bottom: 60px; }
	#environment .scroll-box{ --top: 200px; }
	#environment .scroll-box .img-bg .sticky h1{ font-size: 15rem; }

	#environment .list-box .text h6{ font-size: 2.6rem; }
}

@media screen and (max-width: 1280px){
	#environment .icon-list ul li:not(:last-of-type){ margin-bottom: 20px; }

	#environment .motion .sec-title{ margin-bottom: 30px; }
	#environment .scroll-box{ --top: 150px; --bottom: 100px; }
	#environment .scroll-box .img-bg .shadow::before{ box-shadow: 0 0 50px 50px #001424; }
	#environment .scroll-box .img-bg .sticky h1{ font-size: 10rem; }

	#environment .list-box .text{ padding: 20px; }
	#environment .list-box .text h6{ font-size: 2.4rem; margin-bottom: 10px; }

	#environment .prod-box .text{ padding-left: 40px; }
	#environment .prod-box .flex-layout h6{ margin-bottom: 10px; }
	#environment .prod-box .flex-layout .dot-list li:not(:last-of-type){ margin-bottom: 10px; }
}

@media screen and (max-width: 900px){
	#environment .scroll-box{ --top: 100px; --bottom: 70px; }
	#environment .scroll-box .img-bg .sticky h1{ font-size: 5rem; }

	#environment .list-box .text h6{ font-size: 2.2rem; }
}

@media screen and (max-width: 800px){
	#environment .prod-box .img{ width: 200px; }
	#environment .prod-box .text{ width: calc(100% - 200px); }
}

@media screen and (max-width: 550px){
	#environment .layout br{ display: none; }

	#environment .prod-box .flex-box{ flex-direction: column; align-items: flex-start; }
	#environment .prod-box .img{ width: 300px; }
	#environment .prod-box .text{ width: 100%; padding-left: 0; padding-top: 30px; }
}


/* ESG - 안전보건 */
#safety .bg-motion{ --top: 140px; --bottom: 140px; }
#safety .bg-motion .img{ height: calc(100% + var(--top) + var(--bottom)); background: url("/img/sub/esg/safety_bg.jpg") no-repeat center center / cover; bottom: calc((var(--top) + var(--bottom)) * -1); }
#safety .bg-motion .txt{ padding-bottom: 0; }
#safety .bg-motion .sec-title{ padding-bottom: 70px; }
#safety .bg-motion .relative{ position: relative; }
#safety .bg-motion .flex-box{ display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: -20px; }
#safety .bg-motion .item{ width: calc((100% - 20px) / 2); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 80px 60px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); text-align: center; margin-bottom: 20px; }
#safety .bg-motion .item h5{ font-size: 3.6rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-top: 30px; }
#safety .bg-motion .item p{ font-size: 2rem; margin-top: 20px; }

#safety .bg-motion .aos-animate .img{ height: calc(100% + (var(--top) * 2) + var(--bottom)); bottom: calc(var(--bottom) * -1); }

@media screen and (max-width: 1700px){
	#safety .bg-motion{ --top: 100px; --bottom: 100px; }
	#safety .bg-motion .sec-title{ padding-bottom: 50px; }
	#safety .bg-motion .item{ padding: 60px; }
	#safety .bg-motion .item h5{ font-size: 3rem; }
	#safety .bg-motion .item p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1400px){
	#safety .bg-motion .item br{ display: none; }
}

@media screen and (max-width: 1280px){
	#safety .bg-motion{ --top: 80px; --bottom: 80px; }
	#safety .bg-motion .sec-title{ padding-bottom: 30px; }
	#safety .bg-motion .item{ padding: 40px; }
	#safety .bg-motion .item h5{ font-size: 2.6rem; margin-top: 15px; }
	#safety .bg-motion .item p{ font-size: 1.7rem;  margin-top: 10px;  }
}

@media screen and (max-width: 900px){
	#safety .bg-motion .item h5{ font-size: 2.2rem; }
}

@media screen and (max-width: 700px){
	#safety .bg-motion .item{ width: calc(100%); }
}


/* ESG - 환경캠페인 */
#campaign{ overflow: hidden; }
#campaign .campaign-list{ display: grid; grid-template-columns: repeat(2, 1fr); margin: -30px -20px; }
#campaign .campaign-list .item{ margin: 30px 20px; }
#campaign .campaign-list .img figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 50.603%; border-radius: 20px; }
#campaign .campaign-list .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.5s; }
#campaign .campaign-list .text{ display: grid; grid-template-columns: 1fr 270px; align-items: center; margin-top: 20px; }
#campaign .campaign-list .text .sec-title{ padding-right: 40px; }
#campaign .campaign-list .text .sec-title h4{ font-weight: 700; }
#campaign .campaign-list .text .icon{ display: flex; flex-wrap: wrap; justify-content: flex-end; }
#campaign .campaign-list .text .icon img{ max-width: calc((100% - 30px) / 4); }
#campaign .campaign-list .text .icon img:not(:first-of-type){ margin-left: 10px; }
#campaign .campaign-list .text .p-box{ grid-column: auto / span 2; margin-top: 30px; }
#campaign .campaign-list .text p{ font-size: 2rem; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.65; }
#campaign .campaign-list .text .link{ grid-column: auto / span 2; margin-top: 30px; }

@media screen and (hover: hover){
	#campaign .campaign-list .item:hover figure img{ transform: translate(-50%, -50%) scale(1.1); }
}

@media screen and (max-width: 1700px){
	#campaign .campaign-list .text .sec-title{ padding-right: 30px; }
	#campaign .campaign-list .text .p-box{ margin-top: 20px; }
	#campaign .campaign-list .text p{ font-size: 1.8rem; }
	#campaign .campaign-list .text .link{ margin-top: 20px; }
}

@media screen and (max-width: 1450px){
	#campaign br{ display: none; }
}

@media screen and (max-width: 1280px){
	#campaign .campaign-list .text{ grid-template-columns: 1fr; margin-top: 10px; }
	#campaign .campaign-list .text .sec-title{ padding-right: 0; }
	#campaign .campaign-list .text .p-box{ margin: 10px 0 15px; }
	#campaign .campaign-list .text p{ font-size: 1.7rem; }
	#campaign .campaign-list .text .icon{ justify-content: flex-start; grid-row: 3 / 4; }
	#campaign .campaign-list .text .link{ margin-top: 15px; }
}

@media screen and (max-width: 1000px){
	#campaign .campaign-list{ margin: -30px -10px; }
	#campaign .campaign-list .item{ margin: 30px 10px; }
}

@media screen and (max-width: 700px){
	#campaign .campaign-list{ grid-template-columns: 1fr; }
}



/* ESG - 인재경영  */
#human .cirDeco::before{ top: 20%; }
#human .sec-title{ position: sticky; top: calc(var(--headerH) + 60px); left: 0; }
#human .content-box .sec:not(:last-of-type){ padding-bottom: 60px; }

#human h6{ margin-bottom: 20px; }
#human p{ font-size: 1.8rem; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.65; }
#human .viewmore{ margin-top: 40px; }

#human .intro p{ font-size: 2rem; }

@media screen and (max-width: 1700px){
	#human p{ font-size: 1.7rem; }
	#human .viewmore{ margin-top: 30px; }

	#human .intro p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1280px){
	#human .content-box .sec:not(:last-of-type){ padding-bottom: 40px; }
	
	#human h6{ margin-bottom: 10px; }
	#human p{ font-size: 1.6rem; }
	#human .viewmore{ margin-top: 20px; }
	
	#human .intro p{ font-size: 1.7rem; }
}


/* ESG - 복리후생  */
#welfare{ overflow: hidden; }
#welfare figure img{ border-radius: 20px; }
#welfare .sec-title{ margin: 50px 0; }

#welfare .grid-box{ display: grid; grid-template-columns: repeat(2, 1fr); margin: -10px; }
#welfare .item{ margin: 10px; border-radius: 20px; box-shadow: var(--blueShadow); padding: 40px; }
#welfare .item h6{ font-size: 2.8rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin: 20px 0; }
#welfare .dot-list{ min-height: calc((1.3em * 2) + 40px); display: grid; grid-template-columns: repeat(4, 1fr); margin: -10px; }
#welfare .dot-list li{ margin: 10px; }
#welfare .dot-list li.block{ grid-column: auto / span 4; }

@media screen and (max-width: 1700px){
	#welfare .sec-title{ margin: 40px 0; }
	
	#welfare .item h6{ font-size: 2.4rem; }
}

@media screen and (max-width: 1600px){
	#welfare .dot-list{ grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 1280px){
	#welfare .sec-title{ margin: 30px 0; }
	
	#welfare .item{ padding: 30px; }
	#welfare .item h6{ font-size: 2.2rem; }
	#welfare .dot-list{ min-height: calc((1.3em * 2) + 20px); margin: -5px; }
	#welfare .dot-list li{ margin: 5px; }
}

@media screen and (max-width: 1100px){
	#welfare .grid-box{ grid-template-columns: repeat(1, 1fr); }
}

@media screen and (max-width: 900px){
	#welfare .item h6{ font-size: 2.2rem; }
}

@media screen and (max-width: 600px){
	#welfare .dot-list{ grid-template-columns: repeat(2, 1fr); }
}


/* ESG - 지배구조  */
#governance .sticky-tab ul{ grid-template-columns: repeat(6, 1fr); }

#governance .flex-layout.wide > div.tit-box{ width: 41%; }
#governance .flex-layout.wide > div.content-box{ width: 59%; }

#governance .table-box tbody tr:not(:first-of-type){ border-top: 1px solid #DDD; }
#governance .table-box tbody tr:last-of-type{ border-bottom: 1px solid #DDD; }
#governance .table-box tbody tr.bold{ border-top: 1px solid #111; }
#governance .table-box td{ padding: 30px 40px; }

@media screen and (max-width: 1700px){
	#governance .table-box td{ padding: 30px; }
}

@media screen and (max-width: 1500px){
	#governance .flex-layout.wide .tit-box{ width: 30%; }
	#governance .flex-layout.wide .content-box{ width: 70%; }
}

@media screen and (max-width: 1280px){
	#governance .table-box td{ padding: 20px; }
}

@media screen and (max-width: 1000px){
	#governance .table-box td:not(.left){ padding: 20px 10px; }
}

@media screen and (max-width: 800px){
	#governance .sticky-tab ul{ grid-template-columns: repeat(3, 1fr); }
}


/* ESG - 지배구조 - 주주  */
#governance.stockholder{ overflow: hidden; }

#governance.stockholder .sec01 colgroup col.large{ width: 50%; }
#governance.stockholder .sec01 colgroup col.small{ width: 39%; }

#governance.stockholder .sec02 colgroup col.large{ width: 176%; }

#governance.stockholder .sec03 colgroup col.w140{ width: 140px; }
#governance.stockholder .sec03 colgroup col.w130{ width: 130px; }
#governance.stockholder .sec03 colgroup col.w110{ width: 110px; }
#governance.stockholder .sec03 colgroup col.w100{ width: 100px; }
#governance.stockholder .sec03 .table-box table td{ padding: 30px 10px; }

@media screen and (max-width: 1500px){
	#governance.stockholder td br{ display: none; }
}

@media screen and (max-width: 1280px){
	#governance.stockholder .sec03 .table-box table td{ padding: 20px 10px; }
}

@media screen and (max-width: 1200px){
	#governance.stockholder .tit-box br{ display: none; }
}

@media screen and (max-width: 800px){
	#governance.stockholder .sec03 table{ min-width: 800px; }
}

@media screen and (max-width: 600px){
	#governance.stockholder .sec02 colgroup col.large{ width: 160%; }
}


/* ESG - 지배구조 - 이사회  */
#governance.directors{ overflow: hidden; }
#governance.directors .sec-title{ display: flex; justify-content: space-between; align-items: center; }
#governance.directors .table-box .download{ padding: 0; }
#governance.directors .table-box .download a{ display: inline-block; padding: 30px; }

#governance.directors .sec01 colgroup col.large{ width: 173%; }

#governance.directors .sec02 .table-box table{ table-layout: auto; }
#governance.directors .sec02 .table-box thead tr{ border-bottom: 1px solid #DDD; }
#governance.directors .sec02 .table-box thead th{ font-size: 1.9rem; padding: 20px 9px; border-right: 1px solid #DDD; }
#governance.directors .sec02 .table-box thead tr th:last-of-type{ border-right: none; }
#governance.directors .sec02 .table-box thead tr:last-of-type{ border-bottom: none; }
#governance.directors .sec02 .table-box td{ padding: 30px 10px; }

#governance.directors .flex-layout .table-box colgroup col.large{ width: 176%; }

@media screen and (max-width: 1700px){
	#governance.directors .sec02 .table-box thead th{ font-size: 1.8rem; }
}

@media screen and (max-width: 1580px){
	#governance.directors .sec02 br{ display: none; }
}

@media screen and (max-width: 1280px){
	#governance.directors .sec-title.mb40{ margin-bottom: 20px !important; }
	#governance.directors .table-box .download a{ padding: 20px; }

	#governance.directors .sec02 .table-box thead th{ font-size: 1.7rem; }
}

@media screen and (max-width: 1000px){
	#governance.directors .sec01 colgroup col.large{ width: 100%; }
}

@media screen and (max-width: 800px){
	#governance.directors .sec01 .table-box table{ min-width: 750px; }
}

@media screen and (max-width: 650px){
	#governance.directors .flex-layout .table-box colgroup col.large{ width: 100%; }
}


/* ESG - 지배구조 - 정관  */
#governance.articles .sticky-list{ position: sticky; top: calc(var(--headerH) + 50px); left: 0; }
#governance.articles .sticky-list .bar{ width: 3px; background: var(--mainColor); position: absolute; top: 0; left: 0; transition: top 0.5s; }
#governance.articles .sticky-list ul{ border-left: 1px solid #EEE; }
#governance.articles .sticky-list ul li{ font-size: 2.4rem; font-weight: 300; color: #999; letter-spacing: -0.02em; padding: 2px 30px; position: relative; transition: color 0.5s; cursor: pointer; }
#governance.articles .sticky-list ul li:not(:last-of-type){ margin-bottom: 20px; }

#governance.articles .sticky-list ul li.on{ color: #111; }


#governance.articles .content-box{ font-size: 1.8rem; font-weight: 300; color: #555; letter-spacing: -0.02em; line-height: 1.65; }
#governance.articles .content-box *{ letter-spacing: inherit; line-height: inherit; }
#governance.articles .content-box section:not(:last-of-type){ padding-bottom: 80px; }
#governance.articles section .sec:not(:last-of-type){ margin-bottom: 40px; }
#governance.articles .sec-title{ margin-bottom: 40px; }
#governance.articles h6{ font-weight: 500; color: #333; margin-bottom: 20px; }
#governance.articles .regular{ font-weight: 400; }

#governance.articles .content-box ul{ margin-top: 20px; }
#governance.articles .content-box ul.numbering{ padding-left: 18px; }
#governance.articles .content-box ul.numbering li{ list-style: decimal; list-style-position: inside; list-style-position: outside; text-indent: 1px; }
#governance.articles .content-box ul.outside{ padding-left: 30px; }
#governance.articles .content-box ul li:not(:last-of-type){ margin-bottom: 10px; }

#governance.articles .num-list{ padding-top: 15px; }
#governance.articles .num-list p{ font-size: 1.6rem; font-weight: 400; padding-left: 40px; position: relative; padding-top: calc((20px - 1.65em) / 2); }
#governance.articles .num-list p:not(:last-of-type){ margin-bottom: 10px; }
#governance.articles .num-list p span{ display: flex; justify-content: center; align-items: center; width: 30px; height: 20px; background: #EEE; border-radius: 999px; font-size: 1.3rem; font-weight: 400; text-align: center; position: absolute; top: 3px; left: 0; }

@media screen and (hover: hover){ 
	#governance.articles .sticky-list ul li:hover{ color: #111; }
}

@media screen and (max-width: 1700px){
	#governance.articles .sticky-list ul li{ font-size: 2.2rem; }

	#governance.articles .content-box{ font-size: 1.7rem; }
	#governance.articles .content-box section:not(:last-of-type){ padding-bottom: 60px; }
	#governance.articles .sec-title{ margin-bottom: 30px; }
	#governance.articles .num-list{ padding-top: 10px; }
}

@media screen and (max-width: 1500px){
	#governance.articles br{ display: none; }
}

@media screen and (max-width: 1200px){
	#governance.articles .tit-box{ display: none; }
}

@media screen and (max-width: 1280px){
	#governance.articles .sticky-list ul li{ font-size: 2rem; }
	#governance.articles .sticky-list ul li:not(:last-of-type){ margin-bottom: 10px; }

	#governance.articles .content-box{ font-size: 1.6rem; }
	#governance.articles .content-box section:not(:last-of-type){ padding-bottom: 40px; }
	#governance.articles section .sec:not(:last-of-type){ margin-bottom: 30px; }
	#governance.articles .sec-title{ margin-bottom: 20px; }
	#governance.articles h6{ margin-bottom: 10px; }
	#governance.articles .content-box ul{ margin-top: 10px; }
	#governance.articles .content-box ul li:not(:last-of-type){ margin-bottom: 5px; }
	#governance.articles .content-box ul.numbering{ padding-left: 16px; }
	#governance.articles .content-box ul.outside{ padding-left: 25px; }
	#governance.articles .num-list{ padding: 10px 0 5px; }
	#governance.articles .num-list p{ font-size: 1.5rem; }
	#governance.articles .num-list p:not(:last-of-type){ margin-bottom: 5px; }
}

@media screen and (max-width: 900px){
	#governance.articles .sticky-list ul li{ font-size: 1.8rem; }
}


/* ESG - 지배구조 - 윤리경영  */
#governance.ethical{ overflow: hidden; }
#governance.ethical .intro{ background: url("/img/sub/esg/ethical_bg.png") no-repeat bottom center / contain; }
#governance.ethical .intro .img-bg img{ border-radius: 20px; }

#governance.ethical .intro .diagram{ padding-top: 80px; }
#governance.ethical .intro .diagram .sec-title{ text-align: center; margin-bottom: 100px; }
#governance.ethical .intro .diagram .sec-title p{ font-size: 2.4rem; font-weight: 300; color: #111; line-height: 1.65; letter-spacing: -0.01em; margin-top: 30px; }

#governance.ethical .intro .diagram .inner{ max-width: 1240px; width: 100%; margin: 0 auto; }
#governance.ethical .intro .diagram .line{ display: flex; }
#governance.ethical .intro .diagram .line:not(:last-of-type){ padding-bottom: 60px; }
#governance.ethical .intro .diagram .line:nth-of-type(even){ justify-content: flex-end; }
#governance.ethical .intro .diagram .line .box{ max-width: 400px; width: calc((100% - 80px) / 2); position: relative; transition: background 0.5s; }
#governance.ethical .intro .diagram .line .box:not(:last-of-type){ margin-right: 80px; }
#governance.ethical .intro .diagram .line .box > div{ height: 100%; background: rgba(245, 125, 33, 0.05); border: 1px solid var(--mainColor); border-radius: 20px; padding: 50px; position: relative; z-index: 10; }
#governance.ethical .intro .diagram .line .box:nth-of-type(even) > div{ background: rgba(122, 152, 255, 0.05); border: 1px solid var(--blue); }
#governance.ethical .intro .diagram .line .box > div::before{ content: ""; width: calc(100% + 2px); height: calc(100% + 2px); background: linear-gradient(to bottom, var(--mainColor), #A15216); border-radius: 20px; position: absolute; top: -1px; left: -1px; z-index: -5; opacity: 0; transition: opacity 0.5s; }
#governance.ethical .intro .diagram .line .box:nth-of-type(even) > div::before{ background: linear-gradient(to bottom, var(--blue), #3E4E99); }

#governance.ethical .intro .diagram .line .box::before{ content: ""; width: 10px; height: 10px; background: var(--mainColor); border-radius: 50%; position: absolute; top: 50%; right: 0; z-index: 20; transform: translate(50%, -50%); }
#governance.ethical .intro .diagram .line .box:nth-of-type(even)::before{ background: var(--blue); left: 0; right: unset; transform: translate(-50%, -50%); }
#governance.ethical .intro .diagram .line .box::after{ content: ""; width: 80px; height: 2px; background: url("/img/sub/esg/gradient_dash.svg") center center / auto; position: absolute; top: 50%; right: 0; transform: translate(100%, -50%); }
#governance.ethical .intro .diagram .line .box:nth-of-type(even)::after{ display: none; }

#governance.ethical .intro .diagram .icon img{ filter: grayscale(0) brightness(0); -webkit-filter: grayscale(0) brightness(0); }

#governance.ethical .intro .diagram dl{ margin-top: 25px; }
#governance.ethical .intro .diagram dl *{ transition: color 0.5s; }
#governance.ethical .intro .diagram dl dt{ font-size: 3.2rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 15px; }
#governance.ethical .intro .diagram dl dd{ font-size: 1.8rem; font-weight: 500; color: rgba(17, 17, 17, 0.7); letter-spacing: -0.02em; padding-left: 15px; position: relative; }
#governance.ethical .intro .diagram dl dd:not(:last-of-type){ margin-bottom: 10px; }
#governance.ethical .intro .diagram dl dd::before{ content: ""; width: 4px; height: 4px; background: rgba(17, 17, 17, 0.7); border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); transition: background 0.5s; }


#governance.ethical .guideline .sec:not(:last-of-type){ padding-bottom: 80px; }
#governance.ethical .guideline h6{ margin-bottom: 20px; }
#governance.ethical .guideline p{ font-size: 2.2rem; font-weight: 500; color: #333; line-height: 1.65; letter-spacing: -0.02em; }
#governance.ethical .guideline .sec p:not(:last-of-type){ margin-bottom: 10px; }
#governance.ethical .guideline .dot-list{ --color: #555; margin-top: 10px; }
#governance.ethical .guideline .dot-list li{ line-height: 1.65; }
#governance.ethical .guideline .dot-list li::before{ top: calc(1.65em / 2); }


#governance.ethical .report .sec-title{ margin-bottom: 80px; text-align: center; }
#governance.ethical .report .grid-box{ display: grid; grid-template-columns: repeat(2, 1fr); margin: -10px; }
#governance.ethical .report .grid-box > div{ margin: 10px; padding: 40px; border-radius: 20px; position: relative; }
#governance.ethical .report .grid-box .bg{ grid-column: auto / span 2; padding: 80px; background: url("/img/sub/esg/report_bg.jpg") no-repeat center right / cover; }
#governance.ethical .report .grid-box .orange{ background: rgba(245, 125, 33, 0.1); }
#governance.ethical .report .grid-box .blue{ background: rgba(122, 152, 255, 0.1); }

#governance.ethical .report h5{ font-size: 4.2rem; font-weight: 700; color: #111; line-height: 1.5; letter-spacing: -0.01em; margin-bottom: 50px; }
#governance.ethical .report h5 span{ color: var(--mainColor); }
#governance.ethical .report p{ font-size: 2.2rem; font-weight: 300; color: #333; line-height: 1.4; letter-spacing: -0.01em; }
#governance.ethical .report p:not(:last-of-type){ margin-bottom: 20px; }
#governance.ethical .report p strong{ font-weight: 600; color: var(--mainColor); }

#governance.ethical .report dl{ text-align: center; }
#governance.ethical .report dl dt{ font-size: 3rem; font-weight: 700; color: #111; letter-spacing: -0.01em; margin-bottom: 10px; }
#governance.ethical .report dl dt.target::after{ content: ""; display: inline-block; width: 17px; height: 17px; background: url("/img/sub/esg/report_arrow.svg") no-repeat center center / contain; vertical-align: middle; margin-left: 8px; }
#governance.ethical .report dl dd{ font-size: 2.2rem; font-weight: 300; color: #333; letter-spacing: -0.01em; }

#governance.ethical .report .grid-box > div a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }


@media screen and (hover: hover){
	#governance.ethical .intro .diagram .box:hover .icon img{ filter: grayscale(1) brightness(15); -webkit-filter: grayscale(1) brightness(15); }
	#governance.ethical .intro .diagram .box:hover dl *{ color: #fff !important; }
	#governance.ethical .intro .diagram .box:hover dl dd::before{ background: #fff; }

	#governance.ethical .intro .diagram .line .box:hover > div::before{ opacity: 1; }
}

@media screen and (max-width: 1700px){
	#governance.ethical .intro .diagram{ padding-top: 60px; }
	#governance.ethical .intro .diagram .sec-title{ margin-bottom: 60px; }
	#governance.ethical .intro .diagram .sec-title p{ font-size: 2.2rem; }
	#governance.ethical .intro .diagram .line .box .mm{ padding: 30px; }
	#governance.ethical .intro .diagram dl dt{ font-size: 2.8rem; }
	#governance.ethical .intro .diagram dl dd{ font-size: 1.7rem; }

	#governance.ethical .guideline .sec:not(:last-of-type){ padding-bottom: 60px; }
	#governance.ethical .guideline p{ font-size: 2rem; }

	#governance.ethical .report .sec-title{ margin-bottom: 40px; }
	#governance.ethical .report .grid-box .bg{ padding: 60px; }

	#governance.ethical .report h5{ font-size: 3.5rem; margin-bottom: 40px; }
	#governance.ethical .report p{ font-size: 2rem; }
	#governance.ethical .report dl dt{ font-size: 2.6rem; }
	#governance.ethical .report dl dd{ font-size: 2rem; }
}

@media screen and (max-width: 1500px){
	#governance.ethical .guideline br{ display: none; }
}

@media screen and (max-width: 1280px){
	#governance.ethical .intro .diagram{ padding-top: 30px; }
	#governance.ethical .intro .diagram .sec-title{ margin-bottom: 30px; }
	#governance.ethical .intro .diagram .sec-title p{ font-size: 2rem; margin-top: 15px; }
	#governance.ethical .intro .diagram .line .box{ max-width: 350px; }
	#governance.ethical .intro .diagram dl{ margin-top: 15px; }
	#governance.ethical .intro .diagram dl dt{ font-size: 2.4rem; margin-bottom: 10px; }
	#governance.ethical .intro .diagram dl dd{ font-size: 1.6rem; }
	#governance.ethical .intro .diagram dl dd:not(:last-of-type){ margin-bottom: 5px; }

	#governance.ethical .guideline .sec:not(:last-of-type){ padding-bottom: 40px; }
	#governance.ethical .guideline h6{ margin-bottom: 10px; }
	#governance.ethical .guideline p{ font-size: 1.8rem; }
	#governance.ethical .guideline .sec p:not(:last-of-type){ margin-bottom: 5px; }

	#governance.ethical .report .sec-title{ margin-bottom: 20px; }
	#governance.ethical .report .grid-box > div{ padding: 20px; }
	#governance.ethical .report .grid-box .bg{ padding: 30px; }

	#governance.ethical .report h5{ font-size: 3rem; margin-bottom: 30px; }
	#governance.ethical .report p{ font-size: 1.8rem; }
	#governance.ethical .report p:not(:last-of-type){ margin-bottom: 10px; }
	#governance.ethical .report dl dt{ font-size: 2.2rem; }
	#governance.ethical .report dl dd{ font-size: 1.8rem; }
}

@media screen and (max-width: 1000px){
	#governance.ethical .report .grid-box .bg::after{ content: ""; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.8)); position: absolute; top: 0; left: 0; z-index: -1; }
}

@media screen and (max-width: 900px){
	#governance.ethical .intro .diagram .sec-title p{ font-size: 1.8rem; }

	#governance.ethical .guideline p{ font-size: 1.7rem; }

	#governance.ethical .report h5{ font-size: 2.6rem; }
	#governance.ethical .report p{ font-size: 1.7rem; }
	#governance.ethical .report dl dt{ font-size: 2rem; }
	#governance.ethical .report dl dd{ font-size: 1.7rem; }
}

@media screen and (max-width: 800px){
	#governance.ethical br{ display: none; }
}

@media screen and (max-width: 700px){
	#governance.ethical .intro .diagram .line .box{ width: calc((100% - 40px) / 2); }
	#governance.ethical .intro .diagram .line .box:not(:last-of-type){ margin-right: 40px; }
	#governance.ethical .intro .diagram .line .box::after{ width: 40px; }

	#governance.ethical .report .grid-box{ grid-template-columns: repeat(1, 1fr); }
	#governance.ethical .report .grid-box .bg{ grid-column: unset; }
}

@media screen and (max-width: 600px){
	#governance.ethical .intro .diagram .line{ flex-direction: column; align-items: center; }
	#governance.ethical .intro .diagram .line .box{ width: 100%; }
	#governance.ethical .intro .diagram .line .box:not(:last-of-type){ margin-right: 0; margin-bottom: 40px; }

	#governance.ethical .intro .diagram .line .box::before{ top: 100%; right: 50%; transform: translate(50%, -50%); }
	#governance.ethical .intro .diagram .line .box:nth-of-type(even)::before{ top: 0; left: 50%; transform: translate(-50%, -50%); }
	#governance.ethical .intro .diagram .line .box::after{ top: calc(100% + 20px); right: 50%; transform: translate(50%, 0) rotate(90deg); }
}


/* ESG - 지배구조 - 부패방지경영  */
#governance.anti-corruption{ overflow: hidden; }
#governance.anti-corruption #human{ overflow: visible; }


/* ESG - 지배구조 - 기타  */
#governance.others{ overflow: hidden; }
#governance.others p{ font-size: 2rem; font-weight: 300; color: #333; line-height: 1.65; letter-spacing: -0.02em; }
#governance.others .table-box{ margin-top: 40px; }


#governance.others .rating h6{ margin-bottom: 20px; }
#governance.others .rating ul{ display: flex; margin: -5px -15px; }
#governance.others .rating ul li{ font-size: 2rem; font-weight: 400; color: #333; letter-spacing: -0.02em; padding: 5px 15px; position: relative; }
#governance.others .rating ul li::after{ content: ""; width: 1px; height: 15px; background: #999; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }
#governance.others .rating ul li:last-of-type::after{ display: none; }

#governance.others .rating .gauge colgroup col:nth-of-type(1){ width: 34%; }
#governance.others .rating .gauge colgroup col:nth-of-type(2){ width: 94%; }
#governance.others .rating .table-box.gauge tr{ opacity: 1; }
#governance.others .rating .percent-box{ display: flex; align-items: center; padding: 30px 0; }
#governance.others .rating .percent{ width: calc(100% - 70px); display: flex; overflow: hidden; }
#governance.others .rating .percent::before{ content: ""; display: inline-block; width: 100%; height: 30px; background: var(--mainColor); border-radius: 0 99px 99px 0; margin-left: -100%; transition: margin 1s; }
#governance.others .rating span{ display: inline-block; width: 70px; text-align: right; }

#governance.others .rating .aos-animate .percent::before{ margin-left: calc((100% - var(--width)) * -1); }


#governance.others .difference .title-box{ display: flex; justify-content: space-between; align-items: center; }
#governance.others .difference colgroup col:nth-of-type(2){ width: 16%; }
#governance.others .difference colgroup col:nth-of-type(3){ width: 48%; }

@media screen and (max-width: 1700px){
	#governance.others p{ font-size: 1.8rem; }
	#governance.others .table-box{ margin-top: 30px; }

	#governance.others .rating ul li{ font-size: 1.8rem; }
}

@media screen and (max-width: 1360px){
	#governance.others .rating br{ display: none; }
}

@media screen and (max-width: 1280px){
	#governance.others p{ font-size: 1.7rem; }
	#governance.others .table-box{ margin-top: 20px; }

	#governance.others .rating ul{ margin: -5px -10px; }
	#governance.others .rating ul li{ font-size: 1.7rem; padding: 5px 10px; }
}

@media screen and (max-width: 900px){
	#governance.others p{ font-size: 1.6rem; }

	#governance.others .rating ul li{ font-size: 1.6rem; }

	#governance.others .difference colgroup col:nth-of-type(2){ width: 30%; }
	#governance.others .difference colgroup col:nth-of-type(3){ width: 70%; }
}

@media screen and (max-width: 650px){
	#governance.others .rating .gauge table{ min-width: 500px; }
}

@media screen and (max-width: 600px){
	#governance.others .difference .title-box{ flex-direction: column; margin-bottom: -10px; }
	#governance.others .difference .title-box br{ display: none; }
	#governance.others .difference .title-box > div{ width: 100%; }
	#governance.others .difference .title-box .link{ margin-top: 10px; }
	#governance.others .difference .title-box .link a{ margin-left: auto; }

	#governance.others .difference table{ min-width: 530px; }
}


/* ESG - 이니셔티브  */
#initiative{ overflow: hidden; }
#initiative .cirDeco::before{ top: unset; bottom: 0; transform: translateY(50%); }
#initiative .flex-box{ display: flex; justify-content: space-between; }

#initiative .text{ max-width: 950px; width: 62%; display: flex; flex-direction: column; justify-content: space-between; padding-right: 100px; }
#initiative .text .sec-title span{ display: block; font-size: 2rem; font-weight: 600; color: var(--mainColor); letter-spacing: -0.01em; margin-bottom: 15px; }
#initiative .text .download-table{ padding: 50px; background: #fff; border-radius: 20px; box-shadow: var(--blueShadow); margin-top: 30px; }
#initiative .text dl dt{ font-size: 2.4rem; font-weight: 600; color: #333; letter-spacing: -0.02em; margin-bottom: 20px; }

#initiative .img{ width: 38%; }
#initiative .img figure{ width: 100%; height: 100%; padding-bottom: 109.753%; position: relative; overflow: hidden; border-radius: 20px; }
#initiative .img figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#initiative section:nth-of-type(2n) .flex-box{ flex-direction: row-reverse; }
#initiative section:nth-of-type(2n) .text{ padding-right: 0; padding-left: 100px; }

#initiative .family{ display: flex; justify-content: space-between; align-items: center; }
#initiative .family::after{ content: ""; display: inline-block; width: 154px; padding-bottom: 104px; background: url("http://hlb.webmoa21.co.kr/img/sub/esg/initiative_logo.png") no-repeat left center / contain; margin-left: 30px; }


@media screen and (max-width: 1700px){
	#initiative .text .sec-title span{ font-size: 1.8rem; }
	#initiative .text .download-table{ padding: 40px; }
	#initiative .text dl dt{ font-size: 2.2rem; }
}

@media screen and (max-width: 1280px){
	#initiative .text{ padding-right: 70px; }
	#initiative .text .sec-title span{ font-size: 1.7rem; margin-bottom: 5px; }
	#initiative .text .download-table{ padding: 30px; }
	#initiative .text dl dt{ font-size: 2rem; margin-bottom: 10px; }

	#initiative section:nth-of-type(2n) .text{ padding-left: 70px; }

	#initiative .family::after{ width: 80px; padding-bottom: 80px; }
}

@media screen and (max-width: 1100px){
	#initiative .text br{ display: none; }
}

@media screen and (max-width: 900px){
	#initiative .flex-box{ flex-direction: column-reverse; }

	#initiative .text{ width: 100%; padding-right: 0; padding-top: 30px; }
	#initiative .text .sec-title span{ font-size: 1.6rem; }
	#initiative .text dl dt{ font-size: 1.8rem; }

	#initiative .img{ width: 100%; }
	#initiative .img figure{ padding-bottom: 95%; }

	#initiative section:nth-of-type(2n) .flex-box{ flex-direction: column-reverse; }
	#initiative section:nth-of-type(2n) .text{ padding-left: 0; }
}


/* ESG - ESG 정책  */
#esg{ overflow: hidden; }
#esg.sub-content::before{ opacity: 0.05; }
#esg .sub-bottom{ --subBottom: #000; }

#esg .content-box .sec:not(:last-of-type){ padding-bottom: 90px; }
#esg h6{ margin-bottom: 30px; }
#esg p{ font-size: 2rem; font-weight: 300; color: #333; line-height: 1.65; letter-spacing: -0.02em; }
#esg p strong{ font-weight: 500; color: var(--mainColor); }
#esg .p-box p:not(:last-of-type){ margin-bottom: 25px; }
#esg .sec .p-box p:not(:last-of-type){ margin-bottom: 10px; }

#esg .dot-list li:not(:last-of-type){ margin-bottom: 15px; }

#esg .download-box{ display: flex; flex-wrap: wrap; margin-top: 40px; }
#esg .download-box a:not(:last-of-type){ margin-right: 50px; }
#esg .sec .download-box{ margin-top: 30px; }

#esg .ul-box{ background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 20px; padding: 30px; margin-top: 30px; }
#esg .ul-box .num-list{ padding-top: 0; }

#esg .num-list{ padding-left: 20px; }
#esg .num-list li{ font-size: 1.8rem; font-weight: 300; color: #333; line-height: 1.65; letter-spacing: -0.02em; list-style: decimal; list-style-position: outside; text-indent: 1px; }
#esg .num-list li:not(:last-of-type){ margin-bottom: 15px; }


#esg .blackBg{ background: #000; border-radius: 20px; overflow: hidden; }
#esg .blackBg .flex-layout{ padding-top: 60px; }
#esg .blackBg .sec-title h4{ color: #fff; }
#esg .blackBg h6{ color: #fff; }
#esg .blackBg p{ font-weight: 200; color: rgba(255, 255, 255, 0.8); }
#esg .blackBg .download-box .viewmore::after{ filter: invert(1); -webkit-filter: invert(1); opacity: 0.4; }
#esg .blackBg .ul-box{ background: rgba(255, 255, 255, 0.05); }
#esg .blackBg .num-list li{ color: rgba(255, 255, 255, 0.7); }


#esg .human .padding{ background: url("/img/sub/esg/esg_policy_bg01.png") no-repeat top center / cover; padding-bottom: 33.6312%; }

#esg .envir{ background: url("/img/sub/esg/envir_management_bg.jpg") no-repeat top center / cover; padding-top: 100px; border-radius: 0 0 20px 20px; }
#esg .envir p{ color: #111; }

#esg .social{ background: #000 url("/img/sub/esg/social_bg.jpg") no-repeat top center / cover; border-radius: 20px 20px 0 0; }
#esg .social .padding{ padding-bottom: 31.5%; }

@media screen and (hover: hover){
	#esg .blackBg .download-box .viewmore:hover{ color: #fff; }
	#esg .blackBg .download-box .viewmore:hover::after{ opacity: 1; }
}

@media screen and (max-width: 1700px){
	#esg .content-box .sec:not(:last-of-type){ padding-bottom: 60px; }
	#esg p{ font-size: 1.8rem; }
	#esg .num-list li{ font-size: 1.7rem; }
}

@media screen and (max-width: 1450px){
	#esg br{ display: none; }
}

@media screen and (max-width: 1280px){
	#esg .content-box .sec:not(:last-of-type){ padding-bottom: 40px; }
	#esg h6{ margin-bottom: 20px; }
	#esg p{ font-size: 1.7rem; }
	#esg .p-box p:not(:last-of-type){ margin-bottom: 15px; }
	#esg .sec .p-box p:not(:last-of-type){ margin-bottom: 5px; }

	#esg .ul-box{ padding: 20px; margin-top: 20px; }
	#esg .num-list li{ font-size: 1.6rem; }
	#esg .num-list li:not(:last-of-type){ margin-bottom: 10px; }
}



/* 개인정보 처리방침 */
#policy .page-title h3{ text-align: left; }
#policy .privacy-content *{ font-size: 1.5rem; font-weight: 300; color: #555; line-height: 1.5; }
#policy .privacy-content section:not(:last-of-type){ padding-bottom: 25px; }
#policy .privacy-content section > dl > dt{ font-size: 1.6rem; font-weight: 500; line-height: 1.5; margin-bottom: 5px; }

#policy .privacy-content .hyphen{ padding-left: 10px; position: relative; }
#policy .privacy-content .hyphen::before{ content: "-"; position: absolute; top: 0; left: 0; }

#policy .privacy-content ul.circleNum li{ text-indent: -16px; padding-left: 16px; }
#policy .privacy-content ul.num{ padding-left: 17px; }
#policy .privacy-content ul.num li{ list-style: decimal; list-style-position: outside; list-style-position: outside; text-indent: 1px; }