/* 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); }

/* section1 / typing */
.inc-txt { z-index:2; position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:20px 0 0; text-align:center; }
.inc-txt>p { color:#fff; }
.inc-txt>p b { display:block; margin:30px 0 30px; margin-top:0; font-size:35px; font-weight:400; opacity:.4; }
.inc-txt>p strong { display:block; margin-top:0; margin-bottom:30px; opacity:.4; }
.inc-txt>p span { display:block; margin-top:0; font-size:35px; font-weight:400; opacity:.8; }
.inc-txt h1 { margin-bottom:30px; color:#fff; font-size:42px; }

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

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

@keyframes blink { 0%,100% { border-color:transparent; }
    50% { border-color:#fff; }
}

/* text-1 */
.text-1 { font-size:121px; animation:
        typing1 22s steps(18,end) infinite,
        blink .9s step-end infinite; }
@keyframes typing1 {
    0% { width:0; opacity:1; }
    12% { width:18ch; }
    22% { width:18ch; opacity:1; }
    26% { width:0; opacity:0; }
    100% { width:0; opacity:0; }
}

/* text-2 */
.text-2 { font-size:121px; animation:
        typing2 22s steps(12,end) infinite,
        blink .9s step-end infinite; }
@keyframes typing2 { 0%,26% { width:0; opacity:0; }
    27% { opacity:1; }
    40% { width:12ch; }
    50% { width:12ch; opacity:1; }
    54% { width:0; opacity:0; }
    100% { width:0; opacity:0; }
}

/* text-3 */
.text-3 { font-size:80px; animation:
        typing3 22s steps(23,end) infinite,
        blink .9s step-end infinite; }
@keyframes typing3 { 0%,54% { width:0; opacity:0; }
    55% { opacity:1; }
    70% { width:23ch; }
    80% { width:23ch; opacity:1; }
    84% { width:0; opacity:0; }
    100% { width:0; opacity:0; }
}

/* text-4 */
.text-4 { font-size:80px; animation:
        typing4 22s steps(8,end) infinite,
        blink .9s step-end infinite; }
@keyframes typing4 { 0%,84% { width:0; opacity:0; }
    85% { opacity:1; }
    92% { width:8ch; }
    92%,98% { width:8ch; opacity:1; }
    99% { width:8ch; opacity:0; }
    100% { width:0; opacity:0; }
}

/* video */
.video-bg { position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; overflow:hidden; }
.video-bg video { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.video-bg::after { content:''; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:rgba(0, 0, 0, 0.3); }

/* section2 */
.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%; overflow:hidden; overflow-anchor:none; background:#333; }
.inc-slide ul li { position:relative; z-index:2; width:25%; height:100%; overflow:hidden; flex-grow:1; flex-basis:25%; transition:all .8s; }

.item-box { position:absolute; left:0; bottom:min(6vw, 90px); display:flex; flex-direction:column; gap:20px; width:100%; max-width:calc(100% - 20px); box-sizing:border-box; padding:0 5%; color:#fff; text-align:left; white-space:pre-line; overflow:hidden; }
.item-tit { font-size:clamp(24px, 4vw + 1rem, 36px); line-height:50px; font-weight:600; white-space:pre-wrap; transition:font-size ease .6s; }
.item-txt { display:none; font-size:24px; line-height:32px; font-weight:500; }
.item-bg { position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; overflow:hidden; filter:brightness(0.5); background-size:cover; 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; }
.inc-slide li:hover { flex-basis:80%; }
.inc-slide li:hover .item-bg { background-size:cover; transition:all ease .4s; }
.inc-slide li:hover .item-box { bottom:min(10vw, 150px); max-width:calc(100% - 60px); }
.inc-slide li:hover .item-tit { padding-bottom:20px; font-size:clamp(32px, 4vw + 1rem, 50px); transition:none; }
.inc-slide li:hover .item-txt { display:inline-block; transition:all .6s .3s; }

/* section3 */
#section3 { background-color:#000; }
.section-title p { color:#00F6FF; font-size:32px; line-height:8px; }
.section-title h1 { color:#fff; font-size:52px; font-weight:600; }

.swiper-wrapper { transition-timing-function:linear !important; }
.article-wrap .vb-swiper { margin:20px 0; }

.article-title { width:100%; overflow:hidden; }
.article-info { display:flex; color:#00F6FF; }
.article-info>span { margin-left:5px; color:#fff; }
.article-info>span::before { content:'|'; margin-right:5px; color:#ddd; font-size:14px; }
.article-tit { display:inline-block; width:100%; overflow:hidden; color:#fff; font-size:2.3rem; white-space:pre; text-overflow:ellipsis; }

.article-thum { position:relative; height:0; margin-bottom:15px; padding-bottom:64%; overflow:hidden; }
.article-thum>img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; -webkit-transition:transform .5s ease; }
.article-box:hover .article-thum>img { transform:scale(1.2); }

/* 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,
footer ul>li em,
footer ul>li>a,
.inc_down_btn { color:#ababab; }

/* map */
#map { width:100%; height:100%; }

#loading { position:fixed; inset:0; z-index:10; display:grid; place-items:center; background:rgba(0,0,0,.35); color:#fff; font-family:system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif; pointer-events:none; transition:opacity 800ms ease; }
#loading small { display:block; margin-top:8px; opacity:.8; }
#loading.hide { opacity:0; }

.map-iw-header{display:flex;align-items:center; gap:10px; min-width:220px;}
.map-iw-header__img{width:44px; height:44px; border-radius:10px; object-fit:cover; flex:0 0 44px;}
.map-iw-header__title{font-size:15px; font-weight:700; color:#111; line-height:1.3;}
.map-iw-body{padding-top:4px;}
.map-iw-body__addr{font-size:13px; color:#555; line-height:1.5;}
.gm-style-iw-custom__img{width:22px;}

/* ---------- Tablet (<= 1024px) ---------- */
@media (max-width: 1024px) { header .logo img { height:54px; }

    .inc-txt { padding:16px; }
    .inc-txt>p { max-width:100%; overflow:hidden; }

    .text-1,
    .text-2 { font-size:clamp(44px, 7vw, 90px); }
    .text-3,
    .text-4 { font-size:clamp(28px, 5vw, 56px); }

    /* section2 split(fullpage) */
    .sec2-mobile .inc-slide { height:100vh; min-height:100svh; overflow:hidden; }
    .sec2-mobile .inc-slide ul { display:block; height:100%; }
    .sec2-mobile .inc-slide ul li { width:100%; height:100%; min-height:100%; flex:none; transition:none; filter:none; }
    .sec2-mobile .inc-slide li:hover, .sec2-mobile .inc-slide li:not(:hover) { flex-basis:auto; filter:none; }
    .sec2-mobile .item-box { position:absolute; left:0; bottom:0; display:flex; justify-content:center; width:100%; max-width:none; height:100%; padding:0 24px; gap:14px; }
    .sec2-mobile .inc-slide li .item-tit { font-size:clamp(24px, 4vw, 36px); line-height:1.3; white-space:normal; }
    .sec2-mobile .item-txt { display:block; font-size:clamp(15px, 2vw, 18px); line-height:1.6; }
    .sec2-mobile .item-bg { filter:brightness(0.45); background-position:center; background-size:cover; }

    .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; }
}

/* ---------- Mobile (<= 768px) ---------- */
@media (max-width: 768px){
    .inc-txt strong { width:auto; padding:0 6px; border-right:0; white-space:normal; text-align:center; }

    .text-1,
    .text-2 { font-size:clamp(34px, 9vw, 64px); line-height:1.1; animation-duration:18s; }
    .text-3,
    .text-4 { font-size:clamp(22px, 6vw, 36px); line-height:1.2; animation-duration:18s; }

    /* 기본 section2 모바일 카드 스택 */
    .inc-slide { height:auto; min-height:100svh; }
    .inc-slide ul { flex-direction:column; height:auto; }
    .inc-slide ul li { width:100%; height:auto; min-height:220px; flex-basis:auto; transition:none; filter:none; }
    .inc-slide li:not(:hover),
    .inc-slide li:hover { flex-basis:auto; filter:none; }

    .item-box { position:relative; left:auto; bottom:auto; max-width:100%; padding:18px 16px; gap:10px; }
    .item-tit { font-size:clamp(18px, 4.6vw, 26px); line-height:1.3; white-space:normal; }
    .item-txt { display:block; font-size:clamp(14px, 3.8vw, 16px); line-height:1.5; opacity:.92; }
    .item-bg { background-position:center; background-size:cover; }

    /* split된 section2는 fullpage 카드 유지 */
    .sec2-mobile .item-box { position:absolute; bottom:0; height:100%; padding:0 16px; justify-content:center; gap:14px; }
    .sec2-mobile .inc-slide li .item-tit { font-size:clamp(20px, 5vw, 36px); line-height:1.3;}
    .sec2-mobile .item-txt { font-size:clamp(14px, 3.8vw, 18px); }

    .section-title p { font-size:18px; line-height:1.2; }
    .section-title h1 { font-size:32px; }

    .article-info { flex-wrap:wrap; gap:4px 8px; }
    .article-tit { font-size:1.15rem; line-height:1.35; white-space:normal; }

    .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; }
}

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

    .inc-txt { padding:12px; }

    .text-1,
    .text-2 { font-size:clamp(28px, 10vw, 40px); }
    .text-3,
    .text-4 { font-size:clamp(18px, 6.5vw, 26px); }

    .inc-slide ul li { min-height:200px; }

    .item-box { padding:16px 14px; }

    .sec2-mobile .item-box { padding:0 12px; gap:10px; }
    .sec2-mobile .inc-slide li .item-tit { font-size:clamp(18px, 8.4vw, 34px); line-height:1.3;}
    .sec2-mobile .item-txt { font-size:18px; }

    .ft_sec.section { height:280px !important; }
    .inc_down_btn { font-size:12px; }
    .inc_down_btn:before { width:44px; height:44px; }
}
