/*header*/
header{position:fixed;}
.logo img{height:70px;}
.submenu{background: #3a3a3a46;}
.submenu li{color: rgba(255,255,255,1);}
.submenu>li:hover{background-color:rgba(0,0,0,.35)}

/*section*/
/* #section1{background-image:url('/images/main/bg1.jpg');background-size:cover; background-repeat: no-repeat; background-position: center;} */
.inc-txt {z-index:2; position: relative; width: 100%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center; padding: 20px 0 0;}
.inc-txt>p{color:#fff;}
.inc-txt>p b{display: block; font-size: 35px; margin: 30px 0; margin-top:0; opacity:0.4; font-weight: 400;}
.inc-txt>p strong{display: block; opacity:0.4 ;margin-bottom:30px;margin-top: 0;}
.inc-txt>p span{font-size: 35px; display: block; margin-top: 0; opacity:0.8; font-weight: 400;}
.inc-txt h1{color:#fff;font-size: 42px;margin-bottom: 30px;}

.typing-text { white-space: nowrap; overflow: hidden; padding-right:10px; border-right: 3px solid #fff; animation: typing 4s steps(21, end) forwards, blink .8s step-end infinite; width: 0;}

/* 공통 */
.inc-txt strong {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    opacity: 0;
    font-weight:900;
    color: #ffffff4d;
}

.inc-slide{width: 100%; height: 100vh; max-height: 100%; overflow: hidden;}
.inc-slide ul{display: flex; justify-content: flex-start; align-items: center; height: 100%; max-height: 100%; background: #333; overflow: hidden; overflow-anchor: none;}
.inc-slide ul li{position: relative; flex-grow: 1; flex-basis: 25%; width: 25%; height: 100%; overflow: hidden; z-index: 2; transition: all 0.8s;}

.item-box{display:flex; flex-direction: column; gap:20px; position: absolute; left: 0; bottom: min(10vw, 150px); max-width:calc(100% - 20px); width: 100%; box-sizing: border-box; padding: 0 5%; text-align: left; overflow: hidden; color: #fff; white-space: pre-line;}
.item-tit{white-space:pre-wrap;font-weight: 600; font-size: clamp(32px, 4vw + 1rem, 50px); padding-bottom:20px; line-height: 50px;}
.item-txt{font-weight: 500; font-size: clamp(24px, 4vw + 1rem, 30px); line-height: 32px;white-space:pre-wrap;}
.item-bg{filter:brightness(0.5); position: absolute; left: 0%; top: 0%; overflow: hidden;  width: 100%; height: 100%; background-size: cover; z-index: -1; transition: all ease .4s;}
.item-bg.bg1{background: url(/images/main/sec_bg1.jpg) no-repeat center center;background-size:cover}
.item-bg.bg2{background: url(/images/main/sec_bg2.jpg) no-repeat center center;background-size:cover}
.item-bg.bg3{background: url(/images/main/sec_bg3.jpg) no-repeat center center;background-size:cover}
.item-bg.bg4{background: url(/images/main/sec_bg4.jpg) no-repeat center center;background-size:cover}

.inc-slide li:not(:hover){flex-basis: 20%; filter:brightness(0.3)}
.inc-slide li:not(:hover) .item-tit{font-size:22px;line-height:26px}

/*footer 대응*/
footer{display:none}
.section footer{display:block;}
.ft_sec.section{height:250px !important;background-color:#373d42;}
.ft_sec.section > .fp-tableCell{height:auto !important;vertical-align: baseline;}
footer ul>li{color:#ababab;}
footer ul>li em{color:#ababab;}
.inc_down_btn{color:#b5b5b5 !important;}
footer ul>li>a{color:#ababab;}

/* 모바일 텍스트 넘침 방지 */
.inc-txt { padding: 16px; } /* 기존 padding: 20px 0 0 보완 */ /* :contentReference[oaicite:8]{index=8} */
.inc-txt > p { max-width: 100%; overflow: hidden; }

/* 타이핑 strong 공통: 큰 화면은 유지, 작은 화면은 줄바꿈/스케일 */
.inc-txt strong{
    max-width: 94vw;
    /* text-overflow: ellipsis; */
}

/* ---- Tablet (<= 1024px) ---- */
@media (max-width: 1024px){
    header .logo img{ height: 54px; } /* 70px -> 축소 */ /* :contentReference[oaicite:9]{index=9} */

    /* 타이핑 텍스트 크기 자동화 */
    .text-1, .text-2 { font-size: clamp(44px, 7vw, 90px); }
    .text-3, .text-4 { font-size: clamp(28px, 5vw, 56px); }
}

/* ---- Mobile (<= 768px) ---- */
@media (max-width: 768px){
    /* 타이핑 텍스트: 모바일은 '가로 고정' 대신 안전하게 표시 */
    .inc-txt strong{
        white-space: normal;    /* 기존 nowrap 때문에 튀는 것 방지 */
        width: auto;            /* 기존 width:0 애니메이션이 있어도 레이아웃 안전 */
        border-right: 0;        /* 커서가 줄바꿈 시 어색할 수 있어 제거 */
        text-align: center;
        padding: 0 6px;
    }

    .text-1, .text-2{
        font-size: clamp(34px, 9vw, 64px);
        animation-duration: 18s; /* 22s -> 약간 단축(선택) */
    }
    .text-3, .text-4{
        font-size: clamp(22px, 6vw, 36px);
        animation-duration: 18s;
    }

    /* 섹션2(hover 확장) -> 모바일에서는 세로 카드 스택 */
    .inc-slide{ height: auto; min-height: 100svh; }
    .inc-slide ul{
        flex-direction: column;
        height: auto;
    }
    .inc-slide ul li{
        width: 100%;
        flex-basis: auto;
        height: auto;
        min-height: 220px;
        transition: none;
        filter: none;
    }

    /* hover 기반 효과 끄기(모바일 터치 대응) */
    .inc-slide li:not(:hover){ flex-basis: auto; filter:none; } /* :contentReference[oaicite:11]{index=11} */
    .inc-slide li:hover{ flex-basis: auto; }

    /* 모바일에서는 설명 텍스트 기본 노출 */
    .item-box{
        position: relative;
        left: auto;
        bottom: auto;
        padding: 18px 16px;
        max-width: 100%;
        gap: 10px;
    }
    .item-tit{
        font-size: clamp(18px, 4.6vw, 26px);
        line-height: 1.3;
        white-space: normal;
    }
    .item-txt{
        display: block;          /* 기존 display:none -> 모바일은 보이게 */ /* :contentReference[oaicite:12]{index=12} */
        font-size: clamp(14px, 3.8vw, 16px);
        line-height: 1.5;
        opacity: .92;
    }

    /* 배경 이미지는 카드 뒤로 유지 */
    .item-bg{
        background-size: cover;
        background-position: center;
    }

    /* 섹션3(News): 제목/정보 줄바꿈과 크기 조절 */
    .section-title p{ font-size: 18px; line-height: 1.2; } /* :contentReference[oaicite:13]{index=13} */
    .section-title h1{ font-size: 32px; }                  /* :contentReference[oaicite:14]{index=14} */

    .article-info{ flex-wrap: wrap; gap: 4px 8px; }
    .article-tit{
        font-size: 1.15rem;
        white-space: normal;     /* 기존 pre -> 모바일 줄바꿈 허용 */ /* :contentReference[oaicite:15]{index=15} */
        line-height: 1.35;
    }
}

/* ---- Small Mobile (<= 480px) ---- */
@media (max-width: 480px){
    header .logo img{ height: 44px; }

    .inc-slide ul li{ min-height: 200px; }
    .item-box{ padding: 16px 14px; }
}


/* =========================
   main.css - Fullpage mobile section2(li -> section) styles
   ========================= */
@media (max-width: 768px){
    /* 새로 생성된 섹션들 */
    .sec2-mobile .inc-slide{
        height: 100vh;      /* fullpage 섹션 높이 */
        overflow: hidden;
    }

    /* ul/li는 한 장짜리니까 세로 레이아웃 필요 없음 */
    .sec2-mobile .inc-slide ul{
        display: block;
        height: 100%;
    }
    .sec2-mobile .inc-slide ul li{
        width: 100%;
        height: 100%;
        flex: none;
        transition: none;
        filter: none;
    }

    /* 기존 hover 기반 확장/축소 무력화 */
    .sec2-mobile .inc-slide li:hover,
    .sec2-mobile .inc-slide li:not(:hover){
        flex-basis: auto;
        filter: none;
    }

    /* 모바일은 설명 기본 노출 */
    .sec2-mobile .item-txt{
        display: block;
        font-size: clamp(14px, 3.8vw, 16px);
        line-height: 1.5;
    }

    /* 텍스트 가독성(원하면 배경 투명도 조절) */
    .sec2-mobile .item-box{
        bottom: 18px;
        max-width: none;
        padding: 0 16px;
        height: 100vh;
        justify-content: center;
    }
    .ft_sec.section{
        height:300px !important;
    }
    .inc_down{position:relative;top:10px;margin-left: auto;}
    .inc_down_btn{font-size:13px;}
    .inc_down_btn:before{
        width:50px;height:50px;
    }
}