/* ESG 페이지 전용 CSS */
.esg-wrapper {
    font-family: 'NanumSquare', sans-serif !important;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fc;
    margin: 0;
    padding: 0;
    max-width: 100vw;
    overflow-x: hidden;
}

.esg-wrapper * {
    box-sizing: border-box;
    font-family: 'NanumSquare', sans-serif !important;
}

.esg-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0px;
}

/* 히어로 섹션 - 배경 이미지 적용 */
.esg-hero {
    padding: 100px 0;
    color: white;
    position: relative;
    overflow: hidden;
    min-height: 600px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.esg-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #081f3780;
    z-index: 1;
}

.esg-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.esg-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-bottom: 30px;
    display: inline-block;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.esg-hero h1 {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    color: white;
}

.esg-hero p {
    font-size: 1.5rem;
    margin-bottom: 40px;
    opacity: 0.95;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    color: white;
}

.esg-cta-primary {
    background: #ff6b35;
    color: white !important;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
    display: inline-block;
    margin-right: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.esg-cta-primary:hover {
    background: #e55a2b;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
    color: white !important;
}

.esg-cta-sub {
    background: #ff6b35;
    color: white !important;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
    display: inline-block;
    margin-right: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
    margin-top: 20px;        /* 항상 카드 하단으로 밀리도록 */
    align-self: center;  /* 버튼 정렬 (왼쪽, 필요시 center로 변경 가능) */
}

.esg-cta-secondary {
    background: #00000036;
    color: white !important;
    padding: 16px 32px;
    border: 2px solid white;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.esg-cta-secondary:hover {
    background: white;
    color: #4a90e2 !important;
}

/* 서비스 소개 섹션 */
.esg-intro {
    padding: 100px 0;
    background: #f8f9fc;
}

.esg-intro-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.esg-intro-text h2 {
    font-size: 30px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 25px;
    line-height: 1.3;
}

.esg-intro-text p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 10px;
}

.esg-intro-features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    margin-left: 0;
}

.esg-intro-features li {
    padding: 2px 0;
    position: relative;
  /*padding-left: 30px;*/
    color: #555;
}

/*
.esg-intro-features li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: black;
    font-weight: bold;
    font-size: 1.2rem;
}
*/

.esg-intro-visual {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.esg-intro-icon {
    width: 530px;
    height: auto;
   /* background: linear-gradient(135deg, #4a90e2, #357abd);*/
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin: 0 auto 20px;
    color: white;
    transition: all 0.3s ease;
}

/* 
.esg-intro-visual:hover .esg-intro-icon {
    transform: scale(1.05) rotate(5deg);
}
*/

.esg-intro-visual h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 600;
}

.esg-intro-visual p {
    color: #666;
    margin: 0;
}

/* 서비스 카드 섹션 */
.esg-services {
    padding: 100px 0;
    background: white;
}

.esg-section-header {
    text-align: center;
    margin-bottom: 80px;
}

.esg-section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
}

.esg-section-header p {
    font-size: 1.2rem;
    color: #666;
}

.esg-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.esg-service-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    position: relative;
    display: flex;
    flex-direction: column;
}

.esg-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15);
    border-color: #ff6b35;
}

.esg-service-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.esg-service-icon {
    width: 50px;
    height: 50px;
    background: #f2f5f8;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-right: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.esg-service-card:hover .esg-service-icon {
    transform: scale(1.1);
}

.esg-service-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.esg-service-card p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 25px;
}

.esg-service-features {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.esg-service-features li {
    padding: 8px 0;
    color: #555;
    position: relative;
    padding-left: 25px;
    font-size: 0.95rem;
}

.esg-service-features li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: gray;
    font-weight: bold;
}

/* 기능 비교 섹션 */
.esg-comparison {
    padding: 100px 0;
    background: #764ba2;
    color: white;
    position: relative;
    overflow: hidden;
}

.esg-comparison * {
    color: white;
}

.esg-comparison::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.05)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.03)"/><circle cx="40" cy="70" r="1" fill="rgba(255,255,255,0.04)"/></svg>');
    opacity: 0.3;
}

.esg-comparison-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.esg-comparison-item {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.esg-comparison-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.esg-comparison-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.esg-comparison-item:hover .esg-comparison-icon {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.3);
}

.esg-comparison-item h4 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.esg-comparison-item p {
    font-size: 0.95rem;
    opacity: 0.9;
    line-height: 1.6;
}

/* 혜택 섹션 */
.esg-benefits {
    padding: 100px 0;
    background: #f8f9fc;
}

.esg-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.esg-benefit-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

/*
.esg-benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
    border-color: #ff6b35;
}
*/

.esg-benefit-icon {
    width: 70px;
    height: 70px;
    background: #6B7694;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin: 0 auto 25px;
    transition: all 0.3s ease;
}

/*
.esg-benefit-card:hover .esg-benefit-icon {
    transform: scale(1.1);
}
*/

.esg-benefit-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
}

.esg-benefit-card p {
    color: #666;
    line-height: 1.5;
    text-align: left;
    margin: 0px 10px;
    margin-bottom: auto;
}

