/* 커스텀 폰트 및 스타일 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+KR:wght@400;600;700&display=swap');

:root {
    --font-kr: 'Noto Sans KR', sans-serif;
    --font-en: 'Montserrat', sans-serif;
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scroll-snap-strictness: proximity;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59, 130, 246 / var(--tw-text-opacity, 1));
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --primary-blue: #0D47A1; /* 짙은 파란색 계열 */
    --accent-cyan: #00BCD4; /* 청록색 강조 */
    --text-dark: #374151;
    --text-light: #4B5563;

}

*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

.text-white { color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.text-gray-600 { color: rgb(75 85 99 / var(--tw-text-opacity, 1)); }
.text-gray-700 { color: rgb(55 65 81 / var(--tw-text-opacity, 1)); }
.text-gray-800 { color: rgb(31 41 55 / var(--tw-text-opacity, 1)); }
.text-gray-900 { color: rgb(17 24 39 / var(--tw-text-opacity, 1)); }
.text-green-600 { color: rgb(22 163 74 / var(--tw-text-opacity, 1)); }
.text-yellow-600 { color: rgb(202 138 4 / var(--tw-text-opacity, 1)); }
.text-blue-600 { color: rgb(37 99 235 / var(--tw-text-opacity, 1)); }
.text-cyan-400 { color: rgb(34 211 238 / var(--tw-text-opacity, 1)); }
.text-cyan-600 { color: rgb(8 145 178 / var(--tw-text-opacity, 1));}
.text-amber-500 { color: rgb(245 158 11 / var(--tw-text-opacity, 1)); }

.bg-white { background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.bg-gray-50 { background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); }
.bg-gray-800 { background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)); }
.bg-green-100 { background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); }
.bg-blue-50 { background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); }
.bg-blue-100 { background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); }
.bg-blue-600 { background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); }
.bg-yellow-100 { background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1)); }
.bg-cyan-600 { background-color: rgb(6 182 212 / var(--tw-bg-opacity, 1)); }
.bg-cyan-600:hover { background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1)); }

.border-gray-200 { border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); }
.border-amber-500 { border-color: rgb(245 158 11 / var(--tw-border-opacity, 1)); }
.border-cyan-500:hover { background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1)); }

/* 기본 폰트 설정 및 일반 텍스트 스타일 */
body {
    font-family: 'Noto Sans KR', sans-serif; /* 기본 폰트 Noto Sans KR 적용 */
    background-color: #f4f7f6;
    color: #1e293b;
    font-weight: 400; /* 일반 텍스트 font-weight 400 */
    margin: 0;
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

img, video {
    max-width: 100%;
    height: auto;
}

audio, canvas, embed, iframe, img, object, svg, video {
    display: block;
    vertical-align: middle;
}

menu, ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

[role=button], button {
    cursor: pointer;
}

button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

button, select {
    text-transform: none;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

/* --- GNB 메뉴 항목 개선 스타일 --- */
.gnb-menu-item {
    position: relative;
    display: inline-block;
    color: #4b5563; /* Gray-700 */
    font-size: 18px; /* GNB 폰트 크기 개선 */
    font-weight: 600; /* 굵기 개선 */
    padding: 0.5rem 0; /* 상하 패딩으로 클릭 영역 확보 */
}
/* 호버/활성 시 밑줄 애니메이션 */
.gnb-menu-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #00e0b3; /* 밝은 청록색 */
    transition: width 0.3s ease, left 0.3s ease;
    border-radius: 9999px;
}
.gnb-menu-item:hover::after {
    width: 100%;
    left: 0;
}
.gnb-menu-item:hover {
    color: #06b6d4; /* Hover 시 색상 변경 */
}

/* 스크롤 시 GNB 그림자 */
#header.header-scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-title {
    font-weight: 700;
    font-size: 1.5rem; /* 20px */
    margin-bottom: 0.5rem;
}

.opacity-07 {
    opacity:0.7;
}
.opacity-08 {
    opacity:0.8;
}


.text-large {
    font-size: 1.5rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 1.75rem;
}
.text-3xl {
    font-size: 1.8rem;
    line-height: 1.75rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

/* ---------------------------------- */

/* 이미지 배경의 텍스트 컨테이너 스타일 */
.image-text-container {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 2.5rem;
    border-radius: 1rem;
    text-align: center;
}

/* 메인 섹션 타이틀 (h2) */
.section-title {
    font-size: 2.25rem; /* 36px */
    font-weight: 800; /* Noto Sans KR 매우 굵게 */
    /*color: var(--primary-blue);*/
    margin-bottom: 0.75rem;
    line-height: 1.2;
}


/* 패럴랙스 섹션 컨테이너 스타일 */
.parallax-section {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 이미지 레이어 */
.img-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10;
}

/* 텍스트/콘텐츠 레이어 */
.content-layer {
    position: relative;
    z-index: 20;
    color: white;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur(5px);
    max-width: 80%;
}

/* 역동적인 움직임을 위한 CSS */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.animated {
    opacity: 1;
    transform: translateY(0);
}

/* 섹션별 배경 스타일은 유지 */
#intro .content-layer {
    background: linear-gradient(135deg, rgba(3, 105, 161, 0.8), rgba(0, 224, 179, 0.8));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
#environment .content-layer {
    background: rgba(16, 185, 129, 0.7); /* Green-500 */
}
#social .content-layer {
    background: rgba(59, 130, 246, 0.7); /* Blue-500 */
}
#governance .content-layer {
    background: rgba(147, 51, 234, 0.7); /* Violet-600 */
}

