/* ===== VISUAL ===== */
.main .visual {position:relative; width:100%; height:100vh; min-height:600px; overflow:hidden; background:#000;}
.main .visual video {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.main .visual::after {content:''; position:absolute; inset:0; background:rgba(0,0,0,0.3); z-index:1;}
 
.main .visual-inner {position:absolute; inset:0; z-index:2; display:flex; align-items:center;}
 
/* ===== VISUAL TEXT ===== */
.main .visualtext-wrap {max-width:1400px; margin:0 auto; width:100%; position:relative; padding-top:20vh;}
.main .visualtext-wrap h2 {font-size:var(--fs60); font-weight:700; color:#fff; line-height:1.25; letter-spacing:-1px; margin-bottom:24px;}
.main .visualtext-wrap h2 em {color:var(--c_base1); font-style:normal;}
.main .visualtext-wrap p {font-size:var(--fs18); color:rgba(255,255,255,0.8); line-height:1.7; margin-bottom:24px;}
.main .visualtext-wrap .btn-hero {display:inline-flex; align-items:center; justify-content:center; padding:14px 30px; background:rgba(22,70,151,0.5); color:#fff; font-size:var(--fs14); font-weight:700; letter-spacing:1.5px; border-radius:5rem; transition:background .3s; pointer:none; cursor:auto;}
.main .visualtext-wrap .btn-hero br {display:none;}
.main .visualtext-wrap h2 {animation: fadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;}
.main .visualtext-wrap p {animation: fadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;}
.main .visualtext-wrap .btn-hero {animation: fadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;} 
 
 
/* ===== SCROLL DOWN ===== */
.main .scroll-down {position:absolute; right:40px; bottom:0; top:0; display:flex; align-items:end;}
.main .scroll-down .scroll-inner {display:flex; gap:12px;}
.main .scroll-down .scroll-txt {writing-mode:vertical-rl; text-orientation:mixed; font-size:var(--fs12); font-weight:700; color:rgba(255,255,255,0.5); transform:rotate(0deg);}
.main .scroll-down .scroll-bar {position:relative; width:3px; height:200px; background:rgba(255,255,255,0.2); overflow:hidden;}
.main .scroll-down .scroll-bar::after {content:''; position:absolute; left:0; top:-100%; width:100%; height:50%; background:var(--c_base1); border-radius:2px; animation:scrollDown 3s ease-in-out infinite;}
 
 
@keyframes scrollDown {
	0%   {top:-50%;}
	100% {top:150%;}
}
 
/* ===== 1200px ===== */
@media screen and (max-width:1199px) {
	.main .visual {height:80vh;}
	.main .visualtext-wrap {padding:0 30px; padding-top:15vh;}
}
 
/* ===== 768px ===== */
@media screen and (max-width:767px) {
	.main .visualtext-wrap h2 {margin-bottom:16px;}
	.main .visualtext-wrap p { margin-bottom:16px;}
	.main .visualtext-wrap p br {display:none;}
}
 
/* ===== 500px ===== */
@media screen and (max-width:500px) {
	.main .visualtext-wrap .btn-hero br {display:block;}
}


.video-scroll-container {
        position: relative;
        width: 100%;
        background: #000;
    }

    .sticky-wrapper {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        /* [중요] GPU 가속을 활용해 떨림 방지 */
        will-change: transform;
        transform: translateZ(0);
        -webkit-font-smoothing: antialiased;
    }

    .sticky-wrapper canvas {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.4;
        /* [중요] 캔버스 떨림 방지 */
        image-rendering: -webkit-optimize-contrast;
    }


/* 1200px 이상에서만 인터랙션 스타일 활성화 */
@media (min-width: 1200px) {
    .v-section {
        position: relative;
        width: 100%;
        background: #000;
    }

    .sticky-wrapper {
        display: flex;
        width: 100%;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        will-change: transform;
        transform: translateZ(0);
        -webkit-font-smoothing: antialiased;
    }

    .sticky-wrapper canvas {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.4;
        image-rendering: -webkit-optimize-contrast;
    }
}


/* ===== conInner layout ===== */
.conInner {position:relative; z-index:10; width:100%; max-width:1400px; margin:0 auto; height:60vh; display:flex; flex-direction:column; justify-content:space-between; padding-bottom:0; box-sizing:border-box;}
 
/* ===== TOP: 타이틀 + 버튼 ===== */
.main .part1-top {display:flex; justify-content:space-between; align-items:flex-start; padding-top:60px;}
.part1-title {}
.main .part1-title h2 {font-family:'Pretendard', sans-serif; font-size:var(--fs50, 4rem); font-weight:700; color:#fff; line-height:1.2; letter-spacing:-1px; margin:0 0 16px;}
.main .part1-title p {font-size:var(--fs16, 1.6rem); color:rgba(255,255,255,0.75); line-height:1.8; margin:0;}
.main .part1-btns {display:flex; gap:8px; flex-shrink:0; margin-left:40px;}
.main .part1-btns a {display:flex; align-items:center; justify-content:center; padding:15px 25px; border-radius:8px; font-size:var(--fs18); font-weight:600; color:#fff; background:rgba(255,255,255,0.3); white-space:nowrap; transition:background .3s ease; line-height:1;}
.main .part1-btns a:hover {background:var(--c_base3, #1D4892); border-color:var(--c_base3, #1D4892);}
.main .part1-btns a.active {background:var(--c_base3, #1D4892); border-color:var(--c_base3, #1D4892);}
 
/* ===== BOTTOM: 카테고리 메뉴 ===== */
.main .part1-bottom {width:100%; padding-bottom:0;}
.main .part1-menu {display:flex; align-items:stretch; justify-content:space-between; list-style:none; margin:0; padding:0; width:100%; gap:30px 60px;}
.main .part1-menu a {flex:1; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:70px; cursor:pointer; min-height:120px;}
 
/* 하단 라인 (기본) */
.main .part1-menu a::after {content:''; position:absolute; bottom:36px; left:0; width:100%; height:2px; border-radius:2px; background:rgba(255,255,255,1); transition:opacity .3s ease;}
 
/* 아이콘 (기본: 숨김) */
.main .part1-menu a .menu-icon {position:absolute; top:-60px; left:50%; transform:translateX(-50%) translateY(10px); opacity:0; transition:opacity .35s ease, transform .35s ease;}
.main .part1-menu a .menu-icon img {width:120px; height:120px; object-fit:contain;}
 
/* 텍스트 */
.main .part1-menu a .menu-txt {position:relative; z-index:2; font-size:var(--fs18, 1.8rem); font-weight:600; color:#fff; text-align:center; transition:color .3s ease, transform .3s ease; transform:translateY(0);}
 
/* 호버 */
.main .part1-menu a:hover::after {opacity:0;}
.main .part1-menu a:hover .menu-icon {opacity:1; transform:translateX(-50%) translateY(0);}
.main .part1-menu a:hover .menu-icon:before, .main .part1-menu a.on .menu-icon:before {content:""; display:block; width:40px; height:2px; background:url(/images/main/part1_i-arrow_before.svg) no-repeat center / contain; position:absolute; top:70px; left:-70px;}
.main .part1-menu a:hover .menu-icon:after, .main .part1-menu a.on .menu-icon:after {content:""; display:block; width:40px; height:12px; background:url(/images/main/part1_i-arrow_after.svg) no-repeat center / contain; position:absolute; top:58px; right:-70px;}
.main .part1-menu a:hover .menu-txt {color:var(--c_base1, #FACC15); transform:translateY(70px);}
 
/* 활성(노인보호구역 - 예시 on 상태) */
.main .part1-menu a.on::after {opacity:0;}
.main .part1-menu a.on .menu-icon {opacity:1; transform:translateX(-50%) translateY(0);}
.main .part1-menu a.on .menu-txt {color:var(--c_base1, #FACC15); transform:translateY(70px);}
 
 
 .main-part1 .sticky-wrapper {background:url(/images/main/main-part1_bg3.webp) no-repeat center / cover;}
 
 
/* ===== TABLET (max 1199px): 3열 ===== */
@media screen and (max-width:1199px) {
	.main-part1.video-scroll-container {height: 80vh;}
	.main-part1 .sticky-wrapper {height:80vh!important;}
	.main-part1 .sticky-wrapper {background:url(/images/main/main-part1_bg3.webp) no-repeat center / cover;}
	.conInner {height:auto; padding:0 30px;}
	
	.main .part1-menu {flex-wrap:wrap; gap:0; display:grid; grid-template-columns:repeat(3,1fr); gap:80px 40px}
	.main .part1-menu a {flex:0 0 33.333%; min-height:100px; padding-bottom:24px;}
	.main .part1-menu a::after {bottom:0;}
	.main .part1-menu a:hover .menu-txt, .main .part1-menu a.on .menu-txt {transform:translateY(50px);}
    .main .part1-menu a .menu-icon {top:-40px;}
	.main .part1-top {padding-top:0;}
    .main .part1-bottom {padding-top:50px;}
}
 
/* ===== MOBILE (max 767px): 2열 + 타이틀 세로 배치 ===== */
@media screen and (max-width:767px) {
	.main-part1.video-scroll-container {height:75vh;}
	.main-part1 .sticky-wrapper {height:75vh!important;}
	.main-part1 .conInner {gap:40px;}
	.main .part1-top {flex-direction:column; gap:20px; padding-top:0;}
	.main .part1-title h2 {font-size:var(--fs30, 2.4rem);}
	.main .part1-btns {margin-left:0; flex-wrap:wrap;}
	.main .part1-btns a {font-size:var(--fs16);}
	.main .part1-menu {grid-template-columns:1fr 1fr;}
	.main .part1-menu a {flex:0 0 50%; min-height:60px; padding-bottom:20px; font-size:var(--fs16);}
	.main .part1-menu a .menu-txt {font-size:var(--fs16, 1.5rem);}
	.main .part1-menu a .menu-icon img {width:90px; height:90px;}
	.main .part1-menu a:hover .menu-icon:before, .main .part1-menu a.on .menu-icon:before
	{top:55px;}
    .main .part1-menu a:hover .menu-icon:after, .main .part1-menu a.on .menu-icon:after {top:45px;}
}
 
/* ===== MOBILE (max 500px): 1열 ===== */
@media screen and (max-width:500px) {
	.main .part1-menu a {flex:0 0 100%; min-height:80px; padding-bottom:18px;}
	.main-part1.video-scroll-container {height:auto;}
	.main-part1 .sticky-wrapper {height:auto!important; padding:60px 0;}
	.main .part1-menu a:hover .menu-txt, .main .part1-menu a.on .menu-txt {transform:translateY(30px);}
	.main .part1-menu {gap:60px 30px; }
	.main .part1-menu a:hover .menu-icon:before, .main .part1-menu a.on .menu-icon:before {width:30px; left:-40px; top:53px;}
	.main .part1-menu a:hover .menu-icon:after, .main .part1-menu a.on .menu-icon:after {width:30px; right:-40px;}
	.main-part1 .conInner {gap:16px;}
    .main .part1-menu a .menu-icon {top:-40px;}
}




/* ===== TABLET (max 1199px): 3열 ===== */
@media screen and (max-width:1199px) { 


}


/* ===== PART2 ===== */
.main-part2 {position:relative; width:100%; background:#1a0e05;}
.main-part2 .sticky-wrapper {position:relative; width:100%; padding:100px 0 120px;}
.main-part2 .conInner {max-width:1400px; margin:0 auto; width:100%; padding:0 20px;}
 
/* 상단 타이틀 */
.part2-head {text-align:center; margin-bottom:70px;}
.part2-head h2 {font-size:var(--fs50); font-weight:700; color:#fff; line-height:1.3; letter-spacing:-1px;}
.part2-head p {margin-top:16px; font-size:var(--fs18); color:rgba(255,255,255,.6); line-height:1.6;}
 
/* 바디 레이아웃 */
.part2-body {display:flex; gap:160px; align-items:flex-start;}
 
/* 왼쪽 탭버튼 */
.part2-tabs {flex:0 0 360px; display:flex; flex-direction:column; gap:10px;}
.part2-tabs .tab-btn {display:flex; align-items:center; justify-content:space-between; padding:24px 40px; background:rgba(255,255,255,.92); border:none; border-radius:6px; cursor:pointer; transition:all .3s ease; width:100%; text-align:left; line-height:1;}
.part2-tabs .tab-btn:hover, .part2-tabs .tab-btn.on {background:var(--c_base2,#DF630B);}
.part2-tabs .tab-btn:hover span, .part2-tabs .tab-btn.on span {color:#fff;}
.part2-tabs .tab-btn:hover .tab-arrow, .part2-tabs .tab-btn.on .tab-arrow {opacity:1; transform:translateX(4px);}
.part2-tabs .tab-btn span {font-size:var(--fs18); font-weight:600; color:#222; transition:color .3s;}
.part2-tabs .tab-arrow {opacity:0; transition:all .3s; flex-shrink:0;}
.part2-tabs .tab-arrow img {width:28px; height:auto; display:block; filter:brightness(0) invert(1);}
 
/* 오른쪽 콘텐츠 패널 */
.part2-panels {flex:1; position:relative; min-height:360px;}
.part2-panel {display:none; animation:fadeInPanel .4s ease; cursor:pointer;}

.part2-panel.on {display:flex; gap:40px;}
 
@keyframes fadeInPanel {
  from {opacity:0; transform:translateY(10px);}
  to {opacity:1; transform:translateY(0);}
}
 
/* 패널 텍스트 */
.panel-txt {flex:0 0 250px; display:flex; flex-direction:column; justify-content:space-between;}
.panel-txt h3 {font-size:var(--fs36); font-weight:700; color:var(--c_base1,#FACC15); line-height:1.35; letter-spacing:-0.5px;}
.panel-txt p {margin-top:40px; font-size:var(--fs16); color:rgba(255,255,255,1); line-height:1.7; transition:all 0.3s;}
.panel-link {display:inline-flex; align-items:center; gap:8px; margin-top:28px; padding-bottom:4px; position:relative;}
.panel-link img {width:71px; height:auto; display:block; position:relative;}
/*.panel-link:before {content:""; display:block; width:24px; height:2px; background:var(--c_base1); position:absolute; bottom:5px; left:0; border-radius:2px; z-index:-1;}*/
.part2-panel:hover .panel-link img {width:100px; }
/* 패널 이미지 */
.panel-img {flex:1; border-radius:8px; max-height:300px;}
.panel-img img {width:100%; height:300px; object-fit:cover; display:block; border-radius:8px; transition:all 0.3s;}
 .part2-panel:hover .panel-img img {transform:translateY(-8px); box-shadow:0 10px 10px 0 rgba(0, 0, 0, 0.25);}
 .part2-panel:hover .panel-txt p {color:var(--c_base1); opacity:0.8;}
 
 .main-part2 .sticky-wrapper {background:url(/images/main/main-part2_bg.webp) no-repeat center / cover;}
/* ===== TABLET (1199px 이하) ===== */
@media screen and (max-width:1199px) {
.main-part2 .sticky-wrapper {background:url(/images/main/main-part2_bg.webp) no-repeat center / cover;}
.main-part2.video-scroll-container {height:auto!important;}
.main-part2 .sticky-wrapper {padding:60px 0; height:auto!important;}
.part2-head {margin-bottom:40px;}
.part2-body {flex-direction:column; gap:0;}
.part2-tabs {flex:none; width:100%; flex-direction:row; flex-wrap:wrap; gap:8px; margin-bottom:24px;}
.part2-tabs .tab-btn {flex:1 1 calc(50% - 4px); min-width:0; padding:20px;}
.part2-tabs .tab-arrow {}
.part2-panels {width:100%; min-height:auto;}
.part2-panel.on {flex-direction:row; gap:20px;}
.panel-txt {flex:0 0 240px;}
.panel-txt p {margin-top:24px;}
.panel-img img {}

 .pin-spacer {height:auto!important;}
}
 
/* ===== MOBILE (767px 이하) ===== */
@media screen and (max-width:767px) {
  .main-part2 .sticky-wrapper {padding:50px 0 60px; max-height:none!important;}
  .part2-head {margin-bottom:30px;}
  .part2-head h2 {letter-spacing:-0.5px;}
  .part2-tabs .tab-btn {flex:1 1 100%; padding:14px 18px;}
  .part2-panel.on {flex-direction:column; gap:16px;}
  .panel-txt {flex:none; width:100%;}
  .panel-txt h3 {font-size:var(--fs24,2.1rem);}
  .panel-txt p {margin-top:16px;}
  .panel-img {width:100%;}
  .panel-img img {height:200px;}
  .panel-tit br {display:none;}
}



/* ===== PART3 WRAPPER ===== */
.main-part3 { position:relative; background:#fff; display:flex; align-items:center; overflow:hidden; }
@media screen and (min-width:1200px) { .main-part3 { min-height:100vh; } }
@media screen and (max-width:1199px) { .main-part3 { height:auto; padding:80px 0; } }
@media screen and (max-width:767px) { .main-part3 { padding:60px 0; } }
 
/* ===== INNER ===== */
.main-part3 .inner { max-width:1400px; width:100%; margin:0 auto; position:relative; z-index:2; }
@media screen and (max-width:1199px) { .main-part3 .inner { width:100%; max-width:100%; padding:0 20px; }  }
 
/* ===== BG LOGO ===== */
.main-part3 .part3-logo-bg { position:absolute; right:0; top:50%; transform:translateY(-50%); opacity:0.06; pointer-events:none; z-index:1; width:55%; max-width:614px; height:480px; }
.main-part3 .part3-logo-bg img { width:100%; height:auto; display:block; }
@media screen and (max-width:767px) { .main-part3 .part3-logo-bg { width:80%; top:auto; bottom:0; transform:none; } }
 
/* ===== NOTICE LIST ===== */
.part3-notice { margin-bottom:70px; }
.part3-notice ul { display:flex; gap:24px; }
.part3-notice ul li { flex:1; }
.part3-notice ul li a { display:block; background:#fff; border:1px solid var(--border1); border-radius:16px; padding:30px 28px 32px; transition:all .4s ease; }
.part3-notice ul li a:hover { transform:translateY(-8px); border-color:var(--border1); box-shadow:0 20px 40px rgba(0,0,0,0.08); }
.part3-notice ul li a:hover .notice-tit { color:var(--c_base2); }
.part3-notice .notice-badge { display:inline-block; padding:8px 20px; border-radius:4px; font-size:var(--fs12); background:#eee; color:#000; font-weight:700; margin-bottom:20px; }
.part3-notice .notice-tit { font-size:var(--fs20); font-weight:700; color:var(--c_base4); line-height:1.4; margin-bottom:14px; transition:color .3s ease; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.part3-notice .notice-desc { font-size:var(--fs16); color:#333; line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media screen and (max-width:1199px) { .part3-notice ul { flex-direction:column; gap:16px; } .part3-notice { margin-bottom:50px; } }
@media screen and (max-width:767px) { .part3-notice { margin-bottom:40px; } .part3-notice ul li a { padding:24px 20px 26px; } }
 
/* ===== SLOGAN + COUNT LAYOUT ===== */
.part3-bottom { display:flex; align-items:center; justify-content:space-between; gap:60px; }
@media screen and (max-width:767px) { .part3-bottom { flex-direction:column; align-items:flex-start; gap:16px; } }
 
/* ===== SLOGAN ===== */
.part3-slogan { flex:0 0 485px; position:relative;}
.part3-slogan:before {content:""; display:block; width:123%; max-width:600px; height:480px; background:url(/images/main/part3_logo-bg.png) no-repeat center / contain; position:absolute; right:-33%; top:0; z-index:-1;}
.part3-slogan .slogan-label { display:flex; align-items:center; gap:10px; margin-bottom:80px; }
.part3-slogan .slogan-label .bar { display:inline-block; width:20px; height:14px; background:var(--c_base3); border-radius:2px; }
.part3-slogan .slogan-label span { font-size:var(--fs13); font-weight:700; color:var(--c_base3); letter-spacing:0.1em; }
.part3-slogan h2 { font-size:var(--fs40); font-weight:800; color:var(--c_base4); line-height:1.25; margin:0 0 20px; word-break:keep-all; }
.part3-slogan h2 em { color:var(--c_base2); font-style:normal; }
.part3-slogan p { font-size:var(--fs16); color:var(--c_base4); line-height:1.8; word-break:keep-all; }
@media screen and (max-width:1199px) { .part3-slogan { flex:none; width:35%;} }
 
/* ===== COUNT ===== */
.part3-count {flex:1; max-width:600px;}
.part3-count ul { display:flex; flex-direction:column; gap:0; }
.part3-count ul li { display:flex; align-items:center; padding:26px 0; justify-content:space-between;}
.part3-count ul li:hover { }
.part3-count .cnt-num {font-size:var(--fs64); font-weight:900; color:var(--c_base4); line-height:1; transition:all 0.3s;}
.part3-count ul li:hover .cnt-num {color:var(--c_base2);}
.part3-count ul li:hover .cnt-label {color:var(--c_base2);}
.part3-count .cnt-num.num {min-width:84px;}
.part3-count .cnt-num.plus {transform:translateY(-7%);}
.part3-count .cnt-label {font-size:var(--fs20); font-weight:600; color:var(--c_base4); margin-left:20px; }
.part3-count .cnt-arrow { display:flex; align-items:center; opacity:0; transition:opacity .3s ease; }
.part3-count ul li:hover .cnt-arrow { opacity:1; }
.part3-count-txt {display:flex; align-items:center; min-width:280px;}
.part3-count-btn {display:flex; align-items:center;}
.part3-count .cnt-arrow img { width:71px; height:auto; }
.part3-count .cnt-btn { display:inline-flex; align-items:center; padding:12px 22px; border-radius:8px; font-size:var(--fs15); font-weight:700; color:#fff; background:var(--c_base4); white-space:nowrap; transition:background .3s ease; }
.part3-count ul li:hover .cnt-btn { background:var(--c_base2); }
.part3-count ul li:hover .cut-mum {color:var(--c_base2);}
@media screen and (max-width:1199px) {
	.part3-count { width:100%;}
	.part3-count .cnt-num {font-size:var(--fs48); }
	.part3-count .cnt-num.num {min-width:60px;}
	.part3-count-txt {min-width:240px;}
	.part3-slogan .slogan-label {margin-bottom:40px;}
}
@media screen and (max-width:767px) {
	.part3-count .cnt-num { min-width:auto; font-size:var(--fs40); }
	.part3-count ul li { padding:20px 0; gap:14px; }
	.part3-count .cnt-label { font-size:var(--fs16); }
	.part3-count .cnt-btn { padding:10px 16px; font-size:var(--fs14); }
	.part3-slogan {width:100%;}
	.part3-slogan:before {top:30px;}
	.part3-slogan .slogan-label {margin-bottom:20px;}
	.part3-count-txt {min-width:180px;}
	.main .visual video {object-position:75%;}
}


/* ===== SCROLL REVEAL ANIMATION ===== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.from-left {
    transform: translateX(-40px);
}
.reveal.from-right {
    transform: translateX(40px);
}
.reveal.scale-up {
    transform: scale(0.92);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}