/* 마지막 CTA 섹션 */
.esg-final-cta {
    padding: 80px 0;
    background: #475569;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.esg-final-cta * {
    color: white;
}

.esg-final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0.3;
}

.esg-final-cta h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    color: white !important;
}

.esg-final-cta p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

.esg-final-cta div {
    position: relative;
    z-index: 2;
}

/* 도입문의 섹션 */
.esg-inquiry-section {
    background: #f3f4f5;
    padding: 60px;
}

.quest-header h3 {
    color: #333;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -2px;
    text-align: center;
    margin-bottom: 40px;
}

.esg-inquiry-wrapper {
    display: flex;
    gap: 200px;
    max-width: 1200px;
    margin: 0 auto;
}

.quest-form,
.wpcf7 {
    flex: 1;
}

.label-flex {
    display: flex;
    align-items: start;
    margin-bottom: 10px;
}

.radio-flex {
    display: flex;
    cursor: pointer;
}

.radio-label-flex {
    align-items: center;
}

.quest-form p {
    margin: 0;
    color: #333;
    font-weight: 600;
    letter-spacing: -0.4px;
    width: 100%;
}

.quest-form .label {
    width: 200px;
}

.quest-form .label span {
    color: #ff0000;
}

.quest-form .quest-input {
    flex: 1;
    border: 1px solid #cfcfcf;
    letter-spacing: -0.4px;
    background: #fff;
    font-size: 16px;
    padding: 15px 25px;
}

.quest-form .quest-input:focus {
    border: 1px solid #3e5576;
    outline: none;
}

.quest-form .quest-input:placeholder {
    letter-spacing: -0.4px;
}

.quest-form p.radio-label {
    margin-right: 15px;
}

.quest-form .radio-input {
    margin-right: 5px;
    position: relative;
    appearance: none;
    padding-left: 24px;
}

.quest-form .radio-input::before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.525 16.55L17.6 9.475L16.45 8.35L10.525 14.275L7.525 11.275L6.4 12.4L10.525 16.55ZM12 22C10.6333 22 9.34167 21.7375 8.125 21.2125C6.90833 20.6875 5.84583 19.9708 4.9375 19.0625C4.02917 18.1542 3.3125 17.0917 2.7875 15.875C2.2625 14.6583 2 13.3667 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.02917 5.825 4.9375 4.925C5.84583 4.025 6.90833 3.3125 8.125 2.7875C9.34167 2.2625 10.6333 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3667 21.7375 14.6583 21.2125 15.875C20.6875 17.0917 19.975 18.1542 19.075 19.0625C18.175 19.9708 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20.5C14.3667 20.5 16.375 19.6708 18.025 18.0125C19.675 16.3542 20.5 14.35 20.5 12C20.5 9.63333 19.675 7.625 18.025 5.975C16.375 4.325 14.3667 3.5 12 3.5C9.65 3.5 7.64583 4.325 5.9875 5.975C4.32917 7.625 3.5 9.63333 3.5 12C3.5 14.35 4.32917 16.3542 5.9875 18.0125C7.64583 19.6708 9.65 20.5 12 20.5Z' fill='%237f7f7f'/%3E%3C/svg%3E");
}

.quest-form .radio-input:checked::before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.525 16.55L17.6 9.475L16.45 8.35L10.525 14.275L7.525 11.275L6.4 12.4L10.525 16.55ZM12 22C10.6333 22 9.34167 21.7375 8.125 21.2125C6.90833 20.6875 5.84583 19.9708 4.9375 19.0625C4.02917 18.1542 3.3125 17.0917 2.7875 15.875C2.2625 14.6583 2 13.3667 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.02917 5.825 4.9375 4.925C5.84583 4.025 6.90833 3.3125 8.125 2.7875C9.34167 2.2625 10.6333 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3667 21.7375 14.6583 21.2125 15.875C20.6875 17.0917 19.975 18.1542 19.075 19.0625C18.175 19.9708 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z' fill='%2354abe5'/%3E%3C/svg%3E");
}

input[type="radio"]:checked,
input[type=reset],
input[type="checkbox"]:checked,
input[type="checkbox"]:hover:checked,
input[type="checkbox"]:focus:checked,
input[type=range]::-webkit-slider-thumb {
    background-color: transparent !important;
    border-color: transparent !important;
}

.questBtn input {
    background: #ff6b35;
    color: #fff;
    display: inline-block;
    margin-left: 200px;
    text-align: center;
    padding: 15px 60px;
    margin-top: 50px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    font-family: 'NanumSquare', sans-serif !important;
}

.questBtn input:hover {
    background: #0561a4;
    color: #fff;
    border-radius: 30px;
}

.agreeAnchor {
    text-decoration: underline;
    color: #333;
}

