@charset "utf-8";

/* 모바일 전용 반응형 스타일 - 768px 이하에서만 적용 */

/* 기본 모바일 설정 */
@media (max-width: 768px) {
    
    /* 메인페이지 기본 설정 모바일 대응 */
    #hd {
        position: relative;
        background: white;
        border-bottom: 1px solid #ddd;
        margin-bottom: 0 !important;
    }
    
    #hd nav#gnb .gnb_wrap #gnb_1dul .gnb_1da {
        color: black;
    }
    
    #hd ul.hd_login img {
        filter: none;
    }
    
    body {
        background: black;
    }
    
    /* 오버레이 섹션 모바일 대응 */
    .overlay .logo img {
        width: 180px;
        height: auto;
    }
    
    .overlay .main-text .title {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 20px;
        padding: 0 20px;
    }
    
    .overlay .main-text .subtitle {
        font-size: 18px;
        line-height: 1.5;
        padding: 0 20px;
    }
    
    /* 섹션 공통 스타일 모바일 대응 */
    .section1, .section2, .section3, .section4 {
        height: 100vh;
        min-height: 100vh;
    }
    
    .section5 {
        height: auto;
        min-height: 100vh;
    }
    
    /* 섹션 텍스트 스타일 모바일 대응 */
    .section3 .main-text .title,
    .section4 .main-text .title,
    .section5 .main-text .title {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 20px;
        padding: 0 20px;
    }
    
    .section3 .main-text .subtitle,
    .section4 .main-text .subtitle,
    .section5 .main-text .subtitle {
        font-size: 16px;
        line-height: 1.5;
        padding: 0 20px;
    }

    .section1 .text{top: 40%;width:100%}
    .section1 .text .main-logo{width: 80%;}
    
    /* 섹션1 (메인 비디오) 모바일 대응 */
    .section1 .text .t1 {
        font-size: 24px;
        margin-bottom: 20px;
        padding: 0 20px;
    }
    
    .section1 .text .t2 {
        font-size: 28px;
        padding: 0 20px;
        flex-direction: column;
        gap: 10px;
    }
    
    .section1 .text .t2 img {
        position: static;
        transform: none;
        margin: 0 auto;
        width: 40px;
        height: auto;
    }
    
    /* main-logo 모바일 스타일 */
    .main-logo {
        width: 50%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    /* 섹션2 (스크롤 텍스트) 모바일 대응 */
    .section2 {
        margin-top: 100px;
    }
    
    .section2 .scroll-text .t3 {
        font-size: 48px;
        animation-duration: 20s;
    }
    
    .section2 .scroll-text2 .t3 {
        font-size: 48px;
        animation-duration: 20s;
    }
    
    /* 섹션3, 4, 5 로고 모바일 대응 */
    .section3 .logo img,
    .section4 .logo img,
    .section4-logo img,
    .section5 .logo img {
        width: 180px;
        height: auto;
    }
    
    .section3 .logo,
    .section4 .logo,
    .section4-logo,
    .section5 .logo {
        margin-bottom: 60px;
    }
    
    /* 섹션6 (Premium Features) 모바일 대응 */
    .section6 {
        padding: 60px 0;
    }
    
    .section6 .header {
        margin-bottom: 60px;
        padding: 0 20px;
    }
    
    .section6 .header .best-of-best {
        font-size: 18px;
        margin-bottom: 12px;
    }
    
    .section6 .header .premium {
        font-size: 28px;
        margin-bottom: 40px;
    }
    
    .section6 .features {
        gap: 60px;
        padding: 0 20px;
    }
    
    .section6 .features::after {
        display: none; /* 모바일에서도 세로선 표시 */
        height: 100%;
    }
    
    .section6 .feature-item {
        flex-direction: column !important;
        gap: 30px;
        text-align: center;
        display: flex;
        align-items: center;
    }
    
    .section6 .feature-item:nth-child(even) {
        flex-direction: column !important;
    }
    
    .section6 .feature-item .image {
        height: 250px;
        width: 100%;
        order: 2; /* 이미지를 두 번째로 배치 */
        min-height: 250px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .section6 .feature-item .image img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        max-height: 250px;
    }
    
    .section6 .feature-item .content {
        width: 100%;
        text-align: center;
        order: 1; /* 콘텐츠를 첫 번째로 배치 */
    }
    
    .section6 .feature-item:nth-child(even) .content {
        text-align: center;
        align-items: center;
    }
    
    .section6 .feature-item .feature-title {
        font-size: 16px;
        margin-bottom: 16px;
    }
    
    .section6 .feature-item .feature-value {
        font-size: 28px;
        margin-bottom: 16px;
    }
    
    .section6 .feature-item .feature-value .small {
        font-size: 16px;
    }
    
    .section6 .feature-item .feature-description {
        font-size: 14px;
        width: 100%;
        line-height: 1.5;
    }
    
    .section6 .feature-item:last-child .feature-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .section6 .feature-item:last-child .feature-subtitle {
        font-size: 28px;
        margin-bottom: 16px;
    }


    
    /* 섹션7 (Products) 모바일 대응 */
    .section7 {
        padding: 60px 0;
    }
    
    .section7 .header {
        margin-bottom: 60px;
        padding: 0 20px;
    }
    
    .section7 .header .company-name {
        font-size: 18px;
        margin-bottom: 12px;
    }
    
    .section7 .header .products-title {
        font-size: 28px;
        margin-bottom: 40px;
    }
    
    .section7 .products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 20px;
    }
    
    .section7 .product-item {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }
    
    .section7 .product-item .product-overlay {
        padding: 20px 15px 15px;
    }
    
    .section7 .product-item .product-series {
        font-size: 14px;
    }
    
    .section7 .product-item .product-name {
        font-size: 24px;
        margin: 20px 0;
    }
    
    .section7 .product-item .rainbow-logo {
        width: 60px;
    }
    
    /* 섹션8 (Dual Features) 모바일 대응 */
    .section8 .dual-container {
        height: auto;
    }
    
    .section8 .top-section,
    .section8 .bottom-section,
    .section8 .third-section,
    .section8 .fourth-section {
        min-height: 50vh;
        padding: 40px 20px;
    }
    
    .section8 .text-overlay .subtitle {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .section8 .text-overlay .main-title {
        font-size: 24px;
        line-height: 1.2;
    }
    
    .section8 .text-overlay .main-title.large {
        font-size: 28px;
    }
    
    .section8 .text-overlay .subtitle-small {
        font-size: 14px;
        margin-bottom: 16px;
    }
    
    /* 섹션9 모바일 대응 */
    .section9 {
        margin-bottom: 100px;
        margin-top: 100px;
    }
    
    .section9 .dual-container {
        height: auto;
    }
    
    .section9 .top-section,
    .section9 .bottom-section {
        min-height: 50vh;
    }
    
    .section9 .text-overlay {
        width: 90%;
        bottom: 10%;
        flex-direction: column;
        gap: 20px;
    }
    
    .section9 .text-overlay .count-text-group {
        flex: none;
    }
    
    .section9 .text-overlay .subtitle {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .section9 .text-overlay .main-title {
        font-size: 36px;
        line-height: 1.2;
        margin-bottom: 16px;
    }
    
    .section9 .corexin-logo {
        width: 80px;
        margin-top: 12px;
    }
    
    /* 섹션10 모바일 대응 */
    .section10 .content-wrapper {
        padding: 0 20px;
    }
    
    .section10 .logo-container {
        margin-bottom: 40px;
    }
    
    .section10 .section10-logo {
        width: 150px;
    }
    
    .section10 .title-container {
        margin-bottom: 30px;
    }
    
    .section10 .main-title {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 8px;
    }
    
    .section10 .subtitle-container {
        max-width: 100%;
    }
    
    .section10 .subtitle-container p {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 12px;
    }
    
    /* 스크롤 애니메이션 모바일 최적화 */
    .scroll-animate.fade-up {
        transform: translateY(30px);
    }
    
    .scroll-animate.fade-left {
        transform: translateX(-30px);
    }
    
    .scroll-animate.fade-right {
        transform: translateX(30px);
    }
    
    .scroll-animate.scale-in {
        transform: scale(0.8);
    }
    
    /* 마퀴 텍스트 모바일 대응 */
    .marquee {
        margin-bottom: 60px;
    }
    
    .marquee span {
        font-size: 18px;
        margin-right: 40px;
    }
    
    /* 세로선 모바일 최적화 */
    .vertical-line {
        height: 100px;
    }
    
    .vertical-line::after {
        height: 100%;
    }
    
    .section4-vertical-line {
        height: 100px;
    }
    
    .section4-vertical-line::after {
        height: 100%;
    }
    
    /* 그라데이션 조정 */
    .section1::after {
        height: 100px;
    }
    
    .section2::before {
        top: -100px;
        height: 100px;
    }
    
    .section2::after {
        height: 100px;
    }
    
    .section2 .mov::before {
        height: 100px;
    }
    
    .section3::after {
        bottom: -50px;
        height: 50px;
    }
}