/* ===================================
   ESG RG
   ESG Research Group
=================================== */

:root {

    --green:#00A651;
    --green-dark:#2E8B57;

    --blue:#0099CC;
    --blue-dark:#3A8DDE;

    --lime:#8CC63F;

    --white:#ffffff;
    --light:#F5F7F8;
    --dark:#2C2C2C;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Pretendard',sans-serif;
    color:var(--dark);
    line-height:1.7;
    background:#fff;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

img{
    max-width:100%;
    display:block;
}

/* ==========================
   Container
========================== */

.container{

    width:90%;
    max-width:1200px;
    margin:auto;
}

/* ==========================
   Header
========================== */

.header{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(10px);

    z-index:999;

    box-shadow:0 2px 15px rgba(0,0,0,.05);

}

.header-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:85px;
}

.logo-wrap img{

    height:55px;
}

.nav ul{

    display:flex;

    gap:40px;
}

.nav a{

    color:#222;
    font-weight:600;
    transition:.3s;
}

.nav a:hover{

    color:var(--green);
}

.mobile-menu-btn{

    display:none;
}

/* ==========================
   Hero
========================== */

.hero{

    height:100vh;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:
    linear-gradient(
        rgba(0,0,0,.35),
        rgba(0,0,0,.35)
    ),
    url('../images/hero-bg.jpg');

    background-size:cover;
    background-position:center;
}

.hero-content{

    z-index:2;
    color:#fff;
}

/* ==========================
   ESG RG 3D
========================== */

.hero-title{

    font-size:7rem;

    font-weight:800;

    letter-spacing:8px;

    text-transform:uppercase;

    color:#fff;

    text-shadow:

    1px 1px 0 #ddd,
    2px 2px 0 #ccc,
    3px 3px 0 #bbb,
    4px 4px 0 #aaa,
    5px 5px 20px rgba(0,0,0,.45);

    animation:floatLogo 4s ease-in-out infinite;
}

@keyframes floatLogo{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }
}

.hero-slogan{

    margin-top:25px;

    font-size:1.5rem;

    font-weight:600;
}

.hero-desc{

    margin-top:20px;

    font-size:1.1rem;

    max-width:700px;

    margin-left:auto;
    margin-right:auto;
}

/* ==========================
   Buttons
========================== */

.hero-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:15px;
}

.btn{

    padding:15px 35px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;
}

.btn-green{

    background:var(--green);

    color:#fff;
}

.btn-green:hover{

    transform:translateY(-3px);

    background:var(--green-dark);
}

.btn-white{

    background:#fff;

    color:#222;
}

.btn-white:hover{

    transform:translateY(-3px);
}

/* ==========================
   Section Title
========================== */

.section-title{

    text-align:center;

    margin-bottom:60px;
}

.section-title h2{

    font-size:2.3rem;

    margin-bottom:15px;
}

.section-title p{

    color:#666;
}

/* ==========================
   Intro
========================== */

.intro{

    padding:120px 0;
}

.cards{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:30px;
}

.card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    transition:.3s;
}

.card:hover{

    transform:translateY(-8px);
}

.icon{

    font-size:3rem;

    margin-bottom:20px;
}

.card h3{

    margin-bottom:15px;

    color:var(--green);
}

/* ==========================
   Strength
========================== */

.strength{

    padding:120px 0;

    background:var(--light);
}

.strength-box{

    background:#fff;

    border-radius:25px;

    padding:60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.07);
}

.numbers{

    display:flex;

    gap:40px;
}

.numbers span{

    display:block;

    font-size:2.5rem;

    font-weight:700;

    color:var(--green);
}

/* ==========================
   Footer
========================== */

footer{

    background:#0c1e22;

    color:#fff;

    text-align:center;

    padding:60px 20px;
}

footer h3{

    margin-bottom:15px;
}

footer p{

    margin-bottom:10px;
}

.copyright{

    margin-top:20px;

    opacity:.7;
}

/* ==========================
   Responsive
========================== */

@media(max-width:991px){

    .cards{

        grid-template-columns:
        repeat(2,1fr);
    }

    .strength-box{

        flex-direction:column;

        text-align:center;
    }

    .numbers{

        justify-content:center;
    }
}

@media(max-width:768px){

    .nav{

        display:none;
    }

    .mobile-menu-btn{

        display:block;

        border:none;

        background:none;

        font-size:28px;

        cursor:pointer;
    }

    .hero-title{

        font-size:4rem;
    }

    .hero-slogan{

        font-size:1.1rem;
    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;
    }

    .cards{

        grid-template-columns:1fr;
    }

    .numbers{

        flex-direction:column;
    }
}

