/* overflow-x:hidden 은 body 를 스크롤 컨테이너로 만들어 자식의 position:sticky 를 죽입니다. clip 은 스크롤 컨테이너를 만들지 않으면서 가로 넘침만 잘라내므로 sticky 가 살아납니다. (clip 미지원 구형 브라우저는 앞줄의 hidden 이 적용됩니다) */ body{overflow-x: hidden; overflow-x: clip;} /* 서브 nav */ /* #header.sub-hd .hdinn{margin: 0 auto;} */ #header.sub-hd .hdright .lang_box a p{color: #fff;} #header.sub-hd .hdright .lang_box a img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);} #header.sub-hd.on .hdright .lang_box a p{color: #cdcdcd;} #header.sub-hd.on .hdright .lang_box a img{-webkit-filter: none; filter: none;} #header.sub-hd.fixed .hdright .lang_box a p{color: #cdcdcd;} #header.sub-hd.fixed .hdright .lang_box a img{-webkit-filter: none; filter: none;} /* 서브상단 */ #sVisual{position:relative; width:100%; background:#fff;} #sVisual .svWrap{display:none;} /* 배경 이미지 미사용 */ #sVisual .sVis_wr{position:relative; width:100%; padding:100px 0 40px;background: url(/images/main/mBG.png) 0 0 no-repeat; background-size: cover; border-bottom: 1px solid #eee;} #sVisual .slogan{position:relative; z-index:1; width:90%; max-width:1600px; margin:0 auto; text-align:center;} #sVisual .slogan .big-tit{display:block; font-size:60px; font-weight:600; line-height:1.1; letter-spacing:-0.02em; color:#000; text-transform:uppercase; animation:svTitleIn 1.3s cubic-bezier(.2,.7,.2,1) both;} #sVisual .slogan .loca{display:none;} /* 시안에 대응 요소 없음 */ #sVisual #location{position:relative; z-index:1; margin-top:90px; animation:svUpIn .7s .55s cubic-bezier(.2,.7,.2,1) both;} /* ── 서브비주얼 collapse (2026-08-13, 업체 요청 2번) ── 처음엔 원래 크기로 떠서 타이틀/분류창 등장 모션이 돌고, 끝나면 head.php 의 스크립트가 .is-collapsed 를 붙여 슬림하게 줄어든다. 위 padding 은 고정 상단메뉴(#header, 약 100px)와 겹치지 않게 확보 */ /* 인트로·축소 공통 : 타이틀을 배너 정중앙에 (padding 은 고정 헤더 100px 회피용, 높이는 min-height 로 제어) */ #sVisual .sVis_wr{min-height:520px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; transition:min-height .8s cubic-bezier(.4,0,.2,1);} #sVisual .sVis_wr .slogan{width:100%;} #sVisual .slogan .big-tit{transition:font-size .8s cubic-bezier(.4,0,.2,1);} /* 축소 후 */ #sVisual .sVis_wr.is-collapsed{min-height:350px;} #sVisual .sVis_wr.is-collapsed .big-tit{font-size:38px;} @media (prefers-reduced-motion: reduce){ #sVisual .sVis_wr, #sVisual .slogan .big-tit, #sVisual #location{transition:none;} } /* ── 서브메뉴(LNB) 하단 플로팅 : 스크롤로 서브비주얼을 지나면 화면 하단 중앙에 고정 ── ※ 기존 #sVisual #location (ID 2개) 규칙보다 우선하도록 같은 깊이의 선택자 사용 */ /* 인트로 동안 서브메뉴 숨김 : 배너에는 타이틀만 보이고, 축소될 때 하단에서 등장한다 (자리는 유지 → 배너가 줄어드는 폭이 그대로 보이게. JS 가 있을 때만 붙는 클래스라 미실행 시엔 기존대로 노출) */ #sVisual #location.lnb-preboot{display:none;} /* 하단 고정될 때 : 화면 아래에서 위로 스르륵 */ /* ※ animation 에 both(fill) 를 쓰면 종료 후에도 transform 이 남아 하위 backdrop-filter(유리 블러)가 죽는다 → fill 미사용 */ #sVisual #location.lnb-float{position:fixed; left:0; right:0; bottom:24px; top:auto; width:max-content; margin:0 auto; z-index:999; animation:lnbFloatIn 1.2s cubic-bezier(.16,.84,.24,1);} @keyframes lnbFloatIn{from{opacity:0; transform:translateY(80px);}to{opacity:1; transform:translateY(0);}} /* 하단 플로팅 시 알약 반투명(frosted) — 뒤 배경을 강하게 흐려서 유리 느낌 ※ 블러는 ::before 가상요소에 : 알약(li) 자체에 backdrop-filter 를 걸면 자식인 드롭다운(ul)의 backdrop-filter 가 무력화됨 (filter/backdrop 중첩 함정) */ #sVisual #location.lnb-float .lnb .lohom, #sVisual #location.lnb-float .lnb .lnb-map li.depth{position:relative; background:rgba(255,255,255,.62); box-shadow:none; border-color:#999;} #sVisual #location.lnb-float .lnb .lnb-map li.depth:last-child{border-right-color:#999;} #sVisual #location.lnb-float .lnb .lnb-map li.depth + li.depth, #sVisual #location.lnb-float .lnb .lnb-map li.depth:first-child{border-left-color:rgba(153,153,153,.45);} #sVisual #location.lnb-float .lnb .lohom::before, #sVisual #location.lnb-float .lnb .lnb-map li.depth::before{content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);} /* 드롭다운도 동일한 유리 톤 (기본 규칙의 #ffffff63 + blur 를 살짝 보강) */ #sVisual #location.lnb-float .lnb .lnb-map li.depth ul{background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);} /* 하단 고정 상태에선 드롭다운이 위로 열리게 */ #sVisual #location.lnb-float .lnb .lnb-map li.depth ul{top:auto; bottom:calc(100% + 12px);} @media (max-width:767px){ #sVisual #location.lnb-float{bottom:14px; width:max-content; max-width:calc(100% - 28px);} } /* 타이틀 : 자간 벌어짐 + 흐림 → 모이면서 선명 */ @keyframes svTitleIn{ from{opacity:0; filter:blur(12px); letter-spacing:.35em; transform:translateY(12px);} to{opacity:1; filter:blur(0); letter-spacing:-.02em; transform:translateY(0);} } /* lnb 칸 : 아래에서 위로 (AOS fade-up 느낌) */ @keyframes svUpIn{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} } @media (max-width: 1500px){ #sVisual .sVis_wr{min-height:500px;} #sVisual .slogan .big-tit{font-size:60px;} #sVisual #location{margin-top:80px;} #sVisual .sVis_wr.is-collapsed{min-height:340px;} #sVisual .sVis_wr.is-collapsed .big-tit{font-size:36px;} } @media (max-width: 1200px){ #sVisual .sVis_wr{min-height:470px;} #sVisual .slogan .big-tit{font-size:52px;} #sVisual #location{margin-top:70px;} #sVisual .sVis_wr.is-collapsed{min-height:330px;} #sVisual .sVis_wr.is-collapsed .big-tit{font-size:34px;} } @media (max-width: 960px){ #sVisual .sVis_wr{padding:80px 0 34px; min-height:420px;} #sVisual .slogan .big-tit{font-size:42px;} #sVisual #location{margin-top:55px;} #sVisual .sVis_wr.is-collapsed{min-height:300px;} #sVisual .sVis_wr.is-collapsed .big-tit{font-size:30px;} } @media (max-width: 767px){ #sVisual .sVis_wr{padding:70px 0 28px; min-height:360px;} #sVisual .slogan .big-tit{font-size:32px;} #sVisual #location{margin-top:45px;} #sVisual .sVis_wr.is-collapsed{min-height:260px;} #sVisual .sVis_wr.is-collapsed .big-tit{font-size:26px;} } @media (max-width:500px){ #sVisual .sVis_wr{padding:60px 0 24px; min-height:320px;} #sVisual .slogan .big-tit{font-size:26px;} #sVisual #location{margin-top:35px;} #sVisual .sVis_wr.is-collapsed{min-height:230px;} #sVisual .sVis_wr.is-collapsed .big-tit{font-size:22px;} } /* 서브공통 */ .w1600{max-width: 1600px; width: 100%; margin: 0 auto;} #sContWrap{position:relative; width:100%; height:100%; min-height:500px;} #sContWrap:after{display:block; content:""; clear:both;} .sCont{padding:100px 40px 150px; width:100%; max-width:1680px; margin:0 auto; position:relative;} .sCont h2.sCont-title{font-weight: 700; font-size: 38px; text-align: center; letter-spacing: -0.5px; line-height: 1; color:#333; transition:all 0.4s ease; margin-bottom: 100px;} h2.r_tit{position: relative; margin-bottom: 50px; font-weight: 700; font-size: 26px; text-align: center; letter-spacing: -0.4px; color: #222;} h2.r_tit::before{content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); display: block; width: 20px; height: 2px; background: #2c7bf2;} .w1200{max-width:1200px;} .s_con{margin-top: 50px;} .s_con > div{margin-bottom: 50px;} .s_con > div:last-child{margin-bottom: 0;} .s_con h3.tit{position: relative; padding-left: 20px; font-size: 26px; font-weight: 700; letter-spacing: -0.5px; word-break: keep-all; color: #222;} .s_con h3.tit::before{content:''; position: absolute; top: 4px; left: 0; display: block; width: 3px; height: 22px; background: #333; } .btn_confirm {display: flex;align-items: flex-start;justify-content: center;flex-wrap: wrap;gap: 1%;padding: 20px 0 10px;} .btn_close_01{background: #333; color: #fff; border: none; padding: 20px 30px;font-size: 18px; word-break: keep-all; transition:all 0.4s ease;} .btn_close_01:hover{background: #252525;} .btn_close_01 a{font-weight: 600; color: #fff; word-break: keep-all;} .btn_close_02{background: none; color: #666; border: 1px solid #eee; padding: 20px 30px;font-size: 18px; word-break: keep-all; transition:all 0.4s ease;} .btn_close_02:hover{border: 1px solid #bbb;} btn_pay{background: #5287e9; color: #fff; border: none; padding: 20px 30px;font-size: 18px; word-break: keep-all; transition:all 0.4s ease;} .btn_pay:hover{background: #252525;} .btn_pay a{font-weight: 600; color: #fff; word-break: keep-all;} @media (max-width: 1024px){ #sContWrap{min-height:auto;} .sCont{padding:60px 20px 80px;} .sCont p.sCont-stitle{font-size:18px; margin-bottom: 15px;} .sCont h2.sCont-title{font-size:32px;} h2.r_tit{font-size: 24px;} } @media (max-width: 767px){ .sCont{padding:40px 20px;} .sCont .sCont-title{font-size:30px;} .sCont p.sCont-stitle{margin-bottom: 10px;} .sCont h2.sCont-title{font-size:28px;} .s_con{margin-top: 20px;} .s_con > div{margin-bottom: 20px;} .s_con h3.tit{font-size: 22px !important;} .btn_close_01,.btn_close_01{padding: 15px;} .btn_close_01 a,.btn_close_02 a{font-size: 16px;} h2.r_tit{font-size: 22px;} } @media (max-width: 450px){ .sCont .sCont-title{font-size:26px;} .sCont p.sCont-stitle{font-size: 16px; margin-bottom: 7px;} .sCont h2.sCont-title{font-size:22px;} .s_con h3.tit{padding-left: 14px; font-size: 20px !important;} .s_con h3.tit::before{top: 3px; height: 18px;} h2.r_tit{font-size: 18px;} } /* subMenu */ .subMenu {background: #f6f8ff; position: absolute; top: 320px; right: 0; border-radius: 25px 0 0 0; z-index: 5;} .subMenu::before{content: ''; position: absolute; bottom: -2px; left: -44px; display: block; width: 45px; height: 43px; background: url('../images/main/banner_deco.png') no-repeat 0 0/contain; z-index: -1;} .subMenu::after{content: ''; position: absolute; top: -41px; right: -1px; display: block; width: 45px; height: 43px; background: url('../images/main/banner_deco.png') no-repeat 0 0/contain; z-index: -1;} /* dsso.default.js가 스크롤 시 .lnb에 position:fixed 인라인을 넣어 높이가 튀는 것 차단 (인라인은 !important로만 이김) */ .lnb {display:flex; justify-content:center; width:100% !important; margin:0 auto; z-index:11; position:relative !important; top:auto !important; left:auto !important; background:none;} .lnb_wrap.fixed {background: #f6f8ff;} .lnb.fixed {} .lnb .lnb-map {display:flex; justify-content:center; width:auto; height:64px;} /* .lnb .lnb-map:after{content:'';display:block;clear:both;} */ .lnb .lnb-map li {width: 261px;} .lnb .lnb-map li:last-child{width: 261px;} .lnb .lnb-map li a {width:100%; height:100%; display:block;} .lnb .lnb-map li a:focus {outline:1px dotted rgba(0,0,0,.3);} .lnb .lohom {display:table; width:64px; height:64px; background:#fff; border:2px solid #772278; border-right:0; transition:all 0.4s ease; border-radius: 50px 0 0 50px;} .lnb .lohom a{display:table-cell; width:100%; height:100%; text-align:center; vertical-align:middle; color:#222;} .lnb .lohom a i {font-size: 19px;} .lnb .lohom:hover a{color:#772278;} /* 등장 모션 : 칸 전체가 한 덩어리로 밑에서 위로 */ .lnb .lnb-map li.depth {position:relative; height:64px; line-height:64px; padding:0; background:#fff; /*border:1px solid #e5e5e5;*/ border-bottom: 2px solid #772278; border-top: 2px solid #772278;} /* .lnb .lnb-map li.depth:first-child{border-left:1px solid #e5e5e5;} */ /* .lnb .lnb-map li.depth:last-child{border-radius: 0 50px 50px 0;} */ .lnb .lnb-map li.depth a {display: flex; align-items: center; z-index:9999; width:100%; height:100%;} .lnb .lnb-map li.depth a span {display: inline-block; width:100%; padding:0 40px 0 30px; font-size:17px; color:#222; line-height:1.2; text-align:left; font-weight: 500;} /* 드롭다운 화살표 (마크업에 가 없어 가상요소로 그림) */ .lnb .lnb-map li.depth > a::after{content:''; position:absolute; right:20px; top:50%; width:6px; height:6px; margin-top:-5px; border-right:1px solid #c5c5c5; border-bottom:1px solid #c5c5c5; transform:rotate(45deg); transition:.3s;} /* 드롭다운이 없는 칸은 화살표를 숨긴다 */ .lnb .lnb-map li.depth.no-sub > a::after{display:none;} .lnb .lnb-map li.depth.no-sub > a{cursor:default;} /* 칸별 글자색 : .d2 = 2차메뉴 칸, .d3 = 3차메뉴 칸 (location.php 가 클래스를 찍는다) 칸 개수가 페이지마다 달라지므로 nth-child 대신 클래스로 구분할 것 */ .lnb .lnb-map li.depth.d2 > a span{color:#772278;} /* 대메뉴(d1)-소메뉴(d2) 두 칸일 때 사이 구분선 + 홈-대메뉴 사이 구분선 (2026-08-13) */ .lnb .lnb-map li.depth + li.depth{border-left:1px solid rgba(119,34,120,.22);} .lnb .lnb-map li.depth:first-child{border-left:1px solid rgba(119,34,120,.22);} .lnb .lnb-map li.depth i{position: absolute;right: 15px;top: 50%;transform:translateY(-50%);font-size: 23px; color: #333; opacity: .3;} /* 드롭다운 : display 토글(jQuery slide) 대신 CSS 트랜지션으로 페이드 + 살짝 내려오기. li.depth 에 .on 이 붙으면 열린다 (location.php 스크립트가 클래스만 토글) */ .lnb .lnb-map li.depth ul {position:absolute;left:-1px;top:74px;margin:0;padding:0;width:calc(100% + 2px);z-index:1;background:#ffffff63; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border:1px solid #d1c0d1; box-shadow:0 10px 20px rgba(0,0,0,.06); /* backdrop-filter 가 걸린 요소라 opacity 와 transform 을 둘 다 쓰지 않습니다. opacity < 1 이면 스스로 backdrop root 가 되어 블러가 무효화되고, transform 은 별도 합성 레이어를 만들어 배경 스냅샷이 갱신되지 않는 경우가 있습니다. (devtools 에서 blur 값을 건드리면 그제서야 보이던 이유) → 같은 슬라이드 효과를 margin-top 전환으로 대체하고(반응형 top 값은 그대로 사용), 페이드는 안쪽 li 가 담당합니다. */ visibility:hidden; margin-top:-10px; transition:margin-top .28s cubic-bezier(.2,.7,.2,1), visibility .28s; border-radius: 16px;} .lnb .lnb-map li.depth.on ul{visibility:visible; margin-top:0;} /* 항목이 순서대로 도착 */ .lnb .lnb-map li.depth ul li{opacity:0; transform:translateY(-6px); transition:opacity .3s ease, transform .3s ease;} .lnb .lnb-map li.depth.on ul li{opacity:1; transform:translateY(0);} .lnb .lnb-map li.depth.on ul li:nth-child(1){transition-delay:.04s;} .lnb .lnb-map li.depth.on ul li:nth-child(2){transition-delay:.08s;} .lnb .lnb-map li.depth.on ul li:nth-child(3){transition-delay:.12s;} .lnb .lnb-map li.depth.on ul li:nth-child(4){transition-delay:.16s;} .lnb .lnb-map li.depth.on ul li:nth-child(5){transition-delay:.2s;} .lnb .lnb-map li.depth.on ul li:nth-child(6){transition-delay:.24s;} /* 열린 칸은 화살표를 뒤집는다 */ .lnb .lnb-map li.depth.on > a::after{transform:rotate(-135deg); margin-top:-2px;} .lnb .lnb-map li.depth ul li {width:100%; float:none;} .lnb .lnb-map li.depth ul li a {display:block; padding:0 20px;font-size:16px;color:#bbb; height:55px; line-height:55px; transition:all 0.4s ease;} .lnb .lnb-map li.depth ul li a:hover {padding-left: 25px;} .lnb .lnb-map li.depth ul li a.active {color: #333; font-weight: 500;} .lnb .lnb-map li.depth * {vertical-align:top;} .lnb .lnb-map li.depth i.on{transform: rotateX(180deg) translateY(-50%);top:auto;bottom: 50%;} .lnb .lnb-map li.depth a span.on{color: #333; background: #da131a;} @media (max-width: 1500px){ .lnb .lnb-map {height:60px;} .lnb .lohom {width:60px; height:60px;} .lnb .lnb-map li {width: 220px;} .lnb .lnb-map li:last-child{width: 220px;} .lnb .lnb-map li.depth {height: 60px; line-height: 60px;} .lnb .lnb-map li.depth a span {padding:0 36px 0 24px; font-size:17px;} .lnb .lnb-map li.depth ul {top:60px;} .lnb .lnb-map li.depth ul li a {padding:0 24px;font-size:16px; height:55px; line-height:55px;} .subMenu{top: 332px;} } @media (max-width: 1200px){ .lnb .lnb-map {height:58px;} .lnb .lohom {width:58px; height:58px;} .lnb .lnb-map li {width: 190px;} .lnb .lnb-map li:last-child{width: 190px;} .lnb .lnb-map li.depth {height: 58px; line-height: 58px;} .lnb .lnb-map li.depth a span {padding:0 32px 0 20px; font-size:16px;} .lnb .lnb-map li.depth ul {top:58px;} .lnb .lnb-map li.depth ul li a {padding:0 20px;font-size:15px; height:50px; line-height:50px;} .subMenu{top: 280px;} } @media (max-width: 960px){ .lnb .lnb-map {flex:1; height:56px;} .lnb .lohom {width:56px; height:56px; flex:none;} .lnb .lnb-map li {flex:1; width:auto;} .lnb .lnb-map li:last-child{width:auto;} .lnb .lnb-map li.depth {height: 56px; line-height: 56px;} .lnb .lnb-map li.depth a span {padding:0 28px 0 16px; font-size:16px;} .lnb .lnb-map li.depth ul {top:56px;} .lnb .lnb-map li.depth ul li a {padding:0 16px;font-size:15px; height:50px; line-height:50px;} .subMenu{width:80%;} } @media (max-width: 767px){ .lnb .lnb-map {height:52px;} .lnb .lohom {width:52px; height:52px;} .lnb .lohom a i {font-size: 17px;} .lnb .lnb-map li.depth {height: 52px; line-height: 52px;} .lnb .lnb-map li.depth a span {padding:0 24px 0 12px; font-size:15px;} .lnb .lnb-map li.depth > a::after{right:12px;} .lnb .lnb-map li.depth ul {top:52px;} .lnb .lnb-map li.depth ul li a {padding:0 12px;font-size:14px; height:45px; line-height:45px;} .subMenu{top: 185px;} } @media (max-width: 500px){ .subMenu{width: 100%; border-radius: 15px 15px 0 0;} .subMenu::after{display: none;} .lnb .lnb-map {height:48px;} .lnb .lohom {width:48px; height:48px;} .lnb .lohom a i {font-size: 16px;} .lnb .lnb-map li.depth{height:48px; line-height:48px; padding: 0;} .lnb .lnb-map li.depth a span{padding:0 20px 0 10px; font-size: 14px;} .lnb .lnb-map li.depth > a::after{right:9px; width:5px; height:5px;} .lnb .lnb-map li.depth ul{top:48px;} .lnb .lnb-map li.depth ul li a{padding:0 10px; font-size: 13px; height:40px; line-height:40px;} .lnb .lnb-map li.depth ul li a:hover{padding-left: 14px;} } /* 테이블 디자인 */ .s_con table{width: 100%; text-align: center; border-spacing: 0;} .s_con table thead tr th{height: 66px; padding: 10px 20px; background: #333;} .s_con table thead tr th h5{line-height: 20px; font-size: 17px; font-weight: 500 !important; color: #fff; word-break: keep-all;} .s_con table tbody tr th{border-bottom: 1px solid #ededed;} .s_con table thead tr th:first-child{border-radius: 50px 0 0 50px;} .s_con table thead tr th:last-child{border-radius: 0 50px 50px 0;} .s_con table tbody tr:last-child th{border-bottom: 0;} .s_con table tbody tr th p{font-size: 18px; color: #333; word-break: keep-all;} .s_con table tbody tr td{height: 50px; padding: 30px 20px; font-family: 'Pretendard'; font-weight: 500; letter-spacing: -0.5px; color: #555; border-bottom: 1px solid #ededed; border-left: 1px solid #ededed;} .s_con table tbody tr td.exfirst{font-weight: 500; color: #333; border-left: none;} .s_con table tbody tr td p{font-size: 18px; word-break: keep-all;} .s_con table tbody tr td p i{margin-left: 3px; font-size: 18px;} .s_con table tbody tr td p b{font-weight: 500; color: #555; word-break: keep-all;} .s_con table tbody tr td p a{display: inline-block; padding: 6px 20px; color: #fff; background: #4c4c4c; word-break: keep-all; transition: all .6s;} .s_con table tbody tr td p a i{margin-right: 4px;} .s_con table tbody tr td p a:hover{background: #3fa8cb;} .s_con table tbody tr td ul li p{position: relative; padding: 2px 0 2px 14px;} .s_con table tbody tr td ul li p:after{content: ''; position: absolute; top: 11px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #ddd;} .s_con table tfoot tr th p{font-size: 18px; color: #333; word-break: keep-all;} .s_con table tfoot tr td{height: 50px; padding: 30px 20px; font-family: 'Pretendard'; font-weight: 500; letter-spacing: -0.5px; color: #555; border-bottom: 1px solid #ededed; border-left: 1px solid #ededed;} .s_con table tfoot tr td p{font-size: 18px; word-break: keep-all;} .s_con table .blnone{border-left: none!important;} .s_con table.twoline thead tr th{border-left: 1px solid #e8e8e8;} .s_con table.twoline thead tr th.bbe8e8{border-bottom: 1px solid #e8e8e8;} .s_con .table_wrap{position: relative; margin: 20px 0;} .s_con .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: 2; cursor: pointer;} .s_con .table_wrap .table_prev_mo ul{position: absolute; top: 100px; left: 50%; display: flex; justify-content: center; width: 100%; transform: translateX(-50%);} .s_con .table_wrap .table_prev_mo ul:after{content: ''; display: block; clear: both;} .s_con .table_wrap .table_prev_mo ul li{} .s_con .table_wrap .table_prev_mo ul li p{font-size: 18px; color: #fff;} .s_con .table_wrap .table_prev_mo ul li i{margin: 3px 0 0 5px; font-size: 18px; color: #fff; animation: prevarrow .5s ease-in infinite alternate;} @media (max-width: 991px){ .s_con .table_wrap{width: 100%; overflow-x: auto; padding-bottom: 20px;} .s_con .table_wrap table{width: 991px!important;} .s_con .table_wrap .table_prev_mo{display: block;} } @media (max-width: 767px){ .s_con table thead tr th h5{font-size: 16px;} .s_con table tbody tr th p{font-size: 16px;} .s_con table tbody tr td{padding: 20px 10px;} .s_con table tbody tr td p{font-size: 16px;} } @media (max-width: 450px){ .s_con .table_wrap .table_prev_mo ul li p{font-size: 15px;} .s_con table tbody tr th p{font-size: 15px;} .s_con table tbody tr td{padding: 15px 5px;} .s_con table tbody tr td p{font-size: 15px;} } /* 도트 리스트 */ .s_con .dott_list{width: 100%; margin-top: 20px; padding: 30px; background: #f9f9f9;} .s_con .dott_list{} .s_con .dott_list li{position: relative; margin-bottom: 15px; padding-left: 20px; font-size: 20px; letter-spacing: -0.5px; line-height: 1.5; word-break: keep-all; text-align: left;} .s_con .dott_list li::before{content:''; position: absolute; top: 12px; left: 0; display: block; width: 5px; height: 5px; border-radius: 50%; background: #bbb;} .s_con .dott_list li:last-child{margin-bottom: 0;} .s_con .dott_list li i{color: #bbb; margin-right: 5px;} .s_con .dott_list li b.red{color: #a70707;} .s_con .dott_list li b.blue{color: #103868;} .s_con .dott_list li p{margin-bottom: 15px; font-size: 18px; letter-spacing: -0.5px; line-height: 1.5; word-break: keep-all;} .s_con .dott_list li:last-child p{margin-bottom: 0;} @media (max-width: 1200px){ .s_con .dott_list li{font-size: 18px;} } @media (max-width: 767px){ .s_con .dott_list{padding: 20px;} .s_con .dott_list li{padding-left: 15px; font-size: 16px;} .s_con .dott_list li p{font-size: 16px;} } @media (max-width: 450px){ .s_con .dott_list{margin-top: 10px; } } /* 탭 메뉴_페이지이동O */ .s_con .pagetab{display: flex; justify-content: center; gap: 0.5%;transition: all .6s;} .s_con .pagetab li{flex: 0 1 200px; display: table; height: 60px; text-align: center; border: 1px solid rgba(64,70,96,.3); border-radius: 100px; transition: all .6s;} .s_con .pagetab li a{display: table-cell; vertical-align: middle; padding: 0 5px; font-weight: 500; font-size: 16px; line-height: 20px; color: #333; word-break: keep-all; opacity: .6; transition: all .6s;} .s_con .pagetab li button{display: block; width: 100%; height: 100%; font-size: 16px; word-break: keep-all; background: none; border: none; transition: all .6s;} .s_con .pagetab li:hover{border-color: #333;} .s_con .pagetab li:hover a{opacity: 1;} .s_con .pagetab li.active{background: #333; border-color: #333;} .s_con .pagetab li.active a{font-weight: 500; color: #fff; opacity: 1;} .s_con .pagetab li button.active{background: #333; border-color: #333; font-weight: 500; color: #fff;} @media (max-width: 1200px){ .s_con .pagetab li{flex: 0 1 160px; height: 50px;} } @media (max-width: 640px){ .s_con .pagetab li{height: 40px;} .s_con .pagetab li a{font-size: 14px; line-height: 18px;} } @media (max-width: 510px){ .s_con .pagetab{flex-wrap: wrap; gap: 5px;} .s_con .pagetab li{flex: none; width: 100%;} } /* 탭 메뉴_페이지이동X */ .s_con .sub-tab{display:flex; justify-content:center; gap: 0.5%; flex-wrap:wrap; transition: all .6s;} .s_con .sub-tab li{flex: 0 1 200px; display: table; height: 60px; margin-bottom: 5px; text-align: center; cursor:pointer; border: 1px solid rgba(64,70,96,.3); border-radius: 100px; transition: all .6s;} .s_con .sub-tab li:first-child span{border-left:none;} .s_con .sub-tab li span{display: table-cell; width: 100%; height: 100%; vertical-align: middle; padding: 0 5px; font-weight: 500; font-size: 16px; line-height: 20px; color: #333; word-break: keep-all; opacity: .6; transition: all .6s;} .s_con .sub-tab li:hover{border-color: #333;} .s_con .sub-tab li:hover span{opacity: 1;} .s_con .sub-tab li.active{background: #333; border-color: #333;} .s_con .sub-tab li.active span{font-weight: 500; color: #fff;} .s_con .tabcontent{display:none;} @media (max-width: 767px){ .s_con .sub-tab li{width:30%;} .s_con .sub-tab li span{font-size:16px; padding:10px 10px 8px 10px;} } /* -------------------------------- sub1_1 : 인사말 -------------------------------- */ #Greeting{position: relative;/* padding-bottom: 140px; *//* padding-top: 60px; */} #Greeting .ceo-con-txt02 {font-size: 22px;font-weight: 500;line-height: 1.7;letter-spacing: -.5px; color: #333; word-break: keep-all;} #Greeting .ceo-con-txt02 b {font-weight:800;} #Greeting .ceo-con-txt02 p {font-weight:500;} #Greeting .ceo-con-txt02 + p{margin-top: 35px;} #Greeting .ceo-top {position: relative;} #Greeting .ceo-top .inner{padding:0 60px; position: relative;} /* 밑에 숨어있다 한 줄씩 올라오는 마스크 : 바깥 .line 이 마스크, 안쪽 i 가 실제로 올라옴 */ #Greeting .ceo-top .line{display:block; overflow:hidden;} #Greeting .ceo-top .line > i{display:block; font-style:normal;} #Greeting .ceo-top .ceo-main-st {padding-bottom: 2.7rem;font-size:2.4rem;font-weight: 600;color:var(--main-color);letter-spacing: -.5px;line-height:1.15;} #Greeting .ceo-top .ceo-main-tit {font-size: 32px;font-weight: 500;/* color: #333; */letter-spacing:-0.055em;line-height:1.15;} #Greeting .ceo-top .ceo-intro-tit {font-size: 42px;line-height: 1.5;letter-spacing: -.5px;/* color: #212121; */font-weight: 500;padding: 5px 0 160px;word-break: keep-all;} #Greeting .ceo-top .ceo-intro-tit b{font-weight:700;color: #772278;text-shadow: -0.3px -0.3px 0 #772278, 0.3px -0.3px 0 #772278, -0.3px 0.3px 0 #772278, 0.3px 0.3px 0 #772278;} /* 텍스트 스타일은 메인 #latest .bg-text 와 동일하게 (흐르는 구조는 기존 마퀴 유지) */ #Greeting .ceo-top .roll-txt { position: absolute;transform: translateX(-50%);left: 50%;bottom: 0;font-family:"Pretendard",-apple-system,"Malgun Gothic",sans-serif;font-size:160px;font-weight:500;line-height:1;color:#f5f5f5;text-transform:uppercase; } #Greeting .ceo-top .roll-txt .RollTxt{width: 100vw;white-space:nowrap;} #Greeting .ceo-top .roll-txt .RollTxt .flow-text{display:flex; flex:0 0 auto; white-space:nowrap; /* overflow:hidden; */ transition:0.3s;} #Greeting .ceo-top .roll-txt .RollTxt .flow-text b{font-family:"Baskervville","Times New Roman",Georgia,serif;font-style:italic;font-weight:500;text-transform:none;color:#fff3fd;} #Greeting .ceo-top .roll-txt .RollTxt .flow-wrap{animation:textLoop 20s linear infinite;padding-right: 90px;} #Greeting .ceo-top .roll-txt .RollTxt .flow-wrap img{width:1920px;} #Greeting .ceo-middle {position: relative;background-color: #f6f6f6;padding: 60px 60px 65px;margin-bottom: 60px;box-sizing: border-box;border-radius: 20px;} /* 박스 자체는 100%, 이미지 영역을 피해야 하는 요소에만 66% */ #Greeting .ceo-middle-txt-box {width: 100%;} #Greeting .ceo-middle-txt-box .greeting-p1, #Greeting .ceo-middle-txt-box .ceo-inst-list {width: 66%;} #Greeting .ceo-middle-txt-box p + p{margin-top:20px;} #Greeting .ceo-middle .ceo-con-txt01 {font-size: 25px;font-weight: 500;line-height: 1.7;letter-spacing: -1px;/* color: #212121; */word-break: keep-all;} #Greeting .ceo-middle .ceo-con-txt01 big{font-weight:800} #Greeting .ceo-middle .ceo-con-txt01 span {color: #772278;} #Greeting .ceo-inst-list {margin: 28px 0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; gap: 10px;} #Greeting .ceo-inst-list li {position: relative; font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: -.5px; color: #333; word-break: keep-all; padding: 20px; background: #fff; border-radius: 16px;} /* #Greeting .ceo-inst-list li::before {content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: #772278;} */ #Greeting .ceo-inst-list li span {color: #772278; font-weight: 700;} #Greeting .ceo-inst-list li em {font-style: normal; font-size: 16px; color: #777;} #Greeting .ceo-bottom{padding: 0 60px;} #Greeting .ceo-img-box {position: absolute;top: -200px;right: 6%;width: auto;/* right:8%; width: 22%; */border-radius: 20px;overflow: hidden;} #Greeting .ceo-img-box img {max-width:100%;} #Greeting .sign-box {margin-top: 60px;text-align: right;} #Greeting .sign-tit {font-size: 24px;line-height: 2;letter-spacing: -.5px;color:#333;font-weight:500;} #Greeting .sign-tit b{/* color:#c9005f; */color: var(--main);} #Greeting .sign-tit .ceo-name {padding-left: 25px;/* font-size: 34px; */line-height: 1;color: #333;font-weight: 700;} #Greeting .sign-tit em {font-style: normal;font-size: 34px;color: #000;} .en #Greeting .ceo-top .ceo-main-tit{letter-spacing:-.5px;} @keyframes textLoop{ 0%{-webkit-transform:translate3d(0%, 0, 0); transform:translate3d(0%, 0, 0);} 100% {-webkit-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0);} } @media (max-width: 1170px){ #Greeting{padding-bottom: 100px; padding-top: 0px;} #Greeting .ceo-top .roll-txt .RollTxt .flow-wrap{padding-right: 40px;} #Greeting .ceo-top .inner {text-align: center;} #Greeting .ceo-top .roll-txt{font-size:120px;} #Greeting .ceo-top .ceo-main-tit {font-size: 42px;} #Greeting .ceo-top .ceo-intro-tit {padding: 20px 0 120px;} #Greeting .ceo-middle {padding: 40px 40px 0 40px;margin-bottom: 50px;text-align: center;} #Greeting .ceo-middle-txt-box {display:flex;width: 100%; gap: 15px; flex-direction: column;} #Greeting .ceo-middle-txt-box .greeting-p1, #Greeting .ceo-middle-txt-box .ceo-inst-list {width: 100%;} #Greeting .ceo-middle .ceo-con-txt01 {font-size: 22px;} #Greeting .ceo-inst-list {margin: 0; gap: 8px;} #Greeting .ceo-inst-list li {padding-left: 0; font-size: 18px;} #Greeting .ceo-inst-list li::before {display: none;} #Greeting .ceo-img-box {position: relative; bottom: 0; right: auto; width: 100%; text-align: center;} #Greeting .ceo-bottom {padding: 0;} #Greeting .ceo-con-txt02 {font-size: 20px;text-align: center;} #Greeting .sign-box {margin-top: 40px; text-align: center;} #Greeting .sign-tit .ceo-name {font-size: 30px;} } @media (max-width: 767px){ #Greeting {padding-bottom: 60px;} #Greeting .ceo-img-box img {width:60%;} #Greeting .ceo-top .inner{padding:0;} #Greeting .ceo-top .ceo-main-tit {font-size: 19px;line-height: 1.3;} #Greeting .ceo-top .roll-txt {font-size: 80px;} #Greeting .ceo-top .ceo-intro-tit {padding: 10px 0 80px;font-size: 19px;} #Greeting .ceo-middle {padding: 20px 20px 0 20px; margin-bottom: 30px; text-align: center; border-radius: 10px;} #Greeting .ceo-middle .ceo-con-txt01 {font-size: 18px;} #Greeting .ceo-inst-list li {font-size: 16px;} #Greeting .ceo-inst-list li em {font-size: 14px; display: block;} #Greeting .ceo-con-txt02 {font-size: 17px;line-height: 1.6;} #Greeting .sign-box {margin-top: 30px;} #Greeting .sign-tit {font-size: 18px;display: flex;flex-direction: column;gap: 10px;} #Greeting .sign-tit .ceo-name {font-size: 18px;padding: 0;} #Greeting .sign-tit em {font-size:24px;} #Greeting .ceo-con-txt02 {} #Greeting .ceo-top .ceo-intro-tit b {text-shadow:none;} } /* ===== 임시 : 인사말 이미지 자리 확인용. 실제 이미지 넣으면 이 블록 통째로 삭제 ===== */ #Greeting .ceo-img-box {width: 320px; height: 420px; background: #ccc; box-shadow: 0 0 30px #81708e7a;} @media (max-width: 1170px){ #Greeting .ceo-img-box {width: 100%; max-width: 320px; height: 380px; margin: 0 auto;} } @media (max-width: 767px){ #Greeting .ceo-img-box {max-width: 240px; height: 300px;} } /* ===== //임시 ===== */ /* -------------------------------- sub1_2 : 사업 목적 및 아젠다 -------------------------------- */ /* 레퍼런스(ikmr.co.kr 서브페이지)의 규칙을 그대로 옮겼습니다. · 섹션 구분은 선·박스가 아니라 "큰 여백"(--pps-space) 으로만 · 면은 회색 #f6f6f6 + radius 24px 하나. 테두리 · 그림자 없음 · 제목 36px / 본문 19px 로 대비를 크게, 포인트색은 인라인 강조에만 · 도식(.flow) 은 8px 간격 · radius 16px · 옅은 면 → 회색 → 짙은 면 좌우 여백과 최대폭은 _head.php 의 .sCont 가 이미 잡아줍니다. (sub1_4 와 동일) */ #Purpose{ --pps-accent:#772278; /* 메인 컬러 (#Members --tab-accent 와 동일) */ --pps-space:150px; /* 섹션 사이 여백 */ --pps-fill:#f6f6f6; /* 회색 면 */ /* 메인 컬러 스케일 : 진한 순서대로 p1 → p5. 도식의 모든 색이 여기서 나옵니다. */ --pps-p1:#3d1f3a; /* 가장 진한 (거의 검정에 가까운 자주) */ --pps-p2:#5b2160; --pps-p3:#772278; /* = 메인 컬러 */ --pps-p4:#a55fa8; --pps-p5:#c396c6; --pps-tone:#f6eff7; /* 옅은 면 */ --pps-tone2:#e7d8e9; /* 위보다 한 단계 진한 면 */ --pps-dark:var(--pps-p1); /* 짙은 면 */ position:relative; } /* #Purpose .area-wrap{width:100%; max-width:1400px; margin:0 auto;} /* 목록 기본 마커(1. 2. 3. / ·) 제거 : ol·ul 을 구조용으로만 씁니다 */ #Purpose ol, #Purpose ul{list-style:none; margin:0; padding:0;} */ ol{padding-left: 0;} /* 섹션 : 여백으로만 구분 */ #Purpose .pps-wrp{margin-top: 100px; /*margin-top:var(--pps-space);*/} /* 제목 앞 가로 막대 : 세부 아젠다 페이지(#aganda .agd-eyebrow .bar)와 같은 마크. AOS 가 붙여주는 .aos-animate 를 신호로 왼쪽 → 오른쪽으로 그려집니다. */ #Purpose .pps-tit{display:flex; align-items:center; gap:20px; margin-bottom:40px; font-size:32px; font-weight:700; letter-spacing:-1px; color:#222; word-break:keep-all;} #Purpose .pps-tit::before{content:''; flex:0 0 65px; width:65px; height:2px; background:var(--pps-accent); transform:scaleX(0); transform-origin:left center; transition:transform .6s cubic-bezier(.22,1,.36,1) .15s;} #Purpose .pps-tit.aos-animate::before{transform:scaleX(1);} @media (prefers-reduced-motion: reduce){ #Purpose .pps-tit::before{transform:scaleX(1); transition:none;} } /* ── 1. 인트로 배너 ── */ #Purpose .pps-banner{padding:64px 80px; background:var(--pps-fill); border-radius:24px;} #Purpose .pps-banner p{font-size:24px; font-weight:500; line-height:1.85; letter-spacing:-.5px; color:#444; word-break:keep-all;} #Purpose .pps-banner b{font-weight:600; color:var(--pps-accent);} /* ── 2. 아젠다 도식 ── */ #Purpose .flow{display:flex; flex-direction:column; gap:8px;} /* 공통 블록 */ #Purpose .flow-box{padding:30px; border-radius:16px; text-align:center; font-size:24px; font-weight:700; letter-spacing:-.5px; color:#222; word-break:keep-all;} #Purpose .flow-box.tone{background:var(--pps-tone);} #Purpose .flow-box.tone2{background:var(--pps-tone2);} /* 가로로 나열되는 칸 */ #Purpose .flow-row{display:grid; gap:8px;} #Purpose .flow-row.col2{grid-template-columns:1fr 1fr;} #Purpose .flow-row.col2 li{ border: 2px solid var(--pps-p3);} #Purpose .flow-row.col4{grid-template-columns:repeat(4,1fr);} #Purpose .flow-row li{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:118px; padding:30px; background:#fff; border-radius:16px; text-align:center; font-size:20px; font-weight:500; line-height:1.6; letter-spacing:-.5px; color:#444; word-break:keep-all;} #Purpose .flow-row li b{font-size:22px; font-weight:700; color:var(--pps-accent);} /* 마지막 단 : 짙은 면 + 흰 글자 */ #Purpose .flow-row.dark li{background:var(--pps-dark); font-weight:600; color:#fff;} /* 화살표 : 넓고 납작한 삼각형. 글자는 위쪽 넓은 부분에 얹습니다. */ /* 윗변(직선으로 잘린 면)이 드러나지 않도록 위쪽을 투명하게 날리고 아래 꼭짓점으로 갈수록 색이 차오르게 합니다. */ #Purpose .flow-arrow{position:relative; width:100%; max-width:800px; height:120px; margin:8px auto; background:linear-gradient(180deg, rgba(238,238,238,0) 0%, rgba(238,238,238,.45) 30%, rgba(238,238,238,.8) 64%, rgba(238,238,238,1) 100%); -webkit-clip-path:polygon(0 0, 100% 0, 50% 100%); clip-path:polygon(0 0, 100% 0, 50% 100%);} #Purpose .flow-arrow span{position:absolute; top:18px; left:0; width:100%; text-align:center; font-size:22px; font-weight:700; letter-spacing:-.5px; color:#333;} /* ── 3. 세 가지 근간 키워드 ── */ #Purpose .pps-keys{display:flex; flex-direction:column; gap:20px; } #Purpose .pps-keys > li{display:grid; grid-template-columns:280px 1fr; gap:60px; padding:52px 60px; background:var(--pps-fill); border-radius:24px; box-sizing:border-box; position: relative; overflow: hidden; transition:background-color .45s ease;} #Purpose .pps-keys .key-num{ display: block; /* margin-bottom: 14px; */ font-size: 160px; font-weight: 700; letter-spacing: -0.2px; color: #ae60af2b; position: absolute; bottom: -50px; left: 160px; transition:transform .6s cubic-bezier(.22,1,.36,1), color .45s ease;} #Purpose .pps-keys .key-word{display:block; font-size:26px; font-weight:700; letter-spacing:-1px; color:#222; word-break:keep-all; margin-top: 16px; transition:color .45s ease;} #Purpose .pps-keys .key-desc{font-size:20px; font-weight:500; line-height:1.9; letter-spacing:-.5px; color:#555; word-break:keep-all;} /* 호버 : 바탕이 옅은 보라로, 워터마크 숫자가 떠오르며 진해지고, 키워드가 메인 컬러로 */ #Purpose .pps-keys > li:hover{background:var(--pps-tone);} #Purpose .pps-keys > li:hover .key-num{transform:translateY(-16px); color:#ae60af4d;} #Purpose .pps-keys > li:hover .key-word{color:var(--pps-accent);} @media (hover: none){ #Purpose .pps-keys > li:hover{background:var(--pps-fill);} #Purpose .pps-keys > li:hover .key-num{transform:none; color:#ae60af2b;} #Purpose .pps-keys > li:hover .key-word{color:#222;} } #Purpose .pps-keys .key-desc b{font-weight:600; color:var(--pps-accent);} @media (max-width: 1400px){ #Purpose .pps-keys > li{grid-template-columns:230px 1fr; gap:44px; padding:44px 46px;} } @media (max-width: 1199px){ #Purpose{--pps-space:80px;} #Purpose .pps-tit{gap:16px; margin-bottom:28px; font-size:28px;} #Purpose .pps-tit::before{flex-basis:44px; width:44px;} #Purpose .pps-banner{padding:44px; border-radius:20px;} #Purpose .pps-banner p{font-size:19px;} #Purpose .flow-box{padding:22px; font-size:19px;} #Purpose .flow-row li{min-height:104px; padding:22px 18px; font-size:17px;} #Purpose .flow-arrow{max-width:440px; height:66px;} #Purpose .flow-arrow span{top:14px; font-size:18px;} /* 좌우 2단 → 위아래 1단 */ #Purpose .pps-keys > li{grid-template-columns:1fr; gap:24px; padding:40px;} #Purpose .pps-keys .key-word{font-size:23px;} #Purpose .pps-keys .key-desc{font-size:18px;} } @media (max-width: 767px){ #Purpose{--pps-space:50px;} #Purpose .pps-tit{gap:12px; margin-bottom:20px; font-size:22px;} #Purpose .pps-tit::before{flex-basis:28px; width:28px;} #Purpose .pps-banner{padding:28px 24px; border-radius:16px;} #Purpose .pps-banner p{font-size:17px; line-height:1.8;} #Purpose .flow-box{padding:18px 16px; border-radius:12px; font-size:17px;} /* 단계 1열, 결론 2×2 */ #Purpose .flow-row.col2{grid-template-columns:1fr;} #Purpose .flow-row.col4{grid-template-columns:1fr 1fr;} #Purpose .flow-row li{min-height:0; padding:20px 14px; gap:8px; border-radius:12px; font-size:16px;} #Purpose .flow-row li b{font-size:16px;} #Purpose .flow-arrow{max-width:260px; height:54px; margin:6px auto;} #Purpose .flow-arrow span{top:10px; font-size:16px;} #Purpose .pps-keys{gap:10px;} #Purpose .pps-keys > li{gap:18px; padding:28px 24px; border-radius:16px;} #Purpose .pps-keys .key-num{margin-bottom:10px; font-size:16px;} #Purpose .pps-keys .key-word{font-size:20px;} #Purpose .pps-keys .key-desc{font-size:16px; line-height:1.8;} } /* ── 4. 본문 단락 / 연구 질문 ────────────────────────────── */ #Purpose .pps-desc{position: relative; font-size:24px; text-align: center; font-weight:500; line-height:1.9; letter-spacing:-.5px; color:#444; word-break:keep-all;} #Purpose .pps-desc + .pps-qs{margin-top:50px;} #Purpose .pps-qs + .pps-desc{margin-top:50px;} #Purpose .pps-desc::before,#Purpose .pps-desc::after{content: ""; width: 114px; height: 95px; background-position: center; background-repeat: no-repeat; background-size: cover;position: absolute; top: 50%; transform: translateY(-50%); opacity: .05;} #Purpose .pps-desc::before{background-image: url(/images/sub/quotes_left.png);left: 0;} #Purpose .pps-desc::after{background-image: url(/images/sub/quotes_right.png);right: 0;} /* 글자 채우기 : 안 채워진 색 → 채워진 색으로 글자가 왼쪽부터 칠해집니다. 배경(그라데이션)을 글자 모양으로 잘라내고, 그 배경의 가로 폭을 0% → 100% 로 늘리는 방식. 화면에 들어오면 자동 재생되며, .in-view 는 _head.php 의 jQuery 가 .ani 요소에 붙여줍니다. 줄 순서(--d)만 nth-child 로 잡아두면 문단마다 줄 수가 달라도 그대로 동작합니다. */ #Purpose .pps-fill{--fill-empty:#f5f5f5; --fill-done:#333;} #Purpose .pps-banner .pps-fill, #Purpose .pps-banner.pps-fill{--fill-empty:#e3e3e3;} /* 회색 면 위라 한 톤 진하게 */ #Purpose .pps-fill .fill-line{display:block; color:var(--fill-empty); /* background-clip 미지원 브라우저용 폴백 */ background-color:var(--fill-empty); /* 아직 안 채워진 글자 */ background-image:linear-gradient(var(--fill-done),var(--fill-done)); /* 채워지는 색 */ background-size:0% 100%; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; transition:background-size 1.2s cubic-bezier(.22,1,.36,1);} /* 줄 순서에 따른 시작 시간 (--d). 줄이 늘어나면 nth-child 를 이어서 추가하세요. */ #Purpose .pps-fill .fill-line{--d:0s;} #Purpose .pps-fill .fill-line:nth-child(2){--d:.4s;} #Purpose .pps-fill .fill-line:nth-child(3){--d:.8s;} #Purpose .pps-fill .fill-line:nth-child(4){--d:1.2s;} #Purpose .pps-fill .fill-line:nth-child(5){--d:1.6s;} #Purpose .pps-fill.in-view .fill-line{background-size:100% 100%; transition-delay:var(--d);} /* 강조 구간이 있는 줄 : 부모가 글자를 칠하면 자식 글자 위에 겹쳐 외곽선처럼 보이므로, 부모의 칠을 끄고 조각(.seg)들이 각자 자기 구간을 채웁니다. 앞 조각 → 뒤 조각 순서로 시간을 나눠 한 줄이 이어서 채워지는 것처럼 보이게 합니다. */ #Purpose .pps-fill .fill-line.split{background:none; -webkit-text-fill-color:currentColor; -webkit-background-clip:border-box; background-clip:border-box;} #Purpose .pps-fill .fill-line .seg{ color:var(--fill-empty); background-color:var(--fill-empty); background-image:linear-gradient(var(--fill-done),var(--fill-done)); background-size:0% 100%; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; transition:background-size .8s linear;} #Purpose .pps-fill .fill-line .seg.em{font-weight:700; background-image:linear-gradient(var(--pps-accent),var(--pps-accent));} #Purpose .pps-fill.in-view .fill-line .seg{background-size:100% 100%;} /* 그 줄의 차례(--d)가 되면 앞 조각 0.8s → 이어서 뒤 조각 0.4s */ #Purpose .pps-fill.in-view .fill-line.split .seg.em{transition-duration:.8s; transition-delay:var(--d);} #Purpose .pps-fill.in-view .fill-line.split .seg:not(.em){transition-duration:.4s; transition-delay:calc(var(--d) + .8s);} /* 모션 최소화 설정 사용자 : 애니메이션 없이 바로 채워진 상태 */ @media (prefers-reduced-motion: reduce){ #Purpose .pps-fill .fill-line, #Purpose .pps-fill .fill-line .seg{background-size:100% 100%; transition:none;} } #Purpose .pps-qs{display:flex; flex-direction:column; gap:8px;} /* 카드 = 링크(a.q-link). 질문 텍스트 + 세부과제 태그 2열 */ #Purpose .pps-qs .q-link{display:grid; grid-template-columns:1fr 150px; gap:20px; align-items:center; padding:26px 32px; background:var(--pps-fill); border-radius:16px; transition:background-color .4s ease, transform .4s cubic-bezier(.22,1,.36,1);} #Purpose .pps-qs .q-link:hover{background:var(--pps-tone); transform:translateX(8px);} #Purpose .pps-qs .q-txt{font-size:18px; font-weight:500; line-height:1.7; letter-spacing:-.5px; color:#444; word-break:keep-all; transition:color .4s ease;} #Purpose .pps-qs .q-link:hover .q-txt{color:#222;} /* 세부과제 태그 : 평소엔 흰 알약 + 과제명, 마우스를 올리면 과제명이 위로 빠지면서 사라지고 밑에 숨어있던 MORE 가 올라옵니다. 동시에 배경이 메인 컬러로, 글자는 흰색으로 반전됩니다. */ #Purpose .pps-qs .q-task{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 16px; background:#fff; border-radius:999px; text-align:center; font-size:17px; font-weight:700; letter-spacing:-.5px; color:var(--pps-accent); word-break:keep-all; transition:background-color .4s ease, color .4s ease;} /* .t = 과제명(알약 크기를 잡는 기준) / .m = 숨어있는 MORE */ #Purpose .pps-qs .q-task i{display:block; font-style:normal; transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .3s ease;} #Purpose .pps-qs .q-task .m{position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; gap:.1em; letter-spacing:.12em;} /* MORE : 낱자가 하나씩 아래에서 위로. span 이 글자 한 줄 높이의 마스크라서, 안쪽 em 은 딱 그 줄 밑에 숨어 있다가 올라옵니다. */ #Purpose .pps-qs .q-task .m span{display:block; overflow:hidden; line-height:1.2;} #Purpose .pps-qs .q-task .m span em{display:block; font-style:normal; transform:translateY(100%); transition:transform .4s cubic-bezier(.22,1,.36,1);} /* 카드 어디에 올려도 반응 */ #Purpose .pps-qs .q-link:hover .q-task{background:var(--pps-accent); color:#fff;} #Purpose .pps-qs .q-link:hover .q-task .t{transform:translateY(-160%); opacity:0;} #Purpose .pps-qs .q-link:hover .q-task .m span em{transform:translateY(0);} #Purpose .pps-qs .q-link:hover .q-task .m span:nth-child(1) em{transition-delay:.06s;} #Purpose .pps-qs .q-link:hover .q-task .m span:nth-child(2) em{transition-delay:.12s;} #Purpose .pps-qs .q-link:hover .q-task .m span:nth-child(3) em{transition-delay:.18s;} #Purpose .pps-qs .q-link:hover .q-task .m span:nth-child(4) em{transition-delay:.24s;} /* 마우스(호버)가 없는 환경에서는 모션 없이 과제명만 보이게 */ @media (hover: none){ #Purpose .pps-qs .q-link:hover{background:var(--pps-fill); transform:none;} #Purpose .pps-qs .q-link:hover .q-task{background:#fff; color:var(--pps-accent);} #Purpose .pps-qs .q-link:hover .q-task .t{transform:none; opacity:1;} #Purpose .pps-qs .q-link:hover .q-task .m span em{transform:translateY(100%);} } /* ── 5. 세부과제 구성도 ────────────────────────────────────── --c1 : 수행영역 열 / --c2 : 세부과제 열. 나머지 3열은 균등 분할. 머리행과 그룹 안쪽 열이 같은 값을 쓰므로 세로줄이 맞습니다. */ #Purpose .map-scroll{width:100%;} #Purpose .map{--c1:150px; --c2:180px; --map-pad:14px; --map-gap:8px; min-width:900px;} /* 머리행 : 왼쪽에서 오른쪽으로 갈수록 옅어짐 */ #Purpose .map-head{display:grid; grid-template-columns:var(--c1) var(--c2) 1fr 1fr 1fr; gap:var(--map-gap); padding:0 var(--map-pad);} #Purpose .map-head span{display:flex; align-items:center; justify-content:center; min-height:54px; padding:10px; border-radius:10px; text-align:center; font-size:18px; font-weight:700; letter-spacing:-.5px; color:#fff; word-break:keep-all;} #Purpose .map-head .c1{background:var(--pps-p2);} #Purpose .map-head .c2{background:var(--pps-p3);} #Purpose .map-head .c3{background:#8e3d91;} #Purpose .map-head .c4{background:var(--pps-p4);} #Purpose .map-head .c5{background:#b87bbb;} /* 머리행 → 그룹 연결선 */ #Purpose .map-links{display:grid; grid-template-columns:var(--c1) var(--c2) 1fr 1fr 1fr; gap:var(--map-gap); padding:0 var(--map-pad); height:26px;} #Purpose .map-links i{position:relative; display:block;} #Purpose .map-links i::before{content:''; position:absolute; top:0; left:50%; width:1px; height:100%; background:#dfd0e0;} #Purpose .map-links i::after{content:''; position:absolute; bottom:-3px; left:50%; transform:translateX(-50%); width:7px; height:7px; border-radius:50%; background:var(--pps-p4);} /* 그룹 패널 */ #Purpose .map-group{display:grid; grid-template-columns:var(--c1) 1fr; gap:var(--map-gap); align-items:center; padding:var(--map-pad); border-radius:18px;} #Purpose .map-group + .map-group{margin-top:var(--map-gap);} #Purpose .map-area{text-align:center; font-size:18px; font-weight:700; line-height:1.45; letter-spacing:-.5px; color:#333; word-break:keep-all;} #Purpose .map-rows{display:flex; flex-direction:column; gap:var(--map-gap);} #Purpose .map-rows > li{display:grid; grid-template-columns:var(--c2) 1fr 1fr 1fr; gap:var(--map-gap);} #Purpose .map-rows span{display:flex; align-items:center; justify-content:center; min-height:54px; padding:10px 12px; border-radius:999px; text-align:center; font-size:17px; font-weight:600; line-height:1.3; letter-spacing:-.5px; word-break:keep-all;} /* 세부과제 칸 : 흰 알약 + 오른쪽 삼각형 마커 */ #Purpose .map-rows .task{position:relative; z-index:1; background:#fff;} #Purpose .map-rows .task::after{content:''; position:absolute; top:50%; right:-9px; transform:translateY(-50%); border-left:7px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent;} /* 그룹별 색 : 위기 진단(가장 진한 자주) · 학술적 대응(메인 컬러) · 디지털 전략(그레이) */ #Purpose .map-group.g1{background:var(--pps-tone);} #Purpose .map-group.g1 .task{border:2px solid var(--pps-p1); color:var(--pps-p1);} #Purpose .map-group.g1 .cell{background:var(--pps-p1); color:#fff;} #Purpose .map-group.g2{background:#ececec;} #Purpose .map-group.g2 .task{border:2px solid var(--pps-p4); color:var(--pps-p3);} #Purpose .map-group.g2 .cell{background:var(--pps-p4); color:#fff;} #Purpose .map-group.g3{background:#f4f4f4;} #Purpose .map-group.g3 .task{border:2px solid #9a9a9a; color:#6f6f6f;} #Purpose .map-group.g3 .cell{background:#8c8c8c; color:#fff;} @media (max-width: 1199px){ #Purpose .pps-desc{font-size:19px; line-height:1.85;} #Purpose .pps-desc + .pps-qs, #Purpose .pps-qs + .pps-desc{margin-top:28px;} #Purpose .pps-qs .q-link{grid-template-columns:1fr 130px; gap:16px; padding:22px 24px;} #Purpose .pps-qs .q-txt{font-size:17px;} #Purpose .pps-qs .q-task{min-height:36px; padding:7px 12px; font-size:16px;} /* 가로 스크롤로 표를 보여줍니다 */ #Purpose .map-scroll{overflow-x:auto; padding-bottom:12px;} } @media (max-width: 767px){ #Purpose .pps-desc{font-size:16px; line-height:1.8;} #Purpose .pps-desc + .pps-qs, #Purpose .pps-qs + .pps-desc{margin-top:20px;} /* 본문 / 세부과제 태그 2줄 구성 */ #Purpose .pps-qs{gap:6px;} #Purpose .pps-qs .q-link{grid-template-columns:1fr; gap:8px 12px; padding:20px 18px; border-radius:12px;} #Purpose .pps-qs .q-txt{font-size:16px; line-height:1.65;} #Purpose .pps-qs .q-task{grid-column:1; justify-self:start; min-height:32px; padding:6px 14px; font-size:16px;} #Purpose .map{--c1:130px; --c2:160px; min-width:880px;} #Purpose .map-head span{min-height:44px; font-size:16px; border-radius:8px;} #Purpose .map-links{height:20px;} #Purpose .map-group{padding:10px; border-radius:14px;} #Purpose .map-area{font-size:16px;} #Purpose .map-rows span{min-height:44px; padding:8px; font-size:16px;} } /* -------------------------------- sub1_4 : 연구단 사람들 -------------------------------- */ #Members{ --tab-accent:#772278; /* 활성 탭 알약 (이 색 하나로 아래 톤이 전부 파생됨) */ --tab-accent-rgb:119,34,120; /* 위 색의 rgb 값 : 옅은 배경(rgba)에 사용 */ --tab-bar:#f5f5f5; /* 탭 바 바탕 (보라 계열 뉴트럴) */ --tab-hover:#ece2ec; /* 호버 시 따라오는 그림자 */ --row-bg:#f9f9f9; /* 명단 일반 행 */ --tab-h:56px; /* 탭 높이 (알약 높이와 같이 씀) */ position:relative; } #Members .mem-caption{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0;} /* 탭 바 */ #Members .mem-tabs{margin-bottom:50px;} #Members .tab-list{position:relative; display:flex; align-items:center; padding:6px; background:var(--tab-bar); border-radius:999px;} #Members .tab-btn{position:relative; z-index:2; flex:1 1 0; min-width:0; height:var(--tab-h); padding:0 10px; border:0; background:none; font-family:inherit; font-size:17px; font-weight:500; letter-spacing:-.4px; color:#7c707c; white-space:nowrap; cursor:pointer; border-radius:999px; transition:color .35s ease;} #Members .tab-btn:hover{color:var(--tab-accent);} #Members .tab-btn.is-active{color:#fff; font-weight:700;} #Members .tab-btn.is-active:hover{color:#fff;} #Members .tab-btn:focus-visible{outline:2px solid var(--tab-accent); outline-offset:3px;} /* 미끄러지는 알약 2장 : 활성(보라) 위, 호버(연회색) 아래 */ #Members .tab-ink{position:absolute; top:6px; left:0; height:var(--tab-h); border-radius:999px; pointer-events:none;} #Members .tab-ink-active{z-index:1; background:var(--tab-accent);} #Members .tab-ink-hover{z-index:0; background:var(--tab-hover); opacity:0;} #Members .tab-list.is-hover .tab-ink-hover{opacity:1;} /* 첫 렌더에서 0 → 제자리로 미끄러지는 것 방지 : JS가 위치를 잡은 뒤 .is-ready 부여 */ #Members .tab-list.is-ready .tab-ink{transition:transform .45s cubic-bezier(.22,1,.36,1), width .45s cubic-bezier(.22,1,.36,1), opacity .25s ease;} /* 패널 */ #Members .mem-panel{display:none;} #Members .mem-panel.is-on{display:block; animation:memPanelIn .5s cubic-bezier(.22,1,.36,1) both;} @keyframes memPanelIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} } #Members .mem-sum{display:flex; align-items:center; gap:10px; margin-bottom:18px; padding-left:2px;} #Members .mem-sum b{font-size:22px; font-weight:700; letter-spacing:-.5px; color:#222;} #Members .mem-sum span{padding:4px 12px; font-size:14px; font-weight:600; letter-spacing:-.3px; color:var(--tab-accent); background:rgba(var(--tab-accent-rgb),.09); border-radius:999px;} /* 명단 표 */ #Members .mem-table-wrap{overflow-x:auto;} /* border-spacing 세로값이 행 사이 간격 → 밑줄 대신 여백으로 행을 나눔 */ #Members .mem-table{width:100%; text-align:center; border-collapse:separate; border-spacing:0 8px;} #Members .mem-table thead th{height:66px; padding:10px 16px; background:#333; font-size:17px; font-weight:600; letter-spacing:-.4px; color:#fff; white-space:nowrap;} #Members .mem-table thead th:first-child{border-radius:50px 0 0 50px;} #Members .mem-table thead th:last-child{border-radius:0 50px 50px 0;} /* 모든 행을 thead 와 같은 알약으로 : 양끝 50px, 밑줄 없음 */ #Members .mem-table tbody td{padding:22px 16px; font-size:18px; font-weight:500; letter-spacing:-.5px; color:#555; background:var(--row-bg); word-break:keep-all;} #Members .mem-table tbody td:first-child{border-radius:50px 0 0 50px;} #Members .mem-table tbody td:last-child{border-radius:0 50px 50px 0;} #Members .mem-table tbody td.name{font-weight:600; color:#222; white-space:nowrap;} /* 연구책임자 · 연구팀장 강조 (원본 엑셀에서 음영 처리된 행) : 모양은 같고 색만 다름 */ #Members .mem-table tbody tr.is-lead td{background:rgba(var(--tab-accent-rgb),.11);} #Members .mem-table tbody tr.is-lead td.name{color:var(--tab-accent); font-weight:700;} #Members .mem-table tbody tr.is-lead td.role{font-weight:600; color:#4a3f49;} @media (max-width: 1170px){ #Members{--tab-h:50px;} #Members .mem-tabs{margin-bottom:36px;} /* 탭이 좁아지면 줄바꿈 대신 가로 스크롤 (알약이 어긋나지 않게) */ #Members .tab-list{overflow-x:auto; scrollbar-width:none;} #Members .tab-list::-webkit-scrollbar{display:none;} #Members .tab-btn{flex:0 0 auto; padding:0 26px; font-size:16px;} #Members .mem-table{min-width:760px;} #Members .mem-sum b{font-size:20px;} } @media (max-width: 767px){ #Members{--tab-h:46px;} #Members .mem-tabs{margin-bottom:26px;} #Members .tab-list{padding:5px;} #Members .tab-ink{top:5px;} #Members .tab-btn{padding:0 20px; font-size:15px;} #Members .mem-sum{margin-bottom:14px;} #Members .mem-sum b{font-size:18px;} #Members .mem-sum span{font-size:13px; padding:3px 10px;} #Members .mem-table{min-width:640px; border-spacing:0 6px;} #Members .mem-table thead th{height:54px; font-size:15px; padding:10px 12px;} #Members .mem-table tbody td{padding:16px 12px; font-size:15px;} } /* -------------------------------- sub2_x : 세부 아젠다 -------------------------------- */ /* 아젠다별 색은 #aganda 의 변수만 바꾸면 됩니다 (.agenda1 ~ .agenda6 에서 override) */ #aganda{ --agd-point:#862688; /* 아젠다 소개 라벨 / 강조 문구 */ --agd-line:#551b56; /* 책모양 박스 테두리 */ --agd-num:#dce8ef; /* 책모양 번호 */ position:relative; /* overflow 계열 금지 : .rel-pin 의 position:sticky 가 죽습니다 (좌우 넘침은 body 의 overflow-x 가 처리) */ } #aganda .area-wrap{width:100%; max-width:1600px; margin:0 auto; padding:0 40px;} /* ===== 공통 모션 ===== .ani 요소가 화면에 들어오면 head.php 의 jQuery 가 .in-view 를 붙입니다(한 번만). .line = 마스크, 안쪽 가 밑에서 위로 올라옴 */ #aganda .line{display:block; overflow:hidden;} #aganda .line > i{display:block; font-style:normal; transform:translateY(110%);} #aganda .in-view .line > i{animation:agdRise .9s cubic-bezier(.22,1,.36,1) forwards;} @keyframes agdRise{ from{transform:translateY(110%);} to{transform:translateY(0);} } @media (prefers-reduced-motion: reduce){ #aganda .line > i{transform:none;} #aganda .in-view .line > i{animation:none;} } /* ===== 1. 아젠다 소개 ===== */ #aganda .agd-intro{padding:0 0 150px;} /* top : 타이틀 */ #aganda .agd-eyebrow{display:flex; align-items:center; gap:20px; margin-bottom:50px;} #aganda .agd-eyebrow .bar{display:block; flex:0 0 65px; width:65px; height:2px; background:var(--agd-point); transform:scaleX(0); transform-origin:left center;} /* 1) border 가 왼쪽→오른쪽으로 그려짐 → 2) 아젠다 소개 → 3) 타이틀 → 4) 소개문구 1줄씩 */ #aganda .agd-head.in-view .bar{animation:agdBarDraw .6s cubic-bezier(.22,1,.36,1) forwards;} #aganda .agd-head.in-view .agd-eyebrow .line > i{animation-delay:.35s;} #aganda .agd-head.in-view .agd-tit .line > i{animation-delay:.55s;} /* 소개문구 줄 수는 아젠다마다 다르므로 4줄까지 미리 잡아둠 */ #aganda .agd-head.in-view .agd-lead .line:nth-of-type(1) > i{animation-delay:.72s;} #aganda .agd-head.in-view .agd-lead .line:nth-of-type(2) > i{animation-delay:.84s;} #aganda .agd-head.in-view .agd-lead .line:nth-of-type(3) > i{animation-delay:.96s;} #aganda .agd-head.in-view .agd-lead .line:nth-of-type(4) > i{animation-delay:1.08s;} @keyframes agdBarDraw{ from{transform:scaleX(0);} to{transform:scaleX(1);} } #aganda .agd-eyebrow .line > i{font-size:32px; font-weight:600; letter-spacing:-.5px; color:var(--agd-point); line-height:1.2;} #aganda .agd-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:60px;} #aganda .agd-tit .line > i{font-size:100px; font-weight:700; letter-spacing:-.03em; line-height:1.1; color:#333;} #aganda .agd-lead{text-align:right; padding-bottom:14px;} #aganda .agd-lead .line > i{font-size:32px; font-weight:500; letter-spacing:-.5px; line-height:1.5; color:#333; word-break:keep-all;} #aganda .agd-lead b{font-weight:700; color: var(--agd-point);;} /* bottom : 책모양 박스 */ #aganda .agd-books{margin-top:120px; display:flex; flex-direction:column; gap:20px;} #aganda .agd-book{position:relative; display:flex; align-items:center; gap:100px; width:100%; max-width:1300px; margin-left:auto; padding:35px 50px; background:#fff; border:5px solid var(--agd-line); border-right:0; border-radius:80px 0 0 80px; box-sizing:border-box;} /* 등장 순서(03→02→01)와 트리거는 AOS 가 담당 : sub2_1.php 의 data-aos-anchor / delay 참고. 여기서는 쌓이는 느낌을 위한 z-index 만 잡습니다 (01 이 가장 위). */ #aganda .agd-book:nth-child(1){z-index:3;} #aganda .agd-book:nth-child(2){z-index:2;} #aganda .agd-book:nth-child(3){z-index:1;} @media (prefers-reduced-motion: reduce){ #aganda .agd-eyebrow .bar{transform:scaleX(1);} } /* 짝수번째만 왼쪽으로 밀어 계단처럼 (시안 02번) */ #aganda .agd-book:nth-child(even){margin-right:75px;} #aganda .agd-book .num{flex:0 0 auto; font-size:60px; font-weight:800; line-height:1; color:var(--agd-num);} #aganda .agd-book .book-title{flex:0 0 auto; font-size:32px; font-weight:700; letter-spacing:-.5px; color:#333;} #aganda .agd-book .book-desc{font-size:20px; font-weight:500; line-height:1.6; letter-spacing:-.5px; color:#555; word-break:keep-all;} #aganda .agd-book .book-desc b{font-weight:700; color:#333;} /* ===== 2. 아젠다와의 관련성 ===== */ /* .rel-stage 가 스크롤 구간을 확보하고, 안쪽 .rel-pin 이 sticky 로 화면에 고정됨 */ /* 부모 컨테이너 폭과 무관하게 화면 전체 폭으로 빠져나옴 (배경이 좌우로 꽉 차야 함) */ #aganda .rel-stage{position:relative; height:220vh; width:100vw; margin-left:calc(50% - 50vw);} /* 배경 이미지는 --agd-bg 변수로 갈아끼웁니다 (아젠다별 지정은 바로 아래). 이미지가 없어도 어색하지 않도록 뒤에 검정 그라데이션을 깔아둡니다. */ #aganda{--agd-bg:url(/images/sub/agendaBG.jpg);} /* 기본값 (아젠다별 이미지가 없을 때) */ #aganda .rel-pin{position:sticky; top:0; height:100vh; display:flex; align-items:center; background-color:#000; background-image:var(--agd-bg), radial-gradient(120% 90% at 70% 80%, #1c1c1c 0%, #000 60%); background-position:center center; background-size:cover, cover; background-repeat:no-repeat, no-repeat;} /* ── 아젠다별 배경 : images/sub/ 에 agendaBG1.jpg ~ agendaBG6.jpg 로 올려주세요. 파일명·확장자가 다르면 아래 6줄의 경로만 고치면 됩니다. */ #aganda.agenda1{--agd-bg:url(/images/sub/agendaBG1.jpg);} /* 위기와 연결 */ #aganda.agenda2{--agd-bg:url(/images/sub/agendaBG2.jpg);} /* 역사와 장소 */ #aganda.agenda3{--agd-bg:url(/images/sub/agendaBG3.jpg);} /* 개념과 가치 */ #aganda.agenda4{--agd-bg:url(/images/sub/agendaBG4.jpg);} /* 지식과 제도 */ #aganda.agenda5{--agd-bg:url(/images/sub/agendaBG5.jpg);} /* 문화와 정전 */ #aganda.agenda6{--agd-bg:url(/images/sub/agendaBG6.jpg);} /* 융합과 매체 */ #aganda .rel-inner{display:flex; align-items:center; justify-content:space-between; gap:80px; width:100%;} #aganda .rel-tit .line > i{font-size:60px; font-weight:800; letter-spacing:-.5px; line-height:1.2; color:#fff;} /* 배경이 화면을 채운(고정된) 순간에 타이틀이 밑에서 올라옴 → JS가 .is-on 부여 */ #aganda .rel-pin.is-on .rel-tit .line > i{animation:agdRise .9s cubic-bezier(.22,1,.36,1) forwards;} #aganda .rel-desc{flex:0 1 900px;} /* 배경색(회색) 위에 흰 그라데이션이 0% → 100% 로 덮이는 구조. 채워지는 폭은 GSAP 이 줄 단위로 제어 */ #aganda .rel-line{ display:block; font-size:24px; font-weight:500; line-height:1.7; letter-spacing:-.5px; word-break:keep-all; color:#979797; /* 미지원 브라우저 폴백 */ background-color:#979797; /* 아직 안 채워진 글자 */ background-image:linear-gradient(#fff,#fff);/* 채워지는 흰색 */ background-size:0% 100%; background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } #aganda .rel-line b{font-weight:700;} /* ===== 3. 연구내용 및 계획 ===== */ /* 음수 margin 으로 2번 섹션 배경 위에 걸쳐 올라탐 */ #aganda .agd-plan{position:relative; z-index:2; margin-top:-280px; padding:0 40px;} #aganda .plan-glass{max-width:1600px; margin:0 auto; padding:100px 60px 50px; background:rgba(255,255,255,.4); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid #fff; border-radius:50px; box-sizing:border-box;} #aganda .plan-tit{position:relative; text-align:center; margin-bottom:80px;} #aganda .plan-tit h2{position:relative; z-index:1; font-size:50px; font-weight:600; letter-spacing:-.5px; color:#fff;} #aganda .plan-eng{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:160px; font-weight:800; line-height:1; color:#fff; opacity:.1; white-space:nowrap; pointer-events:none;} #aganda .plan-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;} #aganda .plan-box{position:relative; padding:80px 50px; background:#f9f9f9; border-radius:20px; box-sizing:border-box;} #aganda .plan-box .box-title{margin-bottom:50px; font-size:34px; font-weight:800; letter-spacing:-.5px; color:#000;} #aganda .box-list{display: flex; flex-direction: column; gap: 16px;} #aganda .box-list li{position:relative; padding-left:16px; font-size:18px; font-weight:500; line-height:1.4; letter-spacing:-.5px; color:#555; word-break:keep-all;} #aganda .box-list li::before{content:''; position:absolute; left:2px; top:10px; /*transform: translateY(-50%);*/ width: 6px; height: 6px;border-radius: 50%;background-color: var(--agd-point);} /* 코드펜 도형 자리 : 실제 도형 들어오면 점선 스타일만 지우면 됨 */ /* 도형 내부 좌표(반지름 등)가 px 로 고정돼 있어서 박스를 직접 줄이면 원이 밖으로 삐져나옵니다. 그래서 좌표계는 160 그대로 두고 통째로 축소 → 화면상 크기 150×150 (160 × 0.9375) */ #aganda .plan-figure{position:absolute; top:30px; right:30px; width:160px; height:160px; transform:scale(.9375); transform-origin:top right;} /* 도형별 시각 보정 : 바깥 지름이 큰 것들은 같은 배율에서 유독 커 보여 따로 줄임 */ #aganda .plan-figure[data-figure="halftone"]{transform:scale(.8125);} /* 2차년도 : 130×130 */ #aganda .plan-figure[data-figure="silver"]{transform:scale(.875);} /* 3차년도 : 140×140 */ /* 아직 도형이 지정되지 않은 자리만 점선으로 표시 */ #aganda .plan-figure:not([data-figure]){border:1px dashed rgba(0,0,0,.2); border-radius:16px;} #aganda .plan-figure:not([data-figure])::after{content:'도형 미지정'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:13px; color:rgba(0,0,0,.3); white-space:nowrap;} /* ── 원형 모션 도형 : 코드펜에서 3종만 발췌하고 색만 교체 점 #551b56 = rgb(85,27,86) / 선 #ccc / 마크업은 sub2_1.php 하단 스크립트가 생성 */ #aganda .fig-dot{position:absolute; border-radius:50%; background:#551b56;} @keyframes figSpin{to{transform:rotate(360deg);}} /* Rotating Orbits (1차년도) : 궤도 3겹이 서로 반대 방향으로 회전 */ #aganda .fig-orbit{position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; animation:figSpin 8s infinite linear;} /* Silver Spiral (3차년도) : 나선 전체가 천천히 역회전 + 점마다 맥동 */ #aganda .fig-silver{position:absolute; top:0; left:0; width:100%; height:100%; transform-origin:center; animation:figSpin 25s infinite reverse linear;} #aganda .fig-silver .fig-dot{animation:figSilverPulse 3s infinite ease-in-out;} @keyframes figSilverPulse{ 0%,100%{opacity:.2; transform:scale(.7);} 50%{opacity:1; transform:scale(1.3);} } /* Halftone Gradient (2차년도) : 링 4겹이 통째로 회전 + 점마다 시차를 두고 페이드 */ #aganda .fig-halftone{position:absolute; top:0; left:0; width:100%; height:100%; transform-origin:center; animation:figSpin 20s infinite linear;} #aganda .fig-halftone .fig-dot{animation:figHalftoneFade 4s infinite ease-in-out;} @keyframes figHalftoneFade{ 0%,100%{opacity:.3; transform:scale(.5);} 50%{opacity:1; transform:scale(1);} } /* Expanding Lines (2단계) : 방사형 선이 늘었다 줄고, 묶음 3개가 서로 반대로 회전 */ #aganda .fig-lines{position:absolute; top:0; left:0; width:100%; height:100%; transform-origin:center; animation:figSpin 8s infinite linear;} #aganda .fig-line{position:absolute; left:50%; top:50%; height:1px; background:#ccc; transform-origin:left center; animation:figExpandLine 4s infinite ease-in-out;} @keyframes figExpandLine{ 0%{width:0; opacity:0;} 20%,80%{width:70px; opacity:1;} 100%{width:0; opacity:0;} } @media (prefers-reduced-motion: reduce){ #aganda .fig-orbit, #aganda .fig-silver, #aganda .fig-silver .fig-dot, #aganda .fig-halftone, #aganda .fig-halftone .fig-dot, #aganda .fig-lines, #aganda .fig-line{animation:none;} #aganda .fig-line{width:70px;} } @media (max-width: 1500px){ #aganda .agd-tit .line > i{font-size:80px;} #aganda .agd-book{gap:60px; padding:30px 40px;} #aganda .plan-eng{font-size:120px;} #aganda .plan-box{padding:60px 40px;} } @media (max-width: 1200px){ #aganda .agd-intro{padding:90px 0 120px;} #aganda .agd-head-row{flex-direction:column; align-items:flex-start; gap:30px;} #aganda .agd-tit .line > i{font-size:64px;} #aganda .agd-lead{text-align:left; padding-bottom:0;} #aganda .agd-lead .line > i{font-size:24px;} #aganda .agd-books{margin-top:80px;} #aganda .agd-book{flex-wrap:wrap; gap:20px 40px; border-radius:60px 0 0 60px;} #aganda .agd-book:nth-child(even){margin-right:40px;} #aganda .agd-book .num{font-size:48px;} #aganda .agd-book .book-title{font-size:26px;} #aganda .agd-book .book-desc{flex:1 1 100%;} #aganda .rel-inner{flex-direction:column; gap:40px;} #aganda .rel-tit .line > i{font-size:44px;} #aganda .rel-desc{flex:1 1 auto;} #aganda .rel-desc p{font-size:20px;} #aganda .plan-grid{grid-template-columns:1fr; gap:30px;} #aganda .plan-tit h2{font-size:44px;} #aganda .plan-eng{font-size:90px;} } @media (max-width: 767px){ #aganda .area-wrap{padding:0 20px;} #aganda .agd-intro{padding:60px 0 80px;} #aganda .agd-eyebrow{gap:12px; margin-bottom:30px;} #aganda .agd-eyebrow .bar{flex-basis:40px; width:40px;} #aganda .agd-eyebrow .line > i{font-size:20px;} #aganda .agd-tit .line > i{font-size:40px;} #aganda .agd-lead .line > i{font-size:18px;} #aganda .agd-books{margin-top:50px; gap:14px;} #aganda .agd-book{gap:14px 24px; padding:24px 24px 24px 28px; border-width:3px; border-radius:40px 0 0 40px;} #aganda .agd-book:nth-child(even){margin-right:20px;} #aganda .agd-book .num{font-size:34px;} #aganda .agd-book .book-title{font-size:20px;} #aganda .agd-book .book-desc{font-size:16px;} #aganda .rel-stage{height:180vh;} #aganda .rel-tit .line > i{font-size:32px;} #aganda .rel-desc p{font-size:17px;} #aganda .agd-plan{margin-top:-160px; padding:0 20px 90px;} #aganda .plan-glass{padding:40px 20px 50px; border-radius:30px;} #aganda .plan-tit{margin-bottom:50px;} #aganda .plan-tit h2{font-size:30px;} #aganda .plan-eng{font-size:52px;} #aganda .plan-box{padding:40px 24px;} #aganda .plan-box .box-title{margin-bottom:24px; font-size:26px;} #aganda .box-list li{font-size:16px; line-height:1.8;} /* 도형 내부 좌표가 px 고정이라 크기를 줄이는 대신 통째로 축소 */ #aganda .plan-figure{top:24px; right:24px; transform:scale(.56); transform-origin:top right;} #aganda .plan-figure[data-figure="halftone"]{transform:scale(.485);} #aganda .plan-figure[data-figure="silver"]{transform:scale(.52);} #aganda .plan-figure:not([data-figure])::after{content:'도형'; font-size:11px;} } /* -------------------------------- sub1_3 : 조직구성 -------------------------------- */ /* 조직도는 이미지가 아니라 전부 CSS 로 그립니다. · 가운데 세로선(.org-v) 하나를 축으로, 오른쪽 갈래(.org-aside)는 --org-aside-w 폭만 차지 · 갈래 · 연구팀을 잇는 선은 전부 li 의 ::before(짧은 가지) / ::after(다음 항목까지 잇는 선) → 항목을 더하거나 빼도 선이 알아서 따라옵니다 (좌표 하드코딩 없음) · 색은 #Members · #Purpose 와 같은 메인 컬러(#772278) 계열 좌우 여백과 최대폭은 _head.php 의 .sCont 가 잡아줍니다. */ #Organ{ --org-accent:#772278; /* 메인 컬러 */ --org-accent-rgb:119,34,120; /* 위 색의 rgb : 옅은 배경(rgba)에 사용 */ --org-line:#c0a0c1; /* 연결선 */ --org-side-bg:#f1eef2; /* 오른쪽 갈래 위원회 박스 */ --org-team-bg:#f6eff7; /* 아래 연구팀 박스 */ --org-row-bg:#f9f9f9; /* 표 일반 행 */ --org-aside-w:29%; /* 오른쪽 갈래가 차지하는 폭 (가로선 길이도 여기서 결정) */ --org-gap:12px; /* 박스 사이 간격 (연결선 계산에 그대로 쓰임) */ position:relative; } #Organ .org-caption{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0;} /* ===== 1. 조직도 ===== */ #Organ .org-chart{max-width:100%; margin:20px auto 0;} #Organ .org-lv{display:flex; justify-content:center;} /* 박스 공통 */ #Organ .org-box{display:flex; align-items:center; justify-content:center; box-sizing:border-box; text-align:center; letter-spacing:-.5px; word-break:keep-all; text-decoration:none; transition:transform .3s ease, background-color .3s ease, box-shadow .3s ease, color .3s ease;} #Organ .org-box:hover{transform:translateY(-2px);} /* 1단 : 총괄운영위원회 (흰 면 + 테두리) */ /* 폭을 %로 잡아야 화면이 넓어져도 시안과 같은 비율(전체의 약 1/3)로 보입니다 */ #Organ .org-box.is-head{width:31%; min-width:300px; height:66px; padding:0 40px; background:#fff; border:2px solid var(--org-accent); border-radius:999px; font-size:20px; font-weight:600; color:var(--org-accent);} #Organ .org-box.is-head:hover{background:rgba(var(--org-accent-rgb),.06);} /* 2단 : 집행분과위원회 (채운 면) */ #Organ .org-box.is-exec{width:31%; min-width:300px; height:66px; padding:0 40px; background:linear-gradient(90deg,#a55fa8 0%,var(--org-accent) 100%); border-radius:999px; font-size:20px; font-weight:600; color:#fff;} #Organ .org-box.is-exec:hover{box-shadow:0 8px 20px rgba(var(--org-accent-rgb),.28);} /* 오른쪽 갈래 : 연구윤리 · 연구분과 · 출판편집 · 자체평가 */ #Organ .org-box.is-side{width:100%; min-height:52px; padding:12px 20px; background:var(--org-side-bg); border-radius:8px; font-size:17px; font-weight:500; color:#3d1f3a;} #Organ .org-box.is-side.is-strong{background:rgba(var(--org-accent-rgb),.11); font-weight:700; color:var(--org-accent);} #Organ .org-box.is-side:hover{background:rgba(var(--org-accent-rgb),.16); color:var(--org-accent);} /* 맨 아래 연구팀 (세부 아젠다 페이지로 이동) */ #Organ .org-box.is-team{flex-direction:column; gap:2px; min-height:78px; padding:14px 8px; background:var(--org-team-bg); border-radius:8px; font-size:17px; font-weight:500; color:#3d1f3a; line-height:1.35;} #Organ .org-box.is-team b{font-weight:600;} #Organ .org-box.is-team:hover{background:var(--org-accent); color:#fff;} /* 연결선 : 세로 축(.org-v) · 분기점(.org-dot) · 가로선(.org-h) */ #Organ .org-branch{position:relative; padding:26px 0;} #Organ .org-branch.is-three{padding:30px 0;} #Organ .org-branch.is-end{height:56px; padding:0;} #Organ .org-v{position:absolute; left:50%; top:0; bottom:0; width:1px; margin-left:-.5px; background:var(--org-line);} #Organ .org-dot{position:absolute; left:50%; top:50%; width:10px; height:10px; background:var(--org-accent); border-radius:50%; transform:translate(-50%,-50%); z-index: 3;} #Organ .org-dot.is-bottom{top:100%;} /* 가운데 축에서 오른쪽 갈래의 왼쪽 끝까지 */ #Organ .org-h{position:absolute; left:50%; right:var(--org-aside-w); top:50%; height:1px; background:var(--org-line);} /* 갈래는 흐름 안에 두어 갈래 높이가 곧 연결 구간 높이가 되게 함 (z-index : 세로선 위로) */ #Organ .org-aside{position:relative; z-index:1; width:var(--org-aside-w); margin-left:auto;} /* 갈래가 셋일 때 : 왼쪽에 세로 묶음선 + 항목마다 짧은 가로 가지 */ #Organ .is-three .org-aside ul{display:flex; flex-direction:column; gap:var(--org-gap);} #Organ .is-three .org-aside li{position:relative; padding-left:26px;} #Organ .is-three .org-aside li::before{content:''; position:absolute; left:0; top:50%; width:26px; height:1px; background:var(--org-line);} /* 다음 항목의 한가운데까지 (-50% = 자기 높이의 절반, + 항목 간격) */ #Organ .is-three .org-aside li:not(:last-child)::after{content:''; position:absolute; left:0; top:50%; bottom:calc(-50% - var(--org-gap)); width:1px; background:var(--org-line);} /* 연구팀 6개 : 위쪽에 가로 묶음선 + 칸마다 세로 가지 */ #Organ .org-teams{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--org-gap);} #Organ .org-teams li{position:relative; padding-top:34px;} #Organ .org-teams li::before{content:''; position:absolute; left:50%; top:0; width:1px; height:34px; background:var(--org-line);} /* 다음 칸의 한가운데까지 (-50% = 자기 너비의 절반, + 칸 간격) */ #Organ .org-teams li:not(:last-child)::after{content:''; position:absolute; left:50%; top:0; right:calc(-50% - var(--org-gap)); height:1px; background:var(--org-line);} /* ===== 2·3. 표 공통 ===== */ /* 섹션 제목 : #Purpose .pps-tit 과 같은 마크 (AOS 가 붙여주는 .aos-animate 로 선이 그려짐) */ #Organ .org-wrp{margin-top:110px;} #Organ .org-tit{display:flex; align-items:center; gap:20px; margin-bottom:40px; font-size:32px; font-weight:700; letter-spacing:-1px; color:#222; word-break:keep-all;} #Organ .org-tit::before{content:''; flex:0 0 65px; width:65px; height:2px; background:var(--org-accent); transform:scaleX(0); transform-origin:left center; transition:transform .6s cubic-bezier(.22,1,.36,1) .15s;} #Organ .org-tit.aos-animate::before{transform:scaleX(1);} @media (prefers-reduced-motion: reduce){ #Organ .org-tit::before{transform:scaleX(1); transition:none;} } #Organ .org-table-wrap{overflow-x:auto;} /* 표 모양은 sub1_4(#Members .mem-table)와 통일합니다. · 가운데 정렬 · 행 사이는 밑줄 대신 여백(border-spacing 세로값) · 머리행 #333 + 모든 행 양끝 50px 알약 */ #Organ .org-table{width:100%; text-align:center; border-collapse:separate; border-spacing:0 8px;} #Organ .org-table thead th{height:66px; padding:10px 16px; background:#333; font-size:17px; font-weight:600; letter-spacing:-.4px; color:#fff; white-space:nowrap;} #Organ .org-table thead th:first-child{border-radius:50px 0 0 50px;} #Organ .org-table thead th:last-child{border-radius:0 50px 50px 0;} #Organ .org-table tbody th, #Organ .org-table tbody td{padding:22px 16px; background:var(--org-row-bg); font-size:18px; font-weight:500; letter-spacing:-.5px; color:#555; text-align:center; vertical-align:middle; word-break:keep-all; transition:background-color .3s ease;} #Organ .org-table tbody tr > *:first-child{border-radius:50px 0 0 50px;} #Organ .org-table tbody tr > *:last-child{border-radius:0 50px 50px 0;} /* 위원회명 : #Members 의 td.name 자리. 행을 대표하는 이름이라 메인 컬러로 강조(tr.is-lead 와 같은 톤) */ #Organ .org-table tbody th.cmt b{display:block; font-size:18px; font-weight:700; letter-spacing:-.5px; color:var(--org-accent);} #Organ .org-table tbody th.cmt span{display:block; margin-top:6px; font-size:15px; font-weight:400; letter-spacing:-.3px; color:#8b8b8b;} /* 조직도 박스를 눌러 들어온 행을 강조 (고정 헤더에 가리지 않도록 여백 확보) - js/dsso.js 의 앵커 핸들러가 대상 에 .is-anchored 를 붙인다. Lenis 가 기본 동작을 막아 해시만으로는 :target 이 안 걸리기 때문. - :target 규칙은 다른 페이지에서 sub1_3.php#cmt-ethics 로 바로 들어오는 경우를 위해 유지. - 은은하게 두 번 번졌다가 .11 톤으로 가라앉아 계속 남는다. 완전히 사라지면 "어느 행이었지" 하고 다시 못 찾음. */ #Organ .org-table tbody tr{scroll-margin-top:140px;} #Organ .org-table tbody tr:target th, #Organ .org-table tbody tr:target td{background:rgba(var(--org-accent-rgb),.11);} #Organ .org-table tbody tr.is-anchored th, #Organ .org-table tbody tr.is-anchored td{ background:rgba(var(--org-accent-rgb),.11); animation:orgAnchorHl 2s ease-out 1; } @keyframes orgAnchorHl{ 0% {background:rgba(var(--org-accent-rgb),.02);} 18% {background:rgba(var(--org-accent-rgb),.22);} 45% {background:rgba(var(--org-accent-rgb),.08);} 68% {background:rgba(var(--org-accent-rgb),.20);} 100%{background:rgba(var(--org-accent-rgb),.11);} } /* 위원회명도 같이 또렷해지게 (배경만 바뀌면 눈에 덜 들어옴) */ #Organ .org-table tbody tr.is-anchored th.cmt b{color:var(--org-accent); font-weight:800;} /* 움직임을 줄이도록 설정한 사용자에게는 깜빡임 없이 최종 톤만 */ @media (prefers-reduced-motion:reduce){ #Organ .org-table tbody tr.is-anchored th, #Organ .org-table tbody tr.is-anchored td{animation:none;} } /* 이름(소속) : 이름은 진하게(#Members td.name 과 같은 톤), 소속은 작고 옅게. 이름 중간에서 줄이 끊기지 않게 nowrap */ #Organ .person-list{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px;} #Organ .person{display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap;} #Organ .person b{font-size:18px; font-weight:600; letter-spacing:-.5px; color:#222;} #Organ .person em{font-style:normal; font-size:15px; font-weight:400; letter-spacing:-.3px; color:#999;} /* 행정실 표 : 연구소명은 검정, 이메일 · 전화는 링크 */ #Organ .org-table.is-office tbody th.cmt b{color:#222;} #Organ .org-link{font-size:18px; font-weight:500; letter-spacing:-.3px; color:#555; transition:color .25s ease;} #Organ .org-link:hover{color:var(--org-accent); text-decoration:underline;} @media (max-width: 1199px){ #Organ{--org-aside-w:32%;} #Organ .org-box.is-head, #Organ .org-box.is-exec{min-width:260px; height:60px; padding:0 30px; font-size:18px;} #Organ .org-box.is-side{min-height:48px; padding:11px 16px; font-size:16px;} #Organ .org-box.is-team{min-height:72px; font-size:15px;} #Organ .org-branch{padding:22px 0;} #Organ .org-branch.is-end{height:44px;} #Organ .org-teams li{padding-top:28px;} #Organ .org-teams li::before{height:28px;} #Organ .org-wrp{margin-top:80px;} #Organ .org-tit{gap:16px; margin-bottom:28px; font-size:28px;} #Organ .org-tit::before{flex-basis:44px; width:44px;} /* 표는 좁아지면 글자를 줄이지 않고 가로 스크롤 (#Members 와 같은 방식) */ #Organ .org-table{min-width:820px;} } @media (max-width: 767px){ /* 조직도 : 좌우 갈래를 접어 위에서 아래로 읽히게. 가로 가지선은 감춤 */ #Organ{--org-gap:8px;} #Organ .org-lv{display:block;} #Organ .org-box.is-head, #Organ .org-box.is-exec{width:100%; min-width:0; height:56px; padding:0 20px; font-size:17px;} #Organ .org-branch{padding:18px 0;} #Organ .org-branch.is-end{height:22px;} #Organ .org-h, #Organ .org-dot{display:none;} #Organ .org-aside{width:100%; margin:0;} #Organ .is-three .org-aside li{padding-left:0;} #Organ .is-three .org-aside li::before, #Organ .is-three .org-aside li:not(:last-child)::after{display:none;} #Organ .org-teams{grid-template-columns:1fr 1fr;} #Organ .org-teams li{padding-top:0;} #Organ .org-teams li::before, #Organ .org-teams li:not(:last-child)::after{display:none;} #Organ .org-wrp{margin-top:60px;} #Organ .org-tit{margin-bottom:22px; font-size:23px;} #Organ .org-table{min-width:700px; border-spacing:0 6px;} #Organ .org-table thead th{height:54px; padding:10px 12px; font-size:15px;} #Organ .org-table tbody th, #Organ .org-table tbody td{padding:16px 12px; font-size:15px;} #Organ .org-table tbody th.cmt b{font-size:16px;} #Organ .org-table tbody th.cmt span{font-size:13px;} #Organ .person-list{gap:8px 16px;} #Organ .person b{font-size:15px;} #Organ .person em{font-size:13px;} #Organ .org-link{font-size:15px;} } /* ============================================================================ ██ 세부 아젠다(sub2_x) 리디자인 — Deep purple → magenta / grid & network motif ---------------------------------------------------------------------------- · header / footer 는 사이트 공유(head.php / tail.php) 그대로 사용 · 세부아젠다 페이지( body.agenda-page )만 표준 서브비주얼을 다크 히어로로 교체 · 리디자인 스타일은 전부 .agd-redesign 스코프로 격리 → 공유 헤더/푸터 영향 없음 · 페이지 마크업 : sub2_1.php ~ sub2_6.php (body_script 로 .agenda-page 주입) ============================================================================ */ /* ── (A) 통합 오버라이드 : 표준 서브비주얼/서브타이틀 숨김 + 콘텐츠 풀블리드 ── */ body.agenda-page{overflow-x:hidden;} /* Lenis 스무스 스크롤 (아젠다 페이지에서 init 시 html.lenis 클래스 부여됨 → 다른 페이지 무영향) */ html.lenis,html.lenis body{height:auto;} .lenis.lenis-smooth{scroll-behavior:auto !important;} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;} .lenis.lenis-stopped{overflow:hidden;} .lenis.lenis-smooth iframe{pointer-events:none;} body.agenda-page #sVisual{background:transparent; border:0;} body.agenda-page #sVisual .sVis_wr{display:none;} /* 표준 타이틀 밴드 미사용 */ body.agenda-page #sContWrap{min-height:0;} body.agenda-page #sContWrap .sCont{max-width:none; width:100%; padding:0; margin:0;} body.agenda-page #subTitle{display:none;} /* 히어로가 타이틀 역할 */ /* ── (B) 다크 히어로 위 공유 헤더 : 흰 로고 + 밝은 메뉴 (스크롤 고정 시엔 기본 밝은 바) ── */ /* 나브 진입 애니메이션(-80px)으로 로고 상단이 잘리는 문제 방지 → 정위치 고정 */ body.agenda-page #header .nav{transform:translate(-50%,0);} body.agenda-page #header .cs-logo a img.logo_w{display:block;} body.agenda-page #header .cs-logo a img.logo_b{display:none;} /* 별도 흰색 로고 이미지가 없어(logo_w=logo_b=어두운 logo.png) 다크 히어로에 묻힘 → 흰색 반전. 스크롤 고정(.top-fixed) 흰 바에선 필터 해제해 원본 어두운 로고 유지 */ body.agenda-page #header:not(.top-fixed) .cs-logo a img{filter:brightness(0) invert(1);} body.agenda-page #header:not(.top-fixed) #cssmenu > ul > li > a{color:#fff;} body.agenda-page #header:not(.top-fixed) #cssmenu > ul > li > a .on{color:#fff;} body.agenda-page #header:not(.top-fixed) #cssmenu > ul > li > a:hover{color:#fff; background:rgba(255,255,255,.14);} body.agenda-page #header:not(.top-fixed) .nav-right .lang_box a, body.agenda-page #header:not(.top-fixed) .nav-right .lang_box a p{color:#fff;} body.agenda-page #header:not(.top-fixed) .util ul.util_l li a{color:#fff;} body.agenda-page #header:not(.top-fixed) .nav h1.pc-menu button.pc-sm .hambergerIcon::before, body.agenda-page #header:not(.top-fixed) .nav h1.pc-menu button.pc-sm .hambergerIcon::after{background:#fff;} /* ── (C) 스코프 변수 & 리셋 (사이트 전역 오염 방지) ── */ .agd-redesign{ --ink:#17101a; --ink-soft:#4c3b50; --ink-mute:#8a7a8e; --purple-950:#20081f; --purple-900:#2e0d30; --purple-800:#3f1341; --purple-700:#551b56; --purple-500:#772278; --magenta:#9d2b9f; --magenta-soft:#d6a0d8; --orange:#a534a7; --paper:#fbf9fc; --paper-2:#f4eef6; --line:rgba(85,27,86,.14); --grid:rgba(85,27,86,.055); --grad:linear-gradient(96deg,#772278 0%,#9d2b9f 60%,#a534a7 130%); --ease-out:cubic-bezier(.19,1,.22,1); --ease-io:cubic-bezier(.77,0,.18,1); --kor:'Pretendard Variable',Pretendard,'Malgun Gothic',sans-serif; --eng:'Archivo','Pretendard Variable',sans-serif; --serif:'Cormorant Garamond',Baskervville,serif; font-family:var(--kor); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; word-break:keep-all; position:relative; text-align:left; /* 사이트 래퍼(.sCont 등)에서 상속되는 정렬 무력화 → 인트로 타이틀 좌측 정렬 */ } .agd-redesign *{margin:0; padding:0; box-sizing:border-box;} .agd-redesign a{color:inherit; text-decoration:none;} .agd-redesign ul{list-style:none;} .agd-redesign img{max-width:100%; display:block;} .agd-redesign ::selection{background:var(--magenta); color:#fff;} .agd-redesign section{position:relative;} /* ── helpers ── */ .agd-redesign .wrap{width:min(1600px,92vw); margin:0 auto;} .agd-redesign .eyebrow{display:inline-flex; align-items:center; gap:12px; font-family:var(--eng); font-weight:600; font-size:16px; letter-spacing:.22em; text-transform:uppercase; color:var(--purple-500);} .agd-redesign .eyebrow::before{content:''; width:34px; height:1px; background:var(--grad);} .agd-redesign .eyebrow .ko{font-family:var(--kor); font-weight:700; letter-spacing:.08em;} /* scroll reveal */ .agd-redesign .rv{opacity:0; transform:translateY(46px); transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);} .agd-redesign .rv.on{opacity:1; transform:none;} .agd-redesign .rv-d1{transition-delay:.08s;} .agd-redesign .rv-d2{transition-delay:.18s;} .agd-redesign .rv-d3{transition-delay:.28s;} .agd-redesign .rv-d4{transition-delay:.38s;} /* ============ HERO (서브비주얼) ============ */ .agd-redesign .hero{ position:relative; height:100svh; min-height:560px; transition:height 1.25s var(--ease-io),min-height 1.25s var(--ease-io); display:flex; flex-direction:column; justify-content:flex-end; background: radial-gradient(1100px 700px at 82% -10%,rgba(157,43,159,.28),transparent 62%), radial-gradient(900px 640px at -8% 108%,rgba(165,52,167,.16),transparent 55%), linear-gradient(158deg,var(--purple-950) 0%,var(--purple-900) 38%,var(--purple-800) 72%,#2a0f33 100%); color:#fff; overflow:hidden; } /* ── 몇 초 뒤 서브비주얼이 슬림 탭 바(181px)로 줄어드는 collapse 모션 ── */ .agd-redesign .hero.away{height:181px; min-height:181px;} .agd-redesign .hero.away .hero-in{transform:translateY(-52vh); opacity:0; pointer-events:none;} .agd-redesign .hero.away .scroll-cue{opacity:0; transition:opacity .4s;} .agd-redesign .hero.away::before{opacity:0; transition:opacity 1s;} .agd-redesign .hero.away #net{opacity:0; transition:opacity 1s;} .agd-redesign .hero::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:40px 40px; -webkit-mask-image:radial-gradient(closest-side at 55% 45%,#000 20%,transparent 100%); mask-image:radial-gradient(closest-side at 55% 45%,#000 20%,transparent 100%); animation:agdGridDrift 26s linear infinite; } @keyframes agdGridDrift{to{background-position:40px 40px,40px 40px;}} .agd-redesign #net{position:absolute; inset:0; width:100%; height:100%; opacity:.9;} .agd-redesign .hero-in{position:relative; z-index:3; padding:0 0 clamp(150px,17vh,190px); transition:transform 1.15s var(--ease-io),opacity .7s ease;} .agd-redesign .crumb{display:inline-flex; align-items:center; gap:10px; font-size:16px; font-family:var(--eng); letter-spacing:.16em; font-weight:600; color:rgba(255,255,255,.55); text-transform:uppercase; margin-bottom:34px;} .agd-redesign .crumb i{width:5px; height:5px; border-radius:50%; background:var(--magenta);} .agd-redesign .hero-num{display:flex; align-items:center; gap:18px; margin-bottom:10px;} .agd-redesign .hero-num .n{font-family:var(--eng); font-weight:700; font-size:16px; letter-spacing:.3em; color:var(--magenta-soft);} .agd-redesign .hero-num .bar{height:1px; width:0; background:var(--grad); animation:agdBarGrow 1.4s var(--ease-io) .9s forwards;} @keyframes agdBarGrow{to{width:120px;}} .agd-redesign .hero-tit{font-size:clamp(58px,8.6vw,128px); font-weight:900; letter-spacing:-.02em; line-height:1.04;} .agd-redesign .hero-tit .wd{display:inline-block; overflow:hidden; vertical-align:bottom;} .agd-redesign .hero-tit .wd>span{display:inline-block; transform:translateY(112%); transition:transform 1s var(--ease-out);} .agd-redesign .hero-tit.on .wd>span{transform:none;} .agd-redesign .hero-tit .wa>span{font-weight:200; font-size:.62em; color:rgba(255,255,255,.55); padding:0 .16em; vertical-align:.06em;} .agd-redesign .hero-tit .w2>span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;} .agd-redesign .hero-sub{margin-top:30px; font-size:clamp(16px,1.45vw,21px); line-height:1.85; color:rgba(255,255,255,.78); font-weight:400;} .agd-redesign .hero-sub b{color:#fff; font-weight:700;} .agd-redesign .hero-sub .hl{position:relative; color:var(--magenta-soft); font-weight:700; white-space:nowrap;} .agd-redesign .hero-sub .hl::after{content:''; position:absolute; left:0; right:0; bottom:2px; height:38%; background:rgba(157,43,159,.22); z-index:-1;} .agd-redesign .hero-bottom{position:absolute; left:0; right:0; bottom:0; z-index:3; border-top:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); animation:agdTabsIn 1.1s var(--ease-io) .95s both;} @keyframes agdTabsIn{from{transform:translateY(101%); opacity:0;}to{transform:none; opacity:1;}} .agd-redesign .agenda-tabs{display:flex; overflow-x:auto; scrollbar-width:none;} .agd-redesign .agenda-tabs::-webkit-scrollbar{display:none;} .agd-redesign .agenda-tabs a{flex:1 0 auto; min-width:180px; padding:22px 26px 26px; position:relative; border-right:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.5); transition:.35s;} .agd-redesign .agenda-tabs a:first-child{border-left:1px solid rgba(255,255,255,.12);} .agd-redesign .agenda-tabs a .no{display:block; font-family:var(--eng); font-size:16px; font-weight:700; letter-spacing:.24em; margin-bottom:8px; color:rgba(255,255,255,.4);} .agd-redesign .agenda-tabs a .nm{font-size:16px; font-weight:600;} .agd-redesign .agenda-tabs a::before{content:''; position:absolute; left:0; top:-1px; height:3px; width:100%; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-io);} .agd-redesign .agenda-tabs a:hover{color:#fff; background:rgba(255,255,255,.05);} .agd-redesign .agenda-tabs a.cur{color:#fff; background:linear-gradient(180deg,rgba(157,43,159,.14),transparent);} .agd-redesign .agenda-tabs a.cur::before, .agd-redesign .agenda-tabs a:hover::before{transform:scaleX(1);} .agd-redesign .agenda-tabs a.cur .no{color:var(--magenta-soft);} .agd-redesign .scroll-cue{position:absolute; right:4.5vw; bottom:130px; z-index:4; display:flex; flex-direction:column; align-items:center; gap:12px; font-family:var(--eng); font-size:16px; letter-spacing:.3em; color:rgba(255,255,255,.55);} .agd-redesign .scroll-cue .ln{width:1px; height:64px; background:rgba(255,255,255,.2); overflow:hidden; position:relative;} .agd-redesign .scroll-cue .ln::after{content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--grad); animation:agdCue 2s var(--ease-io) infinite;} @keyframes agdCue{to{top:100%;}} @media(max-width:768px){.agd-redesign .scroll-cue{display:none;}} /* ══ 세부 아젠다 히어로 : 다크 → 밝은 서브비주얼 (시안 아젠다소개02, 2026-08-13) ══ 히어로 배경만 밝게 + 그에 맞춰 텍스트/탭/상단 헤더를 다크로 전환 (전체 sub2_x 적용) */ .agd-redesign .hero{ color:var(--ink); background: radial-gradient(1100px 700px at 82% -10%,rgba(157,43,159,.16),transparent 62%), radial-gradient(900px 640px at -8% 108%,rgba(165,52,167,.12),transparent 55%), linear-gradient(158deg,#fdf9fd 0%,#f5edf7 42%,#efe2f3 78%,#efe4f4 130%); } .agd-redesign .hero::before{background-image:linear-gradient(rgba(85,27,86,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(85,27,86,.06) 1px,transparent 1px);} .agd-redesign #net{opacity:.72;} .agd-redesign .crumb{color:var(--ink-mute);} .agd-redesign .hero-num .n{color:var(--purple-500);} .agd-redesign .hero-tit .wa>span{color:var(--ink-soft);} .agd-redesign .hero-sub{color:var(--ink-soft);} .agd-redesign .hero-sub b{color:var(--ink);} .agd-redesign .hero-sub .hl{color:var(--purple-500);} .agd-redesign .hero-sub .hl::after{background:rgba(157,43,159,.16);} .agd-redesign .scroll-cue{color:var(--ink-mute);} .agd-redesign .scroll-cue .ln{background:var(--line);} .agd-redesign .hero-bottom{border-top:1px solid var(--line);} .agd-redesign .agenda-tabs a{border-right:1px solid var(--line); color:var(--ink-mute);} .agd-redesign .agenda-tabs a:first-child{border-left:1px solid var(--line);} .agd-redesign .agenda-tabs a .no{color:var(--ink-mute);} .agd-redesign .agenda-tabs a:hover{color:var(--ink); background:rgba(119,34,120,.05);} .agd-redesign .agenda-tabs a.cur{color:var(--purple-500); background:linear-gradient(180deg,rgba(157,43,159,.10),transparent);} .agd-redesign .agenda-tabs a.cur .no{color:var(--purple-500);} /* 상단 헤더 : 밝은 히어로 위이므로 로고/메뉴/햄버거를 다크로 (기존 흰색 강제 해제) */ body.agenda-page #header .cs-logo a img.logo_w{display:none;} body.agenda-page #header .cs-logo a img.logo_b{display:block;} body.agenda-page #header:not(.top-fixed) .cs-logo a img{filter:none;} body.agenda-page #header:not(.top-fixed) #cssmenu > ul > li > a, body.agenda-page #header:not(.top-fixed) #cssmenu > ul > li > a .on{color:#1a1220;} body.agenda-page #header:not(.top-fixed) #cssmenu > ul > li > a:hover{color:#772278; background:rgba(119,34,120,.06);} body.agenda-page #header:not(.top-fixed) .nav-right .lang_box a, body.agenda-page #header:not(.top-fixed) .nav-right .lang_box a p, body.agenda-page #header:not(.top-fixed) .util ul.util_l li a{color:#1a1220;} body.agenda-page #header:not(.top-fixed) .nav h1.pc-menu button.pc-sm .hambergerIcon::before, body.agenda-page #header:not(.top-fixed) .nav h1.pc-menu button.pc-sm .hambergerIcon::after{background:#1a1220;} /* ============ SECTION COMMON ============ */ .agd-redesign .sec-head{margin-bottom:clamp(48px,6vw,84px);} .agd-redesign .sec-tit{margin-top:20px; font-size:clamp(34px,4.6vw,62px); font-weight:900; letter-spacing:-.02em; line-height:1.16;text-align: left;} .agd-redesign .sec-tit .thin{font-weight:300; color:var(--ink-soft);} /* ============ INTRO ============ */ .agd-redesign .intro{ padding:clamp(110px,14vw,190px) 0 clamp(90px,10vw,150px); background: linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px), linear-gradient(180deg,#fff 0%,var(--paper) 30%,var(--paper-2) 100%); background-size:40px 40px,40px 40px,100% 100%; } .agd-redesign .intro-grid{display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(40px,6vw,110px); align-items:start;} .agd-redesign .intro-left{position:sticky; top:130px;} .agd-redesign .intro-left .big-word{margin-top:34px; font-family:var(--eng); font-weight:800; font-size:clamp(16px,1.2vw,17px); letter-spacing:.26em; color:var(--ink-mute);} .agd-redesign .intro-statement{font-size:clamp(24px,2.6vw,40px); font-weight:700; line-height:1.62; letter-spacing:-.01em;} .agd-redesign .intro-statement .mk{ background:linear-gradient(96deg,rgba(157,43,159,.24),rgba(165,52,167,.24)) left bottom / 0% 34% no-repeat; transition:background-size 1.2s var(--ease-io) .3s; padding:0 .04em; } .agd-redesign .intro-statement.on .mk{background-size:100% 34%;} .agd-redesign .intro-statement .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900;} .agd-redesign .intro-desc{margin-top:34px; font-size:17px; line-height:2; color:var(--ink-soft); max-width:56ch;} /* 01-03 node cards */ .agd-redesign .values{margin-top:clamp(70px,8vw,132px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.6vw,26px); position:relative;} .agd-redesign .vcard{position:relative; z-index:1; overflow:hidden; padding:104px clamp(26px,2.4vw,40px) clamp(34px,3.2vw,48px); background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(251,249,252,.82)); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:22px; transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s;} .agd-redesign .vcard .dots{position:absolute; right:-26px; bottom:-26px; width:130px; height:130px; opacity:.5; pointer-events:none; background-image:radial-gradient(rgba(85,27,86,.32) 1.3px,transparent 1.5px); background-size:11px 11px; border-radius:50%; -webkit-mask-image:radial-gradient(circle,#000 32%,transparent 72%); mask-image:radial-gradient(circle,#000 32%,transparent 72%); transition:.25s;} .agd-redesign .vcard:hover .dots{transform:rotate(20deg) scale(1.12); opacity:.8;} .agd-redesign .v-glyph{position:absolute; top:40px; left:clamp(26px,2.4vw,40px); width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--paper); box-shadow:0 0 0 7px var(--paper);} .agd-redesign .v-glyph svg{width:44px; height:44px; overflow:visible;} .agd-redesign .v-glyph .vg-orb{fill:none; stroke:rgba(119,34,120,.4); stroke-width:1.1; stroke-dasharray:3 5; transform-box:fill-box; transform-origin:center; animation:agdOrb 16s linear infinite;} .agd-redesign .v-glyph .vg-nd{fill:var(--magenta);} .agd-redesign .v-glyph .vg-nd.alt{fill:var(--purple-500);} .agd-redesign .v-glyph .vg-lk{stroke:var(--purple-500); stroke-width:1.5; stroke-linecap:round; fill:none; opacity:.85;} .agd-redesign .v-no{position:absolute; top:44px; right:clamp(24px,2.4vw,38px); font-family:var(--eng); font-weight:800; font-size:clamp(38px,3.6vw,54px); line-height:1; color:transparent; -webkit-text-stroke:1.3px rgba(85,27,86,.16); transition:.25s;} .agd-redesign .vcard h3{font-size:clamp(21px,1.9vw,28px); font-weight:800; letter-spacing:-.01em; margin-bottom:18px;} .agd-redesign .vcard p{font-size:clamp(16px,1.12vw,16.5px); line-height:1.95; color:var(--ink-soft);} .agd-redesign .vcard p b{color:var(--ink); font-weight:700;} .agd-redesign .vcard:hover{transform:translateY(-9px); box-shadow:0 42px 84px -38px rgba(85,27,86,.42); border-color:rgba(157,43,159,.35);} .agd-redesign .vcard:hover .v-no{-webkit-text-stroke-color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text;} @media(max-width:920px){ .agd-redesign .intro-grid{grid-template-columns:1fr;} .agd-redesign .intro-left{position:static;} .agd-redesign .values{grid-template-columns:1fr; gap:16px;} } /* ============ RELEVANCE ============ */ .agd-redesign .relv{ color:#fff; padding:clamp(120px,15vw,210px) 0; background: radial-gradient(1000px 600px at 88% 18%,rgba(157,43,159,.20),transparent 60%), radial-gradient(760px 560px at 4% 88%,rgba(85,27,86,.55),transparent 65%), linear-gradient(196deg,#170718 0%,var(--purple-950) 40%,#1d0b26 100%); overflow:hidden; } .agd-redesign .relv .aurora{position:absolute; width:56vw; height:56vw; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none;} .agd-redesign .relv .a1{background:radial-gradient(circle,rgba(119,34,120,.5),transparent 65%); top:-18%; right:-12%; animation:agdAur 16s ease-in-out infinite alternate;} .agd-redesign .relv .a2{background:radial-gradient(circle,rgba(63,19,90,.85),transparent 60%); bottom:-26%; left:-14%; animation:agdAur 20s ease-in-out -8s infinite alternate-reverse;} @keyframes agdAur{from{transform:translate(0,0) scale(1);}to{transform:translate(-6%,7%) scale(1.16);}} .agd-redesign .relv .wrap{position:relative; z-index:2; display:grid; grid-template-columns:.9fr 1.5fr; gap:clamp(40px,6vw,100px);} .agd-redesign .relv .eyebrow{color:var(--magenta-soft);} .agd-redesign .relv-tit{margin-top:22px; font-size:clamp(36px,4.4vw,58px); font-weight:900; line-height:1.2; letter-spacing:-.02em;} .agd-redesign .relv-tit .serif{font-family:var(--serif); font-style:italic; font-weight:400; display:block; font-size:.62em; color:rgba(255,255,255,.42); letter-spacing:.02em; margin-top:14px;} .agd-redesign .relv-quote{position:relative; padding-left:clamp(26px,3vw,44px);} .agd-redesign .relv-quote::before{content:''; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg,var(--magenta),rgba(157,43,159,0)); transform:scaleY(0); transform-origin:top; transition:transform 1.6s var(--ease-io) .2s;} .agd-redesign .relv-quote.on::before{transform:scaleY(1);} .agd-redesign .relv-quote p{font-size:clamp(18px,1.75vw,25px); line-height:2.06; font-weight:350; color:rgba(255,255,255,.82);} .agd-redesign .relv-quote p+p{margin-top:1.4em;} .agd-redesign .relv-quote b{color:#fff; font-weight:800;} .agd-redesign .relv-quote .hl{background:linear-gradient(96deg,#e879d6 0%,#ff8ee2 52%,#ffc2f0 120%); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800;} .agd-redesign .relv-quote .line{display:block;} .agd-redesign .relv-quote .w{opacity:.15; transition:opacity .45s ease;} .agd-redesign .relv-quote .w.lit{opacity:1;} .agd-redesign .relv-kw{margin-top:56px; display:flex; flex-wrap:wrap; gap:16px;} .agd-redesign .relv-kw span{font-family:var(--eng); font-size:clamp(16px,1.5vw,21px); font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:16px 32px; border:1.5px solid rgba(255,255,255,.22); border-radius:100px; color:rgba(255,255,255,.78); transition:.35s; cursor:default;} .agd-redesign .relv-kw span:hover{border-color:var(--magenta); color:#fff; background:linear-gradient(96deg,rgba(157,43,159,.22),rgba(165,52,167,.14)); box-shadow:0 14px 34px -16px rgba(157,43,159,.5); transform:translateY(-3px);} @media(max-width:920px){.agd-redesign .relv .wrap{grid-template-columns:1fr;}} /* ============ ROADMAP (연구내용 및 계획) ============ */ .agd-redesign .plan{ padding:clamp(120px,14vw,200px) 0 clamp(120px,13vw,180px); background: linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px), linear-gradient(180deg,var(--paper) 0%,#fff 55%,var(--paper-2) 100%); background-size:40px 40px,40px 40px,100% 100%; overflow:hidden; } .agd-redesign .plan .sec-head{text-align:center;} .agd-redesign .plan .eyebrow{justify-content:center;} .agd-redesign .plan .eyebrow::after{content:''; width:34px; height:1px; background:var(--grad);} .agd-redesign .timeline{position:relative; max-width:1600px; margin:0 auto;} .agd-redesign .tl-thread{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;} .agd-redesign .tl-thread .t-bg{fill:none; stroke:rgba(85,27,86,.18); stroke-width:1.5; stroke-dasharray:2 7; stroke-linecap:round;} .agd-redesign .tl-thread .t-fill{fill:none; stroke:url(#tgrad); stroke-width:2.5; stroke-linecap:round; filter:drop-shadow(0 0 7px rgba(157,43,159,.45));} .agd-redesign .t-comet{fill:rgba(157,43,159,.30);} .agd-redesign .t-comet-core{fill:#fff; filter:drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 0 14px rgba(157,43,159,.8));} .agd-redesign .tl-item{position:relative; width:calc(50% - 100px); padding:4px 0 clamp(64px,7vw,110px);} .agd-redesign .tl-item:nth-child(even){margin-right:auto; text-align:right;} .agd-redesign .tl-item:nth-child(odd){margin-left:auto;} .agd-redesign .tl-item:last-child{padding-bottom:10px;} .agd-redesign .tl-badge{position:absolute; top:22px; width:66px; height:66px; border-radius:50%; z-index:2; background:#fff; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -14px rgba(85,27,86,.30); transition:border-color .5s,box-shadow .5s,transform .5s var(--ease-out);} .agd-redesign .tl-item:nth-child(even) .tl-badge{right:-133px;} .agd-redesign .tl-item:nth-child(odd) .tl-badge{left:-133px;} .agd-redesign .tl-badge svg{width:40px; height:40px; overflow:visible;} .agd-redesign .tl-badge .nd{fill:var(--magenta); transform:scale(0); transform-box:fill-box; transform-origin:center; transition:transform .55s var(--ease-out);} .agd-redesign .tl-badge .nd.alt{fill:var(--purple-500);} .agd-redesign .tl-badge .lk{stroke:var(--purple-500); stroke-width:1.6; stroke-linecap:round; fill:none; stroke-dasharray:60; stroke-dashoffset:60; transition:stroke-dashoffset .9s var(--ease-io) .3s; opacity:.85;} .agd-redesign .tl-badge .orb{fill:none; stroke:rgba(119,34,120,.4); stroke-width:1.2; stroke-dasharray:3 5; transform-box:fill-box; transform-origin:center; animation:agdOrb 14s linear infinite;} @keyframes agdOrb{to{transform:rotate(360deg);}} .agd-redesign .tl-item.on .tl-badge{border-color:var(--magenta); transform:scale(1.04); box-shadow:0 16px 38px -14px rgba(157,43,159,.45);} .agd-redesign .tl-item.on .tl-badge .nd{transform:scale(1);} .agd-redesign .tl-item.on .tl-badge .nd:nth-of-type(2){transition-delay:.12s;} .agd-redesign .tl-item.on .tl-badge .nd:nth-of-type(3){transition-delay:.24s;} .agd-redesign .tl-item.on .tl-badge .nd:nth-of-type(4){transition-delay:.36s;} .agd-redesign .tl-item.on .tl-badge .nd:nth-of-type(5){transition-delay:.48s;} .agd-redesign .tl-item.on .tl-badge .nd:nth-of-type(6){transition-delay:.6s;} .agd-redesign .tl-item.on .tl-badge .lk{stroke-dashoffset:0;} .agd-redesign .tl-item.on .tl-badge::after{content:''; position:absolute; inset:-9px; border-radius:50%; border:1.5px solid rgba(157,43,159,.55); animation:agdKnot 2.4s ease-out infinite;} @keyframes agdKnot{from{transform:scale(.75); opacity:.9;}to{transform:scale(1.55); opacity:0;}} .agd-redesign .tl-card{display:inline-block; text-align:left; width:100%; background:rgba(255,255,255,.8); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:24px; padding:clamp(30px,3.4vw,46px); position:relative; overflow:hidden; transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s;} .agd-redesign .tl-card:hover{transform:translateY(-10px); box-shadow:0 40px 80px -34px rgba(85,27,86,.38); border-color:rgba(157,43,159,.35);} .agd-redesign .tl-card .dots{position:absolute; right:-30px; top:-30px; width:150px; height:150px; opacity:.5; background-image:radial-gradient(rgba(85,27,86,.35) 1.4px,transparent 1.6px); background-size:12px 12px; border-radius:50%; -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 72%); mask-image:radial-gradient(circle,#000 30%,transparent 72%); transition:.5s;} .agd-redesign .tl-card:hover .dots{transform:rotate(24deg) scale(1.12); opacity:.85;} .agd-redesign .tl-chip{display:inline-flex; align-items:center; gap:8px; font-family:var(--eng); font-size:16px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--purple-500); background:rgba(119,34,120,.09); padding:8px 16px; border-radius:100px; margin-bottom:20px;} .agd-redesign .tl-chip i{width:6px; height:6px; border-radius:50%; background:var(--grad);} .agd-redesign .tl-card h3{font-size:clamp(24px,2.2vw,32px); font-weight:900; letter-spacing:-.02em; margin-bottom:8px;} .agd-redesign .tl-card h4{font-size:clamp(16px,1.3vw,18px); font-weight:700; line-height:1.6; margin-bottom:22px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;} .agd-redesign .tl-card li{position:relative; padding:9px 0 9px 24px; font-size:16px; line-height:1.8; color:var(--ink-soft); border-top:1px dashed rgba(85,27,86,.14);} .agd-redesign .tl-card li:first-child{border-top:0;} .agd-redesign .tl-card li::before{content:''; position:absolute; left:2px; top:20px; width:7px; height:7px; border-radius:50%; background:var(--magenta); opacity:.75;} .agd-redesign .tl-card li b{color:var(--ink); font-weight:700;} .agd-redesign .tl-card .plan-figure{position:absolute; top:22px; right:22px; width:160px; height:160px; transform:scale(.66); transform-origin:top right; pointer-events:none; opacity:.6; z-index:0;} .agd-redesign .tl-card .plan-figure[data-figure="halftone"]{transform:scale(.57);} .agd-redesign .tl-card .plan-figure[data-figure="silver"]{transform:scale(.62);} .agd-redesign .tl-card .tl-chip, .agd-redesign .tl-card h3, .agd-redesign .tl-card h4, .agd-redesign .tl-card ul{position:relative; z-index:1;} .agd-redesign .fig-dot{position:absolute; border-radius:50%; background:#551b56;} @keyframes agdFigSpin{to{transform:rotate(360deg);}} .agd-redesign .fig-orbit{position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; animation:agdFigSpin 8s infinite linear;} .agd-redesign .fig-silver{position:absolute; top:0; left:0; width:100%; height:100%; transform-origin:center; animation:agdFigSpin 25s infinite reverse linear;} .agd-redesign .fig-silver .fig-dot{animation:agdFigSilverPulse 3s infinite ease-in-out;} @keyframes agdFigSilverPulse{0%,100%{opacity:.2; transform:scale(.7);}50%{opacity:1; transform:scale(1.3);}} .agd-redesign .fig-halftone{position:absolute; top:0; left:0; width:100%; height:100%; transform-origin:center; animation:agdFigSpin 20s infinite linear;} .agd-redesign .fig-halftone .fig-dot{animation:agdFigHalftoneFade 4s infinite ease-in-out;} @keyframes agdFigHalftoneFade{0%,100%{opacity:.3; transform:scale(.5);}50%{opacity:1; transform:scale(1);}} .agd-redesign .fig-lines{position:absolute; top:0; left:0; width:100%; height:100%; transform-origin:center; animation:agdFigSpin 8s infinite linear;} .agd-redesign .fig-line{position:absolute; left:50%; top:50%; height:1px; background:#ccc; transform-origin:left center; animation:agdFigExpandLine 4s infinite ease-in-out;} @keyframes agdFigExpandLine{0%{width:0; opacity:0;}20%,80%{width:70px; opacity:1;}100%{width:0; opacity:0;}} @media(max-width:860px){ .agd-redesign .tl-card .plan-figure{transform:scale(.48);} .agd-redesign .tl-card .plan-figure[data-figure="halftone"]{transform:scale(.41);} .agd-redesign .tl-card .plan-figure[data-figure="silver"]{transform:scale(.45);} .agd-redesign .tl-item{width:auto; margin-left:44px !important; margin-right:0 !important; text-align:left !important;} .agd-redesign .tl-item .tl-badge{left:-56px !important; right:auto !important; width:48px; height:48px;} .agd-redesign .tl-item .tl-badge svg{width:30px; height:30px;} } /* ============ MARQUEE ============ */ .agd-redesign .marq{padding:34px 0; background:var(--purple-950); color:#fff; overflow:hidden; border-top:1px solid rgba(255,255,255,.08); position:relative;} .agd-redesign .marq .row{display:flex; width:100%; justify-content:center; flex-wrap:wrap;} .agd-redesign .marq span{font-family:var(--eng); font-weight:800; font-size:clamp(23px,2.4vw,32px); letter-spacing:.04em; padding:0 34px; white-space:nowrap; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.4); display:flex; align-items:center; gap:34px;} .agd-redesign .marq span em{font-family:var(--kor); font-style:normal; font-weight:800; -webkit-text-stroke:0; color:#fff; font-size:.72em;} .agd-redesign .marq span i{font-style:normal; color:var(--magenta); -webkit-text-stroke:0; font-size:.8em;} /* ============ PAGER ============ */ .agd-redesign .pager{display:grid; grid-template-columns:1fr 1fr; background:var(--purple-900);} .agd-redesign .pager a{padding:clamp(40px,5vw,72px) 5vw; color:#fff; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; transition:.4s;} .agd-redesign .pager a+a{border-left:1px solid rgba(255,255,255,.1);} .agd-redesign .pager a::before{content:''; position:absolute; inset:0; background:var(--grad); opacity:0; transition:.45s;} .agd-redesign .pager a:hover::before{opacity:.16;} .agd-redesign .pager .dir{font-family:var(--eng); font-size:16px; font-weight:700; letter-spacing:.26em; color:rgba(255,255,255,.5); text-transform:uppercase; display:flex; align-items:center; gap:10px;} .agd-redesign .pager .ttl{font-size:clamp(20px,2vw,28px); font-weight:800; position:relative; z-index:1;} .agd-redesign .pager .next{text-align:right; align-items:flex-end;} .agd-redesign .pager .arr{display:inline-block; transition:transform .4s var(--ease-out);} .agd-redesign .pager a:hover .arr.r{transform:translateX(8px);} .agd-redesign .pager a:hover .arr.l{transform:translateX(-8px);} /* reduced motion */ @media (prefers-reduced-motion: reduce){ .agd-redesign *,.agd-redesign *::before,.agd-redesign *::after{animation:none !important; transition:none !important;} .agd-redesign .rv{opacity:1 !important; transform:none !important;} .agd-redesign .hero-tit .wd>span{transform:none !important;} .agd-redesign .intro-statement .mk{background-size:100% 34% !important;} .agd-redesign .relv-quote::before{transform:scaleY(1) !important;} } /* ██ 세부 아젠다 리디자인 끝 ██ */ /* lnb 마지막 칸 오른쪽 마감 : 3차 칸 제거 후 잘린 단면이 드러나 우측 테두리+라운드로 닫는다 (2026-08-11) */ .lnb .lnb-map li.depth:last-child{border-right:2px solid #772278; border-radius:0 50px 50px 0;}