@charset "utf-8";
/* 서브페이지 공통 */

/* -------------------------------- s_visual -------------------------------- */
.s_visual{position: relative; z-index: 5; height: 480px; background: #04070f; font-family: "Pretendard Variable", Pretendard, sans-serif;}
.s_visual .sv-bg{position: absolute; inset: 0; overflow: hidden;}
.s_visual .sv-bg::before{content: ''; position: absolute; inset: 0; background: url('../images/sub/sub_visual.jpg') center / cover no-repeat; opacity: .9; animation: svZoom 6s cubic-bezier(0.16, 1, 0.3, 1) both;} /* 임시 이미지 (Unsplash) */
.s_visual .sv-bg::after{content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,7,15,.75) 0%, rgba(4,7,15,.2) 45%, rgba(4,7,15,.8) 100%);}
.sv-inner{position: relative; z-index: 2; max-width: 1800px; height: 100%; margin: 0 auto; padding: 0 36px 56px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end;}

.sv-eng{margin-bottom: 20px; font-family: 'Jost', 'Pretendard Variable', sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; color: #5ea6ff; animation: svUp .9s cubic-bezier(0.16, 1, 0.3, 1) .1s both;}
.sv-tit{font-family: inherit; font-size: 58px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #fff; animation: svUp .9s cubic-bezier(0.16, 1, 0.3, 1) .25s both;}

/* 위치표시 */
.sv-loc{display: flex; align-items: center; flex-wrap: wrap; margin-top: 20px; animation: svUp .9s cubic-bezier(0.16, 1, 0.3, 1) .35s both;}
.sv-loc li{display: flex; align-items: center; font-size: 18px; color: rgba(234,240,248,.6);}
.sv-loc li + li::before{content: ''; width: 6px; height: 6px; margin: 0 12px; border-top: 1.5px solid rgba(234,240,248,.45); border-right: 1.5px solid rgba(234,240,248,.45); transform: rotate(45deg);}
.sv-loc li:last-child{color: #fff; font-weight: 600;}
.sv-loc a{display: flex; color: rgba(234,240,248,.6); font-size: 18px; transition: color .2s;}
.sv-loc a:hover{color: #fff;}

/* 서브메뉴 (알약 탭 - 상단메뉴와 같은 반투명 스타일) */
.sv-tabs{align-self: flex-start; max-width: 100%; margin-top: 40px;}
.sv-tabs .tab_ul{position: relative; display: flex; gap: 6px; padding: 10px; border-radius: 999px; background: rgba(234,240,248,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow-x: auto; scrollbar-width: none; animation: svUp .9s cubic-bezier(0.16, 1, 0.3, 1) .45s both;} /* 등장효과는 블러가 걸린 바 자체에 (부모에 걸면 블러가 안 됨) */
.sv-tabs .tab_ul::-webkit-scrollbar{display: none;}
.sv-tabs .tab_ul li{position: relative; z-index: 1; flex: none;}
.sv-tabs .tab_ul a{display: block; padding: 13px 26px; border-radius: 999px; font-size: 18px; font-weight: 600; color: #eaf0f8; white-space: nowrap; transition: color .2s, background .2s;}
.sv-tabs .tab_ul a:hover{color: #fff;}
/* 따라다니는 배경 (마우스를 올린 탭으로 미끄러지듯 이동) */
.sv-tabs .tab_hover{position: absolute; z-index: 0; top: 8px; bottom: 8px; left: 0; width: 0; border-radius: 999px; background: rgba(234,240,248,.14); box-shadow: 0 8px 24px -8px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: left .6s cubic-bezier(0.23, 1, 0.32, 1.05), width .6s cubic-bezier(0.23, 1, 0.32, 1.05), opacity .3s;}
.sv-tabs .tab_hover.on{opacity: 1;}
.sv-tabs .tab_ul li.on a{color: #fff; background: rgba(234,240,248,.24); } /* 현재 페이지 : 반투명 */

@keyframes svZoom{from{transform: scale(1.15);} to{transform: scale(1);}}
@keyframes svUp{from{opacity: 0; transform: translateY(30px);} to{opacity: 1; transform: none;}}

/* =================== 반응형 =================== */
@media (max-width: 1440px){
    .s_visual{height: 440px;}
    .sv-tit{font-size: 50px;}
}
@media (max-width: 1024px){
    .s_visual{height: 400px;}
    .sv-tit{font-size: 42px;}
    .sv-tabs .tab_ul a{padding: 12px 20px; font-size: 15px;}
}
@media (max-width: 768px){
    .s_visual{height: 340px;}
    .sv-inner{padding: 0 20px 30px;}
    .sv-eng{margin-bottom: 10px; font-size: 15px;}
    .sv-tit{font-size: 34px;}
    .sv-loc{margin-top: 12px;}
    .sv-loc li{font-size: 14px;}
    .sv-tabs{align-self: stretch; margin-top: 24px;}
    .sv-tabs .tab_ul{padding: 6px;}
    .sv-tabs .tab_hover{top: 6px; bottom: 6px;}
    .sv-tabs .tab_ul a{padding: 10px 16px; font-size: 14px;}
}
@media (max-width: 450px){
    .s_visual{height: 320px;}
    .sv-tit{font-size: 28px;}
}

/* -------------------------------- s_content -------------------------------- */
.s_content{position: relative; padding: 120px 0; font-family: "Pretendard Variable", Pretendard, sans-serif;}
.s_section{max-width: 1600px; margin: 0 auto;}
.i_section{max-width: 1600px; margin: 0 auto;}
.s_tit{margin-bottom: 70px; text-align: center;}
.s_tit_m{display: block; margin-bottom: 12px; font-size: 22px; font-weight: 600; color: #2f6fd6;}
.s_tit h3{font-family: inherit; font-size: 44px; font-weight: 700; letter-spacing: -.02em; color: #10192b; word-break: keep-all;}
/* 포인트 바 : 설명 문장이 있으면 문장 아래, 없으면 제목 아래 */
.s_tit h3:last-child::after, .s_tit_desc::after{content: ''; display: block; width: 50px; height: 2px; margin: 24px auto 0; background: #2f6fd6;}
.s_tit_desc{margin-top: 50px; font-size: 30px; font-weight: 700; line-height: 1.6; letter-spacing: -.02em; color: #333; word-break: keep-all;}

.txtCon .ConWr a{display: block; width: calc(100% - 160px);}
.txtCon .ConWr img{display: block; transition: transform .2s ease-in;}
.txtCon .ConWr a:hover img{transform: scale(1.2);}

/* 준비중 */
.ready{padding: 100px 20px; border-radius: 24px; background: #f2f5fa; text-align: center;}
.ready i{font-size: 56px; color: #2f6fd6;}
.ready h4{margin-top: 20px; font-family: inherit; font-size: 30px; font-weight: 700; color: #10192b;}
.ready p{margin-top: 12px; font-size: 18px; line-height: 1.6; color: #5b6679; word-break: keep-all;}

/* =================== 반응형 =================== */
@media (max-width: 1600px){
    .s_section{padding: 0 20px;}
    .i_section{padding: 0 20px;}
}
@media (max-width: 1280px){
    .s_tit h3{font-size: 38px;}
}
@media (max-width: 1024px){
    .s_content{padding: 90px 0;}
    .s_tit{margin-bottom: 50px;}
    .s_tit h3{font-size: 32px;}
    .s_tit_desc{margin-top: 36px; font-size: 23px;}
}
@media (max-width: 860px){
    .txtCon .ConWr a{width: calc(100% - 100px);}
}
@media (max-width: 768px){
    .s_content{padding: 60px 0;}
    .s_section{padding: 0 15px;}
    .i_section{padding: 0 15px;}
    .s_tit{margin-bottom: 40px;}
    .s_tit_m{margin-bottom: 8px; font-size: 15px;}
    .s_tit h3:last-child::after, .s_tit_desc::after{width: 36px; margin-top: 16px;}
    .s_tit_desc{margin-top: 26px; font-size: 19px;}
    .s_tit h3{font-size: 28px;}
    .txtCon .ConWr a{width: 100%;}
    .ready{padding: 70px 20px;}
    .ready i{font-size: 46px;}
    .ready h4{font-size: 23px;}
    .ready p{font-size: 15px;}
}
@media (max-width: 450px){
    .s_tit h3{font-size: 24px;}
}

/* -------------------------------- 모바일 가로 스크롤 -------------------------------- */
.table_wrap{position: relative;}
.table_wrap table{width: 100%; border-spacing: 0px; border-top: 2px solid #043a57; border-left: 1px solid #ddd;}
.table_wrap table thead{background-color: #f7f7f7;}
.table_wrap table thead tr th{padding: 15px 12px; color: #333; font-weight: 500; font-size: 17px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; word-break: keep-all; letter-spacing: -0.4px;}
.table_wrap table tbody tr td{padding: 12px; color: #444; font-size: 17px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; word-break: keep-all; letter-spacing: -0.4px;}
.table_wrap table tbody tr td.bg{background-color: #f7f7f7;}
.table_wrap .table_prev_mo{display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 10;}
.table_wrap .table_prev_mo ul{position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -75px;}
.table_wrap .table_prev_mo ul:after{content: ''; display: block; clear: both;}
.table_wrap .table_prev_mo ul li{float: left;}
.table_wrap .table_prev_mo ul li p{font-size: 17px; color: #fff;}
.table_wrap .table_prev_mo ul li i{margin-top: 4px; font-size: 16px; color: #fff; animation: prevarrow .5s ease-in infinite alternate;}
.table_wrap p.caption{font-size: 17px; color: #666; margin-top: 10px; letter-spacing: -0.4px; word-break: keep-all;}
.table_wrap p.caption a:hover{background-color: rgba(198,16,101,.2);}

.table_wrap table tbody tr td span{display: inline-block; border-radius: 50%; width: 10px; height: 10px;}
.table_wrap table tbody tr td span.c1{background-color: #21a462;}
.table_wrap table tbody tr td span.c2{background-color: #5697e9;}
.table_wrap table tbody tr td span.c3{background-color: #7d49d0;}
.table_wrap table tbody tr td span.c4{background-color: #fbb518;}
.table_wrap table tbody tr td span.c5{background-color: #f75b20;}
.table_wrap table tbody tr td span.c6{background-color: #2d29f1;}
.table_wrap table tbody tr td a.down:hover{background-color: rgba(198,16,101,.2);}

.table_wrap span.table_each{font-size: 17px; color: #888; display: block; margin-bottom: 5px; position: absolute; right: 0; top: -30px;}

/* =================== 반응형 =================== */
@media (max-width: 1024px){
    .table_wrap table thead tr th{padding: 13px 10px;}
    .table_wrap table tbody tr td{padding: 11px 10px;}
    .table_wrap p.caption{margin-top: 8px;}
}
@media (max-width: 860px){
    .table_wrap{width: 100%; overflow-x: auto; white-space: nowrap; padding-bottom: 20px;}
    .table_wrap table{width: 100%;}
    .table_wrap .table_prev_mo{display: block;}
}
@media (max-width: 640px){
    .table_wrap table thead tr th{padding: 10px; line-height: 22px;}
    .table_wrap table tbody tr td{padding: 10px; line-height: 22px;}
    .table_wrap p.caption{margin-top: 7px;}
    .table_wrap span.table_each{top: -25px;}
}
@media (max-width: 450px){
    .table_wrap table thead tr th{padding: 8px;}
    .table_wrap table tbody tr td{padding: 8px;}
    .table_wrap table tbody tr td ul li:after{top: 9px;}
    .table_wrap p.caption{margin-top: 5px;}
    .table_wrap span.table_each{top: -20px;}
}

/* -------------------------------- s_body -------------------------------- */
.s_body{margin-bottom: 80px; position: relative;}
.s_body:after{display: block; content: ''; clear: both;}
.s_body:last-child{margin-bottom: 0;}
.s_body h1.s_txt{text-align: left; font-size: 30px; font-weight: bold; color: #101010; margin-bottom: 20px;}

/* =================== 반응형 =================== */
@media (max-width: 1280px){
    .s_body h1.s_txt{font-size: 28px; margin-bottom: 15px;}
}
@media (max-width: 1024px){
    .s_body{margin-bottom: 60px;}
    .s_body h1.s_txt{font-size: 26px;}
}
@media (max-width: 860px){
    .s_body h1.s_txt{font-size: 23px;}
}
@media (max-width: 768px){
    .s_body{margin-bottom: 50px;}
    .s_body h1.s_txt{font-size: 22px;}
}
@media (max-width: 640px){
    .s_body{margin-bottom: 40px;}
    .s_body h1.s_txt{font-size: 21px; margin-bottom: 10px;}
}
@media (max-width: 450px){
    .s_body{margin-bottom: 30px;}
    .s_body h1.s_txt{font-size: 18px; margin-bottom: 5px;}
}

/* ======================================================================
   서브 콘텐츠 (HTML형 페이지)
   ====================================================================== */
.sc-sec + .sc-sec{margin-top: 110px;}
.sc-tit{display: flex; align-items: center; gap: 14px; margin-bottom: 30px; font-family: inherit; font-size: 36px; font-weight: 700; letter-spacing: -.02em; color: #10192b;}
.sc-tit{position: relative;}
.sc-tit::before{content: ""; flex: none; width: 26px; height: 26px; background: radial-gradient(circle at 50% 50%, #2f6fd6 3.6px, transparent 4.2px) center / 100% 100% no-repeat;} /* 섹션명 표식 : 가운데 포인트 점 (고정) */
.sc-tit::after{content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 26px; margin-top: -13px; background: radial-gradient(circle at 50% 12.5%, #c5cdda 3px, transparent 3.6px), radial-gradient(circle at 87.5% 50%, #c5cdda 3px, transparent 3.6px), radial-gradient(circle at 50% 87.5%, #c5cdda 3px, transparent 3.6px), radial-gradient(circle at 12.5% 50%, #c5cdda 3px, transparent 3.6px); pointer-events: none;} /* 회색 점 4개 : 마름모 자리 */
html.sc-motion .sc-tit::after{opacity: 0; transform: rotate(-90deg) scale(0);} /* 처음엔 가운데 점 뒤에 모여 있다가 */
html.sc-motion .sc-tit.is-in::after{opacity: 1; transform: none; transition: transform 1s cubic-bezier(.16, 1, .3, 1) .1s, opacity .4s ease .1s;} /* 바람개비처럼 돌며 제자리로 펼쳐짐 */
/* 섹션명·부제 : 단어는 묶고(단어 중간 줄바꿈 방지) 그 안을 글자로 나눠 아래에서 위로 한 글자씩 (head.php 스크립트) */
.sc-tit .sc-ttl{display: block; min-width: 0; font-size: inherit; line-height: inherit; color: inherit;} /* 제목 글자 묶음 (본문용 .sc-txt 와 이름이 겹치지 않게) */
.sc-tit .sc-w{display: inline-block; vertical-align: top; white-space: nowrap; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em;}
.sc-tit .sc-c{display: inline-block;}
html.sc-motion .sc-tit.is-armed .sc-c{opacity: 0; transform: translateY(110%);}
html.sc-motion .sc-tit.is-armed.is-in .sc-c{opacity: 1; transform: none; transition: transform .9s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms), opacity .5s ease var(--d, 0ms);}
@media (prefers-reduced-motion: reduce){html.sc-motion .sc-tit::after, html.sc-motion .sc-tit.is-armed .sc-c{opacity: 1; transform: none; transition: none;}}
.sc-tit .sc-sub{align-self: flex-end; margin-left: 6px; padding-bottom: 5px; font-size: 20px; font-weight: 500; letter-spacing: 0; color: #8a93a3; word-break: keep-all;} /* 섹션명 옆 서브타이틀 */
.sc-txt{font-size: 19px; line-height: 1.9; color: #3d4758; word-break: keep-all;}
.sc-box{padding: 50px 56px; border-radius: 24px; background: #f2f5fa;}
.sc-img{border-radius: 24px; border: 1px solid #e3e8f0; background: #fff; padding: 30px; text-align: center;}
.sc-img img{max-width: 100%; height: auto;}
.sc-note{margin-top: 14px; font-size: 16px; color: #8a93a3;}

/* 어두운 강조 카드 (공통) */
.sc-dark{position: relative; overflow: hidden; border-radius: 28px; color: #fff; background: radial-gradient(700px 400px at 85% 10%, rgba(47,111,214,.35), transparent 65%), radial-gradient(500px 360px at 5% 100%, rgba(47,190,150,.18), transparent 60%), #0a1428;}

/* ---------- 비전과 상징 (sub1_2) ----------
   상단 고정 섹션(남색 패널) : 영문 센터명이 CSDRC 로 접히고(& 도 사라짐) → 아래로 슬로건·목표 글이 올라옴 → 글 묶음이 위로 물러나고 비전 유리 카드 2장이 오른쪽에서 들어옴 - 모두 스크롤 연동
   변수 기본값은 완성 상태(스크립트 미동작·모션 축소 시 : CSDRC·슬로건·목표 아래 카드 2장 정적 표시), 스크립트(.is-live)가 0 부터 진행률에 맞춰 올림
   --vs-o : 이니셜 외 글자 흐려짐 / --vs-c : 접힘·풀네임 / --vs-f : CSDRC 확대·자간 / --vs-m, --vs-m2 : 슬로건·목표 / --vs-u : 글 묶음 위로 / --vs-s, --vs-x : 카드 이동 */
.s_content:has(.vs-pin:not(.vs-solo)){padding-bottom: 0;} /* 고정 섹션이 페이지 마지막일 때만 아래 흰 여백 제거 (.vs-solo 는 아래에 다른 섹션이 이어짐) */
.vs-pin{--vs-o: 1; --vs-c: 1; --vs-f: 1; --vs-m: 1; --vs-m2: 1; --vs-u: 1; --vs-s: 1; --vs-x: 0px; --vs-fs0: 56px; --vs-fs1: 120px; --vs-stage: max(100vh, 640px); position: relative;}
.vs-pin.is-live{height: calc(var(--vs-stage) * 3.8);} /* 고정 화면 높이의 2.8배가 스크롤 구간 (카드가 들어온 뒤 멈춰 있는 시간 포함) */
/* .vs-solo : 센터명·슬로건만 있는 버전. 화면 전체가 아니라 본문 폭의 둥근 남색 판 안에서 재생 (다른 섹션의 둥근 판과 같은 틀) */
.vs-pin.vs-solo{--vs-stage: clamp(480px, 72vh, 720px); --vs-fs0: clamp(26px, 3.6vw, 56px); --vs-fs1: clamp(60px, 9.7vw, 140px); --vs-g: 1; --vs-roll: clamp(90px, 15vw, 260px);}
.vs-pin.vs-solo.is-live{height: calc(var(--vs-stage) + var(--vs-roll) * .6 + 140vh);} /* 판이 화면 가운데 고정된 채 화면 1.4배만큼 스크롤 */
.vs-solo .vs-stage{z-index: 1; width: 100%; margin-left: 0; border-radius: 40px; transform: scale(calc(.8 + .2 * var(--vs-g))); background: linear-gradient(180deg, #11203f 0%, #0a1428 100%); box-shadow: inset 0 0 0 1px rgba(234,240,248,.07);} /* 80% 크기로 올라와 고정될 때 제 크기(--vs-g 는 스크립트) */
/* 고정되는 묶음(.vs-stick) = 남색 판 + 아래 글자 띠. 판 아랫변이 글자 윗부분 40% 를 덮음 */
.vs-solo .vs-stick{position: relative; padding-bottom: calc(var(--vs-roll) * .6);}
.vs-pin.vs-solo.is-live .vs-stick{position: sticky; top: max(20px, calc((100vh - var(--vs-stage) - var(--vs-roll) * .6) / 2));} /* 묶음을 화면 세로 가운데에 고정 */
.vs-pin.vs-solo.is-live .vs-stage{position: relative; top: auto;}
.vs-roll{position: absolute; z-index: 0; left: calc(50% - 50vw); bottom: 0; width: 100vw; height: var(--vs-roll); overflow: hidden; pointer-events: none;} /* 화면 좌우 끝까지 흐르는 큰 영문 글자 */
.vs-roll-track{display: flex; width: max-content; animation: efRoll 85s linear infinite;}
.vs-roll span{flex: none; font-family: 'Jost', 'Pretendard Variable', sans-serif; font-size: var(--vs-roll); font-weight: 600; line-height: 1; letter-spacing: -.01em; white-space: nowrap; color: rgba(16,25,43,.06);}
@media (prefers-reduced-motion: reduce){.vs-roll-track{animation: none;}}
.vs-pin.vs-solo{--vs-ws: 1; --vs-wo: 1;}
.vs-solo .vs-sym1{width: min(62%, 640px); opacity: calc(.065 * var(--vs-wo)); scale: var(--vs-ws);} /* 뒤의 흰 로고 : 계속 남아 있고, CSDRC 가 커질 때 한 번 커지며 사라졌다가 작게 돌아와 다시 나타남 (--vs-ws·--vs-wo 는 스크립트) */
.vs-solo .vs-lock{display: flex; align-items: center; justify-content: center; max-width: 100%;}
.vs-solo .vs-word{flex: 0 1 auto; min-width: 0; font-weight: 700;} /* CSDRC 는 흰색 유지 */
.vs-solo .vs-tit b{font-weight: 700; color: #5ea6ff;} /* 아래 풀네임의 이니셜 C·S·D·R·C 강조 */
/* 처음엔 센터명 한 줄만 보이므로 그 줄이 판 세로 가운데에 오게 내려 두고(--vs-below = 아래 숨은 풀네임·슬로건 높이), 그것들이 나타날 때 묶음 전체가 가운데로 올라감(--vs-k) */
.vs-pin.vs-solo{--vs-k: 1; --vs-below: 0px;}
.vs-pin.vs-solo.is-live .vs-copy{transform: translateY(calc(-50% + var(--vs-below) / 2 * (1 - var(--vs-k))));}
.vs-solo .vs-tit{margin: 20px 0 0; font-size: clamp(16px, 1.67vw, 24px); font-weight: 500;} /* CSDRC 아래 풀네임 */
.vs-solo .vs-slogan{margin-top: 30px;}
.vs-stage{position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: 640px; padding: 100px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; overflow: hidden; color: #f3f6fb; background: radial-gradient(900px 600px at 82% 12%, rgba(47,111,214,.42), transparent 65%), radial-gradient(700px 520px at 8% 96%, rgba(47,190,150,.2), transparent 60%), #0a1428;} /* 메인 비주얼·사이트맵과 같은 남색 패널 */
.vs-pin.is-live .vs-stage{position: sticky; top: 0; height: var(--vs-stage); min-height: 0; padding: 0 20px; display: block;}
/* 뒤의 큰 흰색 워터마크 로고 : 배경으로 고정 */
.vs-sym1{position: absolute; left: 50%; top: 50%; width: min(90vh, 900px, 90vw); translate: -50% -50%; opacity: .1; pointer-events: none;}
.vs-sym1 img{display: block; width: 100%; height: auto; filter: brightness(0) invert(1);}
/* 센터명·슬로건·목표 묶음 : 가운데에서 시작해 카드가 들어올 때 위로 이동 */
.vs-copy{position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 100%;}
.vs-pin.is-live .vs-copy{position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(calc(-50% - var(--vs-u) * var(--vs-stage) * .22));}
/* 작은 풀네임 : 글자가 접히는 동안 나타남 */
.vs-tit{margin-bottom: 20px; font-family: 'Jost', 'Pretendard Variable', sans-serif; font-size: 19px; font-weight: 400; letter-spacing: .02em; color: rgba(234,240,248,.7); opacity: var(--vs-c);}
/* 센터명 : 이니셜(b)은 남고 나머지(i)는 흐려진 뒤 접힘, 다 접힌 뒤 CSDRC 가 커짐(--vs-f), 한 색 */
.vs-word{display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 calc(.4em * (1 - var(--vs-c)) + .02em * var(--vs-f)); margin: 0; max-width: 100%; font-family: 'Jost', 'Pretendard Variable', sans-serif; font-size: calc(var(--vs-fs0) + (var(--vs-fs1) - var(--vs-fs0)) * var(--vs-f)); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; color: #f3f6fb;}
.vs-w{flex: none; display: flex; align-items: baseline; white-space: nowrap;} /* flex 축소로 글자 폭이 잘못 측정되지 않게 고정 */
.vs-w b{font-weight: inherit;}
.vs-w i{flex: none; display: inline-block; overflow-x: clip; overflow-y: visible; font-style: normal; opacity: calc(1 - var(--vs-o));}
.vs-pin.is-ready .vs-w i, .vs-pin:not(.is-live) .vs-w i{width: calc(var(--w, 0) * (1 - var(--vs-c)) * 1em);}
/* 슬로건·목표 : CSDRC 아래로 차례로 올라옴 */
.vs-slogan, .vs-mission{max-width: 900px; opacity: var(--vs-m); transform: translateY(calc((1 - var(--vs-m)) * 24px)); word-break: keep-all;}
.vs-slogan{margin-top: 40px; font-size: 32px; font-weight: 700; line-height: 1.45; letter-spacing: -.02em; color: #f3f6fb;}
.vs-mission{--vs-m: var(--vs-m2); margin-top: 40px; font-size: 22px; line-height: 1.7; color: rgba(234,240,248,.72);}
.vs-mission em{font-style: normal; font-weight: 700; color: #5ea6ff;}
/* 비전 카드 : 기본은 나란히, 스크립트 동작 시 화면 아래쪽에서 오른쪽부터 들어옴 (화면에 다 들어가면 가운데, 아니면 마지막 카드가 오른쪽 끝) */
.vs-cards{position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 60px 50px; width: 100%; max-width: 1600px; padding-top: 0;}
.vs-pin.is-live .vs-cards{position: absolute; left: 0; bottom: 6%; width: max-content; max-width: none; flex-wrap: nowrap; padding-top: 0; transform: translate(var(--vs-x), 0);}
.vs-card{position: relative; display: flex; flex-direction: column; justify-content: center; width: 440px; padding: 36px 34px; border-radius: 20px; background: rgba(234,240,248,.07); border: 1px solid rgba(234,240,248,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); text-align: left; word-break: keep-all;} /* 반투명 유리 카드 */
.vs-card::before{content: attr(data-tag); position: absolute; left: 0; top: -44px; padding: 0 12px; border-radius: 999px; font-family: 'Jost', 'Pretendard Variable', sans-serif; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: .02em; color: #eaf0f8; border: 1px solid rgba(234,240,248,.5);} /* 카드 위에 띄운 테두리 태그 (카드 윗선에서 14px 위) */
.vs-card h5{font-family: inherit; font-size: 26px; font-weight: 700; line-height: 1.45; letter-spacing: -.02em; color: #f3f6fb;}
.vs-card h5 em{font-style: normal; color: #5ea6ff;}
.vs-card h5 + p{margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(234,240,248,.14); font-size: 16px; line-height: 1.75; color: rgba(234,240,248,.72);}
@media (min-width: 1601px){
    .vs-pin{--vs-fs0: 62px; --vs-fs1: 136px;}
}
@media (max-width: 1280px){
    .vs-pin{--vs-fs0: 48px; --vs-fs1: 100px;}
    .vs-card{width: 400px;}
    .vs-slogan{font-size: 28px;}
    .vs-mission{font-size: 18px;}
    .vs-card h5{font-size: 22px;}
}
@media (max-width: 1024px){
    .vs-pin{--vs-fs0: 38px; --vs-fs1: 84px; --vs-stage: max(100vh, 560px);}
    .vs-tit{font-size: 15px;}
    .vs-card{width: 360px;}
    .vs-slogan{font-size: 24px;}
    .vs-mission{font-size: 16px;}
    .vs-card h5{font-size: 20px;}
    .vs-card h5 + p{font-size: 14px;}
}
@media (max-width: 768px){
    .vs-pin{--vs-fs0: 26px; --vs-fs1: 56px; --vs-stage: max(100vh, 560px);}
    .vs-pin.is-live{height: calc(var(--vs-stage) * 3.2);}
    .vs-word{row-gap: .15em;} /* 좁은 화면에서는 센터명이 여러 줄로 시작해 한 줄 CSDRC 로 모임 */
    .vs-tit{margin-bottom: 10px; font-size: 13px;}
    .vs-cards{gap: 40px 30px;}
    .vs-pin.is-live .vs-copy{transform: translateY(calc(-50% - var(--vs-u) * var(--vs-stage) * .26));}
    .vs-stage{gap: 24px;}
    .vs-slogan{margin-top: 24px; font-size: 20px;}
    .vs-mission{margin-top: 24px; font-size: 16px;}
    .vs-card{width: min(300px, 82vw); padding: 30px 20px;}
    .vs-card h5{font-size: 18px;}
    .vs-card h5 + p{margin-top: 10px; padding-top: 10px; font-size: 13px; line-height: 1.7;}
}

/* ---------- 센터구성 (sub1_3) : 원 + 큰 박스형 조직도 / (+) 박스를 누르면 상세 팝업 ---------- */
.oc{--oc-line: #c5cdda; --oc-accent: #2f6fd6; --oc-navy: #0a1428; position: relative;} /* 선은 --oc-line 한 색 1px, 상자 색은 아래 단계별 변수 */
.oc-tree{position: relative; display: flex; flex-direction: column; align-items: center;}
.oc-tree::before{content: ''; position: absolute; left: calc(50% - .5px); top: 150px; bottom: 0; width: 1px; background: var(--oc-line);} /* 가운데 세로선 (원 중심에서 시작) */
.oc-tree > *{position: relative; z-index: 1;}

/* 연구센터 (원) */
.oc-circle{position: relative; display: flex; align-items: center; justify-content: center; width: 300px; height: 300px; border-radius: 50%; overflow: hidden; background: var(--oc-accent); box-shadow: 0 0 0 26px #fff, 0 20px 50px -10px rgba(27,53,102,.35); text-align: center;} /* 포인트 파랑 단색 */
.oc-circle::before{content: ''; position: absolute; left: 50%; top: 50%; width: 76%; aspect-ratio: 1; translate: -50% -50%; background: url('../images/common/logo.png') center / contain no-repeat; filter: brightness(0) invert(1); opacity: .12; pointer-events: none;} /* 뒤에 은은한 흰 로고 */
.oc-circle p{position: relative; font-size: 26px; font-weight: 700; line-height: 1.3; color: #fff; word-break: keep-all;}
.oc-circle span{display: block; margin-bottom: 10px; font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 600;opacity: .8;}
.oc-circle + .oc-pair{margin-top: 70px;} /* 원의 흰 테두리 띠를 지나 첫 행 */

/* 연구개발부 */
.oc-main{display: flex; align-items: center; justify-content: center; width: 340px; height: 90px; margin-top: 60px; border-radius: 0 25px; background: var(--oc-navy); font-size: 24px; font-weight: 700; color: #fff; box-shadow: 0 16px 30px -18px rgba(10,20,40,.5);}

/* 좌우 한 쌍 박스 */
.oc-pair{display: flex; justify-content: center; gap: 200px; margin-top: 40px;}
.oc-pair::before{content: ''; position: absolute; z-index: -1; top: 50%; left: calc(50% - 100px); right: calc(50% - 100px); height: 1px; background: var(--oc-line);}
.oc-box{position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 340px; height: 100px; padding: 0 20px; border: 0; border-radius: 15px; background: var(--oc-lv3); font-family: inherit; font-size: 22px; font-weight: 600; line-height: 1.2; color: #fff; text-align: center; word-break: keep-all;}
.oc-box span{font-size: 16px; font-weight: 500; color: rgba(255,255,255,.8);}
.oc-box.is-blue{background: var(--oc-lv3);}

/* 누르면 팝업이 열리는 박스 : (+) 표시 + 오버 효과 */
.is-link{cursor: pointer; transition: transform .3s, box-shadow .3s, background-color .3s;}
.is-link:hover{transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(27,53,102,.6);}
.oc-box.is-link:hover{background: var(--oc-navy);}
.is-link i{position: absolute; top: 50%; right: 14px; display: block; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 16px; line-height: 26px; text-align: center; color: #fff;} /* 상자 오른쪽 세로 가운데, 원 안에 + 가운데 */
.is-link i::before{display: block; line-height: 26px;}

/* 가로 3칸 (위원회 / 연구그룹) */
.oc-triple{position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; margin-top: 70px;}
.oc-triple::before{content: ''; position: absolute; top: -30px; left: calc((100% - 60px) / 6); right: calc((100% - 60px) / 6); height: 1px; background: var(--oc-line);}
.oc-triple > li{position: relative;}
.oc-triple > li::before{content: ''; position: absolute; left: calc(50% - .5px); top: -30px; width: 1px; height: 30px; background: var(--oc-line);}
.oc-tit{position: relative; display: flex; align-items: center; justify-content: center; min-height: 68px; margin-bottom: 10px; padding: 0 20px; border-radius: 10px; background: var(--oc-lv4); font-size: 19px; font-weight: 600; color: #fff; text-align: center;}
.oc-item{display: block; padding: 20px 30px; border: 1px solid var(--oc-line); border-radius: 10px; background: #fff; font-size: 17px; line-height: 1.7; color: #3d4758; word-break: keep-all;}
.oc-item li::before{content: '· ';}
/* 연구그룹 : 트리 아래 이어짐 */
.oc-triple.is-groups{margin-top: 60px;}
.oc-triple.is-groups::after{content: ''; position: absolute; left: calc(50% - .5px); top: -60px; width: 1px; height: 30px; background: var(--oc-line);}
.oc-group{display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; background: none; font-family: inherit; text-align: inherit;}
.oc-group .oc-tit{margin-bottom: 10px; border: 0; background: var(--oc-accent); color: #fff; font-size: 22px;}
.oc-group .oc-item{display: flex; align-items: center; justify-content: center; min-height: 80px; border-color: var(--oc-line); color: #10192b; text-align: center; font-weight: 500;}
.oc-group:hover .oc-tit{background: var(--oc-navy);}
/* 위에서 아래로 갈수록 점점 어두워지며 초록이 은은하게 섞이는 색 흐름 (연구센터 파랑 → 연구그룹 청록). 같은 단은 같은 색 */
.oc{--oc-lv3: #2457ad; --oc-lv4: #215391; --oc-lv5: #1f5f8c; --oc-lv6: #1c6b86; --oc-lv7: #1a7a7e;}
.oc-main.lv5{background: var(--oc-lv5);}
.oc-box.is-blue.lv6{background: var(--oc-lv6);}
.oc-group .oc-tit{background: var(--oc-lv7);}

/* 등장 모션 (head.php 스크립트가 화면에 들어온 .ani 에 .in-view 추가) */
.oc .ani{opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .9s cubic-bezier(0.16, 1, 0.3, 1);}
.oc .ani.a-left{transform: translateX(-40px);}
.oc .ani.a-right{transform: translateX(40px);}
.oc .ani.in-view{opacity: 1; transform: none;}
.oc .ani.in-view.is-link:hover{transform: translateY(-3px);}
.oc .is-link{transition: transform .3s, background .3s;}
.oc .is-link:hover{transform: translateY(-3px);} /* 개별 등장(.ani)을 뺀 뒤에도 호버 들림 유지 */

/* 팝업 */
.oc-modal{display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; padding: 20px; background: rgba(4,7,15,.7); font-family: "Pretendard Variable", Pretendard, sans-serif;}
.oc-modal.show{display: flex;}
.oc-modal-box{width: 100%; max-width: 900px; max-height: 85vh; overflow-y: auto; border-radius: 16px; background: #fff; animation: ocModalIn .35s cubic-bezier(0.16, 1, 0.3, 1);}
.oc-modal-head{position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px; background: #0a1428; color: #fff;} /* 남색 단색 */
/* 팝업 제목 : 앞에 섹션명과 같은 표식(가운데 점 + 회색 점 4개), 열릴 때 바람개비처럼 펼쳐짐 */
.oc-modal-head h3{position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; align-items: center; font-family: inherit; font-size: 26px; font-weight: 700; word-break: keep-all;}
.oc-modal-head h3::before{content: ""; grid-row: 1 / 3; width: 26px; height: 26px; background: radial-gradient(circle at 50% 50%, #5ea6ff 3.6px, transparent 4.2px) center / 100% 100% no-repeat;}
.oc-modal-head h3::after{content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 26px; margin-top: -13px; background: radial-gradient(circle at 50% 12.5%, rgba(234,240,248,.55) 3px, transparent 3.6px), radial-gradient(circle at 87.5% 50%, rgba(234,240,248,.55) 3px, transparent 3.6px), radial-gradient(circle at 50% 87.5%, rgba(234,240,248,.55) 3px, transparent 3.6px), radial-gradient(circle at 12.5% 50%, rgba(234,240,248,.55) 3px, transparent 3.6px); animation: ocDots 1s cubic-bezier(.16, 1, .3, 1) .15s both;}
@keyframes ocDots{from{opacity: 0; transform: rotate(-90deg) scale(0);} to{opacity: 1; transform: none;}}
.oc-modal-head h3 small{display: block; grid-column: 2; margin-top: 6px; font-size: 16px; font-weight: 400; opacity: .8;}
.oc-modal-close{flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 24px; color: #fff; cursor: pointer; transition: background .3s, transform .3s;}
.oc-modal-close:hover{background: rgba(255,255,255,.3); transform: rotate(90deg);}
.oc-modal-body{padding: 30px;}
.oc-topic{margin: 30px 0 10px; font-size: 18px; font-weight: 700; color: #2f6fd6; word-break: keep-all;}
.oc-topic:first-child{margin-top: 0;}
.oc-cards{display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px;}
.oc-cards li{position: relative; padding: 20px; border: 1px solid #e3e8f0; border-radius: 10px; text-align: center; transition: border-color .3s, transform .3s;}
.oc-cards .oc-person{display: block; color: inherit;}
/* 참여연구진 글과 이어진 카드 : 마우스를 올리면 카드 아래 테두리에 걸쳐 자세히 보기 알약이 올라옴 (자리를 차지하지 않음) */
.oc-cards .oc-more{position: absolute; left: 50%; bottom: -15px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; white-space: nowrap; border-radius: 50px; font-size: 14px; font-weight: 600; line-height: 30px; color: #fff; background: #2f6fd6; box-shadow: 0 6px 14px -6px rgba(47,111,214,.6); opacity: 0; transform: translate(-50%, 6px); transition: opacity .3s, transform .4s cubic-bezier(.16, 1, .3, 1);}
.oc-cards .oc-more i{font-size: 13px;}
.oc-cards li:hover .oc-more{opacity: 1; transform: translate(-50%, 0);}
.oc-cards li:hover{border-color: #2f6fd6; transform: translateY(-3px);}
.oc-photo{width: 80px; height: 80px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden;}
.oc-photo img{width: 100%; height: 100%; object-fit: cover; object-position: center 20%;}
.oc-cards h4{font-family: inherit; font-size: 19px; font-weight: 700; color: #10192b; word-break: keep-all;}
.oc-cards strong{display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-size: 16px; font-weight: 600; color: #fff; background: #2f6fd6;}
.oc-cards small{display: block; margin-top: 6px; font-size: 16px; color: #6b7587;}
@keyframes ocModalIn{from{opacity: 0; transform: translateY(30px);} to{opacity: 1; transform: none;}}

@media (max-width: 1024px){

    .oc-pair{gap: 60px;}
    .oc-pair::before{left: calc(50% - 30px); right: calc(50% - 30px);}
    .oc-box, .oc-main{width: 280px;}
    .oc-item{padding: 20px;}
}
@media (max-width: 768px){

    .oc-tree::before, .oc-pair::before, .oc-triple::before, .oc-triple > li::before, .oc-triple.is-groups::after{display: none;}
    .oc-tree::before{top: 110px;}
    .oc-circle{width: 220px; height: 220px; box-shadow: 0 0 0 16px #fff, 0 20px 50px -10px rgba(27,53,102,.35);}
    .oc-circle p{font-size: 20px;}
    .oc-main{width: 100%; height: 70px; margin-top: 40px; font-size: 19px;}
    .oc-pair{flex-direction: column; gap: 10px; width: 100%; margin-top: 10px;}
    .oc-box{width: 100%; height: 76px; font-size: 18px;}
    .oc-triple, .oc-triple.is-groups{grid-template-columns: 1fr; gap: 20px; margin-top: 30px;}
    .oc-modal-head{padding: 20px;}
    .oc-modal-head h3{font-size: 20px;}
    .oc-modal-body{padding: 20px;}
    .oc-cards{grid-template-columns: repeat(2, 1fr);}
}

/* ---------- 참여연구진 (sub1_4) ---------- */
.pp-group{--gc: #2f6fd6; padding: 50px; border-radius: 28px; background: #f6f8fc; border: 1px solid #e3e8f0;}
.pp-group.g2{--gc: #1d8fbf;}
.pp-group.g3{--gc: #2f9a63;}
.pp-group + .pp-group{margin-top: 40px;}
.pp-head{display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; padding-bottom: 28px; border-bottom: 1px solid #dfe6f1;}
.pp-num{padding: 8px 16px; border-radius: 999px; font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--gc);}
.pp-head h4{font-family: inherit; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: #10192b; word-break: keep-all;}
.pp-topic{display: flex; gap: 40px; padding-top: 34px;}
.pp-topic + .pp-topic{margin-top: 34px; border-top: 1px dashed #dfe6f1;}
.pp-topic > p{flex: none; width: 240px; padding-top: 6px; font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--gc); word-break: keep-all;}
.pp-list{flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px;}
.pp-card{padding: 26px 16px 22px; border-radius: 20px; text-align: center; background: #fff; box-shadow: 0 12px 30px -20px rgba(16,25,43,.35); transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);}
.pp-card:hover{transform: translateY(-6px);}
.pp-photo{width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--gc);}
.pp-photo img{width: 100%; height: 100%; object-fit: cover; object-position: center 20%;}
.pp-card b{display: block; margin-top: 18px; font-size: 20px; font-weight: 700; color: #10192b;}
.pp-card span{display: block; margin-top: 4px; font-size: 16px; color: #6b7587;}
.pp-card em{display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 999px; font-style: normal; font-size: 16px; font-weight: 700; color: #fff; background: var(--gc);}

/* ---------- 찾아오시는길 (sub1_6) ---------- */
/* ---------- 찾아오시는길 (sub1_6) : 지도 + 밝은 회청색 정보 바 ---------- */
.map-wrap{overflow: hidden; border-radius: 20px; border: 1px solid #e3e8f0; height: 500px;}
.map-wrap iframe{display: block; width: 100%; height: 100%; border: 0;}
.map-info{display: flex; margin-top: 20px; padding: 50px 20px; border-radius: 20px; color: #10192b; background: #f2f5fa;}
.map-info-col{flex: 1 1 0; min-width: 0; display: flex; align-items: center; padding: 0 20px;}
.map-info-col i{flex: none; display: flex; align-items: center; height: 100px; padding: 0 30px; border-right: 1px solid #d5dcea; font-size: 30px; color: #2f6fd6;}
.map-info-col ul{padding-left: 30px;}
.map-info-col li{font-size: 19px; line-height: 38px; word-break: keep-all;}
.map-info-col li span{display: inline-block; min-width: 50px; margin-right: 14px; color: #8a93a3;}
.map-info-col li a{color: inherit;}


/* ---------- 과제구성 및 추진전략 (sub2_2) : 둥근 카드 + 알약 라벨 + 점선 구분, 점선 공정도 (참고 : wonb.dsso.kr/sub3_1.php 의 형태) ---------- */
/* 과제구성 : 그룹별 둥근 카드 (--gc 는 그룹 색) */
.tk-list{display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.tk-card{--gc: #2f6fd6; position: relative; padding: 50px; border-radius: 40px; background: #f2f5fa;}
.tk-card.g2{--gc: #1d8fbf;}
.tk-card.g3{--gc: #2f9a63;}
.tk-num{position: absolute; top: 34px; right: 40px; font-family: 'Jost', sans-serif; font-size: 64px; font-weight: 700; line-height: 1; color: var(--gc); opacity: .16;} /* 그룹 번호 (장식) */
.tk-tag{display: inline-block; padding: 0 30px; border: 1px solid var(--gc); border-radius: 50px; font-style: normal; font-size: 20px; font-weight: 700; line-height: 40px; color: var(--gc); background: #fff;} /* 알약 라벨 */
.tk-card h5{margin-top: 24px; min-height: 2.9em; font-family: inherit; font-size: 25px; font-weight: 700; line-height: 1.45; letter-spacing: -.02em; color: #10192b; word-break: keep-all;}
.tk-card dl{margin-top: 30px; border-top: 1px dashed #c5cdda;}
.tk-card dl > div{display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px dashed #c5cdda;}
.tk-card dt{flex: none; min-width: 60px; padding: 0 20px; border-radius: 50px; text-align: center; font-size: 18px; font-weight: 700; line-height: 34px; color: #fff; background: var(--gc);}
.tk-card dd{margin: 0;font-size: 16px; font-weight: 500; line-height: 1.6; color: #3d4758; word-break: keep-all;}
/* 과제추진전략 : 회청색 둥근 판 안에 점선 공정도(그룹 3개) → 순환 화살표 → 공동 플랫폼 */
.st-proc{padding: 50px; border-radius: 40px; background: #f2f5fa;}
.st-steps{position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.st-steps::before{content: ''; position: absolute; top: 11px; left: 16.66%; width: 0; border-top: 4px dotted #c5cdda; transition: width 1.6s cubic-bezier(.16,1,.3,1) .2s;} /* 점 사이를 잇는 점선 : 화면에 들어오면 늘어남 */
.st-proc.in-view .st-steps::before{width: 66.66%;}
.st-steps li{--gc: #2f6fd6; display: flex; flex-direction: column;}
.st-steps li.g2{--gc: #1d8fbf;}
.st-steps li.g3{--gc: #2f9a63;}
.st-step-head{position: relative; padding-top: 50px; text-align: center;}
.st-step-head::before{content: ''; position: absolute; top: 0; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 0 6px #f2f5fa;} /* 점선 위의 색 점 */
.st-step-head em{display: inline-block; padding: 0 30px; border: 1px solid var(--gc); border-radius: 50px; font-style: normal; font-size: 20px; font-weight: 700; line-height: 40px; color: var(--gc); background: #fff;}
.st-step-head h5{margin-top: 30px; min-height: 2.9em; font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1.45; letter-spacing: -.02em; color: #10192b; word-break: keep-all;}
.st-step-body{flex: 1; padding: 30px; border-radius: 24px; background: #fff;}
.st-step-body p{font-size: 18px; line-height: 1.3; color: #3d4758; text-align: center; word-break: keep-all; font-weight: 500;}
.st-arrow{position: relative; display: flex; align-items: center; justify-content: center; height: 140px; margin: 10px 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: #2f6fd6;} /* 큰 화살표를 연하게 뒤에 깔고 그 가운데에 문구 */
.st-arrow i{position: absolute; left: 50%; top: 50%; width: 120px; font-size: 120px; line-height: 1; text-align: center; color: #e4eaf3; transform: translate(-50%, -50%); pointer-events: none;}
.st-arrow span{position: relative; z-index: 1;}
.st-platform{padding: 40px 50px; border-radius: 24px; background: #fff;}
.st-platform-head{display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;}
.st-platform-head em{display: inline-block; padding: 0 16px; border-radius: 50px; font-family: 'Jost', sans-serif; font-style: normal; font-size: 16px; font-weight: 600; line-height: 32px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #2f6fd6;}
.st-platform-head h5{font-family: inherit; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: #10192b;}
.st-platform ul{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; padding-top: 30px; border-top: 1px dashed #c5cdda;}
.st-platform li{position: relative; padding-left: 18px; font-size: 18px; line-height: 1.4; font-weight: 500; color: #3d4758; word-break: keep-all;}
.st-platform li::before{content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: #2f6fd6;}

/* ---------- 기대효과 (sub2_3) - 회색 배경 + 흰 카드 2열 ---------- */
.ef-wrap{padding: 0;}
.ef-head{margin-bottom: 60px; text-align: center;}
.ef-head h4{font-family: inherit; font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: #10192b; word-break: keep-all;}
.ef-head h4::after{content: ''; display: block; width: 44px; height: 3px; margin: 22px auto 0; border-radius: 2px; background: #2f6fd6;}
.ef-head p{margin-top: 18px; font-family: 'Jost', sans-serif; font-size: 18px; color: #8a93a3;}
.ef-list{display: grid; grid-template-columns: 1fr 1fr; gap: 40px;}
.ef-item{display: flex;}
.ef-card{position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 50px; border-radius: 40px; background: #f2f5fa; transition: transform .5s cubic-bezier(.16, 1, .3, 1), background .3s, box-shadow .5s;} /* 다른 섹션과 같은 둥근 회청색 판 */
/* 호버 : 판이 살짝 떠오르고 진해짐, 아이콘은 세로축으로 한 바퀴 돎 (색은 그대로) */
.ef-card:hover{transform: translateY(-8px); background: #e9eef7; box-shadow: 0 24px 40px -24px rgba(16,25,43,.28);}
.ef-card:hover .ef-icon{background: #bed7fd; transform: rotateY(360deg); transition: transform .9s cubic-bezier(.22, 1, .36, 1), background .3s;} /* 카드가 원과 같은 색으로 진해지므로 원도 한 단계 더 진하게 */
@media (prefers-reduced-motion: reduce){.ef-card:hover{transform: none;} .ef-card:hover .ef-icon{transform: none;}}
.ef-top{flex: none; display: flex; align-items: center; gap: 20px;} /* 파란 숫자 | 제목·소제목 | 아이콘 */
.ef-num{flex: none; font-family: 'Jost', sans-serif; font-size: 70px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #2f6fd6;} /* 파란 큰 숫자 (원 없음) */
.ef-tit{flex: 1; min-width: 0;}
.ef-tit h5{font-family: inherit; font-size: 30px; font-weight: 700; line-height: 1.5; letter-spacing: -.02em; color: #10192b; word-break: keep-all;}
.ef-tit p{margin-top: 6px; font-size: 22px; font-weight: 600; line-height: 1; color: #1b3566; word-break: keep-all;}
.ef-icon{position: relative; flex: none; margin-right: 10px; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border-radius: 50%; background: #bed7fd; transition: background .3s; box-shadow: 10px 10px 30px #8a9dbb82;} /* 카드보다 한 단계 진한 회청색 원 100px 안에 아이콘 이미지 가운데. 마우스를 떼면 회전은 되감지 않고 그대로 멈춤 */
.ef-icon::after{content: ''; position: absolute; inset: -10px; border: 1px solid #c2d4f1; border-radius: 50%; pointer-events: none;} /* 원 바깥을 한 바퀴 두르는 얇은 고리 (토성 고리처럼). 아이콘이 돌 때 함께 돎 */
.ef-icon img{display: block; width: 60px; height: 60px; object-fit: contain;}
.ef-dot{flex: 1; margin-top: 50px; padding: 30px; border-radius: 24px; background: #fff;} /* 설명 카드 : 윗줄에서 50px 아래, 같은 줄 카드끼리 높이 맞춤 */
.ef-dot li{position: relative; padding-left: 20px; font-size: 17px; font-weight: 500; line-height: 30px; color: #555; word-break: keep-all;}
.ef-dot li + li{margin-top: 10px;}
.ef-dot li::before{content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: #2f6fd6;}
.ef-arrow{position: relative; width: 800px; max-width: 100%; height: 120px; margin: 50px auto 0; background: linear-gradient(180deg, rgba(47,111,214,0) 0%, rgba(47,111,214,.18) 30%, rgba(47,111,214,.4) 64%, rgba(47,111,214,.62) 100%); clip-path: polygon(0 0, 100% 0, 50% 100%);} /* 역삼각형 화살표 */
/* 강조 문구 : 뒤에 흐르는 영문 띠 + 한 글자씩 올라오는 타이틀 (스크립트는 sub2_3.php) */
.ef-roll-head{position: relative; z-index: 0; margin-top: 50px; padding: 0; text-align: center;} /* 카드-화살표-타이틀 간격 각 50px */
.ef-roll{position: absolute; z-index: -1; top: 50%; left: 0; right: 0; transform: translateY(-50%); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);}
.ef-roll-track{display: flex; width: max-content; animation: efRoll 180s linear infinite;}
.ef-roll span{font-family: 'Jost', 'Pretendard Variable', sans-serif; font-size: 120px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; color: rgba(11,26,34,.04);}
@keyframes efRoll{from{transform: translateX(0);} to{transform: translateX(-50%);}}
.ef-split{position: relative; z-index: 1; font-family: inherit; font-size: 60px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; color: #10192b; word-break: keep-all;}
.ef-split b{font-weight: inherit; color: #2f6fd6;}
.ef-split .ef-w{display: inline-block; vertical-align: top; white-space: nowrap; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em;}
.ef-split .ef-c{display: inline-block;}
.ef-split.is-armed .ef-c{transform: translateY(110%); transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 30ms);}
.ef-split.is-armed.is-in .ef-c{transform: none;}
@media (prefers-reduced-motion: reduce){.ef-roll-track{animation: none;} .ef-split.is-armed .ef-c{transform: none; transition: none;}}

/* ---------- 협력연구 체결기업 (sub2_6) ---------- */
.cp-list{display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px;}
.cp-card{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 260px; border-radius: 40px; background: #f2f5fa; transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);} /* 다른 섹션과 같은 둥근 회청색 판 */
.cp-card:hover{transform: translateY(-6px);}
.cp-card i{display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; font-size: 36px; color: #2f6fd6; background: #fff;} /* 로고 자리 (흰 원) */
.cp-card b{font-size: 26px; font-weight: 700; color: #10192b;}
.cp-card span{font-size: 16px; color: #8a93a3;}

/* ---------- 연구개요 (sub2_1) ---------- */
/* 연구최종목표 : 둥근 판 + 알약 라벨 + 문장 (.tk-tag 는 sub2_2 와 공용) */
.goal-box{padding: 50px 60px; border-radius: 40px; background: #f2f5fa;}
.goal-box p{margin-top: 30px; max-width: 1100px; font-size: 30px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; color: #10192b; word-break: keep-all;}
.goal-box p b{font-weight: 700; color: #2f6fd6; background: linear-gradient(transparent 58%, rgba(47,111,214,.22) 58%, rgba(47,111,214,.22) 92%, transparent 92%) no-repeat 0 0 / 0% 100%; transition: background-size .9s cubic-bezier(.22, 1, .36, 1) .7s;} /* 판이 올라온 뒤 형광펜이 왼쪽에서 오른쪽으로 그어짐 (AOS 의 aos-animate 를 받음) */
.goal-box p b:nth-of-type(2){transition-delay: 1.3s;}
.goal-box.aos-animate p b{background-size: 100% 100%;}
@media (prefers-reduced-motion: reduce){.goal-box p b{background-size: 100% 100%; transition: none;}}
/* 연구센터 개요도 : 행 라벨(알약) + 그룹 3열 흰 상자, 행 사이 점선 */
.ov-chart{padding: 15px 50px; border-radius: 40px; background: #f2f5fa;}
.ov-row{display: grid; grid-template-columns: 150px 1fr; gap: 30px; padding: 30px 0; border-bottom: 1px dashed #c5cdda;}
.ov-row:last-child{border-bottom: 0;}
.ov-row-k span{display: inline-block; padding: 0 20px; border-radius: 50px; font-size: 18px; font-weight: 700; line-height: 38px; color: #fff; background: #10192b;}
.ov-row-c{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.ov-box{--gc: #2f6fd6; padding: 30px; border-radius: 24px; background: #fff;}
.ov-box.g2{--gc: #1d8fbf;}
.ov-box.g3{--gc: #2f9a63;}
.ov-box em{display: inline-block; margin-bottom: 10px; padding: 0 18px; border: 1px solid var(--gc); border-radius: 50px; font-style: normal; font-size: 18px; font-weight: 700; line-height: 32px; color: var(--gc);}
.ov-box b{display: block; margin-bottom: 10px; font-size: 20px; font-weight: 700; color: var(--gc);}
.ov-box p{font-size: 18px; font-weight: 600; line-height: 1.4; color: #10192b; word-break: keep-all;}
.ov-box li{position: relative; padding-left: 14px; font-size: 18px; line-height: 1.4; color: #3d4758; word-break: keep-all;}
.ov-box li + li{margin-top: 10px;}
.ov-box li::before{content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--gc);}
.ov-row-vision .ov-row-c{display: block;}
.ov-vision{padding: 24px 30px; border-radius: 24px; text-align: center; font-size: 24px; font-weight: 600; line-height: 1.4; color: #fff; background: #2f6fd6; word-break: keep-all;}
/* 연구개요 소개 : 둥근 판 안에 리드 문장 → 연구 3개 흰 상자 → 비전 띠 */
.ov-intro{padding: 50px 60px; border-radius: 40px; background: #f2f5fa;}
.ov-intro-lead{margin-top: 30px; max-width: 1100px; font-size: 38px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; color: #10192b; word-break: keep-all;}
.ov-intro-lead b{font-weight: 700; color: #2f6fd6;}
.ov-intro-list{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px;}
.ov-intro-list li{padding: 30px; border-radius: 24px; background: #fff;}
.ov-intro-list li em{display: inline-block; margin-bottom: 20px; padding: 0 20px; border: 1px solid #2f6fd6; border-radius: 50px; font-style: normal; font-size: 20px; font-weight: 700; line-height: 38px; color: #2f6fd6;}
.ov-intro-list li p{font-size: 18px; font-weight: 600; line-height: 1.55; color: #10192b; word-break: keep-all;}
.ov-intro-vision{margin-top: 30px; padding: 30px; border-radius: 24px; text-align: center; font-size: 22px; font-weight: 500; line-height: 1.7; color: #fff; background: #2f6fd6; word-break: keep-all;}
.ov-intro-vision b{font-weight: 700;}
@media (max-width: 1024px){
    .ov-intro-lead{font-size: 22px;}
    .ov-intro-list{grid-template-columns: 1fr;}
}
@media (max-width: 768px){
    .ov-intro{padding: 30px 20px; border-radius: 24px;}
    .ov-intro-lead{margin-top: 16px; font-size: 19px;}
    .ov-intro-list{margin-top: 20px; gap: 12px;}
    .ov-intro-list li{padding: 20px;}
    .ov-intro-list li p{font-size: 16px;}
    .ov-intro-vision{margin-top: 20px; padding: 20px; font-size: 16px;}
}


/* 그룹 연구 */

/* 주요 연구 분야 */

/* 기대효과 */

/* 비전 */

/* =================== 반응형 =================== */
@media (max-width: 1280px){
    .ov{padding: 40px 30px;}
}
@media (max-width: 1024px){
    /* 표를 세로로 풀어서 표시 */
}
@media (max-width: 768px){
    .ov{padding: 26px 16px;}
}

/* =================== 반응형 =================== */
@media (max-width: 1280px){
    .pp-topic{flex-direction: column; gap: 20px;}
    .pp-topic > p{width: auto;}
}
@media (max-width: 1024px){
    .sc-sec + .sc-sec{margin-top: 80px;}
    .tk-list, .st-steps, .st-platform ul, .ov-row-c{grid-template-columns: 1fr;}
    .ov-row{grid-template-columns: 120px 1fr; gap: 20px;}
    .goal-box p{font-size: 23px;}
    .st-steps::before{display: none;}
    .st-steps{gap: 40px;}
    .tk-card h5, .st-step-head h5{min-height: 0;}
    .ef-list{grid-template-columns: 1fr; gap: 24px;}
    .ef-split{font-size: 40px;}
    .ef-roll span{font-size: 90px;}
}
@media (max-width: 768px){
    .sc-tit{gap: 10px; margin-bottom: 20px; font-size: 26px;}
    .sc-tit::before, .sc-tit::after{width: 20px; height: 20px;}
    .sc-tit::after{margin-top: -10px;}
    .sc-tit{flex-wrap: wrap;}
    .sc-tit .sc-sub{flex-basis: 100%; margin-left: 0; padding: 0 0 0 30px; font-size: 14px;} /* 좁은 화면에서는 제목 아래 줄로 */
    .sc-txt{font-size: 16px;}
    .sc-box, .pp-group{padding: 30px 22px;}
    .sc-img{padding: 16px;}
    .pp-head h4{font-size: 20px;}
    .pp-list{grid-template-columns: repeat(2, 1fr); gap: 14px;}
    .pp-photo{width: 88px; height: 88px;}
    .pp-card b{font-size: 17px;}
    .map-wrap{height: 300px; border-radius: 10px;}
    .map-info{display: block; padding: 20px; border-radius: 10px;}
    .map-info-col{padding: 10px 0;}
    .map-info-col i{height: 60px; padding: 0 20px 0 0; font-size: 22px;}
    .map-info-col ul{padding-left: 20px;}
    .map-info-col li{font-size: 15px; line-height: 1.6; padding: 4px 0;}
    .map-info-col li span{min-width: 44px; margin-right: 10px;}
    .st-proc{padding: 30px 20px; border-radius: 24px;}
    .st-arrow{height: 110px; font-size: 20px;}
    .st-arrow i{width: 90px; font-size: 90px;}
    .goal-box{padding: 30px 20px; border-radius: 24px;}
    .goal-box p{font-size: 19px;}
    .ov-chart{padding: 0 20px; border-radius: 24px;}
    .ov-row{grid-template-columns: 1fr; gap: 14px; padding: 20px 0;}
    .ov-box{padding: 20px;}
    .ov-vision{padding: 20px; font-size: 16px;}
    .ov-vision br{display: none;}
    .st-platform{padding: 30px 20px;}
    .st-platform-head h5{font-size: 21px;}
    .st-step-body{padding: 20px;}
    .tk-card{padding: 36px 26px; border-radius: 24px;}
    .tk-num{top: 26px; right: 26px; font-size: 44px;}
    .tk-card h5{font-size: 20px;}
    .tk-card dd{font-size: 16px;}
    .ef-head{margin-bottom: 36px;}
    .ef-head h4{font-size: 21px;}
    .ef-head p{font-size: 14px;}
    .ef-card{padding: 30px 20px; border-radius: 24px;}
    .ef-top{gap: 12px;}
    .ef-num{font-size: 36px;}
    .ef-icon{width: 70px; height: 70px; margin-right: 7px;}
    .ef-icon::after{inset: -7px;}
    .ef-icon img{width: 42px; height: 42px;}
    .ef-tit h5{font-size: 20px;}
    .ef-tit p{margin-top: 4px; font-size: 16px;}
    .ef-dot{margin-top: 24px; padding: 20px 18px;}
    .ef-dot li{font-size: 15px; line-height: 24px;}
    .ef-dot li::before{top: 10px;}
    .ef-dot li + li{margin-top: 10px;}
    .ef-arrow{height: 80px;}
    .ef-roll span{font-size: 60px;}
    .ef-split{font-size: 26px;}
    .cp-card{height: 200px; border-radius: 24px;}
}

/* ---------- 비전과 상징 (sub1_2) : 맨 위 고정 섹션(.vs-*) 아래의 둥근 판 (연구개요·과제구성과 같은 판을 그대로 쓰고, 이 페이지에만 필요한 것만 추가) ---------- */
.tk-list.vn-list{grid-template-columns: repeat(2, 1fr);}
.vn-list .tk-card{display: flex; flex-direction: column; align-items: flex-start;}
.vn-list .tk-card h5{min-height: 0;}
.vn-desc{flex: 1; align-self: stretch; margin-top: 30px; padding: 30px; border-radius: 24px; font-size: 18px; line-height: 1.75; color: #3d4758; background: #fff; word-break: keep-all;}
@media (max-width: 1024px){
    .tk-list.vn-list{grid-template-columns: 1fr;}
}
@media (max-width: 768px){
    .vn-desc{margin-top: 20px; padding: 20px; font-size: 16px;}
    .vs-solo .vs-stage{border-radius: 24px;}
    .vs-solo .vs-sym1{width: 86%;}
}

/* ==================== 비전과 상징 : 센터명 섹션 (2026-10-22 남색 판 스크롤 고정 연출 대체) ==================== */
/* 왼쪽 큰 CSDRC + 오른쪽 슬로건·소개, 아래 이니셜 풀이 카드 5장, 뒤에 회색 로고. 등장 모션은 sub1_2.php 하단 스크립트가 .is-play 를 붙일 때 한 번 */
.vi-sec{position: relative;}
.vi-mark{position: absolute; left: calc((100% - 100vw) / 2 - 140px); top: -210px; width: min(52vw, 720px); opacity: .06; pointer-events: none;} /* 화면 왼쪽 끝에 일부가 잘리는 배경 로고, 원래 색 그대로 옅게 (가로 스크롤은 #wrap 의 clip 이 막음) */
.vi-top{position: relative; z-index: 1; display: grid; grid-template-columns: auto auto; justify-content: center; gap: 50px; align-items: center;} /* CSDRC + 슬로건 묶음을 본문 폭 가운데에 */
/* CSDRC : 진한 남색 단색 (색 강조는 오른쪽 슬로건 키워드의 그라데이션에만) */
.vi-big{display: flex; margin: 0; font-family: 'Jost', 'Pretendard Variable', sans-serif; font-size: clamp(84px, 13vw, 190px); font-weight: 700; line-height: .86; letter-spacing: -.03em;}
.vi-big span{display: inline-block; color: #14285a;}
.vi-slogan{margin: 0; font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; line-height: 1.45; letter-spacing: -.02em; color: #10192b; word-break: keep-all;}
.vi-slogan span{display: block;}
.vi-slogan b{background: linear-gradient(55deg, #10192b 0%, #0044cc 40%, #0044cc 75%, #10192b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;} /* "염색체 시스템·다이내믹스" : 남색 → 진한 파랑 → 남색 대각선 그라데이션 */
.vi-slogan i{font-style: normal; white-space: nowrap;} /* 좁은 화면에서 줄이 넘어가도 "연구 허브" 는 붙여 둠 */
.vi-desc{margin-top: 20px; font-size: 20px; line-height: 1.6; color: #3d4758; word-break: keep-all;}
.vi-hl{padding: 2px 6px; font-weight: 800; color: #10192b; background: linear-gradient(#d6e4fa, #d6e4fa) no-repeat left / 100% 100%; white-space: nowrap;} /* 글자 높이를 꽉 채우는 형광펜 (줄바꿈으로 갈라지지 않게) */
/* 이니셜 풀이 카드 : 연한 이니셜은 오른쪽 아래 배경 무늬 (비전 카드 01·02 숫자와 같은 톤) */
.vi-cards{position: relative; z-index: 1; display: grid; padding: 0; list-style: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 50px 0 0;}
.vi-cards li{position: relative; overflow: hidden; padding: 30px 30px 100px; border-radius: 20px; background: #f2f5fa;}
.vi-l{position: absolute; right: 20px; bottom: 10px; font-family: 'Jost', sans-serif; font-size: clamp(80px, 7vw, 120px); font-weight: 700; line-height: .85; letter-spacing: -.03em; color: #dbe4f2; pointer-events: none;}
.vi-cards strong{position: relative; display: block; font-family: 'Jost', 'Pretendard Variable', sans-serif; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; color: #2f6fd6;}
.vi-cards strong i{font-style: normal; font-weight: 400; color: #8a93a3;} /* '& Dynamics' 의 & 는 회색 */
.vi-k{position: relative; display: block; margin-top: 6px; font-size: 18px; color: #3d4758;}
/* 등장 모션 : .is-wait 동안 숨겨 두었다가 .is-play 에서 한 번 재생 (스크립트가 없으면 완성 상태 그대로) */
.vi-sec.is-wait .vi-up, .vi-sec.is-wait .vi-fade{opacity: 0;}
.vi-sec.is-wait .vi-hl{background-size: 0 100%;}
.vi-sec.is-play .vi-up{animation: viUp .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--d, 0) * 1s);}
.vi-sec.is-play .vi-fade{animation: viMark 1.2s ease both; animation-delay: calc(var(--d, 0) * 1s);}
.vi-sec.is-play .vi-hl{animation: viHl .9s cubic-bezier(.65, 0, .35, 1) 1.5s both;} /* 문단이 올라온 뒤 형광펜이 왼쪽에서 오른쪽으로 */
@keyframes viUp{from{opacity: 0; transform: translateY(40px);} to{opacity: 1; transform: none;}}
@keyframes viMark{from{opacity: 0;} to{opacity: .06;}}
@keyframes viHl{from{background-size: 0 100%;} to{background-size: 100% 100%;}}
@media (max-width: 1024px){
    .vi-cards{grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (max-width: 900px){
    .vi-top{grid-template-columns: minmax(0, 1fr); gap: 30px;}
    .vi-mark{top: -120px;}
}
@media (max-width: 768px){
    .vi-desc{font-size: 17px;}
    .vi-cards{grid-template-columns: minmax(0, 1fr); margin-top: 30px;}
    .vi-cards li{padding: 30px;}
    .vi-l{top: 50%; bottom: auto; translate: 0 -50%; font-size: 80px;}
    .vi-k{font-size: 16px;}
}