@media(max-width:480px){

    .hero-title{

        font-size:3rem;
    }

    .section-title h2{

        font-size:1.8rem;
    }
}
/* ==========================
   Animation
========================== */

.hero-title,
.hero-slogan,
.hero-desc,
.hero-buttons{

    opacity:0;

    transform:translateY(30px);

    transition:.8s;
}

.show{

    opacity:1;

    transform:translateY(0);
}

.card{

    opacity:0;

    transform:translateY(40px);

    transition:.8s;
}

.card.visible{

    opacity:1;

    transform:translateY(0);
}

.strength-box{

    opacity:0;

    transform:translateY(40px);

    transition:.8s;
}

.strength-box.visible{

    opacity:1;

    transform:translateY(0);
}

/* ==========================
   Mobile Menu
========================== */

@media(max-width:768px){

    .nav.active{

        display:block;

        position:absolute;

        top:85px;

        left:0;

        width:100%;

        background:#fff;

        padding:20px 0;

        box-shadow:
        0 10px 30px rgba(0,0,0,.1);
    }

    .nav.active ul{

        flex-direction:column;

        text-align:center;

        gap:20px;
    }
}
/* =====================
   Company Page
===================== */

.page-hero{

    height:450px;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#fff;

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url('../images/company-bg.jpg');

    background-size:cover;
    background-position:center;
}

.page-content{

    position:relative;
    z-index:2;
}

.page-content h1{

    font-size:3rem;

    margin-bottom:15px;
}

.company-section{

    padding:120px 0;
}

.company-grid{

    display:grid;

    grid-template-columns:
    1fr 1.3fr;

    gap:60px;

    align-items:center;
}

.company-grid h3{

    margin-bottom:20px;

    color:var(--green);
}

.company-grid p{

    margin-bottom:15px;
}

.value-section{

    padding:120px 0;

    background:#f8fafb;
}

.location-section{

    padding:120px 0;
}

.location-grid{

    display:grid;

    grid-template-columns:
    1.2fr 1fr;

    gap:50px;

    align-items:center;
}

.location-grid img{

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);
}

@media(max-width:768px){

    .company-grid,
    .location-grid{

        grid-template-columns:1fr;
    }

    .page-content h1{

        font-size:2.2rem;
    }
}
/* =====================
   CEO PAGE
===================== */

.ceo-hero{

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url('../images/ceo-bg.jpg');

    background-size:cover;
    background-position:center;
}

.ceo-section{

    padding:120px 0;
}

.ceo-grid{

    display:grid;

    grid-template-columns:
    450px 1fr;

    gap:70px;

    align-items:center;
}

.ceo-image img{

    border-radius:25px;

    box-shadow:
    0 20px 40px rgba(0,0,0,.12);
}

.ceo-message h2{

    color:var(--green);

    margin-bottom:30px;

    line-height:1.4;
}

.ceo-message p{

    margin-bottom:18px;

    color:#444;
}

.signature{

    margin-top:40px;

    font-family:
    'Great Vibes',
    cursive;

    font-size:3rem;

    color:var(--green);
}

.ceo-title{

    margin-top:10px;

    font-size:.95rem;

    color:#666;
}

.career-section{

    padding:120px 0;

    background:#f7f9fa;
}

.career-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:30px;
}

.career-card{

    background:#fff;

    padding:40px;

    text-align:center;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.07);
}

.career-card h3{

    font-size:2.5rem;

    color:var(--green);

    margin-bottom:15px;
}

@media(max-width:991px){

    .ceo-grid{

        grid-template-columns:1fr;
    }

    .career-grid{

        grid-template-columns:
        repeat(2,1fr);
    }
}

@media(max-width:768px){

    .career-grid{

        grid-template-columns:1fr;
    }
}
/* ==========================
   ESG PAGE
========================== */

.esg-hero{

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url('../images/esg-bg.jpg');

    background-size:cover;
    background-position:center;
}

.esg-intro{

    padding:120px 0;
}

.esg-three{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;
}

.esg-box{

    background:#fff;

    padding:40px;

    text-align:center;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);
}

.esg-icon{

    font-size:3rem;

    margin-bottom:20px;
}

.need-section{

    padding:120px 0;

    background:#f7f9fa;
}

.esg-role{

    padding:120px 0;
}

.role-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    background:#fff;

    padding:60px;

    border-radius:25px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);
}

.role-box h2{

    margin-bottom:25px;

    color:var(--green);
}

.role-box p{

    margin-bottom:15px;
}

.role-box .btn{

    margin-top:25px;

    display:inline-block;
}

