@charset "utf-8";
/* Info
 ========================================================================== */
/**
 * 1. Writer: Ajin Lee. (Weaverloft Corp.)
 * 2. Production Date: 2025-04
 * 3. Client: COWAY Co.,Ltd
 */

/*========== Common ==========*/
.main .section .title-xl {font-size: 3.63rem;}
.main-inner { max-width: 1620px; width: 100%; margin: 0 auto; box-sizing: border-box; } 
.br-mo { display: none; } 
.mv-vision-fade { transform: translateY(100px); } 
.mv-line { position: relative; opacity: 0; } 
.mv-line.horizontal { width: 0; height: 1px; background-color: #ddd; left: 50%; transform: translateX(-50%); transition: width 200ms ease; } 
.section .title-xl {color: var(--main-txt-color);}
@media screen and (max-width: 1780px){
    .main-inner { max-width: none; width: auto; margin: 0 3.933vw; } 
}
@media screen and (max-width: 1520px){
    .main .section .title-xl {font-size: clamp(32px, 3.82vw, 3.63rem);}
}
@media screen and (max-width: 1024px){
    .main-inner { margin: 0 20px; } 
    .br-mo { display: block; } 
}

/*========== Main Visual ==========*/
.mv-sec { display: flex; flex-direction: column; justify-content: space-between; height: calc(100vh - 94px); max-height: 1080px; padding: 0 0 7.50em; background-color: #fff; font-size: var(--h-basic-text); } 
.mv-sec-top { overflow: hidden; display: flex; justify-content: space-between; align-items: center; margin: 2.38em 0; font-size: var(--h-basic-text); } 
.mv-sec-top .icon-win { position: relative; padding-left: 2.6em; font-size: 1.250rem; font-weight: 500; font-variation-settings: 'wght' 500; color: var(--main-txt-color); text-transform: uppercase; } 
.mv-sec-top .icon-win::before { content: ''; position: absolute; top: 50%; left: 0; transform:translate(0, -50%) ; width: 2.30em; aspect-ratio: 1 / 1; background-image: url("../images/main/icon-pinwheel.svg"); background-repeat: no-repeat; background-position: center; background-size: 100% auto; font-size: inherit; animation: rotate-pin 4s 1.2s cubic-bezier(0.25, 0.1, 0.25, 0.9) forwards; -webkit-animation: rotate-pin 4s 1.2s cubic-bezier(0.25, 0.1, 0.25, 0.9) forwards; }
@keyframes rotate-pin {
    0% {
        transform: translate(0, -50%) rotate(0deg);
    }
    100% {
        transform: translate(0, -50%) rotate(1080deg);
    }
}
.mv-sec-top .label { display: flex; justify-content: center; align-items: center; min-width: 4.65em; min-height: 1.90em; padding: 0.10em 0.60em; border-radius: 24px; border: 1px solid var(--main-point-color); font-size: 1.250rem; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--main-point-color); text-transform: uppercase; } 
.mv-sec-cont { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100% } 
.mv-title-area { display: flex; flex-direction: column; justify-content: flex-end; flex: 1; position: relative; min-height: 306px; } 
.mv-title-sec { overflow: hidden; font-size: var(--h-basic-text); } 
.mv-title-sec.mo { display: none; } 
.mv-title-sec.type2 { padding: 2.75em 0 3.38em; } 
.mv-title-sec.type1 .main-inner { display: flex; justify-content: space-between; padding: 1.56em 0 1.88em; } 
.mv-title-sec.type1 .main-inner + .mv-line.horizontal {bottom: 1px;}
.mv-title-sec.type2 .main-inner { display: flex; justify-content: center; } 
.mv-title-sec .left { overflow: hidden; } 
.mv-title-sec .right { overflow: hidden; align-self: flex-end; } 
.mv-title-sec .right p { opacity: 0; transform: translateY(100%); font-size: 1.38rem; font-weight: 500; font-variation-settings: 'wght' 500; font-family: 'Pretendard Variable', 'Pretendard', sans-serif; color: var(--main-txt-color); line-height: 1.17; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); } 
.mv-title { display: inline-block; padding: 0.31em; clip-path: polygon(0 -30%, 100% -30%, 100% 100%, 0 100%); font-family: 'Nunito Sans Variable', 'Nunito Sans', sans-serif !important; } 
.mv-title + .mv-title { margin-left: 1.25em; } 
.mv-title-sec .mv-text { opacity: 0; transform: translateY(100%); font-size: 5rem; font-family: 'Nunito Sans Variable', 'Nunito Sans', sans-serif !important; } 
.mv-vision-area {max-width: 1620px;margin: 0 auto;}
.mv-vision-area .mv-vision { overflow: hidden; display: flex; } 
.mv-vision-area .mv-vision .mv-vision-list { overflow: hidden; position: relative; display: flex; align-items: stretch; width: calc(100% / 4); height: 15em; font-size: var(--h-basic-text); } 
.mv-vision-area .mv-vision .mv-vision-list:nth-child(odd) { background-color: var(--bg-color); border-right: 2px solid #fff; color: var(--main-point-color); } 
.mv-vision-area .mv-vision .mv-vision-list:nth-child(even) { background-color: var(--main-point-color); border-left: 2px solid #fff; color: #fff; } 
.mv-vision-area .mv-vision .mv-vision-list.mission { border-right: 2px solid #fff; } 
.mv-vision-area .mv-vision .mv-vision-list.talent { border-left: 2px solid #fff; } 
.mv-vision-area .mv-vision .mv-vision-list::after { content: ''; position: absolute; background-repeat: no-repeat; background-position: center; background-size: 100% auto; font-size: var(--h-basic-text); } 
.mv-vision-area .mv-vision .mv-vision-list.vision::after { bottom: -26px; right:-65px; width: 13.96vw; max-width: 268px; min-width: 134px; aspect-ratio: 263 / 197; background-image: url("../images/main/mv-vision-bg.svg"); } 
.mv-vision-area .mv-vision .mv-vision-list.mission::after { bottom: -52px; right: -44px; width: 13.75em; max-width: 220px; aspect-ratio: 1 / 1; background-image: url("../images/main/mv-mission-bg.svg"); } 
.mv-vision-area .mv-vision .mv-vision-list.talent::after { bottom: -66px; right: -108px; width: 17.06em; max-width: 274px; aspect-ratio: 274 / 263; background-image: url("../images/main/mv-talent-bg.svg"); } 
.mv-vision-area .mv-vision .mv-vision-list.core::before { content: ''; position: absolute; background-repeat: no-repeat; background-position: center; background-size: 100% auto; font-size: var(--h-basic-text); opacity: 0.4; bottom: -74px; left:-75px; width: 9em; aspect-ratio: 1 / 1; background-image: url("../images/main/mv-core-left-bg.svg"); } 
.mv-vision-area .mv-vision .mv-vision-list.core::after { opacity: 0.4; top:-120px; right: -118px; width: 15.75em; aspect-ratio: 1 / 1; background-image: url("../images/main/mv-core-right-bg.svg"); background-size: 120% auto; } 
.mv-vision-area .mv-vision .mv-vision-list dl { position: relative; z-index: 1; align-self: stretch; width: 100%; padding: 2.50em 1.88em 2.50em 2.63em; font-size: var(--h-basic-text); } 
.mv-vision-area .mv-vision .mv-vision-list dl dt { padding: 1.94em 0 1.22em; background-image: url("../images/main/icon-quotes.svg"); background-repeat: no-repeat; background-position: left top; background-size: 1.44em auto; font-size: 1rem; font-weight: 700; font-variation-settings: 'wght' 700; text-transform: uppercase; } 
.mv-vision-area .mv-vision .mv-vision-list:nth-child(even) dl dt { background-image: url("../images/main/icon-quotes-white.svg"); } 
.mv-vision-area .mv-vision .mv-vision-list dl dd { font-size: 1.25rem; font-weight: 500; font-variation-settings: 'wght' 500; text-transform: uppercase; letter-spacing: -0.03em; word-break: keep-all; } 
@media screen and (max-width: 1520px){
    .mv-title-sec .mv-text {font-size: clamp(34px, 5.26vw, 5rem);}
    .mv-title-sec .right p { font-size: clamp(14px, 1.45vw, 1.38rem); } 
    .mv-vision-area .mv-vision .mv-vision-list dl dt { font-size: clamp(12px, 1.05vw, 1rem); } 
    .mv-vision-area .mv-vision .mv-vision-list dl dd { font-size: clamp(14px, 1.32vw, 1.25rem); } 
    .mv-sec-top { display: flex; justify-content: space-between; align-items: center; margin: 1.88em 0 0; font-size: var(--h-basic-text); } 
    .mv-sec-top .icon-win { font-size: clamp(0.875rem, 1.32vw, 1.250rem); } 
    .mv-sec-top .label { font-size: clamp(0.875rem, 1.32vw, 1.250rem); } 
}
@media screen and (max-width: 1280px) {
    .mv-sec {max-height: 890px;}
}
@media screen and (max-width: 1024px){
    .mv-sec { height: auto; } 
    .mv-sec-top { margin: 20px 0 0; } 
    .mv-sec-top .icon-win { padding-left: 1.57em;} 
    .mv-sec-top .icon-win::before {width: 1.57em;}
    .mv-sec-top .label { min-width: 56px; min-height: 23px; } 
    .mv-title-sec.type1 .main-inner { padding: 19px 0 17px; } 
    .mv-title-sec.type2 { padding: 19px 0 17px; } 
    .mv-title-sec.type2 .main-inner { justify-content: flex-end; } 
    .mv-title { padding: 2px; } 
    .mv-title + .mv-title { margin-left: 4px; } 
    .mv-vision-area {width: 100%;}
    .mv-vision-area .mv-vision { flex-direction: column; } 
    .mv-vision-area .mv-vision .mv-vision-list { width: 100%; height: auto; } 
    .mv-vision-area .mv-vision .mv-vision-list:nth-child(odd) { border: none; border-bottom: 1px solid #fff; } 
    .mv-vision-area .mv-vision .mv-vision-list:nth-child(even) { border: none; border-top: 1px solid #fff; } 
    .mv-vision-area .mv-vision .mv-vision-list.mission { border-bottom: 1px solid #fff; } 
    .mv-vision-area .mv-vision .mv-vision-list.talent { border-top: 1px solid #fff; } 
    .mv-vision-area .mv-vision .mv-vision-list.vision::after { bottom: -12px; right: -20px; width: 12.29em; min-width: auto; } 
    .mv-vision-area .mv-vision .mv-vision-list.mission::after { bottom: -40px; right: -40px; width: 12.86em; } 
    .mv-vision-area .mv-vision .mv-vision-list.talent::after { bottom: -35px; right: -50px; width: 13.36em; } 
    .mv-vision-area .mv-vision .mv-vision-list.core::before { bottom: -28px; left: -36px; width: 6.43em; } 
    .mv-vision-area .mv-vision .mv-vision-list.core::after { top: -80px; right: -80px; width: 12.43em; } 
    .mv-vision-area .mv-vision .mv-vision-list dl { padding: 20px 20px 18px; } 
    .mv-vision-area .mv-vision .mv-vision-list dl dt { padding: 0 0 1.08em 1.67em; background-size: 1.17em auto; } 
}
@media screen and (max-width: 768px){
    .mv-title-sec.mo { display: flex; justify-content: flex-end; } 
    .mv-title-sec.mo .right { margin-bottom: 12px; } 
    .mv-title-sec.type1 .right { display: none; } 
}

/*========== Highlights ==========*/ 
.highlights-sec .main-inner { position: relative; display: flex; } 
.highlights-sec .main-inner > .draw-line.mo { display: none; } 
.highlights-sec .esg-h-left { position: relative; width: clamp(290px,35.313vw, 678px); padding: 8em 2.250em 8em 3.13em; font-size: var(--h-basic-text); } 
.highlights-sec .esg-h-left .btn-wrap { margin: 5em 0 0; } 
.highlights-sec .esg-h-right { display: flex; justify-content: flex-end; flex: 1; width: calc(100% - clamp(290px,35.313vw, 678px)); height: 100%; font-size: var(--h-basic-text); } 
.highlights-sec .esg-h-right .count-wrap { position: relative; width: 50%; padding: 8em 0 10.00em; font-size: var(--h-basic-text); } 
.highlights-sec .esg-h-right .count-wrap .count-wrap-inner { display: grid; gap: clamp(40px, 3.13vw, 60px); font-size: var(--h-basic-text); } 
.highlights-sec .esg-h-right .count-wrap .count-list { padding: 4.38em 0 0 2em; background-repeat: no-repeat; background-position: left 2em top 0; background-size: 3.75em auto; font-size: var(--h-basic-text); } 
.highlights-sec .esg-h-right .count-wrap:first-child .count-list { padding: 4.38em 3.542vw 0 2em; } 
.highlights-sec .esg-h-right .count-wrap .count-list.million { background-image: url("../images/main/icon-h-million.svg"); } 
.highlights-sec .esg-h-right .count-wrap .count-list.hours { background-image: url("../images/main/icon-h-hours.svg"); } 
.highlights-sec .esg-h-right .count-wrap .count-list.co2 { background-image: url("../images/main/icon-h-co2.svg"); } 
.highlights-sec .esg-h-right .count-wrap .count-list.billion { background-image: url("../images/main/icon-h-billion.svg"); } 
.highlights-sec .esg-h-right .count-wrap .count-list.point { background-image: url("../images/main/icon-h-point.svg"); } 
.highlights-sec .esg-h-right .count-wrap .count-list.percent { background-image: url("../images/main/icon-h-percent.svg"); } 
.highlights-sec .esg-h-right .count-wrap .count-list .count-tit { position: relative; font-size: inherit; } 
.highlights-sec .esg-h-right .count-wrap .count-list .count-tit::before { content: ''; position: absolute; top: 50%; left: calc(-2em + 1px); width: 2px; height: 20px; background-color: var(--main-point-color); transform: translate(0, -50%); font-size: inherit; } 
.highlights-sec .esg-h-right .count-wrap .count-list .count-tit .count { font-size: 2.5rem; font-family: 'Nunito Sans Variable', 'Nunito Sans', sans-serif; font-weight: 600; font-variation-settings: 'wght' 600; color: var(--main-point-color); } 
.highlights-sec .esg-h-right .count-wrap .count-list .count-tit .unit { position: static; margin-left: 6px; font-size: 1.125rem; font-weight: 400; font-variation-settings: 'wght' 400; color: var(--main-point-color); } 
.highlights-sec .esg-h-right .count-wrap .count-list .count-txt { margin-top: 0.83em; font-size: var(--h-basic-text); color: var(--text-dark-color); } 
@media screen and (max-width: 1520px){
    .highlights-sec .esg-h-right .count-wrap.left { width: clamp(340px, 30.263vw, 460px); } 
    .highlights-sec .esg-h-right .count-wrap.right { width: clamp(320px, 30.263vw, 460px); } 
    .highlights-sec .esg-h-right .count-wrap .count-list .count-tit .count { font-size: clamp(32px, 2.63vw, 2.5rem); } 
    .highlights-sec .esg-h-right .count-wrap .count-list .count-tit .unit { font-size: clamp(16px, 1.18vw, 1.125rem); } 
    .mv-vision-area .mv-vision .mv-vision-list dl dd { font-size: clamp(16px, 1.447vw, 1.38rem); } 
}
@media screen and (max-width: 1024px){
    .highlights-sec .main-inner { flex-direction: column; } 
    .highlights-sec .main-inner > .draw-line.mo { display: block; } 
    .highlights-sec .esg-h-left { min-width: auto; max-width: none; width: 100%; margin: 0; padding: 80px 20px 0; } 
    .highlights-sec .esg-h-left .draw-line.vertical { display: none; } 
    .highlights-sec .esg-h-left .btn-wrap { margin: 30px 0 0; } 
    .highlights-sec .esg-h-right { gap: 40px; width: 100%; margin: 0 } 
    .highlights-sec .esg-h-right .count-wrap { padding: 70px 0 100px; } 
    .highlights-sec .esg-h-right .count-wrap.left { width: 50%; } 
    .highlights-sec .esg-h-right .count-wrap.right { width: 50%; } 
    .highlights-sec .esg-h-right .count-wrap .draw-line.vertical { display: none; } 
    .highlights-sec .esg-h-right .count-wrap .count-wrap-inner { gap: 36px; } 
    .highlights-sec .esg-h-right .count-wrap .count-list { padding: 46px 0 0 20px; background-size: 42px auto; background-position: left 20px top 0; } 
    .highlights-sec .esg-h-right .count-wrap:first-child .count-list { padding: 46px 0 0 20px; } 
    .highlights-sec .esg-h-right .count-wrap .count-list .count-tit::before { left: -19px; } 
}
@media screen and (max-width: 768px){
    .highlights-sec .esg-h-right { gap: 0; flex-direction: column; } 
    .highlights-sec .esg-h-right .count-wrap.left { padding-bottom: 0; width: 100%; max-width: 100%; } 
    .highlights-sec .esg-h-right .count-wrap.right { padding-top: 36px; width: 100%; } 
}

/*========== Core Values ==========*/
.core-sec { overflow: hidden; position: relative; padding: 7.50em 0 11.69em; background-image: url("../images/main/core-bg.jpg"); background-repeat: no-repeat; background-position: top; background-size: cover; } 
.core-sec .main-inner { padding: 0 3.13em; font-size: var(--h-basic-text); } 
.core-sec .title-xl { color: #03425A; } 
.core-sec .main-tit-txt { max-width: 750px; margin: 1.75em 0 0; color: #03425A; word-break: keep-all; } 
.core-sec .main-full-inner { margin: 6.88em 0 0; } 
.core-sec .main-full-inner .core-circle { position: relative; font-size: var(--h-basic-text); } 
.core-sec .circle-line { opacity: 1; position: absolute; height: 2px; background-color: var(--main-color); top: 50%; left: 0; transform: translateY(-50%); width: 0; transition: width 400ms ease-out 0.45s, opacity 150ms ease; } 
.core-sec .circle-line.left.aniShow { width: 100%; } 
.core-sec .circle-line.right { left: auto; right: 0; transform-origin: left center; transform: translateY(-50%) scaleX(0); will-change: transform; transition: transform 400ms ease-out 0.55s, opacity 150ms ease; } 
.core-sec .circle-line.right.aniShow { transform: translateY(-50%) scaleX(1); } 
.core-sec .main-full-inner .core-circle .circle-wrap { display: flex; justify-content: center; position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; text-align: center; } 
.core-sec .main-full-inner .core-circle .circle-wrap .circle-list { opacity: 0; position: relative; width: 435px; aspect-ratio: 1 / 1; margin: 0 -2.20em; transform: translateY(80px); font-size: var(--h-basic-text); } 
.core-sec .circle-container { position: relative; width: 100%; margin: 0 auto; } 
.core-sec .circle-svg { width: 100%; height: auto; } 
.core-sec .circle-path { fill: none; stroke-width: 1; stroke-dasharray: 610; stroke-dashoffset: 610px; stroke-linecap: round; transform: rotate(180deg); transform-origin: center; stroke: var(--main-color); } 
.core-sec .circle-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; padding: 7.31em 5em 2em; font-size: var(--h-basic-text); text-align: center; } 
.core-sec .circle-tit { font-size: 2.13rem; font-family: 'Nunito Sans Variable', 'Nunito Sans', sans-serif; font-weight: 700; font-variation-settings: 'wght' 700; color: var(--main-point-color); } 
.core-sec .circle-txt { font-size: 1.125rem;font-weight: 400; font-variation-settings: 'wght' 400; color: var(--main-txt-color); word-break: keep-all; } 
.core-sec .circle-top-txt { position: relative; margin: 0.80em 0 0.90em; padding: 1.40em 0 0; word-break: keep-all;}
.core-sec .circle-top-txt::before { content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); width: 2.33em; height: 2px; background-color: var(--main-point-color); } 
@keyframes stroke_ani { 
    0% { stroke-dashoffset: 610px; } 
    100% { stroke-dashoffset: 0; } 
}
@keyframes fadeInUpShort { 
    0% { opacity: 0; transform: translateY(80px); } 
    70% { opacity: 0.8; transform: translateY(-10px); } 
    100% { opacity: 1; transform: translateY(0); } 
}
.core-sec .circle-list.aniShow { animation: fadeInUpShort 0.8s ease-out forwards; } 
.core-sec .circle-list.aniShow.delay-250 { animation-delay: 0.25s; } 
.core-sec .circle-list.aniShow.delay-500 { animation-delay: 0.5s; } 
.core-sec .circle-list.aniShow.delay-750 { animation-delay: 0.75s; } 
.core-sec .circle-list.aniShow .circle-path { animation: stroke_ani 1.3s ease-in forwards; } 
.core-sec .circle-list.aniShow:nth-child(1) .circle-path { animation-delay: 0.25s; } 
.core-sec .circle-list.aniShow:nth-child(2) .circle-path { animation-delay: 0.5s; } 
.core-sec .circle-list.aniShow:nth-child(3) .circle-path { animation-delay: 0.75s; } 


/* 반응형 */
@media (max-width: 1520px){
    .core-sec .circle-tit { font-size: clamp(1.38rem, 2.24vw, 2.13rem); } 
    .core-sec .circle-txt { font-size: clamp(0.875rem, 1.18vw, 1.125rem); } 
}
@media (max-width: 1380px){
    .core-sec .circle-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 2em; } 
    .core-sec .main-full-inner .core-circle .circle-wrap { width: 940px; } 
    .core-sec .main-full-inner .core-circle .circle-wrap .circle-list { width: calc(40% - 2px); } 
}
@media (max-width: 1200px){
    .core-sec .main-full-inner .core-circle .circle-wrap { width: 838px; } 
    .core-sec .main-full-inner .core-circle .circle-wrap .circle-list { width: calc(40% - 4px); margin: 0 -2em; } 
}
@media (max-width: 1024px){
    .core-sec { padding: 5.71em 0 7.14em; } 
    .core-sec .main-inner { padding: 0; margin: 0 20px; } 
    .core-sec .main-tit-txt { max-width: none; margin: 1em 0 0; } 
    .core-sec .main-full-inner { margin: 4.86em 0 0; } 
    .core-sec .main-full-inner .core-circle .circle-wrap { width: 93%; } 
    .core-sec .main-full-inner .core-circle .circle-wrap .circle-list { width: calc(39.65% - 6px); } 
    .core-sec .circle-top-txt { margin: 1em 0 0.750em; padding: 1em 0 0;}
    .core-sec .circle-txt { margin-top: 8px; }  
}
@media (max-width: 980px){
    .core-sec .main-full-inner .core-circle .circle-wrap .circle-list { width: calc(39.2% + 1px); } 
}
@media (max-width: 920px){
    .core-sec { background-image: url('../images/main/core-bg-mo.jpg'); background-position: center 30%; } 
    .core-sec .main-full-inner .core-circle .circle-wrap { flex-direction: column; align-items: center; width: auto; max-width: 480px; padding: 0 20px; } 
    .core-sec .main-full-inner .core-circle .circle-wrap .circle-list { width: 100%; margin: -2.14em 0; } 
    .core-sec .circle-content { padding: clamp(40px,6.51vw,4.29em); } 
    .core-sec .circle-top-txt { margin: 1.05em 0 0; padding: 1.38em 0 0; } 
    .core-sec .circle-top-txt::before { width: 2em; } 
    .core-sec .circle-list {opacity: 1 !important;transform: translateY(0) !important;animation: none !important;}
    .core-sec .circle-path {stroke-dashoffset: 0 !important;animation: none !important;}
}
@media (max-width: 360px){
    .core-sec .main-full-inner .core-circle .circle-wrap { padding: 0 12px; } 
    .core-sec .main-full-inner .core-circle .circle-wrap .circle-list { margin: -1.86em 0; } 
    .core-sec .circle-tit { font-size: clamp(22px, 6.67vw, 1.50rem); } 
    .core-sec .circle-txt { font-size: clamp(15px, 4.44vw, 1rem); } 
}

/*========== Key Issues ==========*/
.key-sec { overflow: hidden; position: relative; } 
.key-sec .main-inner { position: relative; } 
.key-sec .main-inner > .draw-line.mo { display: none; } 
.key-sec .key-inner { display: flex; position: relative; } 
.key-sec .key-left { display: flex; flex-direction: column; position: relative; width: clamp(290px,35.313vw, 678px); padding: 8.13em 0 0; font-size: var(--h-basic-text); } 
.key-sec .key-left .key-left-inner { padding: 0 2.250em 0 3.13em; font-size: var(--h-basic-text);}
.key-sec .key-left .key-left-inner:has(.key-left-bottom) {position: relative; height: 100%; padding: 3.75em 0 10em; }
.key-sec .key-left .key-left-inner:has(.key-left-bottom) .draw-line.vertical {left: 210px;}
.key-sec .key-left .main-tit-txt { max-width: 530px; margin: 1.33em 0 0; word-break: keep-all; } 
.key-left-top { padding: 0 0 6.15em; height: 380px; font-size: var(--h-basic-text);} 
.key-left-bottom { margin: 0 0 0; font-size: var(--h-basic-text); } 
.key-left-bottom .draw-line.horizontal.mo { display: none; } 
.key-nav-swiper { overflow: initial; } 
.key-nav-swiper.fade-in {opacity: 1;transition: opacity 0.4s ease;}
.key-nav-swiper.fade-out {opacity: 0;transition: opacity 0.2s ease;}
.key-nav-swiper .swiper-wrapper { flex-direction: row; flex-wrap: wrap; gap: 1.50em 0; font-size: var(--h-basic-text); } 
.key-nav-swiper .swiper-slide {width: 10em;padding-left: 30px;}
.key-nav-swiper .swiper-slide:nth-child(odd) {margin-right: 50px;}
.key-nav-swiper .swiper-slide:nth-child(even) {width: calc(100% - (10em + 50px));}
.key-nav-swiper .key-nav-item { position: relative; cursor: pointer !important; } 
.key-nav-swiper .key-nav-item .key-nav {font-weight: 500; font-variation-settings: 'wght' 500; color: var(--text-light-gray-color); } 
.key-nav-swiper .key-nav-item::before { content: ''; position: absolute; top: 50%; left: -30px; width: 3px; height: 0; background-color: var(--main-txt-color); transform: translateY(-50%); font-size: var(--h-basic-text); } 
.key-nav-swiper .key-nav-item.active::before { height: 20px;transition: height 400ms; } 
.key-nav-swiper .key-nav-item.active .key-nav {font-weight: 700; font-variation-settings: 'wght' 700; color: var(--main-txt-color); } 
.key-sec .key-right { position: relative; width: calc(100% - clamp(290px,35.313vw, 678px)); padding: 8.13em 0 0; font-size: var(--h-basic-text); } 
.key-content-swiper { max-width: 796px; width: 100%; margin: 0; } 
.key-content-swiper .key-cont-info { width: 100%; padding: 3.38em 3.31em 10em; font-size: var(--h-basic-text); } 
.key-content-swiper .key-cont-info .key-cont-tit { color: var(--main-txt-color); } 
.key-content-swiper .key-cont-info .key-cont-desc { margin: 2.73em 0 0.91em; font-weight: 600; font-variation-settings: 'wght' 600; color: var(--text-dark-color); } 
.key-content-swiper .key-cont-info .btn-wrap { margin: 3.75em 0 0; } 
.key-img-container { overflow: hidden; position: relative; width: 100vw; max-width: 1100px; height: 380px; } 
.key-img-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease; transform: translateY(100%); visibility: hidden; z-index: 1; } 
.key-img-item.active { opacity: 1; transform: translateY(0); visibility: visible; z-index: 2; } 
.key-img-item .key-cont-img { overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } 
.key-cont-text { margin: 2.50em 0 0;font-weight: 400; font-variation-settings: 'wght' 400; color: var(--text-dark-color); } 
.key-cont-text strong { font-weight: 700; font-variation-settings: 'wght' 700;} 
/* 레이아웃 전환 관련 스타일 */
.key-sec {touch-action: pan-y !important;}
.key-img-container, .key-content-swiper {touch-action: pan-y !important;}
.layout-transitioning .key-nav-swiper {visibility: hidden !important;opacity: 0 !important;transition: none !important;}
.mode-transitioning {opacity: 0 !important;transition: none !important;}
.vertical-mode, .vertical-mode-prep {flex-direction: column !important;width: 100% !important;}
.horizontal-mode, .horizontal-mode-prep {flex-direction: row !important;overflow-x: auto !important;white-space: nowrap !important;}
@media (max-width: 1520px){
    .key-nav-swiper .swiper-slide:nth-child(even) { min-width: 156px;}
    .key-sec .key-left .key-left-inner:has(.key-left-bottom) .draw-line.vertical {left: 190px;}
}
@media (max-width: 1100px){
    .key-img-container {width: 109vw;}
    .key-sec .key-left .key-left-inner:has(.key-left-bottom) .draw-line.vertical {left: 165px; }
    .key-nav-swiper .swiper-slide:nth-child(odd) {margin-right: 25px;}
}
@media (max-width: 1024px){
    .key-sec .main-inner { margin-right: 0; } 
    .key-sec .main-inner > .draw-line.mo { display: block; } 
    .key-sec .key-inner { flex-direction: column; width: 100%; margin-right: 0; } 
    .key-sec .key-left { width: 100%; padding: 80px 0 0; } 
    .key-sec .key-left .draw-line.vertical { display: none; } 
    .key-sec .key-left .main-tit-txt { margin: 18px 0 0; } 
    .key-left-top { padding: 0 20px; height: auto; } 
    .key-left-bottom { margin: 80px 0 0; } 
    .key-sec .key-left .key-left-inner {padding: 0;}
    .key-sec .key-left .key-left-inner:has(.key-left-bottom) {padding: 0;}
    .key-nav-swiper .swiper-wrapper .swiper-slide {padding: 0;}
    .key-nav-swiper .swiper-slide:nth-child(even) {min-width: auto;}
    .key-left-bottom .draw-line.horizontal.mo { display: block; } 
    .key-nav-swiper { padding: 0 20px 12px;scrollbar-width: none !important;-ms-overflow-style: none !important;-webkit-overflow-scrolling: touch !important;scroll-behavior: smooth;} 
    .key-nav-swiper::-webkit-scrollbar {display: none !important;}
    .key-nav-swiper .swiper-wrapper { gap: 0; margin: 0; } 
    .key-nav-swiper .swiper-wrapper .swiper-slide { flex-shrink: initial; width: auto;margin-right: 16px; } 
    .key-nav-swiper .key-nav-item::before { top: auto; bottom: -12px; left: 50%; width: 0; height: 2px; transform: translateX(-50%); } 
    .key-nav-swiper .key-nav-item.active::before { height: 2px; width: 100%; transition: width 400ms; -webkit-transition: width 400ms; -moz-transition: width 400ms; -ms-transition: width 400ms; -o-transition: width 400ms; } 
    .key-img-container { max-width: 100%; width: 100%; height: clamp(220px, 33.2vw, 340px);}  
    .key-img-item .key-cont-img img { width: auto; max-width: none; height: 105%; } 
    .key-sec .key-right { width: 100%; padding: 2.86em 0 0; } 
    .key-sec .key-right .draw-line.vertical { display: none; } 
    .key-content-swiper .key-cont-info { padding: 2.14em 1.43em 8.93em; } 
    .key-content-swiper .key-cont-info .key-cont-desc { margin: 1.67em 0 1.11em; } 
    .key-content-swiper .key-cont-info .btn-wrap { margin: 2.86em 0 0; } 
    .key-sec .key-left .init-line.horizontal.pc {display: none;}
    .key-cont-text {margin: 20px 0 0;}
}
@media (max-width: 768px){
    .key-img-item .key-cont-img img { width: auto; max-width: none; height: 100%; } 
}

/*========== Policy Performance ==========*/
.policy-sec { overflow: hidden; position: relative; width: 100%; min-height: 860px; background-color: #335788; border-top: 1px solid var(--line-basic-color); font-size: var(--h-basic-text); } 
.policy-main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.policy-main .main-inner { width: 100%; height: 100%; } 
.policy-main-txt { display: flex; flex-direction: column; justify-content: center; max-width: 860px; height: 100%; margin-top: -20px; padding: 0 3.13em; font-size: var(--h-basic-text); } 
.policy-box-txt { display: flex; justify-content: center; align-items: center; width: fit-content; width: max-content; max-width: 184px; padding: 0.36em 1.09em; margin: 2.18em 0 0; border: 1px solid #fff; border-radius:28px; font-size: 1.38rem; font-weight: 700; font-variation-settings: 'wght' 700; font-family: 'Nunito Sans Variable', 'Nunito Sans', sans-serif; color: #fff; }
.policy-main .title-xl { position: relative; z-index: 1; color: #fff; } 
.policy-main .title-xl br { display: none; } 
.policy-main .policy-split-wrap { overflow: hidden; position: relative; z-index: 1; margin: 3em 0 0; color: #80ABD6; font-size: var(--h-basic-text); } 
.policy-main .policy-split-wrap.mo { display: none; } 
.policy-split-text { display: block; margin-bottom: 0.7em; } 
.policy-split-char { display: inline-block; font-size: 1.63rem; font-weight: 700; font-variation-settings: 'wght' 700; color: #80ABD6; transition: color 0.3s ease; letter-spacing: -0.001em; } 
.policy-split-char.active { color: #fff; } 
.policy-main .btn-wrap { position: relative; z-index: 2; max-width: 13.31em; font-size: var(--h-basic-text); } 
.policy-nav { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; } 
.policy-nav-wrap { display: flex; width: 100%; background-color: #335788; } 
.policy-nav-item { overflow: hidden; position: relative; z-index: 1; width: calc(100% / 3); padding: 0.90em 2.50em;transition: all 0.3s ease; font-size: var(--h-basic-text); cursor: pointer; } 
.policy-nav-item .draw-line {z-index: 5; border-color: #fff;}
.policy-nav-item .draw-line.vertical { transition: height 0.7s ease-out; -webkit-transition: height 0.7s ease-out; -moz-transition: height 0.7s ease-out; -ms-transition: height 0.7s ease-out; -o-transition: height 0.7s ease-out; }
.policy-nav-item:nth-child(2).active .draw-line {border-color: var(--line-basic-color);}
.policy-nav-item:nth-child(3).active .draw-line {border-color: var(--line-basic-color);}
.policy-nav-item .policy-nav-inner { display: flex; align-items: center; position: relative; z-index: 2; } 
.policy-nav-item .nav-num, .policy-nav-item .nav-title { display: flex; position: relative; z-index: 2; background-image: linear-gradient(to right, var(--main-point-color) 0%, var(--main-point-color) 0%, #fff 0%, #fff 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 0.05s linear; font-weight: 600; font-variation-settings: 'wght' 600; font-size: 1.25rem; } 
.policy-nav-item .nav-num.bar { opacity: 0.3; width: 1px; height: 12px; margin: 0 10px; background-clip: initial; } 
.policy-nav-item .nav-num.bar .split-nav-tit { width: 100%; height: 100%; background-color: #fff; transition: background-color 0.1s ease; } 
.split-nav-tit { display: inline-block; transition: color 0.1s ease; font-weight: 600; font-variation-settings: 'wght' 600; } 
.policy-nav-item .progress-bar { position: absolute; z-index: 1; top: 50%; left: -1px; transform: translate(-100%, -50%); width: 110%; height: 5em; border-radius: 0 5em 5em 0; background-color: #fff; will-change: transform; transition: transform 0.05s linear; font-size: var(--h-basic-text); } 
.policy-tab-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.policy-tab-container .main-inner { display: flex; justify-content: flex-end; height: 100%; } 
.policy-tab-container .main-inner .policy-tab-content { width: 40%; min-width: 768px; height: 100%;}
.policy-tab-container .policy-tab-cont { width: 100%; height: 100%; } 
.policy-tab-container .ball-container { position: relative; overflow: visible; width: 100%; height: 100%; }
.policy-tab-cont canvas { image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; backface-visibility: hidden; transform: translateZ(0) scale(1.0001); transform-origin: center center; will-change: transform; filter: contrast(1.02) brightness(1.01); } 
@media only screen and (-webkit-min-device-pixel-ratio: 3),
       only screen and (min-resolution: 288dpi) {
    .policy-tab-cont canvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
        filter: contrast(1.03) brightness(1.02) saturate(1.01);
    }
}
@media (max-width: 1520px){
    .policy-nav-item .nav-num { font-size: clamp(1.25rem,1.58vw,1.50rem); } 
    .policy-nav-item .nav-title { font-size: clamp(1.25rem,1.58vw,1.50rem); } 
    .policy-split-char { font-size: clamp(20px, 1.71vw, 1.63rem); } 
    .policy-box-txt { font-size: clamp(16px, 1.45vw, 1.38rem); } 
}
@media (max-width: 1024px){
    .policy-main .main-inner { margin: 0; padding: 0 20px; } 
    .policy-main .policy-split-wrap { margin: 20px 0 0; } 
    .policy-split-text { margin-bottom: 0.25em; } 
    .policy-nav-item .nav-num { font-size: clamp(1rem,1.95vw,1.25rem); } 
    .policy-nav-item .nav-title { font-size: clamp(1rem,1.95vw,1.25rem); } 
    .policy-main-txt { padding: 0; } 
    .policy-main .btn-wrap { max-width: 10.71em; } 
    .policy-box-txt {margin: 50px 0 0;}
}
@media (max-width: 768px){
    .policy-sec { min-height: 860px; } 
    .policy-nav .main-inner { margin: 0; } 
    .policy-main-txt { justify-content: flex-start; padding-top: 7.86em; } 
    .policy-nav-item { padding: 0.813em 0.83em; } 
    .policy-nav-item .nav-num { font-size: clamp(12px,2.08vw,1rem); } 
    .policy-nav-item .nav-title { font-size: clamp(12px,2.08vw,1rem); } 
    .policy-nav-item .nav-num.bar { height: 8px; margin: 0 6px; } 
    .policy-tab-container .main-inner .policy-tab-content { min-width: auto; width: 100%; } 
    .policy-nav-item:first-child .draw-line.vertical {display: none;}
    .policy-nav-item:last-child .draw-line.vertical.right {display: none;}
}  
@media (max-width: 580px){
    .policy-main .policy-split-wrap { display: none; } 
    .policy-main .policy-split-wrap.mo { display: block; } 
}
@media (max-width: 480px){    
    .policy-sec { min-height: 940px;} 
    .policy-main .title-xl br { display: block; } 
}
@media (max-width: 380px){    
    .policy-nav-item:nth-child(1) {width: 38%;}
    .policy-nav-item:nth-child(2) {width: 26%;}
    .policy-nav-item:nth-child(3) {width: 36%;}
}

/*========== Appendix ==========*/
.appendix-sec .main-inner { position: relative; display: flex; height: 52.50em; } 
.appendix-sec .apd-inner {display: flex;}
/* .appendix-sec .apd-left { display: flex; position: relative; width: clamp(290px, 35.313vw, 678px); padding: 9.19em 3.63em 15em 3.13em; font-size: var(--h-basic-text); } 
.appendix-sec .apd-right { display: flex; justify-content: flex-end; flex: 1; width: calc(100% - clamp(290px, 35.313vw, 678px)); height: 100%; font-size: var(--h-basic-text); }  */
.appendix-sec .apd-wrap {position: relative; width: 50%; height: 100%; padding: 8.44em 1.13em 17em 2.13em; font-size: var(--h-basic-text); } 
.apd-content { position: relative; padding-top: 6.25em; font-size: var(--h-basic-text); }  
.appendix-sec .apd-content .title-xl {position: absolute; top: 0;}
.apd-cont { display: flex; flex-direction: column;margin-top: 3.75em; min-height: 18.25em; font-size: var(--h-basic-text); } 
.apd-cont.right { justify-content: flex-end; width: 9.44em; margin-left: 3.13vw; font-size: var(--h-basic-text); } 
.apd-cont.right figure { width: 100%; } 
.apd-cont.right figure img { aspect-ratio: 151 / 214; } 
.apd-cont .btn-wrap { margin-top: auto; } 
.apd-cont.apd-main .btn-wrap { display: flex;} 
.apd-cont .btn-wrap .basic-btn { font-size: var(--text18-14);} 
.apd-cont.apd-main .btn-wrap .basic-btn + .basic-btn { position: relative; margin-left: 16px; padding-left: 16px; } 
.apd-cont.apd-main .btn-wrap .basic-btn + .basic-btn::before { content: ''; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 1px; height: 20px; background-color: #ddd; } 
.apd-cont .title-sm { position: relative; padding: 2.67em 0 0; background-repeat: no-repeat; background-position: top left; background-size: 2.25em auto; color: var(--main-txt-color); line-height: 1.25; font-size: 1.38rem;} 
.apd-cont .title-sm::before { content: ''; position: absolute; bottom: 2px; left:-1.55em; width: 3px; height: 0.92em; background-color: var(--text-dark-color); } 
.appendix-sec .apd-wrap:nth-child(1) .apd-cont .title-sm::before {bottom: 3px;}
.apd-cont.apd-main .title-sm { background-image: url("../images/main/icon-book.svg"); } 
.apd-cont.apd-esg .title-sm { background-image: url("../images/main/icon-grah.svg"); } 
.apd-cont.apd-frame .title-sm { background-image: url("../images/main/icon-frame.svg"); } 
.apd-cont.apd-policy .title-sm { background-image: url("../images/main/icon-document.svg"); } 
.apd-cont .text18-16 { margin: 1.67em 0 0; font-size: var(--h-basic-text); color: var(--text-gray-color); } 
.appendix-sec .draw-line.vertical.mo {display: none;}
.appendix-sec .draw-line.vertical.tb-only {display: none;}
@media (max-width: 1520px){
    .apd-cont .title-sm { font-size: clamp(16px, 1.45vw, 1.38rem); } 
    .apd-cont .title-sm::before {width: 2px; } 
}
@media (max-width: 1280px) {
    .appendix-sec .main-inner {height: auto;}
    .appendix-sec .apd-inner {flex-wrap: wrap;}
    .appendix-sec .apd-wrap {height: auto; padding-bottom: 0;}
    .appendix-sec .apd-wrap:nth-child(3) { padding-bottom: 8.44em;}
    .appendix-sec .apd-wrap:nth-child(4) { padding-bottom: 8.44em;}
    .appendix-sec .apd-wrap:nth-child(3) .apd-content {padding: 0;}
    .appendix-sec .apd-wrap:nth-child(4) .apd-content {padding: 0;}
    .appendix-sec .apd-wrap:nth-child(3) .apd-cont {margin: 0;}
    .appendix-sec .apd-wrap:nth-child(4) .apd-cont {margin: 0;}
    .appendix-sec .draw-line.vertical.mo {display: block;}
    .appendix-sec .draw-line.vertical.pc {display: none;}
    .appendix-sec .draw-line.vertical.tb-only {display: block;}
    .apd-cont .title-sm::before {left:-29px;}
}
@media (max-width: 1024px){
    .appendix-sec .main-inner { flex-direction: column; height: auto; } 
    .apd-cont { min-height: auto; } 
    .apd-cont .btn-wrap { margin-top: 2.14em; } 
    .apd-cont.apd-main .btn-wrap .basic-btn + .basic-btn { margin-left: 12px; padding-left: 12px; } 
    .apd-cont.apd-main .btn-wrap .basic-btn + .basic-btn::before { height: 12px; } 
    .appendix-sec .apd-right { flex-direction: column; justify-content: flex-start; gap: 4em; width: 100%; padding: 0 0 10em; } 
    .appendix-sec .apd-right .apd-wrap { justify-content: flex-start; width: 100%; padding: 0 10px 0 20px; } 
    .appendix-sec .apd-right .apd-wrap .draw-line { display: none; } 
    .apd-cont .title-sm { padding: 2.60em 0 0; background-size: 2em auto; } 
    .apd-cont .text18-16 { margin: 1.250em 0 0; } 
}
@media (max-width: 768px){
    .appendix-sec .apd-inner {flex-direction: column;padding: 80px 0 140px;}
    .appendix-sec .apd-wrap {width: 100%;padding: 0 20px;}
    .appendix-sec .apd-wrap:nth-child(3) { padding-bottom: 0;}
    .appendix-sec .apd-wrap:nth-child(4) { padding-bottom: 0;}
    .apd-content { padding: 0;} 
 
    .appendix-sec .apd-wrap:nth-child(1) .apd-cont {margin: 56px 0;}
    .apd-cont {margin: 0 0 56px;}
    .appendix-sec .apd-wrap:nth-child(3) .apd-cont {margin: 0 0 56px;}
    .appendix-sec .apd-wrap:nth-child(4) .apd-cont {margin: 0 0 56px;}

    .apd-cont .title-sm::before { left: -19px; bottom: -2px; height: 22px; } 
    .appendix-sec .apd-wrap:nth-child(1) .apd-cont .title-sm::before {bottom: 16px;}
    .appendix-sec .apd-content .title-xl {position: static;}
    .appendix-sec .draw-line.vertical.tb {display: none;}
    .appendix-sec .draw-line.vertical.tb-only {display: none;}
}