/* 애니메이션 */
.esg-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.esg-animate.esg-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 아이콘 이미지 스타일 */
.esg-service-icon img,
.esg-comparison-icon img,
.esg-benefit-icon img,
.esg-intro-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 모바일 반응형 전체 수정 */
@media (max-width: 1024px) {
    .esg-intro-content {
        grid-template-columns: 1fr !important;
        gap: 50px !important;
        text-align: center !important;
    }

    .esg-comparison-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .esg-inquiry-wrapper {
        flex-direction: column !important;
        gap: 40px !important;
    }
}

@media (max-width: 768px) {
    /* 전체 컨테이너 너비 제한 */
    .esg-wrapper {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .esg-container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    /* 히어로 섹션 */
    .esg-hero {
        padding: 60px 0 !important;
        background-attachment: scroll !important;
        min-height: 500px !important;
    }
    
    .esg-hero-content {
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    .esg-hero h1 {
        font-size: 2rem !important;
        word-break: keep-all !important;
        line-height: 1.3 !important;
    }
    
    .esg-hero p {
        font-size: 1.1rem !important;
        word-break: keep-all !important;
        margin-bottom: 30px !important;
    }
    
    /* 히어로 버튼 중앙 정렬 */
    .esg-hero-content > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    .esg-cta-primary,
    .esg-cta-secondary {
        width: 200px !important;
        max-width: 90% !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
    }
    
    /* 서비스 소개 섹션 */
    .esg-intro {
        padding: 60px 0 !important;
    }
    
  .esg-intro-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;  /* 중앙 정렬 */
    text-align: left !important;   /* 텍스트도 중앙 */
    gap: 10px !important;            /* 텍스트-이미지 간격 */
    margin: 0 20px;
  }
    
    .esg-intro-text h2 {
        font-size: 1.8rem !important;
        word-break: keep-all !important;
    }
    
    .esg-intro-text p {
        font-size: 1rem !important;
        word-break: keep-all !important;
    }
    
    .esg-intro-visual {
        padding: 30px 20px !important;
    }
    
    
    /* 서비스 카드 섹션 */
    .esg-services {
        padding: 60px 0 !important;
    }
    
    .esg-services-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .esg-service-card {
        padding: 30px 20px !important;
    }
    
    .esg-service-card h3 {
        font-size: 1.2rem !important;
    }
    
    .esg-service-card p {
        font-size: 0.9rem !important;
    }
    
    /* 혜택 섹션 */
    .esg-benefits {
        padding: 60px 0 !important;
    }
    
    .esg-benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .esg-benefit-card {
        padding: 30px 20px !important;
    }
    
    /* 최종 CTA 섹션 */
    .esg-final-cta {
        padding: 60px 0 !important;
    }
    
    .esg-final-cta h2 {
        font-size: 1.8rem !important;
        word-break: keep-all !important;
    }
    
    .esg-final-cta p {
        font-size: 1rem !important;
        word-break: keep-all !important;
    }
    
    /* 도입문의 섹션 모바일 수정 */
    .esg-inquiry-section {
        padding: 40px 15px !important;
        overflow-x: hidden !important;
    }
    
    .esg-inquiry-wrapper {
        flex-direction: column !important;
        gap: 0px !important;
        max-width: 100% !important;
    }
    
    .quest-header h3 {
        font-size: 1.8rem !important;
        margin-bottom: 30px !important;
    }
    
    .quest-form,
    .wpcf7 {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .label-flex {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .quest-form .label {
        width: 100% !important;
        text-align: left !important;
    }
    
    .quest-form .quest-input {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
    
    .radio-flex {
        flex-wrap: wrap !important;
        gap: 15px !important;
    }
    
    .questBtn {
        text-align: center !important;
        margin-top: 30px !important;
    }
    
    .questBtn input {
        margin-left: 0 !important;
        width: 200px !important;
        max-width: 90% !important;
        padding: 12px 30px !important;
        font-size: 16px !important;
    }
    
    /* 섹션 헤더 모바일 조정 */
    .esg-section-header h2 {
        font-size: 1.8rem !important;
        word-break: keep-all !important;
    }
    
    .esg-section-header p {
        font-size: 1rem !important;
        word-break: keep-all !important;
    }
}

@media (max-width: 480px) {
    .esg-container {
        padding: 0 10px !important;
    }
    
    .esg-hero {
        min-height: 400px !important;
        padding: 40px 0 !important;
    }
    
    .esg-hero h1 {
        font-size: 1.6rem !important;
    }
    
    .esg-hero p {
        font-size: 1rem !important;
    }
    
    .esg-cta-primary,
    .esg-cta-secondary {
        width: 180px !important;
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
    }
    
    .esg-intro-text h2 {
        font-size: 1.5rem !important;
    }
    
    .esg-section-header h2,
    .esg-final-cta h2 {
        font-size: 1.5rem !important;
    }
    
    .esg-service-card,
    .esg-benefit-card {
        padding: 25px 15px !important;
    }
    
    .esg-inquiry-section {
        padding: 30px 10px !important;
    }
    
    .quest-header h3 {
        font-size: 1.5rem !important;
    }
    
    .quest-form .quest-input {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    .questBtn input {
        width: 160px !important;
        padding: 10px 20px !important;
        font-size: 16px !important;
    }
}