@media(max-width:991px){

    .esg-three{

        grid-template-columns:1fr;
    }
}
/* ==========================
   ESG ROADMAP
========================== */

.roadmap-hero{

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url('../images/esg-roadmap-bg.jpg');

    background-size:cover;
    background-position:center;
}

.roadmap-section{

    padding:120px 0;
}

.roadmap{

    max-width:900px;

    margin:auto;
}

.step-card{

    background:#fff;

    padding:40px;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    text-align:center;
}

.step-number{

    display:inline-block;

    margin-bottom:15px;

    color:var(--green);

    font-weight:700;
}

.step-card h3{

    margin-bottom:15px;
}

.step-arrow{

    text-align:center;

    font-size:2rem;

    margin:25px 0;

    color:var(--green);
}

.service-area{

    padding:120px 0;

    background:#f7f9fa;
}
/* ==========================
   FINANCE PAGE
========================== */

.finance-hero{

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url('../images/finance-bg.jpg');

    background-size:cover;
    background-position:center;
}

.finance-intro{

    padding:120px 0;
}

.finance-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;
}

.finance-card{

    background:#fff;

    padding:40px;

    border-radius:20px;

    text-align:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    transition:.3s;
}

.finance-card:hover{

    transform:translateY(-8px);
}

.finance-card h3{

    margin-bottom:15px;

    color:var(--green);
}

.finance-value{

    padding:120px 0;

    background:#f7f9fa;
}

.value-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    background:#fff;

    padding:60px;

    border-radius:25px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);
}

.value-box h2{

    margin-bottom:25px;

    color:var(--green);
}

.value-box p{

    margin-bottom:15px;
}

.value-box .btn{

    margin-top:25px;

    display:inline-block;
}

@media(max-width:991px){

    .finance-grid{

        grid-template-columns:1fr;
    }
}
/* ==========================
   FINANCE STRATEGY
========================== */

.finance-strategy-hero{

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url('../images/finance-strategy-bg.jpg');

    background-size:cover;
    background-position:center;
}

.strategy-section{

    padding:120px 0;
}

.strategy-grid{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;
}

.strategy-card{

    background:#fff;

    padding:40px;

    border-radius:20px;

    text-align:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    transition:.3s;
}

.strategy-card:hover{

    transform:translateY(-8px);
}

.strategy-card .icon{

    font-size:3rem;

    margin-bottom:20px;
}

.strategy-card h3{

    color:var(--green);

    margin-bottom:15px;
}

@media(max-width:991px){

    .strategy-grid{

        grid-template-columns:
        repeat(2,1fr);
    }

}

@media(max-width:768px){

    .strategy-grid{

        grid-template-columns:1fr;
    }

}
/* ==========================
   NOTICE
========================== */

.notice-hero{

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url('../images/notice-bg.jpg');

    background-size:cover;
    background-position:center;
}

.notice-section{

    padding:120px 0;
}

.notice-list{

    max-width:1000px;

    margin:auto;
}

.notice-item{

    display:flex;

    gap:40px;

    padding:35px;

    margin-bottom:20px;

    background:#fff;

    border-radius:20px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.07);
}

.notice-date{

    min-width:120px;

    color:var(--green);

    font-weight:700;
}

.notice-content h3{

    margin-bottom:10px;
}

.contact-shortcut{

    padding:120px 0;

    background:#f7f9fa;
}

.shortcut-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    background:#fff;

    padding:60px;

    border-radius:25px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);
}

.shortcut-box h2{

    margin-bottom:20px;

    color:var(--green);
}

.shortcut-box p{

    margin-bottom:25px;
}

@media(max-width:768px){

    .notice-item{

        flex-direction:column;

        gap:15px;
    }

}
/* ==========================
   CONTACT
========================== */

.contact-hero{

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url('../images/contact-bg.jpg');

    background-size:cover;
    background-position:center;
}

.contact-section{

    padding:120px 0;
}

.contact-wrapper{

    max-width:800px;

    margin:auto;

    background:#fff;

    padding:50px;

    border-radius:25px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);
}

.form-group{

    margin-bottom:25px;
}

.form-group label{

    display:block;

    margin-bottom:10px;

    font-weight:600;
}

.form-group input,
.form-group textarea{

    width:100%;

    padding:15px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:16px;
}

.contact-info{

    padding:120px 0;

    background:#f7f9fa;
}

.info-box{

    max-width:800px;

    margin:auto;

    text-align:center;

    background:#fff;

    padding:60px;

    border-radius:25px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);
}

.info-box h2{

    color:var(--green);

    margin-bottom:20px;
}

.info-box p{

    margin-bottom:10px;
}