/* Data room h2 타이틀에도 title-text 적용 */
#dataroom h2 {
    font-size: 34px;
    font-weight: 700;
}
/* Data room 카드 내부 텍스트에도 기본 스타일 적용 */
#dataroom p {
    font-size: 18px;
    font-weight: 400;
}
#dataroom h4 {
    font-weight: 700;
}

.duration-300 {
    transition-duration: 300ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.border {
    border-width: 1px;
}

.border-b {
    border-bottom-width: 1px;
}
.z-50 {
    z-index: 50;
}
.top-0 {
    top: 0px;
}

.right-0 {
    right: 0px;
}

.left-0 {
    left: 0px;
}

.fixed {
    position: fixed;
}
.max-w-4xl {
    max-width: 56rem;
}
 .mx-auto {
     margin-left: auto;
     margin-right: auto;
 }
.justify-between {
    justify-content: space-between;
}

.items-center {
    align-items: center;
}
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1 1 0%;
}

.tracking-wider img{
    width:99px;
}

.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }


.pt-32 {
    padding-top: 8rem;
}

 .pb-16 {
     padding-bottom: 4rem;
 }

.text-center {
    text-align: center;
}

.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}

 .tracking-tight {
     letter-spacing: -0.025em;
 }

.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }

.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }

.pl-4 {
    padding-left: 1rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }


.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }

.w-16 { width: 4rem; }
.w-full { width: 100%; }

.h-16 { height: 4rem; }
.h-72 { height: 18rem; }
.h-96 { height: 24rem; }
.h-full { height: 100%; }


.rounded-lg {
    border-radius: 0.5rem;
}
.rounded-xl {
    border-radius: 0.75rem;
}
.leading-relaxed {
    line-height: 1.625;
}


 .overflow-hidden {
     overflow: hidden;
 }

 .relative {
     position: relative;
 }
.object-cover {
    object-fit: cover;
}


 .inset-0 {
     inset: 0px;
 }

 .absolute {
     position: absolute;
 }

.gnb-top-arrow {
    display: none;
}

@media (max-width:1100px) {
    .gnb-menu-item {
        font-size: 14px; /* GNB 폰트 크기 개선 */
        font-weight: 600; /* 굵기 개선 */
    }
}

@media (min-width: 768px) {
    .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:920px) {
    .gnb-ul {
        display: none;
    }
    .gnb-top-arrow {
        display: inline-block;
    }
}

.flex-col {
    flex-direction: column;
}

 .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
 }

 .grid {
     display: grid;
 }

.shadow-sm {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}


 .rounded-full {
     border-radius: 9999px;
 }


 .inline-flex {
     display: inline-flex;
 }


 .inline-block {
     display: inline-block;
 }



.flex-shrink-0 {
    flex-shrink: 0;
}

/* Data Room Card Hover Effect */
.dataroom-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}





/* 서브 타이틀 (h3) */
.section-subtitle {
    font-size: 1.5rem; /* 24px */
    font-weight: 700; /* Noto Sans KR 굵게 */
    color: var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* 섹션 메인 텍스트 */
.section-text {
    color: var(--text-light);
    font-size: 1.1rem; /* 17.6px */
    font-weight: 400;
    margin-bottom: 1.5rem;
}

/* ------------------ 카드 내 텍스트 및 아이콘 스타일 ------------------ */
.card-text {
    color: var(--text-light);
    font-size: 0.95rem; /* 15.2px */
}

.icon-lg {
    font-size: 3rem; /* 아이콘 크기 증가 */
    margin-bottom: 1rem;
}

/* ESG 프레임워크 아이콘 색상 */
.icon-e { color: #10B981; } /* Emerald-500 */
.icon-s { color: #3B82F6; } /* Blue-500 */
.icon-g { color: #8B5CF6; } /* Violet-500 */

/* 데이터룸 버튼 스타일 */
.dataroom-button {
    background-color: var(--accent-cyan);
    color: white;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 188, 212, 0.3);
}
.dataroom-button:hover {
    background-color: #00A9C2;
    transform: translateY(-2px);
}

/* ------------------ 기존 CSS 클래스 유지 및 변환 ------------------ */
.header-scrolled {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 폰트 컬러 조정 (이미지 배경 위에 사용되는 텍스트 색상) */
.text-color-dark-bg { color: #f3f4f6; /* Gray-100 */ }
.text-color-accent { color: var(--accent-cyan); }

/* 이미지 배경의 텍스트 컨테이너 스타일 */
.image-text-container {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 2.5rem;
    border-radius: 1rem;
    text-align: center;
}

/* Data Room Card Hover Effect */
.dataroom-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.fa-solid, .fas {
    font-weight: 900;
}
.fa-classic, .fa-regular, .fa-solid, .far, .fas {
    font-family: "Font Awesome 6 Free";
}
.fa, .fa-brands, .fa-classic, .fa-regular, .fa-sharp, .fa-solid, .fab, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    /*display: var(--fa-display, inline-block);*/
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}

.lang {
    display: inline-block;
    min-width: 78px;
    margin-left: 20px;
    font-size: 0;
}
.lang li {
    display: inline-block;
    width: 39px;
    height: 37px;
}
.lang li.on a {
    background: #f6a81e;
    border: 1px solid #f6a81e;
    color: #fff;
}
.lang li a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: 1px solid #d8d8d8;
    font-size: 13px;
    font-weight: 500;
    box-sizing: border-box;
    transition: all 0.3s
    ease;
}
a:visited {
    color: #333;
}
a {
    color: #333;
    text-decoration: none;
}

.hand {
    cursor: pointer;
}