@charset "utf-8";

/* =========================================================
   [ 레이아웃 리셋 ]
   ========================================================= */
#wrap #contents {
    max-width: 100%;
    min-height: auto;
    padding: 0 !important; /* 헤더에 딱 붙게 */
}

#wrap #container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#wrap #container,
#wrap #contents,
.hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#container_title {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.displaynone {
    display: none !important;
}

/* 유틸리티 클래스 */
.flex { display: flex; }
.flex--v-center { align-items: center; }
.flex--h-center { justify-content: center; }
.relative { position: relative; }
.text-center { text-align: center; }


/* =========================================================
   [ 1. 상단 Hero 배너 ]
   ========================================================= */
.hero {
    min-height: 0;
    margin-bottom: 100px;
    height: auto;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
}

.hero__wrapper {
    height: 100%;
    position: relative;
}

.hero img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* 텍스트가 잘 보이도록 반투명 검은색 배경 추가 */
.hero__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 2;
    color: #fff;
}

.hero__title {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.4;
    color: #fff;
}

.hero__txt {
    margin-top: 30px;
    line-height: 1.6;
    font-size: 20px;
    color: #eee;
}


/* =========================================================
   [ 2. About 섹션 (지그재그형) ]
   ========================================================= */
.about-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 50px;
}

.about__section {
    width: 100%;
    margin-bottom: 6vw;
}

/* 홀/짝수에 따른 지그재그 배치 (이미지와 텍스트 좌우 반전) */
.about__section:nth-child(even) {
    flex-direction: row-reverse;
}

.about__column {
    width: 50%;
    height: 100%;
}

.about__align {
    padding: 0 4vw;
}

.about__img img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: none;
    transform: scale(0.95);
    transform-origin: center center;
}

.about__img img,
.hero img {
    max-width: 100%;
}

.about__column iframe {
    width: 100% !important;
    height: 600px !important;
}

.about__title {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.5;
    color: #111;
}

.about__txt {
    font-size: 18px;
    line-height: 1.9;
    color: #555;
    word-break: keep-all;
}


/* =========================================================
   [ 3. 스크롤 애니메이션 효과 ]
   ========================================================= */
.hero__title,
.hero__txt,
.about__column--banner,
.about__title,
.about__txt {
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
}

.hero__txt,
.about__section:nth-child(odd) .about__title,
.about__section:nth-child(even) .about__txt {
    transition-delay: 0.3s !important;
}

.about__section:nth-child(odd) .about__txt,
.about__section:nth-child(even) .about__column--banner {
    transition-delay: 0.6s !important;
}

.hero.on .hero__title,
.hero.on .hero__txt,
.about__section.on .about__title,
.about__section.on .about__txt,
.about__section.on .about__column--banner {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
    transition: all 1.2s;
}


/* =========================================================
   [ 4. 모바일 반응형 ]
   ========================================================= */
@media (max-width: 1024px) {
    .hero { min-height: 0; }
    .hero__title { font-size: 32px; }
    .hero__txt { margin-top: 20px; font-size: 16px; }
    .about__title { font-size: 26px; }
}

@media (max-width: 767px) {
    .about-container { padding: 0 20px; }
    
    .hero {
        min-height: 0;
        height: auto;
        margin-bottom: 50px;
    }
    
    .hero__title { font-size: 28px; }
    .hero__txt { font-size: 15px; }
    
    /* 모바일에서는 지그재그 해제 후 수직으로 일자로 떨어지게 만듦 */
    .about__section {
        flex-direction: column !important;
        margin-bottom: 80px;
    }
    
    .about__column { width: 100%; margin: 0; }
    .about__column--banner { margin-bottom: 30px; }
    
    .about__align { padding: 0; }
    
    .about__title {
        line-height: 1.4;
        margin-bottom: 15px;
        font-size: 24px;
    }
    
    .about__txt {
        font-size: 15px;
        line-height: 1.7;
    }
    
    /* 모바일용 애니메이션 딜레이 초기화 */
    .about__section:nth-child(odd) .about__column--banner,
    .about__section:nth-child(even) .about__column--banner {
        transition-delay: 0s !important;
    }
    
    .about__section:nth-child(odd) .about__title,
    .about__section:nth-child(even) .about__title {
        transition-delay: 0.3s !important;
    }

    .about__section:nth-child(odd) .about__txt,
    .about__section:nth-child(even) .about__txt {
        transition-delay: 0.6s !important;
    }
}