@charset "utf-8";

/* 초기화: height: 100% 제거 (스크롤 오류 방지) */
body, html { margin: 0; padding: 0; width: 100%; font-family: 'Noto Sans KR', sans-serif; background-color: #fff; }
* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }

/* 메인 컨테이너 */
.cont-scope { width: 100%; overflow-x: hidden; }

/* 폰트 설정 */
h3, .cont-item-title, .cont-feature h3, .cont-banner-bottom h3 {
    font-family: 'Noto Serif Display', 'Noto Serif KR', serif !important;
}

/* 1. Hero Section */
.cont-hero {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.cont-hero::after {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.15); 
}
.cont-hero-content { position: relative; z-index: 2; padding: 20px; }
.cont-hero-title { 
    font-family: 'Noto Serif Display', serif; 
    font-size: 3.8rem; 
    font-weight: 400; 
    text-transform: capitalize; 
    margin: 0; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); 
}
.cont-hero-sub { font-size: 0.85rem; letter-spacing: 3px; margin-top: 15px; text-transform: uppercase; font-weight: 400; }

/* 2. Intro Section */
.cont-intro { 
    text-align: center; 
    padding: 110px 20px 70px; 
    max-width: 1000px; 
    width: 100%;
    margin: 0 auto; 
}
.cont-intro .top-label { display: block; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: #888; margin-bottom: 25px; font-weight: 500; }

.cont-intro h2 { 
    font-family: 'Noto Serif Display', serif; 
    font-size: 3rem; 
    color: #c9bca0; 
    margin: 0; 
    font-weight: 400; 
    line-height: 1.2;
    white-space: nowrap; 
}

/* 3. Grid Layout */
.cont-grid-wrapper { 
    display: flex; 
    flex-wrap: wrap; 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 0 20px 100px; 
    align-items: flex-start; 
}
.cont-col { width: 50%; padding: 0 20px; display: flex; flex-direction: column; }
.cont-col.right-col { padding-top: 0; } 

/* Grid Item */
.cont-item { 
    margin-bottom: 100px; 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    position: relative; 
}

/* 텍스트 박스 */
.cont-text-box { 
    width: 100%;
    padding: 30px 40px 420px; 
    background-color: #CFC4AC; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    position: relative;
    z-index: 1;
    min-height: 250px; 
}

.cont-item-title { 
    font-size: 2rem; 
    margin-top: 0; 
    margin-bottom: 20px; 
    color: #111111; 
    font-weight: 400; 
}

.cont-item-desc { 
    font-size: 0.95rem; 
    color: #333; 
    line-height: 1.8; 
    margin-top: 0; 
    margin-bottom: 0; 
    word-break: keep-all; 
    font-weight: 400; 
}

/* 버튼 스타일 */
.cont-btn-more { 
    font-size: 0.7rem; 
    font-weight: 700; 
    letter-spacing: 1.5px; 
    border-bottom: none; 
    padding-bottom: 3px; 
    align-self: flex-start; 
    text-transform: uppercase; 
    color: #1a1a1a;
    margin-top: 15px; 
}

/* 이미지 박스 */
.cont-img-box { 
    width: 85%; 
    margin: -420px auto 0; 
    height: auto; 
    overflow: hidden; 
    position: relative;
    z-index: 2; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    opacity: 0; 
    transform: translateY(100px); 
    transition: opacity 1.2s ease-out, transform 1.2s ease-out; 
}

.cont-img-box.js-scroll.is-visible {
    opacity: 1;
    transform: translateY(0); 
}

.cont-img-box img { 
    width: 100%; 
    display: block; 
    height: 85%; 
    object-fit: cover; 
    transition: transform 1.5s ease; 
    margin-top: 20px;
}

.cont-item:hover .cont-img-box img { transform: scale(1.05); }


/* 4. Feature Groups */
.feature-group-1, .feature-group-2 {
    width: 100%;
    display: flex;
    justify-content: center; 
}

.group-inner {
    width: 100%;
    max-width: 1000px; 
    padding: 0 20px;
}

.cont-feature { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 80px 0; 
}
.cont-feature.reverse { flex-direction: row-reverse; }

.cont-feature-img { 
    width: 355px; 
    height: 532px; 
    object-fit: cover; 
    opacity: 0;
    transform: translateY(120px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.cont-feature.reverse .cont-feature-img {
    width: 55%;    
    height: 420px; 
}

.cont-feature-img.js-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cont-feature-text { 
    width: 50%; 
    padding: 0 60px; 
}

.cont-feature.reverse .cont-feature-text {
    width: 45%;
    padding: 0 40px;
}


/* Group Styles */
.feature-group-1 { background-color: #F5F2EE; }
.feature-group-1 h3 { font-size: 2.5rem; color: #7E8257; margin-bottom: 30px; line-height: 1.2; font-weight: 400; }
.feature-group-1 p { font-size: 1rem; color: #7E8257; line-height: 1.9; word-break: keep-all; font-weight: 400; }

.feature-group-2 { background-color: #7E8257; }
.feature-group-2 h3 { font-size: 2.5rem; color: #fff; margin-bottom: 30px; line-height: 1.2; font-weight: 400; }
.feature-group-2 p { font-size: 1rem; color: #fff; line-height: 1.9; word-break: keep-all; font-weight: 400; }


/* 5. Bottom Banner */
.cont-banner-bottom {
    position: relative;
    width: 95%;          
    margin: 70PX auto;  
    padding: 140px 150px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
}

.cont-banner-bottom::after {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.3); 
    z-index: 1;
}



.cont-banner-bottom h3 {
    position: relative; /* z-index 적용을 위해 필수 */
    z-index: 2;         /* 배경 오버레이(z-index:1)보다 위로 올려서 선명하게 표시 */
    font-size: 2.5rem; 
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
    word-break: keep-all;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Scroll Animation Helpers */
.cont-intro.js-scroll { opacity: 0; transform: translateY(40px); transition: opacity 1s ease-out, transform 1s ease-out; }
.cont-intro.js-scroll.is-visible { opacity: 1; transform: translateY(0); }


/* Responsive (Mobile/Tablet) */
@media (max-width: 1024px) {
    /* Hero 높이 600px */
    .cont-hero { 
        height: 600px; 
    }
    
    .cont-hero-title { 
        margin-top: -40px; 
        font-size: 2.8rem; 
    }
    .cont-hero-sub { margin-top: 5px; }

    /* Intro 상단 여백 & H2 수정 */
    .cont-intro { 
        max-width: 90%; 
        padding-top: 50px; 
    }
    .cont-intro h2 { 
        white-space: normal; 
        font-size: 42px; 
        margin-top: 20px; 
    }
    
    .cont-grid-wrapper { padding: 0 20px; }
    .cont-col { width: 100%; padding: 0; }

    /* 노출 순서 고정: Text(위) -> Image(아래) */
    .cont-item {
        display: flex;
        flex-direction: column; 
    }
    
    .cont-text-box { 
    padding: 40px 30px 390px; 
    order: 1; 
}

/* 2. 이미지 박스: 배경 위로 올라가는 높이 조정 (배경이 짧아졌으므로 마진도 조정) */
.cont-img-box { 
    width: 85%; 
    margin: -390px auto 0; /* -380px에서 -150px로 변경하여 자연스럽게 겹치도록 설정 */
    order: 2; 
} 

/* 3. 이미지: 하단 15% 잘림 제거 (이미지가 배경보다 길게 내려오도록 함) */
.cont-img-box img { 
    width: 100% !important; 
    height: auto !important; 
    clip-path: none;       /* inset(0 0 15% 0) 제거 */
    object-fit: cover;
    margin-top: 20px;
}
    
    .cont-feature-text { padding: 0 40px; width: 100%; }
    .feature-group-1, .feature-group-2 { padding: 0; }
    
    /* Feature Reverse 이미지 */
    .cont-feature.reverse .cont-feature-text { width: 100%; }
    .cont-feature.reverse .cont-feature-img { 
        width: 100%; 
        height: 280px; 
    }

    /* 하단 배너 (모바일에서는 90% 너비 유지) */
    .cont-banner-bottom { 
        width: 90%; 
        margin: 60px auto; 
        padding: 0 20px; 
        height: 500px; 
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* H3 폰트 32px 통일 */
    h3,
    .cont-item-title,
    .cont-feature h3,
    .cont-banner-bottom h3 {
        font-size: 32px !important;
        line-height: 1.3;
    }

    .cont-banner-bottom { background-position: left;}
}

@media (max-width: 768px) {
    .cont-hero-title { font-size: 2.8rem; }
    
    .cont-feature { flex-direction: column; padding: 40px 0; }
    .cont-feature.reverse { flex-direction: column; }
    
    .cont-feature-img, .cont-feature-text { width: 100%; }
    
    /* 일반 Feature 이미지 */
    .cont-feature-img { width: 100%; height: 400px; } 
    
    .cont-feature-text { padding: 40px 20px; }

    .cont-feature.reverse .cont-feature-text p {margin-bottom: 20px;}
}