@charset "utf-8"; /* ======================================================== * 서브 공통 레이아웃 (메인페이지 디자인 언어와 통일) * - 비주얼 : 메인비주얼과 동일한 16px 인셋 + 라운드 30px 다크 카드 * - 컨테이너 : min(calc(100% - 80px), var(--sub-width)) — 기본 1600px, 좌우 여백 40px * - 타이포 : 영문 DM Sans(--font-family2) / 국문 Pretendard(--font-family1) ======================================================== */ #allWrap.sub{background:#f2f2f2;} #subContainer{position:relative;background:transparent;} /* ************************** 서브 비주얼 ****************************** */ .subVisual{position:relative;z-index:1;height:var(--sub-visual-height);margin:var(--header-height) 16px 0;overflow:visible;} .subVisual .subVisualImg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;border-radius:30px;background:#000;z-index:0;pointer-events:none;} /* 배경 고정 : fixed 는 transform 이 걸린 요소에서는 무시된다. 그래서 서서히 줌아웃하던 효과(scale)는 뺐다. 아래 .subVisualN 의 background 한 줄짜리가 attachment 를 scroll 로 되돌리므로 !important 로 둔다 */ .subVisual .subVisualImg .visual-inner{position:relative;width:100%;height:100%;background-size:cover !important;background-attachment:fixed !important;opacity:.85;} .subVisual .subVisualImg .visual-inner:before{content:"";position:absolute;left:0;top:0;z-index:1;display:block;width:100%;height:100%;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.05) 100%);} .subVisual .subVisualImg .visual-inner.subVisual1{background:url("/images/sub/visual1.jpg") no-repeat 50% 50%;} .subVisual .subVisualImg .visual-inner.subVisual2{background:url("/images/sub/visual2.jpg") no-repeat 50% 50%;} .subVisual .subVisualImg .visual-inner.subVisual3{background:url("/images/sub/visual3.jpg") no-repeat 50% 50%;} .subVisual .subVisualImg .visual-inner.subVisual4{background:url("/images/sub/visual4.jpg") no-repeat 50% 50%;} .subVisual .subVisualImg .visual-inner.subVisual5{background:url("/images/sub/visual5.jpg") no-repeat 50% 50%;} /* 6 · 7 은 로그인 · 회원가입 페이지용. 전용 이미지가 없어 visual1 을 같이 쓴다 (visual1~5 도 모두 같은 그림) */ .subVisual .subVisualImg .visual-inner.subVisual6, .subVisual .subVisualImg .visual-inner.subVisual7{background:url("/images/sub/visual1.jpg") no-repeat 50% 50%;} /* 터치 기기(특히 iOS 사파리)는 fixed 배경을 지원하지 않고 이미지를 크게 확대해 버려서 원래대로 함께 스크롤되게 둔다 */ @media (hover:none), (max-width:1024px){ .subVisual .subVisualImg .visual-inner{background-attachment:scroll !important;} } /* 비주얼 텍스트 : 메인비주얼(.mainVisualText) 과 같은 폭·정렬 */ .subVisualText{position:absolute;left:50%;top:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:min(calc(100% - 80px),var(--sub-width));height:100%;padding-bottom: 90px;color:#fff;transform:translateX(-50%);box-sizing:border-box;} /* 본문 머리 : 제목 한 줄, 가운데 정렬 */ #subContents .subHead{display:flex;align-items:center;justify-content:center;width:100%;margin:0 0 48px;} #subContents .subHead.noTitle{display:none;} /* :empty 는 공백 텍스트 노드 때문에 안 걸린다 */ /* 3뎁스 탭 : 제목 아래 격자. 칸 테두리를 1px 겹쳐 표처럼 붙인다(hychem #bo_cate 와 같은 방식). overflow:hidden 으로 자르면 모서리 선이 사라지므로, 레퍼런스처럼 모서리 칸에 직접 라운드를 준다. 다만 항목 수와 단수가 페이지마다 달라 nth-child 로 고정할 수 없어, 아래 스크립트가 네 모서리에 해당하는 칸에만 tl/tr/bl/br 을 달아 준다. */ #subContents .subTabs{margin: 0 0 100px;} #subContents .subTabs ul{position:relative;display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;border-radius:15px;background:#f9f7f7;} #subContents .subTabs li{position:relative;display:inline-block;width:calc(20% + 1px);min-height:70px;height:auto;margin:-1px 0 0 -1px;line-height:1.5;} #subContents .subTabs a{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:70px;padding:14px 16px;border:1px solid #dfe3ea;background:#fff;color:#33383f;font-size: 21px;font-weight: 600;line-height:1.35;letter-spacing:-.7px;text-align:center;text-decoration:none;word-break:keep-all;transition:border-color .2s ease,color .2s ease,background .2s ease;box-sizing:border-box;} #subContents .subTabs a:hover{z-index:1;border-color:var(--main-color);color:var(--main-color);} /* 선택 칸은 이웃 테두리 위로 올라와야 한다. position 이 없으면 z-index 가 먹지 않아 선이 묻힌다 */ #subContents .subTabs li.on a, #subContents .subTabs li.on a:hover{z-index:2;border-color:var(--main-color);background:var(--main-color);color:#fff;font-weight: 600;} #subContents .subTabs a:focus-visible{z-index:3;outline:2px solid var(--sub-color);outline-offset:-4px;} #subContents .subTabs a i{font-weight:normal;} /* 모서리 : 한 칸이 두 모서리를 겸할 수 있어(1행·1열) 속성을 하나씩 준다 */ #subContents .subTabs li.tl a{border-top-left-radius:15px;} #subContents .subTabs li.tr a{border-top-right-radius:15px;} #subContents .subTabs li.bl a{border-bottom-left-radius:15px;} #subContents .subTabs li.br a{border-bottom-right-radius:15px;} /* head.php 가 항목 수를 is-n1 ~ is-nN 으로 붙인다. 5개보다 적으면 칸을 똑같이 나누고(2개면 5:5), 7 · 8개는 4칸씩. 좁은 화면에서는 기존 단계(3칸 · 2칸 · 1칸)를 그대로 따르도록 폭 조건을 걸었다 */ @media (min-width:769px){ #subContents .subTabs.is-n1 li{width:calc(100% + 1px);} #subContents .subTabs.is-n2 li{width:calc(50% + 1px);} #subContents .subTabs.is-n3 li{width:calc(33.3333% + 1px);} } @media (min-width:1025px){ #subContents .subTabs.is-n4 li, #subContents .subTabs.is-n7 li, #subContents .subTabs.is-n8 li{width:calc(25% + 1px);} /* 7 · 8개는 5칸이면 5+2 · 5+3 으로 끝줄이 비어 4칸씩(4+3 · 4+4) 나눈다 */ } @media (max-width:1280px){ #subContents .subTabs li{width:calc(25% + 1px);} #subContents .subTabs a{font-size:18px;} } @media (max-width:1024px){ #subContents .subTabs li{width:calc(33.3333% + 1px);} } @media (max-width:768px){ #subContents .subTabs{margin-bottom:40px;} #subContents .subTabs li{width:calc(50% + 1px);min-height:62px;} #subContents .subTabs a{min-height:62px;padding:12px 12px;font-size:17px;} } @media (max-width:520px){ #subContents .subTabs li{width:100%;min-height:54px;} #subContents .subTabs a{min-height:54px;} } .subVisualText h2{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0;padding:0;color:#fff;opacity:0;filter:blur(14px);clip-path:inset(0 100% 0 0);animation:visualTitleReveal 1.35s cubic-bezier(.16,1,.3,1) .45s forwards;} .subVisualText h2 > big{font-family:var(--font-family1);font-size: 62px;font-weight: 700;line-height:1.25;letter-spacing:-2.88px;word-break:keep-all;} .subVisualText h2 > small{font-family:var(--font-family2);font-size:20px;font-weight:600;line-height:1.4;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.78);} .subVisualText > p{margin-top:20px;font-family:var(--font-family1);font-size:19px;letter-spacing:-.5px;color:rgba(255,255,255,.82);} /* ************************** 서브 LNB (비주얼 하단 고정) ****************************** */ /* 메인의 .mainVisualKeyword 와 같은 위치·폭에 얹어 메인/서브의 시선 흐름을 맞춘다. */ .subVisualMenu{position:absolute;left:50%;bottom:34px;z-index:5;width:min(calc(100% - 80px),var(--sub-width));transform:translateX(-50%);transition:opacity .35s ease,transform .35s ease;} .subMenu{position:relative;width:100%;} .lnb{display:flex;justify-content:center;width:100%;} /* 감싸는 칸은 본문 폭 그대로 두고, 실제 알약 바(.lnb-map)만 항목 수에 맞게 줄여 가운데 놓는다 */ .lnb .lnb-map{display:inline-flex;align-items:center;flex-wrap:wrap;gap: 0;width:auto;max-width:100%;margin:0;padding:8px;list-style:none;border-radius:100px;background:rgba(255,255,255,.32);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-sizing:border-box;} .lnb .lnb-map > li{position:relative;flex:0 0 auto;} .lnb .lnb-map > li > a{display:flex;align-items:center;justify-content:center;height:var(--sub-menu-height);padding:10px 20px;border-radius:100px;color:#fff;text-decoration:none;font-weight:700;transition:background .25s ease,color .25s ease;} .lnb .lnb-map > li > a span{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-family1);font-size: 18px;line-height:1;letter-spacing: 0;white-space:nowrap;} .lnb .lnb-map > li > a span i{font-size:15px;opacity:.75;} .lnb .lnb-map > li > a:hover{background:rgba(255,255,255,.18);color:#fff;} .lnb .lnb-map > li.active > a{background:#fff;color:var(--main-color);font-weight: 700;} .lnb .lnb-map > li.has-third > a span:after{font-family:'remixicon';content:"\EA4E";font-size:19px;font-weight:400;line-height:1;opacity:.75;transition:transform .25s ease;} .lnb .lnb-map > li.has-third.open > a{background:#fff;color:var(--main-color);} .lnb .lnb-map > li.has-third.open > a span:after{transform:rotate(180deg);} .lnb .lnb-map > li.has-third > .thirdMenu{position:absolute;left:0;top:calc(100% + 12px);z-index:30;min-width:240px;margin:0;padding:10px;list-style:none;border-radius:16px;background:#fff;box-shadow:0 22px 48px rgba(0,0,0,.2);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity .28s ease,transform .28s ease,visibility .28s ease;box-sizing:border-box;} .lnb .lnb-map > li.has-third.open > .thirdMenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);} .lnb .lnb-map > li.has-third > .thirdMenu > li > a{display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:10px;color:#444;font-family:var(--font-family1);font-size:16px;font-weight:500;line-height:1.35;letter-spacing:-.5px;text-decoration:none;white-space:nowrap;transition:background .2s ease,color .2s ease;} .lnb .lnb-map > li.has-third > .thirdMenu > li > a:hover, .lnb .lnb-map > li.has-third > .thirdMenu > li > a.active{background:#eff3fb;color:var(--main-color);font-weight:600;} .lnb .lnb-map > li.has-third > .thirdMenu > li > a i{font-size:14px;opacity:.7;} /* ************************** 서브 콘텐츠 ****************************** */ #subContents{position:relative;margin: 16px 16px 0 16px;padding: 130px 0 120px;overflow:visible;background: #fff;border-radius: 30px;} /* 역사 페이지의 배경 글씨(.his-bg)를 흰 박스 안으로 가둔다. 이 페이지에만 걸린다. overflow:hidden 이 아니라 clip 이어야 한다 — hidden 은 스크롤 상자를 만들어 sticky 를 죽인다 */ #subContents:has(#History){overflow:clip;} #subContents > .area{position:relative;width:min(calc(100% - 80px),var(--sub-width));max-width:none;min-height:500px;margin:0 auto;word-break:keep-all;} #subContents.subContentsWide > .area{width:calc(100% - 80px);max-width:none;} /* 기본보다 항상 넓어야 하므로 여백을 좁게 잡는다 */ #subContents .subContentsFullBleed{width:100vw;margin-left:calc(50% - 50vw);} #subContents .subContentsFullBleed > .inner{width:min(calc(100% - 80px),var(--sub-width));margin:0 auto;} #subContents .subTitleWrap{display:flex;align-items:center;justify-content:center;gap:24px;width:100%;margin:0;text-align:center;} #subContents .subTitle{display:block;width:auto;max-width:none;margin:0;color:#111;font-family:var(--font-family1);font-size:42px;font-weight:700;line-height:1.25;letter-spacing:-2px;} #subContents .subTitleLink{position:relative;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;width:265px;height:60px;padding:0 25px;border:2px solid var(--main-color);border-radius:12px;background:#fff;color:var(--main-color);font-family:var(--font-family1);font-size:18px;font-weight:600;line-height:1;text-decoration:none;overflow:hidden;transition:.3s;box-sizing:border-box;} #subContents .subTitleLink:hover{border-color:var(--main-color);background:var(--main-color);color:#fff;} #subContents .subTitleLink i{font-size:18px;line-height:1;} .sub-board-bottom{padding-bottom:160px;} /* ---------- 3뎁스 좌측 메뉴 + 본문 2단 ---------- 세로 구분선은 메뉴 '왼쪽'에 두고, 활성 항목의 파란 바가 그 선 위를 덮는다. */ :root{ /* 서브 페이지 컨테이너 폭 : 비주얼 텍스트 · 서브메뉴 · 본문이 모두 이 값에 맞춰 정렬된다 */ --sub-width:1600px; /* 원래 hct.co.kr 과 같은 1400 이었는데, 넓은 쪽이 낫다고 해서 올렸다. 상한 없이 calc(100% - 80px) 로 두면 큰 모니터에서 글줄이 2000px 넘게 늘어나 읽기 나쁘다. */ /* .area 바깥 여백 : 풀블리드 계산에 쓴다 */ --area-gutter:calc((100vw - min(100vw - 80px, var(--sub-width))) / 2); } /* 참고 사이트처럼 메뉴 열은 문서 흐름에서 높이를 갖지 않고, 본문 상단에 맞춰 따라 내려온다 */ /* 3뎁스 메뉴가 있는 페이지 : 컨테이너를 화면 폭으로 넓혀 메뉴를 화면 왼쪽 60px 에 붙인다 */ /* 세로선은 메뉴 높이가 아니라 흰색 콘텐츠 영역 전체 높이로 긋는다 */ /* 좌측 3뎁스 메뉴를 걷어내어 .subLayout 은 단순 래퍼로만 남는다 (tail.php 가 닫는다) */ .subLayout{position:relative;} .subBody{flex:1 1 auto;min-width:0;} /* 좌측 메뉴를 침범하지 않고 오른쪽 화면 끝까지만 빠져나가는 블록 */ .bleedRight{width:auto;margin-right:calc(-1 * var(--area-gutter));} /* ************************** 스크롤 시 상단 고정 서브메뉴 ****************************** */ /* 비주얼을 지나치면 헤더 아래에 밝은 톤 LNB가 다시 붙는다. */ .subMenuDock{display:none;} .subMenuFloat{position:fixed;left:0;right:0;top:var(--sub-float-top,var(--header-height));z-index:800;display:flex;justify-content:center;width:100%;padding:12px 16px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-18px);transition:opacity .35s ease,transform .35s ease,visibility .35s ease;box-sizing:border-box;} .subMenuFloat .subMenu{width:min(calc(100% - 80px),var(--sub-width));} .subMenuFloat .lnb .lnb-map{background: rgba(222,226,232,.6);backdrop-filter: blur(20px);} .subMenuFloat .lnb .lnb-map > li > a{color:#333;} .subMenuFloat .lnb .lnb-map > li > a:hover{background:rgba(27,59,134,.08);color:var(--main-color);} .subMenuFloat .lnb .lnb-map > li.active > a, .subMenuFloat .lnb .lnb-map > li.has-third.open > a{background:var(--main-color);color:#fff;} /* 고정 바는 화면 전폭이라 투명 영역이 아래 요소(좌측 메뉴 등) 클릭을 가로챈다. 컨테이너는 계속 클릭 통과시키고, 실제 알약 바에만 클릭을 허용한다. */ body.sub-menu-pinned .subMenuFloat{opacity:1;visibility:visible;transform:translateY(0);} .subMenuFloat .subMenu{pointer-events:none;} body.sub-menu-pinned .subMenuFloat .lnb-map{pointer-events:auto;} /* ************************** 하단 ****************************** */ /* 메인(.mfooter)과 동일 : footer{padding:16px} + .department-footer 라운드 30px */ .sfooter{position:relative;z-index:20;background:transparent;} /* ************************** 반응형 ****************************** */ /* 비주얼 안 텍스트 · 서브메뉴 · 본문 컨테이너는 모두 같은 폭과 여백을 쓴다. min(calc(100% - 80px), 1400px) — 좌우 40px 씩. (좌우 라인이 어긋나지 않게) */ @media (max-width:1500px){ #subContents{padding-top:120px;} .subVisualText h2 > big{font-size:60px;letter-spacing:-2.4px;} #subContents .subTitle{font-size:40px;} } @media (max-width:1170px){ .subVisual{margin:var(--header-height) 10px 0;} .subVisualText{padding-bottom:88px;} .subVisualText h2 > big{font-size:48px;letter-spacing:-1.9px;} .subVisualText h2 > small{font-size:18px;} .lnb .lnb-map{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;} .lnb .lnb-map::-webkit-scrollbar{display:none;} .lnb .lnb-map > li > a{padding:0 18px;} #subContents{padding:80px 0 110px;} } @media (max-width:900px){ .subVisualText, .subVisualMenu, #subContents > .area, #subContents .subContentsFullBleed > .inner, .subMenuFloat .subMenu{width:calc(100% - 48px);} :root{--area-gutter:24px;} } @media (max-width:767px){ .subVisual{height:auto;min-height:var(--sub-visual-height);margin:var(--header-height) 8px 0;} .subVisual .subVisualImg{border-radius:20px;} .subVisualText{position:relative;left:auto;top:auto;width:calc(100% - 48px);height:auto;min-height:var(--sub-visual-height);margin:0 auto;padding:40px 0 96px;transform:none;} #subContents .subHead{margin-bottom:30px;} .subVisualText h2{gap:10px;} .subVisualText h2 > big{font-size:34px;line-height:1.2;letter-spacing:-1.4px;} .subVisualText h2 > small{font-size:16px;letter-spacing:.3px;} .subVisualText > p{font-size:15px;} .subVisualMenu{bottom:22px;} .lnb .lnb-map{gap:4px;padding:5px;border-radius:14px;} .lnb .lnb-map > li > a{height:44px;padding:0 15px;border-radius:10px;} .lnb .lnb-map > li > a span{font-size:14px;} .lnb .lnb-map > li.has-third > .thirdMenu{position:fixed;left:16px;right:16px;top:auto;bottom:18px;min-width:0;} #subContents{padding:56px 0 84px;} #subContents .subTitleWrap{flex-direction:column;align-items:center;gap:14px;margin-bottom:0;} #subContents .subTitle{font-size:28px;letter-spacing:-1.2px;} #subContents .subTitleLink{width:100%;height:50px;padding:0 20px;font-size:16px;} .subMenuFloat{display:none !important;} } @media (prefers-reduced-motion:reduce){ .subVisual .subVisualImg .visual-inner{transform:none;transition:none;} .subVisualText h2{animation:none;opacity:1;filter:none;clip-path:none;} } /* ---------------------- 섹션별 영역 ---------------------- */ .cont-sec{position:relative;} .cont-sec + .cont-sec{margin-top:60px;} .cont-sec + .cont-sec.top-line{border-top:1px dotted #ddd; padding-top:60px} .cont-sec:nth-child(1){padding:0;} .cont-sec.cont-left {display: flex;position: relative;border-bottom: 1px dotted rgba(221, 221, 221, 1);padding: 0px 0 40px;} .cont-sec.cont-left .tit-area {position: relative;width: 380px;padding: 0 60px 0 60px;} .cont-sec.cont-left .tit-area > strong{margin: 0 0;} .cont-sec.cont-left .cont-area {width: calc(100% - 380px);} .cont-sec.cont-left .cont-area .list-Dot > li{font-size: 18px;} .cont-sec.cont-left:last-child{padding-bottom:0; border:0;} /* ---------------------- 타이틀 ---------------------- */ .contTit{display:inline-block;margin:60px 0 15px;font-weight:700;font-size: 34px;color: #222;letter-spacing:-1px;line-height:1.2;font-family: var(--font-family1);position: relative;} .contTit:before {content: "";display: block;width: 11px;height: 11px;background: var(--main-color);border-radius: 50%;position: absolute;right: -21px;top: 0;} .contTit:first-child, .contTit-s:first-child{margin-top:0;} .contTit-s{display:block;margin:40px 0 13px;font-weight: 700;font-size: 26px;color: #1b3b86;word-spacing: -1px;letter-spacing: -1px;line-height: 1.4;word-break: keep-all;font-family: var(--font-family1);} .contTit-ss{display:block;margin: 30px 0 13px;font-weight: 700;font-size: 20px;color: #222;word-spacing:-.5px;line-height:1.2;font-family: var(--font-family1);} .contTit-s + .contTit{margin-top:10px;} .contTit + .contTit-s, .contTit-s + .contTit-ss{margin-top:0px;} /* 타이틀옆에 텍스트 붙일때 */ .unline{display:inline-block;position:relative;color: #333;font-size: 19px;font-weight: 500;letter-spacing:-0.5px;margin: 0 5px;} .unline em{display:inline-block; font-style:normal; margin:0 2px; font-weight:bold; text-decoration:underline;} /* ---------------------- 텍스트 스타일 ---------------------- */ p.txt{color: #333;font-size: 18px;font-weight:500;letter-spacing:-0.2px;line-height:1.7;word-break: keep-all;} p.txt + p.txt{margin-top:20px;} .txt-bold{color:#111;letter-spacing:-.5px;font-weight: 600;font-size: 20px;font-family: var(--font-family1);} .red-bold{color:#1b3b86;letter-spacing:-.5px;font-weight:500;} p.txt-big{font-size: 20px;letter-spacing: -.5px;line-height: 1.4;color: #222;font-weight:700;word-break: keep-all;} .icon-txt{} .icon-txt br{display:none;} .icon-txt i{font-weight:normal;} p.txt + .gray-Box{margin:25px 0; padding:35px 45px;} p.txt + .table_con_wrap{margin-top:10px;} p.txt-big + ul{margin-top:5px;} .color-g{color: #9c6e37;} /* 별표 포인트(주의사항 등) */ .point-info{position:relative;padding-left: 13px;color:#9c6e37;font-size: 17px;font-weight: 500;letter-spacing:-0.5px;line-height: 1.4;text-align:left;} .point-info:before{content:"*";position:absolute;left:0;top: -3px;font-size: 18px;display:inline-block;} /* ---------------------- UL 리스트 디자인 ---------------------- */ /* 앞에 도트 */ .list-Dot{} .list-Dot > li{position:relative;padding-left: 14px;box-sizing:border-box;color: #27282B;font-size: 18px;font-weight: 400;line-height: 1.6;text-align:left;vertical-align:top;letter-spacing:-0.5px;word-break: keep-all;font-family: var(--font-family1);} .list-Dot > li:before{content:"";display:block;position:absolute;left:0;top: 11px;overflow:hidden;width: 4px;height: 4px;box-sizing:border-box;border-radius: 100%;background: #9ba2b9;} .list-Dot > li+li{margin-top: 5px;} .list-Dot > li a{color:inherit;} .list-Dot .link-bold{font-weight: 600;} .list-Dot > li a:hover{text-decoration:underline;} .list-Dot > li a.gold{color:#9c6e37; text-decoration:underline;} .list-Dot > li .table_con_wrap{/* margin-top: 10px; */} .list-Dot > li > .txt-bold > em.noto, .list-Dot > li > em.noto{font-family:'Noto Sans KR';text-decoration:none;font-style: normal;} ul + .table_con_wrap, dl + .table_con_wrap, ul + .gray-Box, .table_con_wrap + ul, .table_con_wrap + p{margin: 10px 0;} .table_con_wrap + dl{margin-top:30px;} .list-Dot .list-hyphen{margin: 5px 0 5px;} .list-Dot + dl{margin-top:30px;} .list-Dot + .listInfo{margin-top:20px;} /* 앞에 INFO */ .listInfo{margin-top: 10px;} .listInfo>li{position: relative;display: flex;align-items: center;padding-left: 29px;font-weight: 400;color: #898d95;line-height: 1.2rem;font-size: 17px;letter-spacing: -.5px;font-family: var(--font-family1);} .listInfo>li:before{content: "\eca0";color:#bfc1c5;font-family: 'remixicon' !important;font-style: normal;position: absolute;font-size: 24px;left: 0;top: 1px;} /* 앞에 -하이픈 */ .list-hyphen{} .list-hyphen>li{position:relative;padding-left:11px;color:#555;font-weight:400;line-height:1.5;text-align:left;vertical-align:top;letter-spacing: 0px;} .list-hyphen>li:before{content:""; display:block; position:absolute; left:0; top:11px; width:5px; height:1px; box-sizing:border-box; background:#999;} .list-hyphen>li a{color:#555; text-decoration:underline;} .list-hyphen>li a:hover{opacity:.8;} .list-Dot>li .list-hyphen>li+li{margin-top:3px;} .list-Dot>li .list-hyphen{width:100%;/* padding:8px 0 2px; */} .list-Dot>li .list-hyphen>li{color: #555;font-size: 17px;} .list-Dot>li .list-hyphen>li:before{top: 11px;} .list-Dot + .list-hyphen{margin-top:10px;} /* 당구장 표시 리스트 */ ul + .list-point{margin-top:15px;} .list-point + p{margin-top:10px;} .list-type1 + .list-point{margin-top:25px;} table + .list-point{margin-top: 15px !important;} .list-point{color:#333;} .list-point > li{font-size: 17px;line-height:1.6;padding-left:20px;position:relative;font-weight:500;} .list-point > li + li{margin-top: 5px;} .list-point > li:before{content:"※"; position:absolute; left:0; top:-3px; font-size:20px; display:inline-block;} .list-point > li.un-line{text-decoration:underline;} .list-point .list-hyphen{margin-top:5px;} .list-point.color-g{color:#9c6e37} /* 앞에 번호붙는 리스트 1, 2, 3 */ .ol-list{margin:10px 0; padding:0 0 0 20px;} .ol-list > li{position:relative;box-sizing:border-box;color: #333;font-size: 17px;font-weight: 400;line-height: 1.6;text-align:left;vertical-align:top;letter-spacing:-0.5px;font-family: var(--font-family1);} .ol-list > li > b{font-weight:600} .ol-list > li + li{margin-top: 0;} .ol-list > li .list-point > li{font-size:16px;} .ol-list > li .list-point > li + li{margin-top:0px;} /* 가. 나. 다. */ dl.info-dl {display: flex;/* flex-wrap: wrap; */} /* 제목 : 내용 형태*/ dl.info-dl.column{flex-direction: column;} /* 제목따로위에, 제목 밑으로 내용 나오게 */ dl.info-dl + dl{margin-top: 25px;} dl.info-dl > dt{position:relative;font-size: 20px;font-weight:bold;color: #222;word-break:keep-all;white-space: nowrap;} dl.info-dl > dt .unline{font-size:17px;} dl.info-dl > dd{position:relative;font-size:19px;font-weight: 600;padding-left:10px;color:#444;word-break: keep-all;} dl.info-dl.column > dd{padding-left: 0;padding-top: 10px;} dl.info-dl + ul{margin-top:10px;} /* ---------------------- 박스 스타일 ---------------------- */ /* 연그레이 두꺼운 라인박스(흰바탕) */ .gray-lineBox {border-radius:20px; border: 7px solid #f5f5f5; position: relative; padding: 35px 50px 35px 35px; background: #fff;} /* 연그레이 배경박스 */ .gray-Box {border-radius: 15px;position: relative;padding: 30px 40px;background: #f9f9f9;} .gray-Box > p.txt{color:#555;} .gray-Box > p.txt > b{color:#212121;} /* ---------------------- 탭분류 스타일 ---------------------- */ /* 큰사이즈 탭(둥근형) */ .color-tab{font-family:var(--font-family1);position:relative;flex-wrap:wrap;margin-bottom: 60px;background: #ffffff;display: inline-flex;align-items: center;justify-content: center;border-radius: 15px;overflow: hidden;box-shadow: 3px 4px 4.3rem 0px rgb(27 59 134 / 15%);} .color-tab li{display:block;position:relative;margin-left:-1px;min-height: 70px;height: 70px;line-height:1.5;} .color-tab.tab2 li, .color-tab.tab2 li{/* width:calc(50% + 1px); */} .color-tab.tab3 li, .color-tab.tab3 li{width:calc(33.33% + 1px);} .color-tab.tab4 li, .color-tab.tab4 li{width:calc(25% + 1px);} .color-tab.tab5 li, .color-tab.tab5 li{width:calc(20% + 1px);} .color-tab.tab6 li, .color-tab.tab6 li{width:calc(16.66666666666667% + 1px);} .color-tab li:nth-child(1) a{border-radius: 15px 0 0 15px;} .color-tab.tab3 li:nth-child(3) a, .color-tab.tab4 li:nth-child(4) a{border-radius:0 10px 10px 0;} .color-tab li a{position:relative;display:table;table-layout:fixed;width:100%;height:100%;box-sizing:border-box;background: transparent;font-weight:500;color: #535a63;transition: all .3s;} .color-tab li a:before {position: absolute; content: ''; width: 1px; height: 20px; background: rgba(0, 0, 0, 0.1); top: 50%; right: 0; transform: translateY(-50%);} .color-tab li a span{display:table-cell;vertical-align:middle;width:100%;height:100%;padding: 16px 15px;line-height: 1.2;font-weight: 600;font-size: 20px;text-align: center;} .color-tab li.on a{color:#fff;background: #1b3b86;border-color: #1b3b86;} .color-tab li a:focus, .color-tab li a:hover{color:#fff;background: #1b3b86;border-color: #1b3b86;} .color-tab li.on a:focus, .color-tab li.on a:hover{color:#fff;} .RollTxt{position: relative;left:0;top:0;width: 100vw;left:50%;margin-left: -50vw;white-space:nowrap;overflow:hidden;} .RollTxt .flow-text{display:flex;flex:0 0 auto;white-space:nowrap;/* overflow:hidden; */transition:0.3s;} .RollTxt .flow-wrap{animation:textLoop 20s linear infinite;padding-right:90px;font-weight: 500;letter-spacing: -7px;font-size: 200px;font-family: "Bai Jamjuree", sans-serif;color: #24557a;opacity: .1;-webkit-mask-image: linear-gradient(to bottom, #24557a 0%, #24557a00 80%, transparent 100%);mask-image: linear-gradient(to bottom, #24557a 0%, #24557a00 80%, transparent 100%);} @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:767px){ .contTit{font-size: 28px;} .contTit-s{font-size:22px;} .list-Dot > li{font-size:16px;} .list-hyphen>li{font-size:16px;} .list-Dot>li .list-hyphen>li{font-size:16px;} } /* 공통 :: 버튼 */ .cm-more-btn{position: relative;display: flex;align-items:center;width: 250px;height: 60px;border-radius: 30px;overflow:hidden;padding: 0 30px;box-sizing:border-box;opacity:0;transform:translateY(50px);transition: all 0.8s ease-in-out;} .cm-more-btn:before{position: absolute;content:'';top:50%;right: 20px;transform:translateY(-50%);width: 10px;height: 10px;background: var(--main-color);border-radius:50%;z-index:2;transition: all 0.8s ease-in-out;} .cm-more-btn:after{position: absolute;content:'';top:50%;right: 20px;transform:translateY(-50%);width: 10px;height: 10px;background: var(--main-color);border-radius:50%;z-index:3;transition: all 0.8s ease-in-out;opacity:0;} .cm-more-btn .border{position: absolute;content:'';inset:0;border: 2px solid var(--main-color);border-radius: 30px;box-sizing:border-box;z-index:1;} .cm-more-btn .txt{position: relative;z-index:4;font-size: 18px;letter-spacing:-0.025em;color: var(--main-color);font-weight:700;transition: all 0.8s ease-in-out;font-family: "Bai Jamjuree", sans-serif;} /* hover */ .cm-more-btn:hover:before{transform:translateY(-50%) scale(50);background: var(--main-color);} .cm-more-btn:hover:after{background:#fff; opacity:1;} .cm-more-btn:hover .txt{color:#fff;} /* animated */ .animated .cm-more-btn{opacity:1; transform:translateY(0);} .cm-sub-btn-box {display: flex; justify-content: center;} .cm-sub-btn-box .cm-more-btn {opacity: 1; transform: translateY(0);} @media all and (min-width: 801px) { .cm-sub-btn-box .cm-sub-btn:hover {background-color: var(--main-color); color: #fff;} .cm-sub-btn-box .cm-sub-btn:hover .dot {background-color: #fff;} } /* ************************** sub1_2: 학부장 인사말 ****************************** */ /* 국문은 어절 단위로만 줄바꿈(글자 중간에서 안 끊김), 한 줄에 안 들어가는 긴 영문만 예외로 끊는다 */ .greeting{position:relative;font-family:var(--font-family1);word-break:keep-all;overflow-wrap:break-word;} /* 리드 문구 */ .greeting-lead{margin:0 0 90px;text-align:center;} .greeting-lead-sub{display:block;margin-bottom:15px;color:#8a8f98;font-size:26px;font-weight: 600;line-height:1.6;letter-spacing:-1.2px;} .greeting-lead-tit{margin:0;color:#111;font-size:38px;font-weight:700;line-height:1.6;letter-spacing:-1.8px;} .greeting-lead-tit em{font-style:normal;color:var(--main-color);} /* 이미지 + 텍스트 2단 */ .greeting-row{display:flex;align-items:center;gap:80px;margin-bottom: 80px;} .greeting-row.reverse{flex-direction:row-reverse;} /* 이미지 원본 640x480(4:3) 기준 : 확대되지 않도록 max-width 640px 로 제한. flex-shrink 를 0 으로 둬야 옆 텍스트 길이에 따라 이미지가 쪼그라들지 않는다. */ .greeting-figure{flex:0 0 50%;width:50%;max-width:640px;margin:0;overflow:hidden;border-radius:20px;background:#eef0f3;} .greeting-figure img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.22,1,.36,1);} .greeting-figure:hover img{transform:scale(1.04);} .greeting-text{flex:1 1 auto;min-width:0;} .greeting-strong{margin:0 0 25px;color:#222;font-size: 32px;font-weight:700;line-height:1.5;letter-spacing:-1.2px;word-break: keep-all;} .greeting-strong em{font-style:normal;color:var(--main-color);} .greeting-desc{margin:0 0 25px;color:#666;font-size: 22px;font-weight: 600;line-height:1.8;letter-spacing:-1px;word-break: keep-all;} .greeting-desc:last-child{margin-bottom:0;} .greeting-desc em{font-style:normal;color:var(--main-color);font-weight:600;} /* 워터마크 밴드 : 배경(#f2f2f2)보다 살짝 어두워야 글씨가 보인다 */ .greeting-band{position:relative;display:flex;align-items:center;justify-content:center;margin: 100px 0;padding:40px 0;} .greeting-band-mark{position:absolute;left:50%;top:50%;color:#e5e8ee;font-family:var(--font-family2);font-size: clamp(60px,9vw,200px);font-weight:900;line-height:1;letter-spacing:-2px;white-space:nowrap;transform:translate(-50%,-50%);user-select:none;} .greeting-band-label{position:relative;z-index:1;color:var(--sub-color);font-family:var(--font-family2);font-size:24px;font-weight:800;line-height:1.4;text-transform:uppercase;text-align:center;} /* 맺음말 + 서명 */ .greeting-closing{width:100%;margin-top:10px;} .greeting-closing .greeting-desc{margin-bottom: 40px;} .greeting-closing-txt{margin:0;color:#222;font-size: 28px;font-weight: 700;line-height:1.7;letter-spacing:-1.2px;word-break: keep-all;} .greeting-sign{display:flex;align-items:baseline;gap:25px;margin-top:55px;justify-content: flex-end;} .greeting-sign span{color:#666;font-size:20px;font-weight:500;letter-spacing:-.5px;} .greeting-sign strong{color:#222;font-size:30px;font-weight:700;letter-spacing:5px;} @media (max-width:1500px){ .greeting-lead{margin-bottom:76px;} .greeting-lead-sub{font-size:23px;} .greeting-lead-tit{font-size:33px;letter-spacing:-1.5px;} .greeting-row{gap:56px;margin-bottom:88px;} .greeting-strong{font-size:25px;} .greeting-desc{font-size:19px;} .greeting-band{margin-bottom:100px;} .greeting-closing-txt{font-size:22px;} } @media (max-width:1170px){ .greeting-lead{margin-bottom:58px;} .greeting-lead-sub{font-size:20px;} .greeting-lead-tit{font-size:28px;letter-spacing:-1.3px;} .greeting-row{gap:40px;margin-bottom:72px;} .greeting-figure{flex-basis:46%;width:46%;} .greeting-strong{font-size:22px;margin-bottom:20px;} .greeting-desc{font-size:18px;margin-bottom:20px;line-height:1.75;} .greeting-band{margin-bottom:76px;} .greeting-band-label{font-size:19px;} .greeting-closing-txt{font-size:20px;} .greeting-sign{margin-top:44px;} .greeting-sign span{font-size:18px;} .greeting-sign strong{font-size:27px;} } @media (max-width:767px){ .greeting-lead{margin-bottom:44px;text-align:left;} .greeting-lead-sub{margin-bottom:10px;font-size:16px;} .greeting-lead-tit{font-size:22px;line-height:1.55;letter-spacing:-1.1px;} .greeting-lead-tit br, .greeting-closing-txt br{display:none;} .greeting-row, .greeting-row.reverse{flex-direction:column;align-items:stretch;gap:26px;margin-bottom:48px;} .greeting-figure{flex:none;width:100%;max-width:none;border-radius:16px;} .greeting-strong{margin-bottom:16px;font-size:19px;line-height:1.55;letter-spacing:-.9px;} .greeting-desc{margin-bottom:16px;font-size:16px;line-height:1.75;letter-spacing:-.6px;} .greeting-band{margin:0 0 48px;padding:18px 0;} .greeting-band-mark{font-size:clamp(38px,11vw,60px);letter-spacing:-1px;} .greeting-band-label{font-size:15px;letter-spacing:.2px;} .greeting-closing .greeting-desc{margin-bottom:22px;} .greeting-closing-txt{font-size:17px;line-height:1.7;} .greeting-sign{gap:14px;margin-top:30px;} .greeting-sign span{font-size:15px;} .greeting-sign strong{font-size:23px;letter-spacing:4px;} } /* ************************** sub1_3: 학부 현황 ****************************** */ .status{position:relative;font-family:var(--font-family1);word-break:keep-all;overflow-wrap:break-word;} .status-lead{margin:0 0 10px;color:#333;font-size:22px;font-weight:500;line-height:1.75;letter-spacing:-1px;} .status-lead em{font-style:normal;font-weight:700;color:var(--main-color);} .status-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;} /* .hi = 순차 점등(3초 간격, JS가 부여) / .alumni = 동문 카드 레이아웃 그라데이션은 transition 이 안 먹으므로 :before 에 깔고 opacity 로 크로스페이드한다. */ .st-card{position:relative;padding:32px 32px 28px;border:1px solid #e6e8ec;border-radius:20px;background:#fff;box-shadow:0 0 0 rgba(27,59,134,0);transition:border-color .7s ease,transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s ease;} .st-card:before{content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;z-index:0;border-radius:inherit;background:linear-gradient(140deg,var(--main-color),#2c3a5c);opacity:0;transition:opacity .7s ease;} .st-card.hi{border-color:transparent;transform:translateY(-8px);box-shadow:0 20px 44px rgba(27,59,134,.24);} .st-card.hi:before{opacity:1;} .st-badge{position:relative;z-index:1;display:inline-block;padding:7px 18px;border-radius:999px;background:rgba(27,59,134,.08);color:var(--main-color);font-size:17px;font-weight:700;line-height:1;letter-spacing:-.5px;transition:background .7s ease,color .7s ease;} .st-card.hi .st-badge{background:rgba(255,255,255,.16);color:#fff;} .st-bars{position:relative;z-index:1;display:flex;gap:12px;margin:24px 0 22px;} .st-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:118px;padding:20px 10px;border-radius:14px;background:#f4f6f9;transition:background .7s ease;} .st-bar.wide{flex:1 1 100%;} .st-card.hi .st-bar{background:rgba(255,255,255,.1);} .st-lb{color:#6b7280;font-size:15px;font-weight:600;line-height:1;letter-spacing:-.5px;transition:color .7s ease;} .st-card.hi .st-lb{color:rgba(255,255,255,.72);} .st-bar b{color:var(--main-color);font-family:var(--font-family2);font-size:clamp(28px,3vw,38px);font-weight:700;line-height:1;letter-spacing:-1px;transition:color .7s ease;} .st-bar b i{font-style:normal;font-family:var(--font-family1);font-size:.48em;font-weight:600;margin-left:3px;letter-spacing:-.5px;} .st-card.hi .st-bar b{color:#fff;} .st-bar small{color:#9aa1ad;font-size:14px;font-weight:500;line-height:1;letter-spacing:-.5px;transition:color .7s ease;} .st-card.hi .st-bar small{color:rgba(255,255,255,.6);} .st-total{position:relative;z-index:1;color:#444;font-size:18px;font-weight:600;line-height:1.5;letter-spacing:-.7px;transition:color .7s ease;} .st-total strong{margin:0 3px;color:var(--sub-color);font-family:var(--font-family2);font-size:1.35em;font-weight:700;transition:color .7s ease;} .st-card.hi .st-total{color:rgba(255,255,255,.82);} .st-card.hi .st-total strong{color:#fff;} .st-card.alumni .st-total{font-size:16px;} @media (max-width:1500px){ .status-lead{font-size:20px;} .st-card{padding:28px 26px 24px;} .st-bars{gap:10px;} } @media (max-width:1170px){ .status-lead{font-size:18px;line-height:1.7;} .status-cards{grid-template-columns:repeat(2,1fr);} .st-card.alumni{grid-column:1 / -1;} .st-bar.wide{min-height:96px;} } @media (max-width:767px){ .status-lead{font-size:16px;letter-spacing:-.6px;} .status-cards{grid-template-columns:1fr;gap:14px;margin-top:22px;} .st-card{padding:24px 20px 20px;border-radius:16px;} .st-badge{padding:6px 14px;font-size:15px;} .st-bars{gap:8px;margin:18px 0 16px;} .st-bar{min-height:96px;padding:16px 8px;border-radius:12px;} .st-lb{font-size:13px;} .st-bar small{font-size:12px;} .st-total{font-size:16px;} .st-card.alumni .st-total{font-size:14px;} } /* ************************** sub1_4: 전기전자공학부 역사 ****************************** */ :root{ --history-color: var(--main-color); --history-padding: 85px; } #History{position:relative;padding-bottom:60px;font-family:var(--font-family1);word-break:keep-all;} /* 배경 글씨. height:0 · line-height:0 이라 자리를 차지하지 않고 글자만 그 줄에 걸린다. top:50vh 로 화면 한가운데에 붙어 있다가 #History 가 끝나면 같이 올라간다. ( % 로 주면 #History 높이 기준이라 엉뚱한 데로 간다 ) 잘라 주는 건 #subContents(흰 박스) 쪽이다. 위쪽 #subContents 규칙 참고 */ #History .his-bg{position:sticky;top:50vh;z-index:0;display:block;height:0;font-family:var(--font-family2);font-size:300px;font-weight:800;line-height:0;letter-spacing:-6px;color:#000;opacity:.03;text-align:center;text-transform:uppercase;white-space:nowrap;pointer-events:none;user-select:none;} /* 도입부 */ #History .his-tit-box{max-width:1200px;margin: 80px auto 110px;text-align:center;} #History .his-tit-box .color-tit{display:block;margin-bottom:26px;color:var(--main-color);font-family:var(--font-family2);font-size:24px;font-weight:800;line-height:1;letter-spacing:1px;text-decoration:underline;text-underline-offset:8px;} #History .his-tit-box .his-txt{color:#111;font-size:24px;font-weight:500;line-height:1.7;letter-spacing:-1.2px;} #History .his-tit-box .his-txt em{font-style:normal;font-weight:700;color:var(--main-color);} #History .his-tit-box .his-txt > p + p{margin-top:28px;} /* 타임라인 */ .history-style01{position:relative;padding-top:1.5rem;} /* 배경 글씨가 #subContents 의 흰 바탕에 덮여 안 보였다. z-index:-1 은 부모 칸의 배경보다 아래에서 그려지기 때문이다. 배경 글씨를 0 으로 두고, 내용만 그 위(1)로 띄운다 */ #History > *:not(.his-bg){position:relative;z-index:1;} /* 마지막 줄의 세로선은 흰 박스 끝까지 쭉 내린다. 넉넉히 늘려 두면 #subContents 의 overflow:clip 이 흰 박스 아래 모서리에서 딱 잘라 준다 */ .history-style01 .history-year-item:last-child .history-back-line{height:calc(100% + 600px);} .history-style01 .history-year-item{position:relative;display:flex;justify-content:space-between;padding-bottom:150px;} .history-style01 .history-year-item:last-child{padding-bottom:0;} .history-style01 .history-year-item .history-info-box{display:flex;width:50%;} .history-style01 .history-year-item.history-left .history-info-box{justify-content:flex-end;} /* 중앙 세로선 */ .history-style01 .history-year-item .history-back-line{position:absolute;top:20px;left:calc(50% - 1px);width:2px;height:175%;background-color: #dddddd;} .history-style01 .history-year-item .history-back-line .line-inner{display:block;width:100%;height:0;background-color:var(--history-color);} /* 시대 타이틀 + 점 */ .history-style01 .history-year-item .history-year-tit{position:relative;color:var(--main-color);font-family:var(--font-family2);font-size:100px;font-weight:700;line-height:1;letter-spacing:-3px;} .history-style01 .history-year-item .history-year-tit .dot{position:absolute;top:20%;z-index:1;width:14px;height:14px;border: 3px solid #d2d2d2;border-radius:50%;background-color:#fff;transform:translate(0,-50%);} .history-style01 .history-year-item .history-year-tit .dot:before{content:"";position:absolute;left:50%;top:50%;width:45px;height:45px;border-radius:50%;background-color:rgba(27,59,134,.18);opacity:0;transform:translate(-50%,-50%);transition:all .3s;pointer-events:none;} /* 연도별 항목 */ .history-style01 .history-month-box .history-month-item{position:relative;display:flex;margin-bottom:10px;line-height:1.4;} .history-style01 .history-month-box .history-month-item .history-month{display:block;width:90px;color:#111;font-family:var(--font-family2);font-size:34px;font-weight:700;line-height:1;letter-spacing:-1px;} .history-style01 .history-month-box .history-month-item .history-detail-txt-con{width:100%;margin-bottom:2.2rem;} .history-style01 .history-month-box .history-month-item .history-month + .history-detail-txt-con{width:calc(100% - 90px);} .history-style01 .history-month-box .history-month-item .history-detail-txt{display:flex;padding-right:40px;color:#555;font-size:18px;font-weight:400;line-height:1.55;letter-spacing:-.6px;} .history-style01 .history-month-box .history-month-item .history-detail-txt + .history-detail-txt{margin-top:16px;} .history-style01 .history-month-box .history-month-item .history-detail-txt > span{display:inline-block;flex-shrink:0;margin-right:18px;color:#111;font-family:var(--font-family2);font-size:20px;font-weight:700;line-height:1.45;} .history-style01 .history-right .history-month-box .history-month-item .history-detail-txt{padding:0 0 0 4.5rem;} .history-style01 .history-month-box .history-month-item .history-detail-txt:last-of-type{margin-bottom:0;} /* 활성화(스크롤 도달) */ .history-style01 .history-year-item .history-year-tit, .history-style01 .history-year-item .history-year-tit .dot, .history-style01 .history-month-box .history-month-item, .history-style01 .history-month-box .history-month-item .history-month{transition:all .5s ease-in-out;transition-property:color,background-color,border-color;} .history-style01 .history-year-item.active .history-year-tit .dot{border-color:var(--history-color);background:var(--history-color);} .history-style01 .history-year-item.active .history-year-tit .dot:before{opacity:1;} @media all and (min-width:801px){ /* 우측 배치 */ .history-style01 .history-right{flex-direction:row-reverse;} .history-style01 .history-right .history-month-box .history-month-item{padding-left:80px;} /* 좌측 배치 */ .history-style01 .history-left{text-align:right;} .history-style01 .history-left .history-month-box .history-month-item{flex-direction:row-reverse;padding-right:var(--history-padding);} .history-style01 .history-left .history-month-box .history-month-item .history-detail-txt{flex-direction:row-reverse;} .history-style01 .history-left .history-month-box .history-month-item .history-detail-txt > span{margin-right:0;margin-left:18px;} /* 시대 타이틀이 내용 반대편 (reverse) */ .history-style01 .history-year-item .history-year-tit.reverse{position:absolute;top:-5px;} .history-style01 .history-right .history-year-tit.reverse{right:50%;padding-right:var(--history-padding);} .history-style01 .history-right .history-year-tit.reverse .dot{left:100%;transform:translate(-50%,-50%);} .history-style01 .history-left .history-year-tit.reverse{left:50%;padding-left:var(--history-padding);} .history-style01 .history-left .history-year-tit.reverse .dot{right:100%;transform:translate(50%,-50%);} } @media all and (max-width:1170px){ :root{--history-padding:56px;} #History .his-bg{font-size:200px;} #History .his-tit-box{margin-bottom:80px;} #History .his-tit-box .his-txt{font-size:20px;} .history-style01 .history-year-item{padding-bottom:110px;} .history-style01 .history-year-item .history-year-tit{font-size:72px;letter-spacing:-2px;} .history-style01 .history-month-box .history-month-item .history-month{width:76px;font-size:28px;} .history-style01 .history-month-box .history-month-item .history-month + .history-detail-txt-con{width:calc(100% - 76px);} .history-style01 .history-month-box .history-month-item .history-detail-txt{padding-right:20px;font-size:17px;} .history-style01 .history-right .history-month-box .history-month-item .history-detail-txt{padding-left:2.4rem;} .history-style01 .history-right .history-month-box .history-month-item{padding-left:52px;} } @media all and (max-width:800px){ #History{padding-bottom:20px;} #History .his-bg{font-size:100px;} #History .his-tit-box{margin:0 auto 50px;} #History .his-tit-box .color-tit{margin-bottom:18px;font-size:19px;} #History .his-tit-box .his-txt{font-size:17px;line-height:1.65;} #History .his-tit-box .his-txt br{display:none;} #History .his-tit-box .his-txt > p + p{margin-top:18px;} /* 좌우 교대 해제 : 세로선을 왼쪽으로 */ .history-style01 .history-year-item{padding-bottom:46px;} .history-style01 .history-year-item .history-info-box{display:block;width:100%;} .history-style01 .history-year-item.history-left .history-info-box{justify-content:initial;} .history-style01 .history-year-item .history-back-line{top:35px;left:10px;height:100%;} .history-style01 .history-year-item .history-year-tit{padding-left:60px;padding-bottom:2.4rem;font-size:52px;letter-spacing:-1.5px;} .history-style01 .history-year-item .history-year-tit .dot{left:4px;top:26%;} .history-style01 .history-month-box .history-month-item{padding-left:60px;} .history-style01 .history-month-box .history-month-item .history-detail-txt{padding-right:0;} .history-style01 .history-month-box .history-month-item .history-detail-txt-con{margin-bottom:1.6rem;} } @media all and (max-width:480px){ .history-style01 .history-year-item .history-year-tit{font-size:42px;} .history-style01 .history-month-box .history-month-item{flex-direction:column;} .history-style01 .history-month-box .history-month-item .history-month{width:100%;margin-bottom:10px;font-size:24px;} .history-style01 .history-month-box .history-month-item .history-month + .history-detail-txt-con{width:100%;} .history-style01 .history-month-box .history-month-item .history-detail-txt{font-size:16px;} .history-style01 .history-month-box .history-month-item .history-detail-txt > span{margin-right:12px;font-size:17px;} } /* ************************** [구버전] 학부행사 (미사용, 참고용) ****************************** */ /* ************************** sub1_6: 연락처 및 오시는 길 ****************************** * 카드를 겹치지 않는다. 지도 + 솔리드 패널이 맞붙은 덩어리 하나가 시그니처이고, * 나머지 정보는 1px 라인과 여백으로만 구분한다. 라운딩은 바깥 덩어리 하나에만. * 색은 3계열 : 배경 #f2f2f2 / 텍스트 #1a1c20 계열 / 포인트 var(--main-color) ============================================================================== */ #contact{position:relative;font-family:var(--font-family1);word-break:keep-all;} /* ---------- 지도 (옆 패널 없이 전체 폭) ---------- */ #contact .loc-hero{display:flex;height:560px;border-radius:24px;overflow:hidden;} #contact .loc-map{position:relative;flex:1 1 auto;min-width:0;background:#e8eaee;} #contact .loc-map iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;} /* ---------- 주소 · 연락처 · 지도 앱 (HCT 참조) ---------- */ #contact .loc-quick{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;margin-top:40px;} #contact .loc-copy{display:flex;align-items:center;gap:14px;padding:22px 24px;border-radius:16px;background:#f3f5f9;} #contact .loc-copy > i{flex:none;color:var(--main-color);font-size:24px;} #contact .loc-copy p{flex:1 1 auto;min-width:0;margin:0;color:#1a1c20;font-size:19px;font-weight:600;line-height:1.5;letter-spacing:-.7px;} #contact .loc-copy .loc-zip{display:inline-block;margin-right:10px;padding:2px 9px;border-radius:999px;background:#fff;color:var(--main-color);font-family:var(--font-family2);font-size:14px;font-style:normal;font-weight:700;letter-spacing:0;vertical-align:2px;} #contact .loc-copy-btn{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:1px solid #d8dde6;border-radius:10px;background:#fff;color:#4d525c;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.4px;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease;} #contact .loc-copy-btn i{font-size:17px;} #contact .loc-copy-btn:hover{border-color:var(--main-color);color:var(--main-color);} #contact .loc-copy-btn.is-done{border-color:var(--main-color);background:var(--main-color);color:#fff;} #contact .loc-tel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;} #contact .loc-tel > div{padding:30px 6px 0;} #contact .loc-tel > div + div{padding-left:30px;} #contact .loc-tel dt{display:flex;align-items:center;gap:8px;color:#5a616e;font-size:17px;font-weight:600;letter-spacing:-.5px;} #contact .loc-tel dt i{color:var(--main-color);font-size:19px;} #contact .loc-tel dd{display:flex;flex-direction:column;gap:4px;margin:12px 0 0;} #contact .loc-tel dd a{color:#1a1c20;font-family:var(--font-family3,var(--font-family2));font-size:30px;font-weight:700;line-height:1.25;letter-spacing:-.5px;text-decoration:none;} #contact .loc-tel dd a:hover{color:var(--main-color);} #contact .loc-app-tit{display:flex;align-items:center;gap:8px;margin:0 0 16px;color:#1a1c20;font-size:19px;font-weight:700;letter-spacing:-.6px;} #contact .loc-app-tit i{color:var(--main-color);font-size:20px;} #contact .loc-apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;} #contact .loc-apps a{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:150px;padding:22px 22px 20px;border-radius:16px;font-size:19px;font-weight:700;letter-spacing:-.6px;text-decoration:none;box-sizing:border-box;transition:transform .25s ease,box-shadow .25s ease;} #contact .loc-apps a b, #contact .loc-apps a i{align-self:flex-end;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;font-size:22px;font-style:normal;line-height:1;} #contact .loc-apps a:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(20,30,50,.14);} #contact .loc-apps .app-naver{background:#03c75a;color:#fff;} #contact .loc-apps .app-naver b{background:#fff;color:#03c75a;font-family:Arial,sans-serif;font-weight:900;} #contact .loc-apps .app-kakao{background:#fee500;color:#191600;} #contact .loc-apps .app-kakao i{background:#191600;color:#fee500;} #contact .loc-apps .app-google{border:1px solid #dfe3ea;background:#fff;color:#1a1c20;} #contact .loc-apps .app-google i{background:#f1f3f6;color:#4285f4;} #contact .loc-apps .app-campus{background:var(--main-color);color:#fff;} #contact .loc-apps .app-campus i{border-radius:50%;background:#fff;color:var(--main-color);transition:transform .25s ease;} #contact .loc-apps .app-campus:hover i{transform:rotate(45deg);} /* ---------- 건물 안내 · 오시는 길 ---------- */ #contact .loc-sec{margin-top:100px;} #contact .loc-sec-tit{margin:0 0 8px;padding-bottom:24px;border-bottom:4px solid #1a1c20;color:#1a1c20;font-size:32px;font-weight:700;letter-spacing:-1.2px;} #contact .loc-row{display:flex;margin:0;padding:38px 0;border-bottom:1px solid #e0e2e6;} #contact .loc-row dt{flex:0 0 280px;align-self:flex-start;display:flex;align-items:center;gap:12px;padding-right:30px;color:#1a1c20;font-size:24px;font-weight:700;line-height:1.4;letter-spacing:-1px;box-sizing:border-box;} #contact .loc-row dt i{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#eef2fa;color:var(--main-color);font-size:24px;} #contact .loc-row dt em{padding:4px 11px;border-radius:999px;background:#e7ebf3;color:var(--main-color);font-family:var(--font-family2);font-size:15px;font-style:normal;font-weight:600;letter-spacing:0;} #contact .loc-row dd{flex:1 1 auto;min-width:0;margin:0;color:#4d525c;font-size:19px;font-weight:400;line-height:1.75;letter-spacing:-.7px;} #contact .loc-place{margin:0;color:#1a1c20;font-size:20px;font-weight:700;letter-spacing:-.7px;} #contact .loc-place span{display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;background:#f1f3f6;color:#6b717c;font-size:14px;font-weight:500;vertical-align:2px;} #contact .loc-place ~ .loc-place{margin-top:32px;} #contact .loc-lines{margin:14px 0 0;padding:0;list-style:none;} #contact .loc-lines > li{display:flex;align-items:flex-start;gap:16px;font-weight: 600;line-height:1.65;} #contact .loc-lines > li + li{margin-top:10px;} #contact .loc-lines > li b{flex: 0 0 75px;display:inline-flex;align-items:center;justify-content:center;height:30px;border-radius:8px;background:#eef2fa;color:var(--main-color);font-size:16px;font-weight:700;letter-spacing:-.5px;} /* ---------- 반응형 ---------- */ @media (max-width:1400px){ #contact .loc-hero{height:500px;} #contact .loc-quick{grid-template-columns:1fr;gap:34px;} #contact .loc-row dt{flex-basis:230px;} } @media (max-width:1024px){ #contact .loc-hero{height:420px;border-radius:18px;} #contact .loc-sec{margin-top:76px;} #contact .loc-row dt{flex-basis:200px;font-size:22px;} #contact .loc-row dd{font-size:18px;} } @media (max-width:767px){ #contact .loc-hero{height:300px;border-radius:14px;} #contact .loc-quick{margin-top:28px;gap:28px;} #contact .loc-copy{flex-wrap:wrap;padding:18px;border-radius:14px;} #contact .loc-copy p{font-size:16px;} #contact .loc-copy-btn{width:100%;justify-content:center;} #contact .loc-tel{grid-template-columns:1fr;} #contact .loc-tel > div{padding:22px 0 0;} #contact .loc-tel > div + div{padding-left:0;border-left:0;} #contact .loc-tel dd a{font-size:24px;} #contact .loc-apps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} #contact .loc-apps a{height:112px;padding:16px 14px;border-radius:14px;font-size:15px;} #contact .loc-apps a b, #contact .loc-apps a i{width:32px;height:32px;font-size:18px;} #contact .loc-sec{margin-top:56px;} #contact .loc-sec-tit{padding-bottom:18px;font-size:24px;} #contact .loc-row{display:block;padding:26px 0;} #contact .loc-row dt{padding-right:0;margin-bottom:14px;font-size:20px;} #contact .loc-row dt i{width:36px;height:36px;font-size:20px;} #contact .loc-row dd{font-size:16px;} #contact .loc-place{font-size:17px;} #contact .loc-place span{font-size:13px;} #contact .loc-place ~ .loc-place{margin-top:24px;} #contact .loc-lines > li{display:block;} #contact .loc-lines > li b{display:inline-flex;width:54px;height:26px;margin-right:8px;font-size:14px;} } @media (prefers-reduced-motion:reduce){ #contact .loc-apps a, #contact .loc-apps .app-campus i{transition:none;} } /* ************************** sub2_1_a: 전공소개 ****************************** * 색 3계열(배경 #f2f2f2 / 텍스트 #1a1c20 / 포인트 var(--main-color)), 라운딩 20px 단일. * 본문 최소 16px(모바일) ~ 20px(데스크톱). 레퍼런스의 큰 타이포 스케일을 따른다. ============================================================================== */ #major{ position:relative; font-family:var(--font-family1); word-break:keep-all; counter-reset:mjno; /* 본문 칸(1400px)을 뚫고 흰 카드 폭까지 넓히는 값. 카드가 화면에서 16px 들어와 있으므로 그 안에서 좌우 16px 여백만 두고 채운다. 100vw 는 스크롤바를 포함하므로 tail.php 가 재어 주는 --sb 로 뺀다. */ --mj-wide-w:calc(100vw - var(--sb, 0px) - 64px); --mj-wide-l:calc(50% - 50vw + var(--sb, 0px) / 2 + 32px); } /* ---------- 인트로 ---------- */ #major .mj-intro{margin-bottom: 60px;text-align: center;} #major .mj-eyebrow{margin-bottom:24px;font-family: var(--font-family1);text-transform:uppercase;display: inline-block;font-size: 1.0416666667vw;font-weight: 600;line-height: 1.4;letter-spacing: -0.01em;background-color: var(--main-color);color: #fff;padding: min(.2604166667vw, 5px) min(.625vw, 12px);border-radius: .5208333333vw;} #major .mj-tit{margin:0;color:#1a1c20;font-size: clamp(28px,3.6vw,52px);font-weight:400;line-height:1.4;letter-spacing:-2.2px;} #major .mj-tit b{font-weight:800;} /* 배너 : 스크롤 도달 시 가운데에서 아래위로 펼쳐진다. 흰 카드(#subContents) 안에서 본문 칸(1400px)을 뚫고 좌우로 넓힌다. 카드가 이미 화면에서 16px 들어와 있으므로, 그 안에서 16px 여백만 더 두고 꽉 채운다. (100vw - 카드 여백 16 x2 - 안쪽 여백 16 x2 = 100vw - 64px) clip-path 를 쓰면 같은 요소 안의 background-attachment:fixed 가 렌더링되지 않으므로 바깥(.mj-banner-in)은 height 로 여닫고, 고정 배경은 안쪽(.mj-banner-bg)에만 둔다. 기본값이 "펼쳐짐"이라 JS 가 없거나 실패해도 빈 칸으로 남지 않는다. */ #major .mj-banner{display:flex;align-items:center;width:var(--mj-wide-w);height:var(--sub-visual-height);margin:0 0 120px var(--mj-wide-l);} #major .mj-banner-in{width:100%;height:100%;border-radius:20px;overflow:hidden;transition:height .9s cubic-bezier(.16,1,.3,1);} #major .mj-banner-in.is-closed{height:0;} #major .mj-banner-bg{display:block;width:100%;height:var(--sub-visual-height);background:#e8eaee url("/images/sub/a_bg.jpg") no-repeat 50% 50%/cover;background-attachment:fixed;} /* ---------- 좌우 분할 : 이미지를 컨테이너 바깥까지 키운다 ---------- */ #major .mj-item{display:flex;align-items:flex-start;gap:90px;margin-bottom:120px;} #major .mj-item, #major .mj-wide{counter-increment:mjno;} #major .mj-item.reverse{flex-direction:row-reverse;} /* 이미지만 벽 쪽(흰 카드 안쪽 16px)까지 내보낸다. 글은 본문 칸 폭 그대로라 읽는 폭이 변하지 않고, 맨 아래 전체폭 배너와도 자연스럽게 이어진다. --mj-wide-l 은 음수(본문 칸에서 벽까지의 거리)라, 폭에서 빼면 그만큼 늘어난다. */ #major .mj-fig{position:relative;z-index:2;flex:0 0 570px;width:570px;max-width:100%;margin:0;border-radius:20px;overflow:hidden;} #major .mj-item:not(.reverse) > .mj-fig, #major .mj-wide-in > .mj-fig{flex-basis:calc(570px - var(--mj-wide-l));width:calc(570px - var(--mj-wide-l));margin-left:var(--mj-wide-l);} #major .mj-item.reverse > .mj-fig{flex-basis:calc(570px - var(--mj-wide-l));width:calc(570px - var(--mj-wide-l));margin-right:var(--mj-wide-l);} #major .mj-fig img{display:block;width:100%;height:auto;} #major .mj-txt{position:relative;flex:1 1 auto;min-width:0;} /* 글 오른쪽 아래 빈 자리를 채우는 큰 번호. 마크업의 01/02/03 과 어긋나지 않도록 CSS 카운터로 뽑는다(항목을 넣고 빼도 저절로 맞는다). #Rsch .paralax-title 과 같은 결로, 글 뒤에 아주 옅게 깔리기만 한다. */ #major .mj-txt:after{content:counter(mjno, decimal-leading-zero);position:absolute;right:clamp(-120px, calc(var(--sub-width) / 2 + 32px + var(--sb, 0px) / 2 - 50vw), 0px);bottom:-12px;z-index:0;font-family:var(--font-family2);font-size:300px;font-weight:800;line-height:.8;letter-spacing:-12px;background-image:linear-gradient(to top,rgb(228 234 246),rgb(228 234 246 / 55%),rgb(228 234 246 / 0%));background-clip:text;-webkit-background-clip:text;color:transparent;pointer-events:none;user-select:none;} #major .mj-item.reverse .mj-txt:after{right:auto;left:clamp(-120px, calc(var(--sub-width) / 2 + 32px + var(--sb, 0px) / 2 - 50vw), 0px);} /* 이미지가 오른쪽이면 글은 왼쪽 — 번호도 바깥쪽(왼쪽) 빈 자리로 */ /* 최대 120px 까지 삐져나가되, 이미지·배너가 서는 벽 선을 넘지 않게 잡는다. 여유 = (카드폭 - 본문칸)/2 - 16 = 50vw - sb/2 - (--sub-width/2 + 32). var(--mj-wide-l) 을 쓰면 그 안의 50% 가 .mj-txt 기준으로 풀려서 클램프가 안 먹는다. */ #major .mj-txt > *{position:relative;z-index:1;} /* ---------- 항목 등장 : 오른쪽 -> 왼쪽으로 미끄러져 들어오기 ---------- 가리개를 걷는 게 아니라 이미지·글 상자가 통째로 움직인다. 1·3번은 오른쪽에서 왼쪽으로, 2번(.reverse)은 반대로. 순서는 글이 먼저, 이미지가 0.3초 뒤. 글이 먼저 자리를 잡고 있어야 뒤따라오는 이미지가 그 위를 밟고 지나가는 게 눈에 보인다(반대로 하면 이미지가 지나갈 때 글이 아직 안 보여서 겹치는 느낌이 안 난다). 둘이 같은 거리를 가면 사이 간격(90px)이 그대로 유지돼 절대 안 겹치므로, 이미지는 320px 로 더 멀리서 온다. 겹칠 때 위로 오도록 z-index 를 줬고 투명도도 0.35초로 먼저 채워, 자리 잡은 글 위를 덮으면서 지나간다. 글 칸은 본문 칸의 오른쪽 끝에 붙어 있어서, 오른쪽으로 밀 수 있는 거리가 흰 카드 벽까지의 여유(= (문서폭 - 본문칸)/2)로 제한된다. 그 이상 밀면 가로 스크롤이 생긴다. 왼쪽(2번)으로 나가는 건 스크롤을 만들지 않으므로 제한이 없다. 기본값이 "제자리"라 JS 가 없거나 실패해도 그냥 보인다(밀어 두는 건 sub2_1_a.php 의 관찰자). */ #major .mj-fig, #major .mj-txt-in{--mj-slide:150px;transition:transform 1.1s cubic-bezier(.22,.61,.36,1),opacity .75s ease;} #major .mj-txt-in{--mj-slide:min(150px, max(54px, calc(50vw - var(--sb, 0px) / 2 - var(--sub-width) / 2 - 2px)));} #major .reverse .mj-txt-in{--mj-slide:150px;} #major .mj-fig{--mj-slide:320px;transition:transform 1.25s cubic-bezier(.22,.61,.36,1),opacity .35s ease;transition-delay:.3s;} #major .is-closed .mj-fig, #major .is-closed .mj-txt-in{opacity:0;transform:translateX(var(--mj-slide));} #major .reverse.is-closed .mj-fig, #major .reverse.is-closed .mj-txt-in{transform:translateX(calc(-1 * var(--mj-slide)));} #major .mj-sub{margin:0 0 28px;color:#1a1c20;font-size:clamp(30px,3.3vw,46px);font-weight: 700;line-height:1.3;letter-spacing: -2px;} #major .mj-txt p, #major .mj-wide p{margin:0;color:#4d525c;font-size:20px;font-weight:400;line-height:1.8;letter-spacing:-.8px;word-break: keep-all;} #major .mj-txt p + p, #major .mj-wide p + p{margin-top:20px;} #major .mj-txt p b, #major .mj-wide p b{color:#1a1c20;font-weight:700;} /* ---------- 풀블리드 밴드 ---------- */ #major .mj-wide{position:relative;margin:0 0 120px;} #major .mj-wide-in{display:flex;align-items: flex-start;gap:90px;width:100%;margin:0;} /* ---------- 맺음 ---------- */ #major .mj-closing{margin: 0 0 40px;color:#1a1c20;font-size:clamp(26px,3vw,42px);font-weight:400;line-height:1.55;letter-spacing:-1.6px;} #major .mj-closing b{font-weight:700;} /* ---------- 입학 안내 ---------- */ #major .mj-admission{display:flex;align-items:center;justify-content:space-between;gap:40px;padding: 74px 64px;border-radius:20px;background:#1b3b86 url("/images/sub/bn_bg.jpg") no-repeat 50% 50% / cover;background-attachment:fixed;} /* 고정 배경. 이 요소에 transform 이 걸리면(wow 애니메이션 등) fixed 가 scroll 처럼 동작하므로 마크업에서 wow 를 뺐다 */ #major .mj-admission-txt strong{display:block;margin-bottom:14px;color:#fff;font-size: 38px;font-weight:700;letter-spacing: -1px;} #major .mj-admission-txt p{margin:0;color:rgba(255,255,255,.82);font-size: 20px;font-weight:400;line-height:1.7;letter-spacing:-.7px;} /* hct.co.kr 의 [판매사이트로 이동] 버튼 치수 그대로 : 높이 64px = 상하 16px + 글줄 30px + 테두리 2px, 좌우 32px, 글·아이콘 사이 16px, 모서리 6px, 글 20px/700, 아이콘 28px. 기본은 라인 + 흰 글씨, 롤오버 때 흰 바탕 + 파란 글씨로 뒤집힌다. */ #major .mj-admission-btn{display:inline-flex;align-items:center;gap:16px;flex-shrink:0;padding:16px 32px;border:1px solid rgba(255,255,255,.45);border-radius:6px;color:#fff;font-size:20px;font-weight:700;line-height:1.5;letter-spacing:normal;text-decoration:none;transition:background .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out;} #major .mj-admission-btn i{display:block;font-size:28px;font-weight:normal;line-height:1;} /* line-height 를 1 로 눕혀야 아이콘 상자가 28px 이 되고 버튼 높이가 64px 로 맞는다 */ #major .mj-admission-btn:hover{border-color:#fff;background:#fff;color:var(--main-color);} /* ---------- 반응형 ---------- */ @media (max-width:1500px){ #major .mj-item{gap:60px;margin-bottom:105px;} #major .mj-banner{margin-bottom:96px;} #major .mj-wide{padding:76px 0;margin-bottom:90px;} #major .mj-wide-in{gap:60px;} #major .mj-closing{margin-bottom:90px;} } @media (max-width:1170px){ #major .mj-intro{margin-bottom:48px;} #major .mj-banner{height:300px;margin-bottom:72px;} #major .mj-banner-bg{height:300px;background-attachment:scroll;} #major .mj-admission{background-attachment:scroll;} /* 모바일(특히 iOS)에서 fixed 는 끊기거나 아예 안 먹는다 */ #major .mj-item, #major .mj-item.reverse{flex-direction:column;align-items:stretch;gap:32px;margin-bottom:76px;} #major .mj-txt:after{font-size:200px;bottom:-16px;} /* 세로로 쌓이면 이미지도 본문 칸 폭이라 오른쪽으로 밀 여유가 없다 — 이동 거리를 줄인다 */ #major .mj-fig, #major .mj-txt-in, #major .reverse .mj-txt-in{--mj-slide:40px;} /* 세로로 쌓이면 이미지도 본문 칸 폭으로 되돌린다 */ #major .mj-fig, #major .mj-item:not(.reverse) > .mj-fig, #major .mj-item.reverse > .mj-fig, #major .mj-wide-in > .mj-fig{flex:none;width:100%;margin:0;border-radius:20px;} #major .mj-txt p, #major .mj-wide p{font-size:18px;} #major .mj-wide{padding:64px 0;margin-bottom:70px;} #major .mj-wide-in{flex-direction:column;align-items:stretch;gap:32px;} #major .mj-closing{margin-bottom:70px;} #major .mj-admission{padding:40px 36px;} #major .mj-admission-txt strong{font-size:24px;} #major .mj-admission-txt p{font-size:17px;} #major .mj-admission-btn{padding:15px 28px;font-size:18px;} #major .mj-admission-btn i{font-size:25px;} } @media (max-width:767px){ #major .mj-eyebrow{margin-bottom:14px;font-size:16px;} #major .mj-tit{letter-spacing:-1.4px;} #major .mj-banner{height:210px;margin-bottom:50px;} #major .mj-banner-in{border-radius:14px;} #major .mj-banner-bg{height:210px;} #major .mj-txt:after{display:none;} /* 좁아지면 글과 겹치므로 뺀다 */ #major .mj-item, #major .mj-item.reverse{gap:22px;margin-bottom:50px;} #major .mj-sub{margin-bottom:18px;letter-spacing:-1.2px;} #major .mj-txt p, #major .mj-wide p{font-size:16px;line-height:1.78;} #major .mj-txt p + p, #major .mj-wide p + p{margin-top:15px;} #major .mj-wide{padding:44px 0;margin-bottom:50px;} #major .mj-closing{margin-bottom:46px;letter-spacing:-1px;} #major .mj-closing br{display:none;} #major .mj-admission{flex-direction:column;align-items:stretch;gap:24px;padding:30px 24px;} #major .mj-admission-txt strong{font-size:21px;} #major .mj-admission-txt p{font-size:16px;} #major .mj-admission-txt p br{display:none;} #major .mj-admission-btn{justify-content:center;gap:12px;padding:14px 22px;font-size:16px;} #major .mj-admission-btn i{font-size:22px;} } @media (prefers-reduced-motion:reduce){ #major .mj-banner-in, #major .mj-banner-in.is-closed{height:100%;transition:none;} #major .mj-banner-bg{background-attachment:scroll;} #major .mj-admission-btn{transition:none;} #major .mj-fig, #major .mj-txt-in, #major .is-closed .mj-fig, #major .is-closed .mj-txt-in, #major .reverse.is-closed .mj-fig, #major .reverse.is-closed .mj-txt-in{opacity:1;transform:none;transition:none;} } /* ************************** sub2_2_a: 대학원 소개 ****************************** * 학부 전공소개(#major)와 같은 계열이되 구성은 다르게 잡았다. * #major : 이미지와 글이 좌우로 번갈아 가는 읽을거리 중심 * #grad : 숫자 · 학위과정 카드 · 분야 칩 · Q&A 아코디언으로 훑어보는 정보 중심 * 인트로 / 풀블리드 배너 / 맨 아래 입학 안내 띠만 #major 와 같은 규칙을 쓴다. ============================================================================== */ #grad{position:relative;font-family:var(--font-family1);word-break:keep-all; /* 본문 칸을 뚫고 흰 카드 폭까지 넓히는 값(#major 와 동일) */ --gd-wide-w:calc(100vw - var(--sb, 0px) - 64px); --gd-wide-l:calc(50% - 50vw + var(--sb, 0px) / 2 + 32px); } /* ---------- 인트로 ---------- */ #grad .gd-intro{margin-bottom:60px;text-align:center;} #grad .gd-eyebrow{display:inline-block;margin-bottom:24px;padding:min(.2604166667vw,5px) min(.625vw,12px);border-radius:.5208333333vw;background-color:var(--main-color);color:#fff;font-family:var(--font-family1);font-size:1.0416666667vw;font-weight:600;line-height:1.4;letter-spacing:-.01em;text-transform:uppercase;} /* 제목 치수는 hct.co.kr 의 값을 그대로 옮겼다 : 페이지 제목 56/800/-2.24px, 구역 제목 44/800/-1.76px, 작은 제목 32/800/-1.28px */ #grad .gd-tit{margin:0;color:#0f0f10;font-size:clamp(30px,3.5vw,56px);font-weight:800;line-height:1.3;letter-spacing:-2.24px;} #grad .gd-tit b{font-weight:800;} #grad .gd-lead{max-width:1000px;margin:34px auto 0;color:#4d525c;font-size:20px;font-weight:400;line-height:1.8;letter-spacing:-.8px;} #grad .gd-lead b{color:#1a1c20;font-weight:700;} /* ---------- 숫자 ---------- */ /* 숫자 3개 : 서울공대 교육연구재단 'by the Number' 참조. 박스 · 선 없이 큰 숫자, 그 오른쪽 위로 옅은 선 아이콘을 크게 깔고, 아래 굵은 제목 · 회색 주석 */ /* 가로로 너무 벌어지지 않게 70% 폭으로 가운데 모은다 */ #grad .gd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;width:70%;margin:0 auto 90px;padding:96px 0 10px;list-style:none;} /* 숫자 + 제목을 한 줄로 (60+ 우수한 교수진) */ #grad .gd-stats > li{display:flex;align-items:center;justify-content:center;gap:20px;} /* z-index:0 으로 숫자가 제 층을 갖게 해야 아이콘(-1)이 흰 바탕 뒤로 숨지 않고 숫자 바로 뒤에 깔린다 */ /* 숫자 크기를 변수로 두고 단위의 아래 여백 계산에 쓴다 */ #grad .gd-stats strong{--fs:clamp(58px,5.8vw,88px);position:relative;z-index:0;flex:none;display:inline-flex;align-items:flex-end;color:#16181d;font-family:var(--font-family3,var(--font-family2));font-size:var(--fs);font-weight:700;line-height:1;letter-spacing:-3px;} /* 단위(명 · 개 · 위) : 숫자 줄상자 아래쪽에는 글자 크기의 약 15% 빈자리가 있다 (Poppins, line-height:1). 글줄 맞춤(baseline)으로 두면 한글이 숫자보다 아래로 처져서, 아래 끝에 붙이고 그 빈자리만큼 올린다 */ #grad .gd-stats strong em{margin:0 0 calc(var(--fs) * .1535 + 1px) 6px;font-family:var(--font-family1);font-size:26px;font-style:normal;font-weight:700;line-height:1;letter-spacing:-.5px;} /* 아이콘 : Flaticon PNG 를 마스크로 써서 색을 CSS 로 칠한다 */ #grad .gd-stat-ico{position:absolute;right:-34px;top:-82px;z-index:-1;width:100px;height:100px;background:#dde2ea;-webkit-mask:var(--ico) center / contain no-repeat;mask:var(--ico) center / contain no-repeat;pointer-events:none;} #grad .gd-stat-ico.ico-school{--ico:url("../images/sub/ico_school.png");} #grad .gd-stat-ico.ico-lab{--ico:url("../images/sub/ico_lab.png");} #grad .gd-stat-ico.ico-trophy{--ico:url("../images/sub/ico_trophy.png");} /* 제목은 아이콘보다 위층 (아이콘이 숫자 층에 있어 그대로 두면 제목 글씨를 덮는다) */ #grad .gd-stat-txt{position:relative;z-index:1;margin:0;text-align:left;} #grad .gd-stats span{display:block;color:#1a1c20;font-size:21px;font-weight:700;line-height:1.35;letter-spacing:-.6px;} #grad .gd-stats small{display:block;margin-top:6px;color:#6b717c;font-size:15px;font-weight:500;letter-spacing:-.3px;} #grad .gd-stats small:before{content:"*";margin-right:5px;color:var(--main-bright);} /* ---------- 배너 : #major 와 같은 폭 규칙, 가운데에서 위아래로 펼쳐진다 ---------- */ #grad .gd-banner{display:flex;align-items:center;width:var(--gd-wide-w);height:var(--sub-visual-height);margin:0 0 110px var(--gd-wide-l);} #grad .gd-banner-in{width:100%;height:100%;border-radius:20px;overflow:hidden;transition:height .9s cubic-bezier(.16,1,.3,1);} #grad .gd-banner-in.is-closed{height:0;} #grad .gd-banner-bg{display:block;width:100%;height:var(--sub-visual-height);background:#e8eaee url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=2400&q=80") no-repeat 50% 50%/cover;background-attachment:fixed;} /* ---------- 구역 ---------- */ #grad .gd-sec{margin-bottom:110px;} #grad .gd-sub{margin:0 0 20px;color:#0f0f10;font-size:clamp(28px,2.9vw,44px);font-weight:800;line-height:1.3;letter-spacing:-1.76px;} #grad .gd-desc{margin:0 0 40px;color:#4d525c;font-size: 24px;font-weight: 600;line-height:1.75;letter-spacing:-.7px;} /* ---------- 학위과정 ---------- */ /* 교육 과정 : DB 비전 · 미션 카드 참조 — 흰 카드 · 옅은 그림자 · 원형 아이콘 · 가운데 정렬. 세 칸이 같은 모양이고, 통합과정만 '추천' 배지와 채워진 아이콘으로 구분한다 */ #grad .gd-prog{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0;padding:10px 0 0;list-style:none;align-items:stretch;} #grad .gd-prog > li{position:relative;display:flex;flex-direction:column;align-items:center;padding:52px 30px 46px;border-radius:24px;background:#fff;box-shadow:0 12px 40px rgba(20,40,90,.08);text-align:center;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease;} #grad .gd-prog-ico{display:flex;align-items:center;justify-content:center;width:88px;height:88px;margin-bottom:26px;border-radius:50%;background:#f1f4f9;color:var(--main-color);font-size:38px;line-height:1;transition:background .5s ease,color .5s ease;} #grad .gd-prog-ico i{font-weight:normal;} #grad .gd-prog > li > strong{color:#1a1c20;font-size: 30px;font-weight:700;line-height:1.3;letter-spacing: -2px;} #grad .gd-prog > li > small{display:block;margin-top:10px;color:#8a90a0;font-family:var(--font-family2);font-size: 18px;font-weight:500;letter-spacing:-.2px;} /* 원본이 추천하는 과정 하나만 색을 뒤집는다 */ #grad .gd-prog > li > strong{transition:color .5s ease;} #grad .gd-prog > li.is-lit{transform:translateY(-6px);box-shadow:0 20px 44px rgba(20,40,90,.14);} #grad .gd-prog > li.is-lit .gd-prog-ico{background:var(--main-color);color:#fff;} #grad .gd-prog > li.is-lit > strong{color:var(--main-color);} #grad .gd-prog + .gd-note{margin-top:28px;} /* ---------- 연구분야 카드 ---------- hct.co.kr 의 [관련 법령] 카드(.box-flow.num.sm)를 그대로 옮겼다. 회색 카드(#f5f7fa · 모서리 8px · 안여백 24px · 간격 16px)에 작은 파란 번호와 굵은 제목을 한 줄로 놓고, 오른쪽 끝에 원형 화살표를 둔다. 한 줄 3칸도 원본과 같다. */ #grad .gd-areas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none;} #grad .gd-areas > li{display:flex;} /* 칸 높이를 맞추되, a 에 height:100% 를 주면 그리드 행 높이와 서로를 참조해 카드가 부푼다 */ #grad .gd-areas a{box-sizing:border-box;flex:1 1 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px;padding:24px;border-radius:8px;background:#f5f7fa;text-decoration:none;transition:background .2s ease;} #grad .gd-area-in{display:flex;align-items:center;gap:12px;min-width:0;} #grad .gd-area-in em{flex-shrink:0;color:var(--main-bright);font-family:var(--font-family3);font-size:15px;font-style:normal;font-weight:700;line-height:24px;} #grad .gd-area-in strong{color:#001a33;font-size:20px;font-weight:700;line-height:1.6;letter-spacing:-.8px;} #grad .gd-areas a > i{flex-shrink:0;color:var(--main-bright);font-size:29px;font-weight:normal;line-height:1;transition:transform .2s ease;} #grad .gd-areas a:hover{background:#e9eef7;} #grad .gd-areas a:hover > i{transform:translateX(3px);} #grad .gd-areas a:focus-visible{outline:2px solid var(--main-color);outline-offset:2px;} /* ---------- Q&A ---------- */ /* HCT 자주 묻는 질문 참조 : 위 2px 검은 선, 질문 22px 굵게, 파란 Q, 오른쪽 + (열면 −), 답은 연회색 칸 안에 회색 A. Q · A 글자 폭(15px) + 간격(32px)으로 질문과 답의 첫 글자를 한 줄에 맞춘다 */ #grad .gd-qa{margin:0;padding:0;list-style:none;border-top:2px solid #111;} #grad .gd-qa > li{border-bottom:1px solid #e2e6ee;} #grad .gd-q{display:flex;align-items:flex-start;gap:32px;width:100%;padding:36px 24px;border:0;background:transparent;color:#0f0f10;font-family:inherit;font-size: 26px;font-weight: 700;line-height:1.6;letter-spacing:-.8px;text-align:left;cursor:pointer;} #grad .gd-q em{flex:0 0 15px;color:var(--main-color);font-family:var(--font-family3,var(--font-family2));font-size: 29px;font-style:normal;font-weight: 600;line-height: 37px;} #grad .gd-q > span{flex:1 1 auto;min-width:0;word-break: keep-all;} /* + / − : 가로 막대는 그대로, 세로 막대만 눕혀서 − 가 된다 */ #grad .gd-plus{position:relative;flex:0 0 24px;width:24px;height:35px;} #grad .gd-plus:before, #grad .gd-plus:after{content:"";position:absolute;left:2px;top:50%;width:20px;height:2px;margin-top:-1px;border-radius:1px;background:#0f0f10;transition:transform .3s cubic-bezier(.16,1,.3,1);} #grad .gd-plus:after{transform:rotate(90deg);} #grad .gd-qa > li.on .gd-plus:after{transform:rotate(0deg);} #grad .gd-q:hover > span{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;} /* 열고 닫기 : 0fr <-> 1fr 이라야 높이를 몰라도 부드럽게 움직인다. JS 가 붙기 전(js-on 없음)에는 모두 열린 상태로 둔다 */ #grad .gd-qa.js-on .gd-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1);} #grad .gd-qa.js-on > li.on .gd-a{grid-template-rows:1fr;} #grad .gd-a-in{overflow:hidden;} #grad .gd-a p{position:relative;margin:0;padding:36px 24px 36px 71px;background:#f5f7fa;color:#3a3f48;font-size: 20px;word-break: keep-all;font-weight:400;line-height:1.8;letter-spacing:-.6px;} #grad .gd-a p:before{content:"A";position:absolute;left:24px;top:36px;width:15px;color:#bfc1c5;font-family:var(--font-family3,var(--font-family2));font-size: 29px;font-weight: 600;line-height: 38px;} #grad .gd-a p b{color:#1a1c20;font-weight:700;} /* ---------- 입학 안내 : #major 의 띠와 같은 치수 ---------- */ #grad .gd-more{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:60px;border-radius:20px;background:#1b3b86 url("/images/sub/bn_bg.jpg") no-repeat 50% 50%/cover;background-attachment:fixed;} /* 고정 배경이므로 이 요소에 wow(transform)를 걸면 안 된다 */ #grad .gd-more-txt strong{display:block;margin-bottom:14px;color:#fff;font-size: 40px;font-weight: 700;letter-spacing:-1.28px;} #grad .gd-more-txt p{margin:0;color:rgba(255,255,255,.82);font-size:19px;font-weight:400;line-height:1.7;letter-spacing:-.7px;} #grad .gd-more-btn{display:inline-flex;align-items:center;gap:16px;flex-shrink:0;padding:16px 32px;border:1px solid rgba(255,255,255,.45);border-radius:6px;color:#fff;font-size:20px;font-weight:700;line-height:1.5;letter-spacing:normal;text-decoration:none;transition:background .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out;} #grad .gd-more-btn i{display:block;font-size:28px;font-weight:normal;line-height:1;} #grad .gd-more-btn:hover{border-color:#fff;background:#fff;color:var(--main-color);} /* ---------- 표 (sub2_2_g 장학금) ---------- */ #grad .gd-table{overflow-x:auto;} /* 좁아지면 표만 안에서 밀린다. 페이지가 가로로 밀리지는 않는다 */ #grad .gd-table table{width:100%;min-width:760px;border-collapse:collapse;border-top:2px solid #222;} #grad .gd-table th, #grad .gd-table td{padding:22px 24px;border-bottom:1px solid #e2e6ee;text-align:left;vertical-align:middle;} #grad .gd-table thead th{padding:18px 24px;background:#f5f7fa;color:#5a616e;font-size:17px;font-weight:700;letter-spacing:-.3px;} #grad .gd-table tbody th{background:#fafbfc;color:var(--main-bright);font-size:19px;font-weight:700;letter-spacing:-.6px;} #grad .gd-table td{color:#4d525c;font-size:18px;font-weight:400;line-height:1.7;letter-spacing:-.6px;} #grad .gd-table td.nm{color:#001a33;font-size:19px;font-weight:700;line-height:1.5;letter-spacing:-.7px;} #grad .gd-table td.nm small{display:block;margin-top:6px;color:#8a90a0;font-size:16px;font-weight:500;letter-spacing:-.4px;} #grad .gd-table td b{color:#1a1c20;font-weight:700;} /* 표 아래 덧붙이는 안내. 교과목 트리의 .ct-lede 와 같은 결 */ #grad .gd-note{display:flex;align-items:flex-start;gap:10px;margin:30px 0 0;padding:22px 24px;border-radius:12px;background:#f5f7fa;color:#4d525c;font-size:18px;font-weight:500;line-height:1.7;letter-spacing:-.6px;} #grad .gd-note i{flex:none;font-size:23px;font-weight:normal;line-height:30.6px;color:var(--main-bright);} /* 글줄 높이(18 x 1.7)와 같게 줘야 첫 줄 가운데에 온다 */ #grad .gd-note b{color:#1a1c20;font-weight:700;} /* 장학금 페이지의 링크 카드는 두 개뿐이라 절반씩 쓴다 */ #grad.gd-scholarship .gd-areas{grid-template-columns:repeat(2,1fr);} /* ---------- 국제화 프로그램 (sub2_3_a) : 지도 ---------- hanatourcompany.com 메인의 Global Network 구성을 따랐다(지도 · 깜빡이는 점 · 선 · 알약 이름표 · 숫자). 지도는 그 사이트 이미지가 아니라 Natural Earth(퍼블릭 도메인) 육지 데이터로 직접 만든 SVG 다. 점 · 선 · 이름표 크기를 모두 cqw(지도 폭의 1%)로 잡아, 지도가 커지고 작아져도 서로의 배치가 그대로다. 그래서 이름표 겹침은 한 번만 맞춰 두면 된다. */ #grad .gn-map{position:relative;container-type:inline-size;margin:0 0 110px; --gn-deg:var(--main-bright); --gn-int:#0c8579; /* 흰 바탕 위 작은 글씨 대비 4.5:1 이상 */ } #grad .gn-land{display:block;width:100%;height:auto;pointer-events:none;user-select:none;} #grad .gn-marks{position:absolute;top:0;left:0;right:0;height:47.912cqw;margin:0;padding:0;list-style:none;} /* 지도 이미지 비율(2098x1005)과 같은 높이. inset:0 으로 두면 좁은 화면에서 아래로 내린 제목까지 높이에 들어가 점이 밀린다 */ #grad .gn-mk{position:absolute;width:0;height:0;--c:var(--gn-deg);} #grad .gn-mk.is-int{--c:var(--gn-int);} #grad .gn-mk.is-home{--c:var(--main-color);z-index:2;} /* 점 : hanatourcompany.com 의 .point 와 같은 3겹 — 옅은 색 원(숨쉬듯 커졌다 작아짐) · 흰 원 · 가운데 색 점. 모든 점이 같은 크기, 같은 박자로 움직인다(시차를 두면 순간마다 크기가 달라 보인다). 크기는 round() 로 짝수 px 에 맞춘다. 소수 px 이면 놓인 위치에 따라 가로 · 세로가 따로 반올림돼 원이 찌그러진다. 가운데 정렬도 translate(-50%) 대신 inset:0 + margin:auto 로 해서 반 px 어긋남을 없앴다. round() 를 모르는 브라우저는 바로 앞 줄의 cqw 값을 쓴다. */ #grad .gn-pt{position:absolute;z-index:2; width:1.56cqw;height:1.56cqw;left:-.78cqw;top:-.78cqw; width:round(1.56cqw, 2px);height:round(1.56cqw, 2px);left:calc(round(1.56cqw, 2px) / -2);top:calc(round(1.56cqw, 2px) / -2);} #grad .gn-pt i{position:absolute;inset:0;border-radius:50%;background:var(--c);opacity:.22;animation:gnPulse 1.5s ease-in-out infinite;} #grad .gn-pt em{position:absolute;inset:0;margin:auto;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,30,70,.22); width:.7cqw;height:.7cqw; width:round(.7cqw, 2px);height:round(.7cqw, 2px);} #grad .gn-pt em:after{content:"";position:absolute;inset:0;margin:auto;border-radius:50%;background:var(--c); width:.38cqw;height:.38cqw; width:round(.38cqw, 2px);height:round(.38cqw, 2px);} @keyframes gnPulse{ 0%,100%{transform:scale(.6);} 50%{transform:scale(1);} } /* 선 : 점에서 이름표까지. 각도와 길이는 마크업의 --ang / --len */ #grad .gn-ln{position:absolute;left:0;top:0;z-index:1;width:var(--len);height:max(1px,.08cqw);background:var(--c);opacity:.55;transform:rotate(var(--ang));transform-origin:0 50%;} /* 이름표 : 선 끝(--ax, --ay)에 붙는다. 붙는 쪽은 h-(l·c·r) / v-(t·m·b) 로 정한다 */ #grad .gn-lb{position:absolute;left:var(--ax);top:var(--ay);z-index:3;white-space:nowrap;padding:.36cqw 1cqw;border:max(1px,.07cqw) solid var(--c);border-radius:999px;background:#fff;color:#0f0f10;font-family:var(--font-family3);font-size:.98cqw;font-weight:600;line-height:1.25;letter-spacing:-.01em;text-align:center;box-shadow:0 .3cqw .9cqw rgba(27,59,134,.10);transform:translate(var(--tx,0),var(--ty,-50%));} #grad .gn-mk.h-l .gn-lb{--tx:-100%;} #grad .gn-mk.h-c .gn-lb{--tx:-50%;} #grad .gn-mk.v-t .gn-lb{--ty:-100%;} #grad .gn-mk.v-b .gn-lb{--ty:0;} #grad .gn-mk.is-home .gn-lb{border-color:var(--c);background:var(--c);color:#fff;font-family:var(--font-family1);font-size:1.08cqw;font-weight:700;} /* 등장 : JS 가 is-wait 를 붙였다가 화면에 들어오면 is-on 으로 바꾼다 */ #grad .gn-map.is-wait .gn-pt{opacity:0;transform:scale(.2);} #grad .gn-map.is-wait .gn-ln{transform:rotate(var(--ang)) scaleX(0);} #grad .gn-map.is-wait .gn-lb{opacity:0;} #grad .gn-map.is-on .gn-pt{transition:opacity .4s ease calc(var(--d) * 70ms),transform .6s cubic-bezier(.34,1.56,.64,1) calc(var(--d) * 70ms);} #grad .gn-map.is-on .gn-ln{transition:transform .45s cubic-bezier(.22,.61,.36,1) calc(var(--d) * 70ms + 220ms);} #grad .gn-map.is-on .gn-lb{transition:opacity .45s ease calc(var(--d) * 70ms + 480ms);} /* 제목 · 숫자 : 태평양 빈 자리에 얹는다. 글자 크기는 지도 칸 1600px 기준으로 제목 42px · 영문 20px · 항목 18px 이 되도록 cqw 로 환산했다(1cqw = 16px). px 로 고정하면 지도가 작아질 때 상자만 그대로 커서 이름표와 겹치므로 지도와 같이 줄게 둔다. 숫자 상자는 제목보다 좁게 잡아 오른쪽 남아메리카 해안을 가리지 않는다. */ #grad .gn-box{position:absolute;left:54cqw;top:26.6cqw;width:24cqw;} #grad .gn-box-eyebrow{display:inline-block;margin-bottom:.75cqw;color:var(--main-bright);font-family:var(--font-family3);font-size:1.25cqw;font-weight:700;line-height:1.4;letter-spacing:.02em;text-transform:uppercase;} #grad .gn-box-tit{display:block;margin-bottom:1.75cqw;color:#0f0f10;font-size:2.625cqw;font-weight:800;line-height:1.3;letter-spacing:-.04em;} #grad .gn-count{display:flex;flex-direction:column;gap:.625cqw;width: 24cqw;margin:0;padding:0;list-style:none;} #grad .gn-count > li{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:1.5cqw;height:3.5cqw;padding:0 1.5cqw 0 1.375cqw;border-radius:.75cqw;letter-spacing: -1px;background:rgba(255,255,255,.86);box-shadow:0 .4cqw 1.2cqw rgba(27,59,134,.09);} #grad .gn-count > li > span{display:flex;align-items:center;gap:.625cqw;order:-1;color:#4d525c;font-size:max(16px,1.125cqw);font-weight:600;letter-spacing:-.03em;white-space:nowrap;} #grad .gn-count > li > span:before{content:"";flex:none;width:.625cqw;height:.625cqw;border-radius:50%;background:var(--gn-deg);} #grad .gn-count > li:nth-child(2) > span:before{background:var(--gn-int);} #grad .gn-count > li:nth-child(3) > span:before{background:#b6bfd0;} #grad .gn-count strong{display:flex;color:var(--main-bright);font-family:var(--font-family3);font-size:2cqw;font-weight:700;line-height:1;} /* 숫자 굴리기 : 한 자리마다 0~9 띠를 1em 창으로 보여 준다 */ #grad .gn-dg{display:block;overflow:hidden;height:1em;} #grad .gn-dg > b{display:flex;flex-direction:column;font-weight:inherit;transition:transform 1.4s cubic-bezier(.22,1,.36,1);} #grad .gn-dg span{display:block;height:1em;line-height:1;} /* 지도가 좁아지면(칸 1100px 미만) 이름표는 겹치므로 점만 남기고, 제목 · 숫자는 지도 아래로 내린다 */ @container (max-width:1100px){ #grad .gn-ln, #grad .gn-lb{display:none;} /* 좁은 화면에서도 점은 모두 같은 크기. 너무 작아지지 않게 px 로 고정한다 */ #grad .gn-pt{width:18px;height:18px;left:-9px;top:-9px;} #grad .gn-pt em{width:8px;height:8px;} #grad .gn-pt em:after{width:4px;height:4px;} #grad .gn-box{position:static;width:auto;margin-top:28px;} #grad .gn-box-eyebrow{margin-bottom:8px;font-size:17px;} #grad .gn-box-tit{margin-bottom:20px;font-size:30px;} #grad .gn-box-tit br{display:none;} #grad .gn-count{flex-direction:row;flex-wrap:wrap;gap:10px;width:auto;} #grad .gn-count > li{flex:1 1 180px;height:auto;min-height:60px;padding:12px 18px;border-radius:10px;background:#f5f7fa;box-shadow:none;} #grad .gn-count > li > span{gap:8px;font-size:18px;} #grad .gn-count > li > span:before{width:10px;height:10px;} #grad .gn-count strong{font-size:28px;} } /* ---------- 국제화 프로그램 : 기관 카드 ---------- 원본처럼 기관 로고를 넣는다. 로고는 흰 바탕에서 가장 잘 보이므로 카드는 흰색 + 옅은 테두리. 위쪽에 로고(높이는 PHP 가 가로세로 비율로 정한다) · 오른쪽 위에 새 창 표시, 아래에 나라 · 이름. 로고 칸 높이를 64px 로 고정해 카드끼리 이름 줄이 가지런히 맞는다. */ #grad .gd-partners{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none;} #grad .gd-partners > li{display:flex;} #grad .gd-partners a{--c:var(--main-bright);box-sizing:border-box;flex:1 1 auto;display:grid;grid-template-columns:1fr auto;grid-template-rows:64px auto;gap:22px 16px;align-items:start;padding:28px;border:1px solid #e2e6ee;border-radius:8px;background:#fff;text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease;} #grad .gd-partners a.is-int{--c:#0c8579;} #grad .gd-partner-logo{display:flex;align-items:center;height:64px;min-width:0;} #grad .gd-partner-logo img{display:block;width:auto;max-width:100%;object-fit:contain;} #grad .gd-partner-in{grid-column:1 / -1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;} #grad .gd-partner-in em{padding:1px 10px;border-radius:999px;background:#f5f7fa;color:var(--c);font-size:15px;font-style:normal;font-weight:700;line-height:1.6;letter-spacing:-.3px;} #grad .gd-partner-in strong{color:#001a33;font-size:20px;font-weight:700;line-height:1.45;letter-spacing:-.6px;} #grad .gd-partner-in small{color:#8a90a0;font-size:16px;font-weight:500;line-height:1.45;letter-spacing:-.3px;} #grad .gd-partners a > i{display:flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:50%;background:var(--c);color:#fff;font-size:16px;font-weight:normal;line-height:1;transition:transform .2s ease;} #grad .gd-partners a:hover{border-color:var(--c);box-shadow:0 6px 20px rgba(27,63,134,.10);} #grad .gd-partners a:hover > i{transform:translate(2px,-2px);} #grad .gd-partners a:focus-visible{outline:2px solid var(--c);outline-offset:2px;} #grad .gd-partners + .gd-note{margin-top:30px;} #grad .gd-note a{display:inline-flex;align-items:center;gap:2px;margin-left:6px;color:var(--main-bright);font-weight:700;text-decoration:none;white-space:nowrap;} #grad .gd-note a i{font-size:18px;line-height:1;} #grad .gd-note a:hover{text-decoration:underline;} /* ---------- 산학연계 프로그램 (sub2_3_b) ---------- */ #grad .gd-banner-ind .gd-banner-bg{background-image:url("https://images.unsplash.com/photo-1748349221526-33b51820b21e?auto=format&fit=crop&w=2400&q=80");} /* 교육과정 카드 : 연구분야 카드(.gd-areas)와 같은 회색 카드. 링크가 아니라 화살표 없이 번호 · 기업 · 과정명 */ #grad .gd-programs{grid-template-columns:repeat(4,1fr);} #grad .gd-program{box-sizing:border-box;flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:78px;padding:28px 26px;border-radius:8px;background:#f5f7fa;} #grad .gd-program em{margin-bottom:14px;color:var(--main-bright);font-family:var(--font-family3);font-size:15px;font-style:normal;font-weight:700;line-height:1;} #grad .gd-program small{color:#6b7280;font-size: 18px;font-weight:600;line-height:1.45;letter-spacing:-.4px;} #grad .gd-program strong{color:#001a33;font-size: 22px;font-weight:700;line-height:1.45;letter-spacing:-.6px;word-break:keep-all;} /* 사진 + 글 한 줄. .reverse 는 사진이 오른쪽 */ #grad .gd-media{display:flex;align-items:center;gap:80px;margin:0 0 110px;} #grad .gd-media.reverse{flex-direction:row-reverse;} #grad .gd-media-fig{flex:0 0 52%;margin:0;overflow:hidden;border-radius:20px;aspect-ratio:16 / 10;background:#e8eaee;} #grad .gd-media-fig img{display:block;width:100%;height:100%;object-fit:cover;} #grad .gd-media-txt{flex:1 1 auto;min-width:0;} #grad .gd-media-eyebrow{display:block;margin-bottom:14px;color:var(--main-bright);font-family:var(--font-family3);font-size:16px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;} #grad .gd-media-tit{margin:0 0 24px;color:#0f0f10;font-size: clamp(28px,2.4vw,48px);font-weight:800;line-height:1.3;letter-spacing:-1.6px;} #grad .gd-media-txt p{margin:0;color:#4d525c;font-size: 22px;font-weight:400;line-height:1.8;letter-spacing:-.7px;} #grad .gd-media-txt p b{color:#1a1c20;font-weight:700;} /* 산학연구협력 기관 : 분야 한 줄 + 기관명 */ #grad .gd-inds{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none;} #grad .gd-inds > li{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:96px;padding:22px 26px;border:1px solid #e2e6ee;border-radius:8px;background:#fff;} #grad .gd-inds small{color:var(--main-bright);font-size: 19px;font-weight:700;line-height:1.4;letter-spacing:-.3px;} #grad .gd-inds strong{color:#001a33;font-size: 24px;font-weight:700;line-height:1.45;letter-spacing:-.6px;word-break:keep-all;} #grad.gd-industry > .gd-note{margin:0;} /* ---------- PDF 미리보기 (sub2_2_f 졸업 요건) ---------- 윗줄 : 문서명 · 개정일 · 쪽수 / 한 쪽 · 두 쪽 / 확대 · 축소 / 새 창 · 내려받기 아래 : 연한 바탕 위에 한 번에 한 쪽(두 쪽 보기면 나란히 두 쪽)을 보여 주고 좌우로 넘긴다. 확대하면 이 칸 안에서만 스크롤된다. */ #grad .pdfv{border:1px solid #e2e6ee;border-radius:16px;background:#fff;} #grad .pdfv-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;padding:20px 24px;border-bottom:1px solid #e2e6ee;} #grad .pdfv-info{display:flex;align-items:center;gap:14px;min-width:0;} #grad .pdfv-info > i{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background:#fdecec;color:#d93a3a;font-size:26px;font-weight:normal;} #grad .pdfv-info strong{display:block;color:#0f0f10;font-size:20px;font-weight:700;line-height:1.4;letter-spacing:-.6px;} #grad .pdfv-info small{display:block;margin-top:2px;color:#8a90a0;font-size:16px;font-weight:500;letter-spacing:-.3px;} #grad .pdfv-tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px;} #grad .pdfv-seg{display:flex;align-items:center;height:44px;border:1px solid #e2e6ee;border-radius:10px;overflow:hidden;} #grad .pdfv-btn{appearance:none;display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:100%;padding:0 12px;border:0;background:#fff;color:#33383f;font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.3px;cursor:pointer;transition:background .2s ease,color .2s ease;} #grad .pdfv-btn + .pdfv-btn{border-left:1px solid #e2e6ee;} #grad .pdfv-btn i{font-size:19px;font-weight:normal;} #grad .pdfv-btn:hover{background:#f5f7fa;color:var(--main-bright);} #grad .pdfv-btn:focus-visible{outline:2px solid var(--main-bright);outline-offset:-2px;} #grad .pdfv-btn.is-on{background:#eaf0fb;color:var(--main-bright);} #grad .pdfv-zoom-val{min-width:72px;font-family:var(--font-family3);} #grad .pdfv-link{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:1px solid #e2e6ee;border-radius:10px;color:#33383f;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .2s ease,background .2s ease,color .2s ease;} #grad .pdfv-link i{font-size:19px;font-weight:normal;} #grad .pdfv-link:hover{border-color:var(--main-bright);color:var(--main-bright);} #grad .pdfv-link.is-main{border-color:var(--main-bright);background:var(--main-bright);color:#fff;} #grad .pdfv-link.is-main:hover{background:var(--main-color);border-color:var(--main-color);color:#fff;} /* 칸이 좁아 두 쪽 보기를 못 쓸 때는 보기 전환을 숨긴다(JS 가 is-narrow 를 붙인다) */ #grad .pdfv.is-narrow .pdfv-mode{display:none;} #grad .pdfv-body{position:relative;border-radius:0 0 16px 16px;background:#eef2f9;} /* 무대 : 좌우 화살표 자리만큼 옆 여백. 종이 묶음은 width:fit-content + margin:auto 로 가운데 — 확대해서 칸보다 넓어지면 여백이 0 이 되어 왼쪽부터 붙고 스크롤로 끝까지 볼 수 있다 */ #grad .pdfv-stage{overflow:auto;padding:36px 88px 20px;outline:0;touch-action:pan-y pinch-zoom;} #grad .pdfv-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--main-bright);} #grad .pdfv-spread{display:flex;gap:24px;width:fit-content;margin:0 auto;} #grad .pdfv-spread canvas{display:block;flex:none;max-width:none;background:#fff;box-shadow:0 2px 6px rgba(15,30,70,.08),0 12px 32px rgba(15,30,70,.10);} #grad .pdfv-spread.is-turn-r{animation:pdfvTurnR .35s cubic-bezier(.22,.61,.36,1);} #grad .pdfv-spread.is-turn-l{animation:pdfvTurnL .35s cubic-bezier(.22,.61,.36,1);} @keyframes pdfvTurnR{from{opacity:0;transform:translateX(28px);}to{opacity:1;transform:none;}} @keyframes pdfvTurnL{from{opacity:0;transform:translateX(-28px);}to{opacity:1;transform:none;}} #grad .pdfv-arrow{position:absolute;top:calc(50% - 30px);z-index:2;display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:#fff;color:#1a1c20;font-size:30px;box-shadow:0 4px 14px rgba(15,30,70,.14);cursor:pointer;transition:background .2s ease,color .2s ease,opacity .2s ease;} #grad .pdfv-arrow i{font-weight:normal;} #grad .pdfv-arrow.is-prev{left:18px;} #grad .pdfv-arrow.is-next{right:18px;} #grad .pdfv-arrow:hover{background:var(--main-bright);color:#fff;} #grad .pdfv-arrow:focus-visible{outline:2px solid var(--main-bright);outline-offset:2px;} #grad .pdfv-arrow:disabled{opacity:.35;cursor:default;background:#fff;color:#1a1c20;} #grad .pdfv-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 20px 24px;color:#4d525c;font-family:var(--font-family3);font-size:16px;font-weight:600;} #grad .pdfv-cur{color:var(--main-bright);} #grad .pdfv-sep{color:#b6bcc7;} #grad .pdfv-dots{display:flex;gap:8px;margin-left:14px;} #grad .pdfv-dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#c9d1df;cursor:pointer;transition:width .25s ease,background .2s ease;} #grad .pdfv-dots button.is-on{width:24px;border-radius:5px;background:var(--main-bright);} #grad .pdfv-dots button:focus-visible{outline:2px solid var(--main-bright);outline-offset:2px;} #grad .pdfv-state{display:none;align-items:center;justify-content:center;gap:10px;margin:0;padding:80px 24px;color:#4d525c;font-size:17px;font-weight:500;text-align:center;} #grad .pdfv-state a{color:var(--main-bright);font-weight:700;} #grad .pdfv-state i{font-size:22px;font-weight:normal;} #grad .pdfv.is-loading .pdfv-loading{display:flex;} #grad .pdfv.is-loading .pdfv-loading i{animation:pdfvSpin 1s linear infinite;} #grad .pdfv.is-loading .pdfv-arrow, #grad .pdfv.is-loading .pdfv-foot, #grad .pdfv.is-fail .pdfv-arrow, #grad .pdfv.is-fail .pdfv-foot, #grad .pdfv.is-fail .pdfv-stage{display:none;} #grad .pdfv.is-fail .pdfv-fallback{display:flex;} @keyframes pdfvSpin{to{transform:rotate(360deg);}} /* ---------- 반응형 ---------- */ @media (max-width:1170px){ #grad .gd-intro{margin-bottom:48px;} #grad .gd-lead{font-size:18px;} #grad .gd-stats{margin-bottom:70px;} #grad .gd-stats{width:100%;padding-top:80px;gap:16px;} #grad .gd-stats > li{gap:14px;} #grad .gd-stat-ico{right:-26px;top:-66px;width:80px;height:80px;} #grad .gd-stats strong em{font-size:22px;} #grad .gd-stats small{font-size:14px;} #grad .gd-stats span{font-size:17px;} #grad .gd-banner{height:300px;margin-bottom:80px;} #grad .gd-banner-bg{height:300px;background-attachment:scroll;} /* 모바일(특히 iOS)에서 fixed 는 끊기거나 안 먹는다 */ #grad .gd-sec{margin-bottom:80px;} #grad .gd-desc{font-size:18px;margin-bottom:32px;} #grad .gd-prog{gap:16px;} #grad .gd-prog > li{padding:44px 20px 38px;} #grad .gd-prog-ico{width:76px;height:76px;margin-bottom:22px;font-size:32px;} #grad .gd-prog > li > strong{font-size:23px;} #grad .gd-prog > li > small{font-size:15px;} #grad .gd-areas{grid-template-columns:repeat(2,1fr);} #grad .gd-partners{grid-template-columns:repeat(2,1fr);} #grad .gd-programs{grid-template-columns:repeat(2,1fr);} #grad .gd-inds{grid-template-columns:repeat(2,1fr);} #grad .gd-media, #grad .gd-media.reverse{flex-direction:column;align-items:stretch;gap:32px;margin-bottom:80px;} #grad .gd-media-fig{flex:none;width:100%;} #grad .gd-media-txt p{font-size:18px;} #grad .gn-map{margin-bottom:80px;} #grad .gd-area-in strong{font-size:19px;} #grad .gd-table th, #grad .gd-table td{padding:18px 20px;} #grad .gd-table td{font-size:17px;} #grad .gd-table td.nm{font-size:18px;} #grad .gd-note{font-size:17px;padding:18px 20px;} #grad .gd-note i{font-size:21px;line-height:28.9px;} #grad .gd-q{gap:28px;padding:30px 20px;font-size:20px;} #grad .gd-a p{padding:30px 20px 30px 63px;font-size:17px;} #grad .gd-a p:before{left:20px;top:30px;} #grad .gd-more{padding:40px 36px;background-attachment:scroll;} #grad .gd-more-txt strong{font-size:24px;} #grad .gd-more-txt p{font-size:17px;} #grad .gd-more-btn{padding:15px 28px;font-size:18px;} #grad .gd-more-btn i{font-size:25px;} } @media (max-width:767px){ #grad .gd-eyebrow{margin-bottom:14px;font-size:16px;} #grad .gd-tit{letter-spacing:-1.4px;} #grad .gd-lead{margin-top:24px;font-size:16px;line-height:1.78;} #grad .gd-stats{grid-template-columns:1fr;gap:68px;margin-bottom:56px;padding-top:66px;} #grad .gd-stat-ico{right:-22px;top:-56px;width:68px;height:68px;} #grad .gd-prog{grid-template-columns:1fr;gap:12px;} #grad .gd-prog > li{display:grid;grid-template-columns:56px 1fr;column-gap:18px;align-items:center;padding:22px 20px;border-radius:18px;text-align:left;} #grad .gd-prog-ico{grid-row:1 / span 2;width:56px;height:56px;margin:0;font-size:25px;} #grad .gd-prog > li > strong{align-self:end;font-size:20px;} #grad .gd-prog > li > small{align-self:start;margin-top:4px;font-size:14px;} #grad .gd-stats strong{--fs:56px;} #grad .gd-stats span{font-size:18px;} #grad .gd-stats small{font-size:14px;} #grad .gd-banner{height:210px;margin-bottom:56px;} #grad .gd-banner-in{border-radius:14px;} #grad .gd-banner-bg{height:210px;} #grad .gd-sec{margin-bottom:56px;} #grad .gd-sub{margin-bottom:14px;letter-spacing:-1.2px;} #grad .gd-desc{font-size:16px;margin-bottom:26px;} #grad .gd-areas{grid-template-columns:1fr;} #grad.gd-scholarship .gd-areas{grid-template-columns:1fr;} #grad .gd-partners{grid-template-columns:1fr;} #grad .gd-programs, #grad .gd-inds{grid-template-columns:1fr;} #grad .pdfv-bar{padding:16px;} #grad .pdfv-info > i{width:40px;height:40px;font-size:22px;} #grad .pdfv-info strong{font-size:17px;} #grad .pdfv-tools{width:100%;} #grad .pdfv-link{flex:1 1 auto;justify-content:center;padding:0 12px;} #grad .pdfv-stage{padding:20px 12px 12px;} #grad .pdfv-arrow{top:auto;bottom:12px;width:44px;height:44px;font-size:24px;} #grad .pdfv-arrow.is-prev{left:12px;} #grad .pdfv-arrow.is-next{right:12px;} #grad .pdfv-foot{min-height:44px;padding:0 64px 12px;} #grad .pdfv-dots{display:none;} #grad .gd-program{padding:22px 20px;} #grad .gd-program strong, #grad .gd-inds strong{font-size:18px;} #grad .gd-inds > li{min-height:80px;padding:18px 20px;} #grad .gd-media, #grad .gd-media.reverse{gap:22px;margin-bottom:56px;} #grad .gd-media-eyebrow{margin-bottom:10px;font-size:15px;} #grad .gd-media-tit{margin-bottom:16px;font-size:24px;letter-spacing:-1px;} #grad .gd-media-tit br{display:none;} #grad .gd-media-txt p{font-size:16px;line-height:1.75;} #grad .gd-partners a{padding:22px 20px;gap:16px 12px;grid-template-rows:52px auto;} #grad .gd-partner-logo{height:52px;} #grad .gd-partner-logo img{max-height:52px;} #grad .gd-partner-in strong{font-size:17px;} #grad .gd-partners a > i{width:26px;height:26px;font-size:14px;} #grad .gn-map{margin-bottom:56px;} #grad .gd-table th, #grad .gd-table td{padding:16px;} #grad .gd-table thead th{padding:14px 16px;font-size:16px;} #grad .gd-table tbody th{font-size:17px;} #grad .gd-table td{font-size:16px;} #grad .gd-table td.nm{font-size:17px;} #grad .gd-table td.nm small{font-size:16px;} /* 본문은 16px 아래로 내리지 않는다 */ #grad .gd-note{font-size:16px;padding:16px;} #grad .gd-note i{font-size:20px;line-height:27.2px;} #grad .gd-areas a{min-height:70px;padding:18px 20px;gap:12px;} #grad .gd-area-in{gap:10px;} #grad .gd-area-in strong{font-size:17px;line-height:1.45;} #grad .gd-areas a > i{font-size:24px;} #grad .gd-q{gap:14px;padding:22px 12px;font-size:17px;letter-spacing:-.6px;} #grad .gd-q em{flex-basis:13px;font-size:17px;line-height:27px;} #grad .gd-plus{flex-basis:18px;width:18px;height:27px;} #grad .gd-plus:before, #grad .gd-plus:after{left:1px;width:16px;} #grad .gd-a p{padding:22px 12px 22px 39px;font-size:16px;line-height:1.75;} #grad .gd-a p:before{left:12px;top:22px;font-size:17px;line-height:28px;} #grad .gd-more{flex-direction:column;align-items:stretch;gap:24px;padding:30px 24px;} #grad .gd-more-txt strong{font-size:21px;} #grad .gd-more-txt p{font-size:16px;} #grad .gd-more-txt p br{display:none;} #grad .gd-more-btn{justify-content:center;gap:12px;padding:14px 22px;font-size:16px;} #grad .gd-more-btn i{font-size:22px;} } @media (prefers-reduced-motion:reduce){ #grad .gd-banner-in, #grad .gd-banner-in.is-closed{height:100%;transition:none;} #grad .gd-banner-bg{background-attachment:scroll;} #grad .gd-qa.js-on .gd-a{transition:none;} #grad .gn-pt i{animation:none;transform:scale(.8);} #grad .gn-pt, #grad .gn-ln, #grad .gn-lb, #grad .gn-dg > b, #grad .gd-partners a, #grad .gd-partners a > i{transition:none !important;} #grad .gd-plus:before, #grad .gd-plus:after, #grad .gd-areas a, #grad .gd-areas a > i, #grad .gd-more-btn{transition:none;} } /* ************************** sub2_1_c: 교과목 트리 ****************************** * 모든 규칙을 #courseTree 로 스코프한다 (.col .node .tag 등이 사이트 전역과 겹친다). * 열을 flex:1 로 균등 분배해 가로 스크롤을 없앤다 (기존 min-width:max-content 제거). * 과목 구분은 카드 배경색 대신 좌측 컬러 바로 — 원본 도표의 5색을 선으로만 쓴다. ============================================================================== */ #courseTree{ --ct-line:#dce2ec; --ct-muted:#8a90a0; --ct-edge:#b9c4d4; --ct-hi:var(--main-color); --ct-dim:.2; --ct-gap-x:56px; --ct-gap-y:10px; /* 과목 구분 색 : Douge Blue(#377ef9) · Pickled Bluewood(#31415f) · Carribean Green(#0ab09e) 계열 테두리 없이 면색만으로 구분한다. dot 은 범례 원형 표식용(면색이 옅어 그대로 쓰면 안 보인다). */ --s-기초-bg:#ffffff; --s-기초-dot:#aeb8c6; --s-기초-tx:#4e5c73; --s-전필-bg:#2a6de6; --s-전필-dot:#2a6de6; --s-전필-tx:#ffffff; /* 흰 글씨 대비 4.74:1 (AA) */ --s-실험-bg:#cdeee8; --s-실험-dot:#3fbfab; --s-실험-tx:#0a6b5e; --s-전선-bg:#dde9fb; --s-전선-dot:#8fb4e8; --s-전선-tx:#2a558a; --s-공통-bg:#ccd6e6; --s-공통-dot:#7d92b0; --s-공통-tx:#2c4364; position:relative;font-family:var(--font-family1);color:#1a1c20;word-break:keep-all; } /* 도입 */ #courseTree .ct-intro{margin-bottom: 60px;} /* 도표 영역 : 위 본문과 구분되도록 테두리 없이 면색으로만 묶는다 */ #courseTree .ct-board{padding:15px;border-radius:20px;background:#eef2f9;} /* 열이 많은 분야는 열 간격을 좁혀 카드 폭을 확보한다 */ #courseTree .ct-graph[data-cols="7"]{--ct-gap-x:40px;} #courseTree .ct-graph[data-cols="8"]{--ct-gap-x:30px;} /* 안내문 아래 요소들은 안내문 박스보다 한 단계 더 들여쓴다 */ #courseTree .ct-board-in{padding:0 20px 20px;} #courseTree .ct-intro p{margin:0;color:#4d525c;font-size: 20px;font-weight: 600;line-height:1.8;letter-spacing:-.7px;} #courseTree .ct-intro p + p{margin-top: 20px;} #courseTree .ct-intro b{color:#1a1c20;font-weight:700;} #courseTree .ct-lede{display:flex;align-items:flex-start;gap:10px;margin:0 0 30px;padding:20px 24px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(28,48,80,.10);color:#4d525c;font-size: 18px;font-weight:500;line-height:1.7;letter-spacing:-.6px;} /* 아이콘은 첫 줄 가운데에 놓이게 글줄 높이(16 x 1.7 = 27.2px)를 그대로 준다. 줄이 넘어가면 글만 아이콘 오른쪽으로 가지런히 이어진다(flex 라 매달린 들여쓰기가 된다) */ #courseTree .ct-lede i{flex:none;font-size: 23px;font-weight:normal;line-height: 29.2px;color:var(--main-color);} /* 분야 탭 : 사이트 3뎁스와 같은 알약 형태 */ #courseTree .ct-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;} #courseTree .ct-tabs button{appearance:none;padding:12px 22px;border: 0;border-radius:999px;background:#fff;color: #222;font:inherit;font-size: 19px;font-weight: 700;letter-spacing:-.5px;white-space:nowrap;cursor:pointer;transition:background .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1),border-color .25s ease;} #courseTree .ct-tabs button:hover{border-color:var(--main-color);color:var(--main-color);} #courseTree .ct-tabs button[aria-selected=true]{border-color:var(--main-color);background:var(--main-color);color:#fff;font-weight:700;} #courseTree .ct-tabs button:focus-visible{outline:2px solid var(--main-color);outline-offset:2px;} /* 범례 : 박스 없이 라인만 */ #courseTree .ct-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-bottom: 20px;padding:0 0 16px;border-bottom:1px solid var(--ct-line);} #courseTree .ct-lg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;} #courseTree .ct-lg i{display:inline-flex;align-items:center;gap:7px;color:#4d525c;font-size: 16px;font-style: normal;font-weight: 700;letter-spacing:-.5px;} #courseTree .ct-lg i:before{content:"";width: 16px;height: 16px;border-radius:50%;background:var(--dot);} #courseTree .ct-ln{display:inline-flex;align-items:center;gap:7px;color:var(--ct-muted);font-size: 16px;font-weight: 700;letter-spacing:-.5px;} #courseTree .ct-ln svg{display:block;} #courseTree .ct-hint{margin:0 0 24px;color:var(--ct-muted);font-size: 16px;font-weight: 600;letter-spacing:-.5px;} /* 그래프 : 열을 균등 분배해 가로 스크롤 제거 */ #courseTree .ct-scroller{overflow-x:auto;padding:14px 10px 4px;scrollbar-width:thin;} #courseTree .ct-graph{position:relative;display:flex;align-items:flex-start;gap:var(--ct-gap-x);width:100%;padding:2px;} #courseTree #ctEdges{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none;} #courseTree .ct-col{position:relative;z-index:1;display:flex;flex-direction:column;flex:1 1 0;min-width:0;gap:var(--ct-gap-y);} #courseTree .ct-colhd{margin-bottom:6px;padding-bottom:8px;border-bottom:1px solid var(--ct-line);color:var(--ct-muted);font-family:var(--font-family2);font-size: 17px;font-weight:700;letter-spacing: -.5px;} #courseTree .ct-node{position:relative;display:block;width:100%;padding:13px 13px;border:0;border-radius:10px;background:var(--bg2);color:var(--tx);box-shadow:0 1px 3px rgba(28,48,80,.10);font:inherit;text-align:left;cursor:pointer;transition:opacity .18s ease,box-shadow .18s ease,transform .18s ease;} #courseTree .ct-nm{display:block;font-size:16px;font-weight:700;line-height:1.4;letter-spacing:-.8px;overflow-wrap:anywhere;} #courseTree .ct-tg{display:block;margin-top:4px;font-size:12px;font-weight:500;letter-spacing:-.4px;opacity:.7;} #courseTree .ct-node:hover, #courseTree .ct-node:focus-visible{outline:0;box-shadow:0 0 0 2px var(--main-color),0 6px 16px rgba(27,59,134,.14);transform:translateY(-1px);} #courseTree .ct-graph.active .ct-node{opacity:var(--ct-dim);} #courseTree .ct-graph.active .ct-node.on{opacity:1;box-shadow:0 0 0 2px var(--ct-hi),0 4px 12px rgba(27,59,134,.13);} #courseTree .ct-graph.active .ct-node.root{box-shadow:0 0 0 3px var(--ct-hi),0 10px 24px rgba(27,59,134,.22);transform:translateY(-3px);} /* 흐려진 과목은 고정 중 롤오버해도 테두리가 서지 않게 한다 */ #courseTree .ct-graph.active .ct-node:not(.on):hover{box-shadow:0 1px 3px rgba(28,48,80,.10);transform:none;} #courseTree .ct-edge{fill:none;stroke:var(--ct-edge);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#ctAr);transition:opacity .18s ease,stroke .18s ease,stroke-width .18s ease;} #courseTree .ct-edge.dashed{stroke-dasharray:6 5;} #courseTree .ct-edge.both{marker-start:url(#ctArS);} #courseTree .ct-edge.low{stroke-dasharray:2 4;opacity:.55;} #courseTree .ct-graph.active .ct-edge{opacity:.08;} #courseTree .ct-graph.active .ct-edge.on{opacity:1;stroke:var(--ct-hi);stroke-width:2.4;marker-end:url(#ctArOn);} #courseTree .ct-graph.active .ct-edge.on.both{marker-start:url(#ctArOnS);} @media (max-width:1400px){ #courseTree{--ct-gap-x:40px;--ct-gap-y:8px;} #courseTree .ct-node{padding:10px 10px;} #courseTree .ct-nm{font-size:16px;letter-spacing:-1px;} #courseTree .ct-tg{font-size:11px;} } @media (max-width:1170px){ #courseTree .ct-intro{margin-bottom:32px;} #courseTree .ct-board{padding:12px;border-radius:16px;} #courseTree .ct-board-in{padding:0 12px 14px;} #courseTree .ct-intro p{font-size:17px;} #courseTree .ct-tabs button{padding:10px 17px;font-size:15px;} #courseTree{--ct-gap-x:30px;--ct-gap-y:7px;} #courseTree .ct-node{padding:9px 8px;border-radius:8px;} #courseTree .ct-nm{font-size:16px;letter-spacing:-1.1px;} #courseTree .ct-tg{display:none;} #courseTree .ct-colhd{font-size:12px;} } @media (max-width:900px){ #courseTree .ct-scroller{overflow:visible;padding:0;} #courseTree .ct-graph{display:block;width:auto;min-width:0;} #courseTree #ctEdges{display:none;} #courseTree .ct-col{width:auto;margin-bottom:20px;} #courseTree .ct-colhd{position:sticky;top:var(--header-height);z-index:2;padding-top:8px;background:#eef2f9;} #courseTree .ct-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;} #courseTree .ct-tabs::-webkit-scrollbar{display:none;} } @media (max-width:767px){ #courseTree .ct-intro{margin-bottom:26px;} #courseTree .ct-board{padding:10px;border-radius:14px;} #courseTree .ct-board-in{padding:0 6px 10px;} #courseTree .ct-intro p{font-size:16px;line-height:1.75;} #courseTree .ct-lede{margin-bottom:20px;padding:14px 16px;} /* 본문은 16px 아래로 내리지 않는다 */ #courseTree .ct-bar{gap:10px 18px;padding-bottom:14px;} #courseTree .ct-hint{margin-bottom:18px;} } @media (prefers-reduced-motion:reduce){ #courseTree *{transition:none !important;} } /* ************************** sub3: 연구 ****************************** */ #rsch{} .sect:first-of-type{} .caption{font-size: 22px;color:var(--main-color);font-family: var(--font-family2);text-transform: uppercase;} .title-l {font-size: 36px;line-height: 1.4;color: #0f0f10;word-break: keep-all;letter-spacing: -0.04em;font-weight:600;margin-top: 15px;font-family: var(--font-family1);} .title-l.sm{font-size: 28px;line-height: 1.5;} .zoomWr{position:relative;margin-bottom: 80px;padding: 0 10px;} .zoomWr .tit{position:absolute;left:50%;top:50%;color:#fff;text-align:center;z-index: 5;font-family: var(--font-family1);display: flex;line-height: 1.6;transform: translate(-50%, -50%);flex-direction: column;} .zoomWr .tit big{font-weight: 600; letter-spacing: -2px; font-size: 42px;} .zoomWr .tit small{display: block; font-family: var(--font-family2); opacity: .6; font-weight: 600; font-size: 24px;} .img-zoom {border-radius: .8rem;position: relative;overflow: hidden;margin: 0 auto;-webkit-transition: width .2s linear;transition: width .2s linear;width: 33%;} .img-zoom img {position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: none;} @media (min-width: 1200px) { .img-zoom {width: 33%;margin: 0 auto;border-radius: 20px;overflow: hidden;transition: width .2s linear;} .img-zoom img {position: relative;left: 50%;max-width: none;transform: translateX(-50%);} } @media (max-width: 1199px) { .img-zoom {width: 100% !important;border-radius: 16px;overflow: hidden;} .img-zoom img {width: auto;height: 200px;} } @media (max-width: 767px) { .zoomWr{margin-bottom:40px;} .zoomWr .tit big{font-size:30px;} .zoomWr .tit small{font-size:18px;} } #rsch .sect + .rsch-prof{margin-top: 60px;font-family: var(--font-family1);} .rsch-prof {display: flex;gap: 40px;flex-wrap: wrap;} .rsch-prof .prof-card {width: calc(50% - 20px);border-radius: 15px;position: relative;border: 1px solid #eee;padding: 25px 25px 30px 25px;background: #fff;transition: all .6s;display: flex;flex-direction: column;} .rsch-prof .prof-card:nth-child(4n+2), .rsch-prof .prof-card:nth-child(4n+3) {background: #f6f6f9;border-color: #f6f6f9;} .rsch-prof .prof-card .top-cont {display:flex;flex-direction: row-reverse;align-items: flex-start;} .rsch-prof .prof-card .img-wr {width: 130px;height: 160px;position: relative;} .rsch-prof .prof-card .img-wr .img {width: 100%;height: 100%;overflow: hidden;border-radius: 10px;position: relative;} .rsch-prof .prof-card .img-wr .img img {width: 100%;/* position: absolute; *//* left: 50%; *//* top: 50%; *//* transform: translate(-50%, -50%); */} .rsch-prof .prof-card .info-wr {width: calc(100% - 130px);padding: 10px 0 0 10px;} .rsch-prof .prof-card .info-wr .name {display: flex;align-items: flex-start;gap: 10px;\: row;flex-direction: column;} .rsch-prof .prof-card .info-wr .name .prof {color: var(--main-color);font-weight: 600;letter-spacing: -.5px;font-size: 19px;line-height: 1;padding-bottom: 3px;} .rsch-prof .prof-card .info-wr .name big{display:flex;align-items: flex-end;gap: 10px;line-height: 1;} .rsch-prof .prof-card .info-wr .name .kor-name {font-weight: 700;font-size: 30px;letter-spacing: -1px;color: #000;} .rsch-prof .prof-card .info-wr .name .eng-name {font-family: var(--font-family2);font-weight: 500;letter-spacing: -1px;color: #999;font-size: 21px;} .rsch-prof .prof-card .info-wr .mj {font-size: 21px;font-weight: 600;letter-spacing: -.5px;margin-top: 10px;color: var(--main-color);} .rsch-prof .prof-card .info-wr .icon-wr {margin-top: 20px;position: relative;} .rsch-prof .prof-card .info-wr .icon-wr li {position:relative;padding-left: 22px;font-size: 15px;color: #444;line-height: 1.3;font-weight: 600;overflow: hidden;text-overflow: ellipsis;white-space: normal;max-height: 60px;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;font-family: var(--font-family2);} .rsch-prof .prof-card .info-wr .icon-wr li .icon {position:absolute;left:0;top: 0px;font-size: 16px;} .rsch-prof .prof-card .info-wr .icon-wr li + li{margin-top:5px;} .rsch-prof .prof-card .lab-info {display: flex;gap: 10px;flex-direction: column;padding: 0 10px;margin-top: 20px;} .rsch-prof .prof-card .lab-info > dl{display:flex;} .rsch-prof .prof-card .lab-info > dl > dt{font-size: 14px; line-height: 22px; color: #fff; background: var(--main-color); border-radius: 29px; width: 110px; letter-spacing: -.5px; font-weight: 500; height: 26px; display: flex; align-items: center; justify-content: center; padding: 0 5px; box-sizing: border-box;} .rsch-prof .prof-card .lab-info a{color:inherit;} .rsch-prof .prof-card .lab-info > dl > dd{width: calc(100% - 90px);padding: 0px 0 0 15px;font-weight: 500;color: #212121;line-height: 1.6;font-size: 16px;word-break: keep-all;} .rsch-prof .prof-card .lab-info > dl > dd a:hover{text-decoration:underline; opacity:.8;} .rsch-prof .prof-card .lab-info dl dd a i {} .flex-tab{display:flex;margin-top:60px;position:relative;} .flex-tab .flex-left{width:380px;padding-right:60px;box-sizing:border-box;} .flex-tab .flex-right{width:calc(100% - 380px);} .flex-tab .flex-right .contTit-big{margin-top:0;} .left-tab{display:flex;position:sticky;top: 50%;flex-direction:column;border-radius: 20px;background:var(--main-color);padding:10px;gap:5px;box-sizing:border-box;margin:0;list-style:none;} .left-tab > li{width:100%;} .left-tab .tablinks{display:flex;justify-content:center;align-items:center;width:100%;border:0;border-radius: 12px;background:rgba(255,255,255,.1);color:#fff;font-size:18px;font-weight:500;cursor:pointer;padding:15px 20px;text-align:center;} .left-tab .tablinks.active{background:#fff;color:var(--main-color);} .left-view{display:none;position:relative;} .left-view.active{display:block;} .lab-banner{position:relative;overflow:hidden;border-radius: 20px;background:url("/images/sub/lab_banner_bg.jpg") no-repeat center/cover;padding:48px 56px;color:#fff;box-sizing:border-box;margin-bottom: 40px;} .lab-banner:before{content:"";position:absolute;inset:0;background: #10172f;opacity: .6;} .lab-banner > *{position:relative;z-index:1;} .lab-banner-head{display:flex;align-items:center;justify-content:space-between;gap:32px;} .lab-banner-head h3{min-width:0;margin:0;color:#fff;font-size:32px;font-weight:700;line-height:1.35;word-break:keep-all;letter-spacing: -1px;font-family: var(--font-family1);} .lab-banner-head h3 small{display:block;margin-top:8px;color: rgba(255,255,255,.70);font-size: 18px;font-weight: 500;line-height:1.45;word-break:keep-all;font-family: var(--font-family2);letter-spacing: -.5px;} .lab-banner-info{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:34px;color:#fff;font-size:17px;font-weight: 500;letter-spacing: -.5px;font-family: var(--font-family1);} .lab-banner-info span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;} .lab-banner-info i{font-size:18px;} .lab-banner-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;min-width:220px;height:55px;padding:0 25px;border-radius:12px;background:#fff;color: var(--main-color);font-size:18px;font-weight:700;font-family:var(--font-family1);text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.12);transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease;} .lab-banner-btn:hover{background: var(--main-color);color:#fff;text-decoration:none;box-shadow: 0 14px 30px rgb(32 58 145 / 68%);transform:translateY(-2px);} .lab-banner-btn i{font-size:22px;transition:transform .25s ease;} .lab-banner-btn:hover i{transform:translateX(4px);} #rsch .txt-box{font-weight: 500;letter-spacing: -1px;color: #27282B;line-height: 1.6;font-family: var(--font-family1);font-size: 20px;} #rsch .txt-box > p + p{margin-top:15px;} #rsch .list-Dot{margin-top: 25px;} #rsch .imgWr{display:flex;border-radius:20px;padding:60px;box-shadow: 0 10px 24px rgba(0, 0, 0, .12);margin-top: 40px;justify-content: space-around;} #rsch .imgWr.img1{} #rsch .imgWr img{max-width:100%;} #rsch .imgWr figure{margin:0;} #rsch .imgWr figure img{display:block;width:100%;} #rsch .imgWr figcaption{margin-top:12px;color:#666;font-size:16px;line-height:1.5;text-align:center;font-family: var(--font-family1);} @media (max-width:1024px){ .lab-banner{padding:40px 32px;} .lab-banner-head{align-items:flex-start;flex-direction:column;} .lab-banner-head h3{font-size:28px;} .lab-banner-info{margin-top:28px;} .lab-banner-btn{height:56px;} } /* ************************** 연구실 반응형 ****************************** */ @media (max-width:1170px){ .caption{font-size:20px;} .title-l{font-size:32px;} .title-l.sm{font-size:25px;} .rsch-prof{gap:24px;} .rsch-prof .prof-card{width:calc(50% - 12px);padding:22px;} .flex-tab{display:block;margin-top:45px;} .flex-tab .flex-left{width:100%;padding-right:0;margin-bottom:30px;} .flex-tab .flex-right{width:100%;} .left-tab{position:relative;top:auto;flex-direction:row;overflow-x:auto;border-radius:16px;} .left-tab > li{width:auto;flex:1 1 auto;min-width:150px;} .left-tab .tablinks{height:50px;padding:0 18px;font-size:16px;white-space:nowrap;} .lab-banner{padding:40px 32px;} .lab-banner-head{align-items:flex-start;flex-direction:column;} .lab-banner-head h3{font-size:28px;} .lab-banner-info{margin-top:28px;} .lab-banner-btn{height:54px;} #rsch .txt-box{font-size:18px;} #rsch .imgWr{padding:40px;margin-top:32px;} } @media (max-width:767px){ #rsch .sect{text-align:center;} .caption{font-size:16px;} .title-l{font-size:25px;margin-top:10px;line-height:1.45;} .title-l.sm{font-size:21px;} .title-l br, .title-l.sm br{display:none;} .zoomWr{margin-bottom:40px;} .zoomWr .tit big{font-size:28px;letter-spacing:-1px;} .zoomWr .tit small{font-size:16px;} #rsch .sect + .rsch-prof{margin-top:35px;} .rsch-prof{gap:12px;} .rsch-prof .prof-card{width:calc(50% - 6px);padding:15px 10px;border-radius:12px;} .rsch-prof .prof-card .top-cont{gap:12px;flex-direction:column;align-items:center;} .rsch-prof .prof-card .img-wr{width:84px;height:104px;} .rsch-prof .prof-card .info-wr{width:100%;padding:0;text-align:center;} .rsch-prof .prof-card .info-wr .name{align-items:center;gap:5px;} .rsch-prof .prof-card .info-wr .name .prof{font-size:12px;} .rsch-prof .prof-card .info-wr .name big{display:block;} .rsch-prof .prof-card .info-wr .name .kor-name{display:block;font-size:18px;} .rsch-prof .prof-card .info-wr .name .eng-name{display:block;font-size:12px;margin-top:4px;} .rsch-prof .prof-card .info-wr .mj{font-size:13px;margin-top:6px;} .rsch-prof .prof-card .info-wr .icon-wr, .rsch-prof .prof-card .lab-info{display:none;} .flex-tab{margin-top:35px;} .flex-tab .flex-left{margin-bottom:24px;} .left-tab{gap:4px;padding:6px;border-radius:14px;} .left-tab > li{min-width:120px;} .left-tab .tablinks{height:42px;padding:0 14px;border-radius:10px;font-size:14px;} .lab-banner{padding:28px 22px;border-radius:14px;margin-bottom:28px;} .lab-banner-head{gap:20px;} .lab-banner-head h3{font-size:22px;} .lab-banner-head h3 small{font-size:14px;margin-top:6px;} .lab-banner-info{display:block;margin-top:22px;font-size:14px;} .lab-banner-info span{display:flex;white-space:normal;} .lab-banner-info span + span{margin-top:8px;} .lab-banner-btn{width:100%;min-width:0;height:48px;padding:0 18px;font-size:15px;border-radius:10px;} #rsch .txt-box{font-size:16px;line-height:1.7;} #rsch .list-Dot{margin-top:18px;} #rsch .imgWr{display:block;padding:22px;border-radius:14px;margin-top:24px;} #rsch .imgWr figure + figure{margin-top:22px;} #rsch .imgWr figcaption{font-size:14px;} } @media (max-width:480px){ .rsch-prof .prof-card{padding:13px 8px;} .rsch-prof .prof-card .img-wr{width:76px;height:94px;} .rsch-prof .prof-card .info-wr .name .kor-name{font-size:17px;} .rsch-prof .prof-card .info-wr .mj{font-size:12px;} } /* ************************** 연구실 교수카드 모바일 재정리 ****************************** */ @media (max-width:767px){ .rsch-prof{gap:16px;} .rsch-prof .prof-card{width:100%;padding:22px 18px;border-radius:12px;} .rsch-prof .prof-card .top-cont{gap:16px;flex-direction:row-reverse;align-items:flex-start;} .rsch-prof .prof-card .img-wr{width:100px;height:124px;flex:0 0 100px;} .rsch-prof .prof-card .info-wr{width:calc(100% - 100px);padding:4px 0 0 12px;text-align:left;} .rsch-prof .prof-card .info-wr .name{align-items:flex-start;gap:6px;} .rsch-prof .prof-card .info-wr .name .prof{font-size:13px;} .rsch-prof .prof-card .info-wr .name big{display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap;} .rsch-prof .prof-card .info-wr .name .kor-name{display:inline-block;font-size:22px;} .rsch-prof .prof-card .info-wr .name .eng-name{display:inline-block;font-size:14px;margin-top:0;} .rsch-prof .prof-card .info-wr .mj{font-size:15px;margin-top:8px;} .rsch-prof .prof-card .info-wr .icon-wr{display:block;margin-top:12px;} .rsch-prof .prof-card .info-wr .icon-wr li{font-size:13px;max-height:none;-webkit-line-clamp:unset;} .rsch-prof .prof-card .lab-info{display:flex;padding:0;margin-top:16px;} .rsch-prof .prof-card .lab-info > dl{display: flex;gap: 10px;} .rsch-prof .prof-card .lab-info > dl > dt{width:auto;min-width:90px;display:inline-flex;margin-bottom: 0;font-size:13px;} .rsch-prof .prof-card .lab-info > dl > dd{width:100%;padding:0;font-size:14px;line-height:1.55;} } @media (max-width:480px){ .rsch-prof .prof-card{padding:20px 16px;} .rsch-prof .prof-card .top-cont{gap:14px;} .rsch-prof .prof-card .img-wr{width:88px;height:110px;flex-basis:88px;} .rsch-prof .prof-card .info-wr{width:calc(100% - 88px);padding-left:8px;} .rsch-prof .prof-card .info-wr .name .kor-name{font-size:20px;} .rsch-prof .prof-card .info-wr .name .eng-name{font-size:13px;} .rsch-prof .prof-card .info-wr .mj{font-size:14px;} .rsch-prof .prof-card .lab-info > dl > dd{font-size:13px;word-break: break-all;} } /* ************************** 연구실 레프트탭 모바일 정리 ****************************** */ @media (max-width:1170px){ .left-tab{overflow:visible;flex-wrap:wrap;} .left-tab > li{flex:1 1 calc(33.333% - 4px);min-width:0;} .left-tab .tablinks{width:100%;height:auto;min-height:50px;padding:10px 12px;white-space:normal;line-height:1.35;word-break:keep-all;} } @media (max-width:767px){ .left-tab{gap:5px;padding:6px;} .left-tab > li{flex:1 1 calc(50% - 3px);min-width:0;} .left-tab .tablinks{min-height:42px;padding:9px 10px;font-size:14px;white-space:normal;line-height:1.35;word-break:keep-all;} } @media (max-width:400px){ .left-tab > li{flex:1 1 100%;} } /* ************************** sub4: 교육 ****************************** */ #edu{position: relative;} #edu .sub-sub-tit{font-size:32px;} #edu .sub-sub-tit:before{height:2px;} #edu .sec-cont + .sec-cont{margin-top:100px;} .course-tab-wrap{margin: 60px 0 30px;} .course-tab-wrap:first-child{margin-top:0;} .course-tab-menu{display:flex;flex-wrap:wrap;gap: 10px;} .course-tab-menu button{border: 1px solid #dadbdd;border-radius: 40px;background:#fff;color: #8e8e8e;font-size: 17px;font-weight: 500;font-family: var(--font-family1);text-align:center;cursor:pointer;padding: 12px 24px;min-width: 125px;transition:all .2s ease;} .course-tab-menu button:hover{border-color: var(--main-color);color: var(--main-color);/* background:#f8fbff; */} .course-tab-menu button.active{border: 2px solid var(--main-color);background: var(--main-color);color:#fff;} .course-tab-cont{display:none;} .course-tab-cont.active{display:block;} @media (max-width:767px){ .course-tab-wrap{margin:32px 0 20px;overflow:hidden;} .course-tab-menu{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,auto); grid-auto-columns:max-content; gap:7px; overflow-x:auto; overflow-y:hidden; padding-bottom:4px; scrollbar-width:none; -ms-overflow-style:none; } .course-tab-menu::-webkit-scrollbar{display:none;} .course-tab-menu button{ width:auto; min-width:0; padding:10px 16px; border-radius:999px; font-size:14px; line-height:1.3; white-space:nowrap; } } /* ************************** sub6: 후원하기 ****************************** */ #support{} #donationHall{scroll-margin-top:500px;} #support .caption{font-size: 30px;font-weight:600;letter-spacing:-1px} #support .caption + ul{margin-top: 20px;} #support .banner {position: relative;background-color: #f3f8fe;background-repeat: no-repeat;padding: 60px;border-radius: 20px;overflow: hidden;z-index: 1;} #support .banner.bn-support {background: url("/images/sub/bn_bg.jpg") no-repeat 0px 0px / 100% 100%;background-color: rgba(0, 0, 0, 0);color: #fff;margin-top: 50px;} #support .banner>.inner {display: flex;align-items: center;justify-content: space-between;/* flex-wrap: wrap; *//* gap: 24px; *//* flex-direction: row; */} #support .banner .caption{color:#fff;font-weight: 400;line-height: 1.6;word-break: keep-all;letter-spacing: -.5px;font-size: 20px;font-family: var(--font-family1);} #support .banner .bn-tit{font-size:24px;font-family: var(--font-family1);} #support .banner .info-contents {display: flex;flex-wrap: wrap;align-items: center;gap: 20px;justify-content: space-between;width: calc(100% - 270px);} #support .banner .info-contents .info {display: flex;align-items: center;flex-wrap: wrap;gap: 60px;font-size: 20px;color: #fff;font-weight: 500;font-family: var(--font-family2);} #support .banner .info-contents .info a {color: inherit;} #support .banner .btn-support { border-radius: 2em; display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem; font-size: 20px; letter-spacing: -1px; font-family: var(--font-family1); border: 0; color: var(--main-color); line-height: 1.5; border: 1px solid rgba(0, 0, 0, 0); min-width: 14rem; padding: .8rem 2rem; word-break: keep-all; background: #fff; width: 270px; } #support .banner .btn-support > b{font-weight:600;} #support .banner .btn-support > i{font-size:22px;} #support .support-bottom{position:relative;text-align:center;padding: 100px 0 0;} #support .support-bottom:before{content:"";background:url("/images/main/donation_bg.jpg") no-repeat center top/cover;width:100vw;height:100%;left:50%;display:block;margin-left:-50vw;position:absolute;top:0;} #support .support-bottom:after{content:"";position:absolute;left:50%;bottom:0;z-index:0;width:100vw;height:180px;margin-left:-50vw;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,#fff 100%);pointer-events:none;} #support .donation-title{position:relative;z-index:1;} #support .donation-title em{display:block;color:#c3c4c5;font-size:30px;font-weight:400;font-style:italic;font-family:"Great Vibes", cursive;} #support .donation-title p{margin:34px 0 5px;color:#777;font-size:24px;font-weight:500;font-family:var(--font-family1);} #support .donation-title h2{position:relative;display:inline-flex;align-items:center;gap:12px;margin:0;color:#242424;font-size:52px;font-weight:500;letter-spacing:-2px;font-family:var(--font-family1);} #support .donation-title h2 span{color:#385090;} #support .donation-title h2::before,#support .donation-title h2::after{content:"";display:block;width:56px;height:116px;background:url("/images/main/laurel.png") center/contain no-repeat;} #support .donation-title h2::after{transform:scaleX(-1);} #support .donation-tab{position:relative;z-index:1;margin-top:45px;} #support .donation-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;position: relative;} #support .donation-legend .lv{display:inline-flex;align-items:center;justify-content:center;min-width:150px;height:52px;padding:0 28px;border:0;border-radius:999px;background:#fff;color:#555;font-size:18px;font-weight:600;font-family:var(--font-family1);box-shadow:0 10px 22px rgba(0,0,0,.08);cursor:pointer;transition:all .25s ease;} #support .donation-legend .lv-green{color:#258b6f;box-shadow:0 10px 22px rgba(37,139,111,.18);} #support .donation-legend .lv-gold{color:#b8892f;box-shadow:0 10px 22px rgba(184,137,47,.2);} #support .donation-legend .lv-silver{color:#7d8794;box-shadow:0 10px 22px rgba(125,135,148,.22);} #support .donation-legend .lv-bronze{color:#9b6642;box-shadow:0 10px 22px rgba(155,102,66,.2);} #support .donation-legend .lv-honor{color:#6f7fa8;box-shadow:0 10px 22px rgba(111,127,168,.2);} #support .donation-legend .lv-honor:hover,#support .donation-legend .lv-honor.active{background:#6f7fa8;color:#fff;box-shadow:0 14px 28px rgba(111,127,168,.36);transform:translateY(-2px);} #support .donation-legend .lv-green:hover,#support .donation-legend .lv-green.active{background:#258b6f;color:#fff;box-shadow:0 14px 28px rgba(37,139,111,.34);transform:translateY(-2px);} #support .donation-legend .lv-gold:hover,#support .donation-legend .lv-gold.active{background:#b8892f;color:#fff;box-shadow:0 14px 28px rgba(184,137,47,.36);transform:translateY(-2px);} #support .donation-legend .lv-silver:hover,#support .donation-legend .lv-silver.active{background:#7d8794;color:#fff;box-shadow:0 14px 28px rgba(125,135,148,.38);transform:translateY(-2px);} #support .donation-legend .lv-bronze:hover,#support .donation-legend .lv-bronze.active{background:#9b6642;color:#fff;box-shadow:0 14px 28px rgba(155,102,66,.36);transform:translateY(-2px);} #support .donation-legend .lv.active{border-color:#385090;background:#385090;color:#fff;box-shadow:0 12px 24px rgba(56,80,144,.22);} #support .donation-legend .lv-green.active{background:#258b6f;border-color:#258b6f;} #support .donation-legend .lv-gold.active{background:#b8892f;border-color:#b8892f;} #support .donation-legend .lv-silver.active{background:#7d8794;border-color:#7d8794;} #support .donation-legend .lv-bronze.active{background:#9b6642;border-color:#9b6642;} #support .donation-cont{margin-top:40px;} #support .donation-panel{display:none;} #support .donation-panel.active{display:block;} #support .donation-cont{margin-top:45px;} #support .donation-panel{display:none;} #support .donation-panel.active{display:block;} #support .donation-list{display:flex;flex-wrap:wrap;justify-content:center;gap: 40px;margin:0;padding:0;list-style:none;width: 100%;} #support .donation-list > li{width:calc((100% - 160px)/5);position: relative;} #support .donation-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height: 250px;padding: 34px 34px;border-radius: 15px;background: linear-gradient(135deg, #f3f3f3 0%, #f8f8f8 48%, #dedede 100%);box-shadow: -20px 20px 20px rgb(0 0 0 / 6%);text-align:center;box-sizing:border-box;} #support .donation-card > i{display:block;margin-bottom:6px;font-size:28px;line-height:1;} #support .donation-card > i::before{display:block;} #support .donation-card.lv-green > i::before{background:linear-gradient(135deg,#1d6f58 0%,#7fd7bd 45%,#0f4f3f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;} #support .donation-card.lv-gold > i::before{background:linear-gradient(135deg,#9a6a18 0%,#f4d27a 45%,#7a4f0e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;} #support .donation-card.lv-silver > i::before{background:linear-gradient(135deg,#747b84 0%,#eeeeee 45%,#5f6670 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;} #support .donation-card.lv-bronze > i::before{background:linear-gradient(135deg,#794723 0%,#d8a176 45%,#5f3218 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;} #support .donation-card.lv-honor > i::before{background:linear-gradient(135deg,#536489 0%,#b9c5e2 45%,#3d4d70 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;} #support .donation-card .card-grade{color:#898989;font-size:17px;font-weight: 600;letter-spacing: -.5px;font-family: var(--font-family2);} #support .donation-card p{margin: 30px 0 0;color:#777;font-size:16px;font-weight:500;letter-spacing: -.5px;font-family:var(--font-family1);} #support .donation-card strong{display:block;color:#111;font-size: 30px;font-weight: 400;letter-spacing: -1px;font-family: 'MapoGeumbitnaru';-webkit-text-stroke: 0.4px #111;margin-top: 10px;} #support .donation-card .bnr-btn{background: #a7a7a7;font-size: 13px;font-weight: 600;color:#fff;width: 55px;height: 30px;line-height: 1;display:flex;justify-content: center;align-items: center;position: absolute;border-radius: 12px;right: 5px;bottom: 5px;text-transform: uppercase;font-family: var(--font-family2);transition: .3s;} #support .donation-card .bnr-btn:hover{background:#333;} #support .donation-card .logo-box{display:flex;align-items:center;justify-content:center;min-height:82px;margin-top:24px;} #support .donation-card .logo-box img{display:block;max-width: 100%;/* max-height:70px; */} #support .donation-card.type-logo p{display:none;} /* ************************** 후원하기 반응형 보강 ****************************** */ @media (max-width:1170px){ #support .caption{font-size:26px;} #support .banner{padding:45px 35px;} #support .banner>.inner{display:block;} #support .banner .caption{font-size:18px;} #support .banner .info-contents{width:100%;margin-top:28px;gap:22px;} #support .banner .info-contents .info{gap:24px;font-size:18px;} #support .banner .btn-support{width:auto;min-width:220px;font-size:18px;} #support .support-bottom{padding-top:80px;} #support .donation-title em{font-size:26px;} #support .donation-title p{font-size:21px;margin-top:28px;} #support .donation-title h2{font-size:44px;} #support .donation-title h2::before, #support .donation-title h2::after{width:44px;height:92px;} #support .donation-legend{gap:10px;} #support .donation-legend .lv{min-width:130px;height:48px;padding:0 22px;font-size:16px;} #support .donation-list{gap:20px;} #support .donation-list > li{width:calc((100% - 40px)/3);} #support .donation-card{min-height:220px;padding:28px 20px;} #support .donation-card strong{font-size:30px;} } @media (max-width:767px){ #support .caption{font-size:22px;} #support .caption + ul{margin-top:14px;} #support .banner{padding:30px 22px;border-radius:14px;} #support .banner.bn-support{margin-top:32px;background-size:cover;background-position:center;} #support .banner .caption{font-size:16px;line-height:1.65;} #support .banner .bn-tit{font-size:20px;} #support .banner .info-contents{display:block;margin-top: 0;} #support .banner .info-contents .info{display:block;font-size:15px;line-height:1.6;} #support .banner .info-contents .info > * + *{margin-top:8px;} #support .banner .btn-support{width:100%;min-width:0;margin-top:18px;padding:12px 18px;font-size:16px;} #support .support-bottom{padding-top:58px;} #support .support-bottom:after{height:100px;} #support .donation-title em{font-size:22px;} #support .donation-title p{font-size:17px;margin:20px 0 5px;} #support .donation-title h2{gap:6px;font-size:31px;letter-spacing:-1px;} #support .donation-title h2::before, #support .donation-title h2::after{width:28px;height:58px;} #support .donation-tab{margin-top:30px;} #support .donation-legend{ display: flex; justify-content: center; gap:8px; overflow-x:auto; padding:0 2px 6px; scrollbar-width:none; -ms-overflow-style:none; align-items: center; align-content: center; } #support .donation-legend::-webkit-scrollbar{display:none;} #support .donation-legend .lv{min-width:0;height:40px;padding:0 16px;font-size:14px;box-shadow:0 6px 14px rgba(0,0,0,.08);} #support .donation-cont{margin-top:26px;} #support .donation-list{gap:12px;} #support .donation-list > li{width:calc(50% - 6px);} #support .donation-card{min-height:170px;padding:22px 14px;border-radius:14px;box-shadow:-10px 10px 16px rgba(0,0,0,.06);} #support .donation-card > i{font-size:23px;} #support .donation-card .card-grade{font-size:14px;} #support .donation-card p{margin:18px 0 10px;font-size:14px;} #support .donation-card strong{font-size:23px;} #support .donation-card .logo-box{min-height:58px;margin-top:16px;} #support .donation-card .logo-box img{max-width:110px;max-height:52px;} } @media (max-width:400px){ #support .donation-list > li{width:100%;} } /* ************************** 테이블 ****************************** */ table{width:100%; border-collapse:collapse; border-spacing:0;} .table{position:relative;width:100%;/*margin:20px 0 0 0;*/background-color:#fff;border-top:1px solid #353541;font-size:17px;line-height: 1.6;} .table:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#e7e7e7;} .table.fixed{table-layout:fixed;} .table .caption{display:none;} .table.text_center tbody tr td{text-align:center;} .table.text_left tbody tr td{text-align:left;} .table.text_left tbody tr th,.table.text_left thead tr th{text-align:center;} .table.break tbody td,.table.break thead th,.table.break tbody td,.table.break tbody th{word-break:break-all;} .table thead th{padding: 18px 10px;border:1px solid #e7e7e7;border-top:0;border-bottom-color:#e7e7e7;background-color:#f5f5f5;color: #212121;font-size: 18px;font-weight: 600;text-align:center;} .table thead th:first-child{border-left:none;} .table thead th:last-child{border-right:none;} .table tbody th, .table tfoot th{background-color:#f9fafc; font-weight:500; color:#333;} .table tbody th, .table tbody td, .table tfoot th, .table tfoot td{padding: 18px 10px;border-bottom:1px solid #e7e7e7;border-right:1px solid #e7e7e7;font-weight: 400;color: #212121;word-break:keep-all;} .table tbody th{text-align:center;font-size: 18px;color: #212121;font-weight: 600;} .table tbody td{font-size: 17px;} .table tfoot td:first-child{border-left:none;} .table tbody tr th:last-child{border-right:none;} .table td:last-child{border-right:none;} .table td[rowspan]:first-child{/* border-right:1px solid #e7e7e7; */} .table tbody th + td, .table tbody td + td, .table tfoot td{border-left:1px solid #e7e7e7;} .table tbody td, .table tfoot td{text-align:center;} .table tbody td > ul{margin-top:0;margin-bottom:0;padding-left: 15px;text-align:left;display:inline-block;} .table tbody td > ul > li, .table tbody td ol li{font-size:17px;} .table tbody td > ul.po-list_clear{padding-left:0;} .table tbody td > ol{margin-top:0; margin-bottom:0;} .table tbody td.txt-left{text-align:left;padding-left: 25px;} .table th.double, .table td.double{border-left:3px double #e7e7e7;} .table .po-list > li > ul >li > ul > li:before, .table .num > li > ul >li > ul > li:before, .table p.blt.type3:before, .table .po-list.third > li:before {top:15px;} .table td.color-1{background:#f1f7fd;} .table td.color-2{background:#edfbf2;} table .bbg{background:#f0f7ff !important;} /* 테이블 가로스크롤 */ .table_con_wrap{position:relative;margin: 15px auto;font-family: var(--font-family1);} .table_con_wrap .table_prev_mo{display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:95;} .table_con_wrap .table_prev_mo ul{position:absolute; top:50%; left:50%; margin:-11px 0 0 -75px;} .table_con_wrap .table_prev_mo ul:after{content: ''; display:block; clear:both;} .table_con_wrap .table_prev_mo ul li{float:left;} .table_con_wrap .table_prev_mo ul li p{font-size:15px; color:#fff;} .table_con_wrap .table_prev_mo ul li i{margin-top:4px; font-size:12px; color:#fff; animation:prevarrow .5s ease-in infinite alternate;} p.mo_hide{display:none; color:#888; text-align:center; margin-top:10px;} .respo-table tbody .label{display:none; width:65px; color:#444; font-size:13px; font-weight:500; text-align:left; vertical-align:top;} .respo-table tbody .label.w80{width:80px;} .respo-table tbody .label.w100{width:100px;} .respo-table .m-clear{} .respo-table .m-block{display:none;} .respo-table .m-top-th{} .cir-t{background:#fff;position:relative;border:1px solid rgba(224, 223, 226, 0.6);border-radius: 15px;padding: 7px;margin:0;} .cir-t table{border-radius:10px; overflow:hidden; border:1px solid rgba(31, 31, 31, 0.05);} .cir-t table td{border-color: rgba(31, 31, 31, 0.05);} .cir-t table thead th{background: #333;color: #fff;border-color:rgb(255,255,255,.7)} .cir-t table td{background:#fcfcfc;} .cir-t.left-th table tbody th{background: #333;color: #fff;} .cir-t.left-th table tbody td.th-bg{background: rgba(246, 247, 250, 1);} .cir-t table tbody th{background: rgba(246, 247, 250, 1);border-color:#eee} .cir-t table tbody th.td-bg1, .cir-t table td.td-bg1, .td-bg1{background:#fff2f2;} .cir-t table tbody th.td-bg2, .cir-t table td.td-bg2, .td-bg2{background:#f1f7fd;} .cir-t table tbody th.td-bg3, .cir-t table td.td-bg3, .td-bg3{background: #f1fdf6;} .cir-t table tbody th.td-bg4, .cir-t table td.td-bg4, .td-bg4{background: #fff8f1;} .cir-t table tbody th.td-bg5, .cir-t table td.td-bg5, .td-bg4{background: #fcf1fd;} .subj-class-list {padding: 0px 10px;/* grid-template-columns: 1fr 1fr 1fr; *//* display:grid; */gap: 10px;display: flex;flex-wrap: wrap;} .subj-class-list > p{position:relative;background: #f9f9f9;border:1px dotted #ccc;color: #333;font-size: 16px;font-weight: 600;line-height: 1.4;letter-spacing:-0.5px;border-radius: 6px;text-align:center;padding: 10px 15px;display: flex;justify-content: center;align-items: center;} .subj-class-list > p.edu1{background: #fef0f0;border-color: #e9cad2;} .subj-class-list > p.edu2{background: #f1f7fd;border-color: #bcd3e9;} .subj-class-list > p.edu3{background: #f4fbf7;border-color: #cae3d5;} .subj-class-list > p.edu4{background: #fff8f1;border-color: #edd5bd;} .subj-class-list > p.edu5{background: #fcf3fd;border-color: #e9d3eb;} .subj-class-list.col-2 > p{flex:1 1 40%;} .subj-class-list.col-3 > p{width: 32.5%;} .subj-class-list.col-4 > p{width: 18.9999%;} /* 안쪽 세부 테이블 헤더 */ .cir-t .table6 thead th {background: #4f687e;color: #fff;border-color: rgba(255,255,255,.7);font-weight: 600;vertical-align: middle;line-height: 1.45;} @media (max-width:1170px){ .table-line-box{border:0;} .table.respo-table{border-top:0;} .respo-table thead{display:none;} .respo-table .m-clear{display:none;} .respo-table .m-top-th{display:none;} .respo-table .m-block{display:block;} .respo-table .m-tit{display:block; background:#333; color:#fff; font-size:14px; padding:6px;} .respo-table .m-block br{display:none;} .respo-table tbody tr{ display:block; margin:0 0 0.7em 0; border-radius:15px; border:1px solid #e7e7e7; -webkit-box-shadow: 0px 7px 6px -6px rgb(0 0 0 / 28%); -moz-box-shadow:0px 7px 6px -6px rgb(0 0 0 / 28%); box-shadow: 0px 7px 6px -6px rgb(0 0 0 / 28%); } .respo-table tbody th{font-size:15px; padding:10px; color:#fff; background:#4f687e; width:100%; display:block; border-radius:5px;} .respo-table.bg-bl tbody th{background:#00bfe6;} .respo-table.bg-gr tbody th{background:#96c700;} .respo-table tbody tr td{text-align:left; display:block; padding:0.8em; font-size:14px; line-height:1.5; border-top:0;} .respo-table tbody tr td br{display:none;} .respo-table tbody tr td:nth-child(even){background: #f7f7f7;} .respo-table tbody .label{display:block; float:left; height:34px; line-height:1.7;} .respo-table .tb-num{display:none;} .subj-class-list.col-4 > p{width:100%;} .subj-class-list.col-3 > p{width:100%;} } @media (max-width:1000px){ .dbstg{display: block;} } @media (max-width:800px){ .table_con_wrap{width:100%; overflow-x:auto; white-space:nowrap; padding-bottom:20px;} .table_con_wrap table{width:100%;} .table_con_wrap .table_prev_mo{display:block;} p.mo_hide{display:block;} .cir-t{border:0; padding:0;} } @media (max-width: 767px){ .table thead th, .table tbody th{font-size:16px;padding: 10px 10px;} .table tbody td{font-size:15px;padding: 10px 10px;} .table tbody td ul li, .table tbody td ol li{font-size:14px;} .table-color tbody th, .table-color tbody td, .table-color tfoot th, .table-color tfoot td{border-bottom:0; border-right:0;} .table-color tbody th + td, .table-color tbody td + td, .table-color tfoot td{border-left:0;} .table-color td:last-child{border-radius:0 0 15px 15px;} .subj-class-list {padding: 0; gap:5px;} .subj-class-list > p{font-size: 14px; padding:5px;} } /* ****************************** 개인정보취급방침 ****************************** */ .privacy-policy{font-family:'Noto Sans KR'; padding-bottom:120px;} .privacy-policy .gray-bg{background:#f8f8f8;padding: 50px 60px;box-sizing:border-box;} .privacy-policy p + dl{margin-top:20px;} .privacy-policy .pp-wrap{} .privacy-policy .pp-txt-box{} .privacy-policy h1.pp-tit{display:block; font-size:28px; font-weight:bold; margin:0 0 20px; text-align:left;} .privacy-policy .privacy-top{margin:30px 0 0; background:#f8f8f8; padding:40px 41px; box-sizing:border-box;} .privacy-policy p{margin:0;} .privacy-policy .txt, .privacy-page dd{font-size:16px; color:#222;} .privacy-policy .txt + .txt{margin:10px 0 0 0;} .privacy-policy .txt-2{margin:10px 0 0 0;} .privacy-policy dl + dl{margin-top:40px;} .privacy-policy dt{font-size: 19px;display:inline-block;width:100%;color:#000;line-height:inherit;font-weight:700;margin: 0px 0 10px;} .privacy-policy dd > ul.list-hyphen{margin:5px 0 15px 20px;} .privacy-policy dd > ul.ul-gnd{margin:10px 0 10px 20px;} .privacy-policy dd > ul.ul-gnd > li{text-indent:-24px; margin-left:20px;} .privacy-policy dd a{color:inherit;} .privacy-policy dd a:hover{text-decoration:underline;} .privacy-policy .dd-board{margin-top:10px;} .privacy-policy .dd-board table th, .privacy-policy .dd-board table td{font-size:15px;} .privacy-policy .pp-btn-wrap{position:relative; margin-top:60px; text-align:center;} .privacy-policy a.pp-btn{margin:0 auto; display:inline-block; text-align:center; color:#fff; font-weight:500; font-size:16px; background:#684ab3; padding:20px 35px; transition:.2s;} @media (max-width: 1170px){ .privacy-policy{padding-bottom:60px;} } @media (max-width: 767px){ .privacy-policy{padding-bottom:40px;} .privacy-policy .contTit{margin-top:0;} .privacy-policy .gray-bg{margin:15px 0 0; padding:20px;} .privacy-policy dl + dl{margin-top:30px;} .privacy-policy dt:first-child{margin-top:0;} .privacy-policy dt{font-size:17px;} .privacy-policy .txt, .privacy-page dd{font-size:15px;} .privacy-policy dd > ul.list-hyphen{margin:5px 0 5px 0px;} .privacy-policy dd > ul.ul-gnd{margin:10px 0 10px 0px;} .privacy-policy dd > ul.ul-gnd > li{text-indent:-21px; margin-left:22px;} } /* ****************************** 이메일무단수집거부 ****************************** */ #nonMail{padding-bottom: 140px;} #nonMail .contTit-s{margin-top:50px;} #nonMail .ui-topbox .txtwrap p{/*margin:30px 0 0;*/} #nonMail .ui-ftbox .inner{text-align:center;} .ui-topbox{overflow:hidden;position:relative;padding:3px;background:#f1f3f6;border:none;border-radius: 10px 20px;word-break: keep-all;} .ui-topbox:before{left:0; right:0; top:0; z-index:1; width:auto; height:50px; background:#cacfd5; display:block; position:absolute; content:"";} .ui-topbox:after{left:0;top:0;z-index:2;width:205px;height:50px;background: #b59f7b;border-radius: 3px 0 0 0;display:block;visibility:visible;position:absolute;content:"";} .ui-topbox .inner{position:relative;min-height: 185px;background:#fff;padding: 40px 60px 40px 205px;border-radius: 8px 16px;z-index: 3;display:flex;align-items:center;} .ui-topbox .inner.img-inner{padding-left:320px; min-height:300px;} .ui-topbox .contTit:before{background:#97764b;} .ui-topbox .tit{display:block;margin-bottom: 15px;font-size:30px;color:#212121;font-weight:bold;line-height: 1.4;letter-spacing: -.5px;} .ui-topbox .tit b{color: #97764b;font-weight: 700;}.ui-topbox .img{top:35px; left:40px; width:230px; height:230px; display:block; position:absolute;} .ui-topbox .img15{background:url("/images/sub/img_15.png") no-repeat 50% 50%; background-size:100%;} .ui-topbox .img-step{background:url("/images/sub/img_steps.png") no-repeat 50% 50%; background-size:100%;} .ui-topbox .icon{top:40px;left:60px;width:105px;height:105px;background-color: #b59f7b;display: flex;font-size: 40px;line-height: 74px;color: #fff;border-radius:50%;position:absolute;justify-content: center;align-items: center;} .ui-topbox .ico-15{background:url("/images/sub/2469996.png") no-repeat 50% 50% #f3f4f6; background-size:60%;} .ui-topbox .ico-pro{background:url("/images/sub/3976516.png") no-repeat 50% 50% #f3f4f6;background-size: 60%;} .ui-topbox .ico-pro-d{background:url("/images/sub/2470035.png") no-repeat 50% 50% #f3f4f6;background-size: 50%;} .ui-topbox .ico-mail{background:url("/images/sub/4663958.png") no-repeat 50% 50% #f3f4f6; background-size:60%;} .ui-topbox .txtwrap{position:relative;width: 100%;display: block;} .ui-topbox .txtwrap > p{font-size: 18px;font-weight: 500;line-height:1.6;color: #333;letter-spacing: -.5px;} .ui-topbox .txtwrap p + p{margin-top:15px;} .ui-topbox .txtwrap .tit-wrap{display:flex;align-items:flex-end;flex-wrap:wrap;margin: auto;font-size: 32px;line-height:1.6;color: #333;font-family:'GmarketSansBold';letter-spacing: 0;} .ui-topbox .txtwrap .tit-wrap > strong{color: #2469c3;font-weight:normal;} .ui-topbox .txtwrap p > strong{color: #2469c3;font-weight: 700;} .ui-topbox .txtwrap p > b{color: #222;font-weight:700;} .ui-topbox .txtwrap strong.logo-img{margin-right:15px; background:url("/images/common/logo_c.png") 0 0 no-repeat; display:inline-block; width:230px; height:36px; background-size:230px; text-indent:-9999px;} .ui-ftbox{overflow:hidden;position:relative;background:#fafafa;border:1px solid #eaeaea;margin-top:40px;border-radius: 15px;} .ui-ftbox .inner{position:relative;padding:30px;} .ui-ftbox .btn-black{transition:.2s ease-out;text-align:center;display: inline-flex;background: #222;border-radius: 10px;padding:15px 30px;color:#fff;font-weight: 500;gap: 10px;font-size: 17px;align-items: center;justify-content: center;} .ui-ftbox .btn-black:hover{background:#666;} @media (max-width: 1024px){ .ui-topbox .inner.img-inner{padding-left:30px; flex-direction:column;} .ui-topbox .img15, .ui-topbox .img-step{position:relative; width:280px; height:280px; left:auto; top:auto; margin-bottom:20px;} .ui-topbox .inner.img-inner .tit-wrap{ justify-content:center; margin-bottom:10px;} } @media (max-width: 767px){ .ui-topbox .inner{padding:20px 20px; min-height:auto;} .ui-topbox .inner.img-inner{padding:20px 20px;} .ui-topbox .img15, .ui-topbox .img-step{width:200px; height:200px;} .ui-topbox .icon{display:none;} .ui-topbox .txtwrap .tit-wrap{display:block; font-size:22px; line-height:1.2;} .ui-topbox .txtwrap strong.logo-img{display:block; margin-right:0; width:180px; height:29px; background-size:100%; margin-bottom:10px;} .ui-topbox .txtwrap p{font-size: 16px;} } /* ****************************** 준비중 ****************************** */ .ui-comming{overflow:hidden;position:relative;background-color: #fff;border-radius: 20px;box-shadow: 8px 6px 20px 0 rgba(0, 0, 0, 0.1);font-family: var(--font-family1);} .ui-comming .inner{position:relative;text-align:center;padding: 80px;} .ui-comming .tit{} .ui-comming .tit big{display:block;width:74px;height:74px;margin:0 auto 25px;background: var(--main-color);border-radius:50%;font-size:30px;line-height:74px;color:#fff;} .ui-comming .tit small{display:block; margin:20px 0 15px; font-weight:600; font-size:28px; color:#333; letter-spacing:-.2px; line-height:1.2;} .ui-comming .tit small strong{color: var(--main-color);font-weight:600;} .ui-comming .tit p{font-size:17px; color:#666;} /* ************************** sub1_5: BK 비전체계도 ****************************** */ .bk{ position:relative; font-family:var(--font-family1); word-break:keep-all; --bk-c1:#1b3b86; /* 1열 : 남색 */ --bk-c2:#1a7fd4; /* 2열 : 파랑 */ --bk-c3:#6741b5; /* 3열 : 보라 */ } /* 상단 : 사업단명 → 세로선 → VISION 배지 → 비전 문구 */ .vmap-unit{margin:0;color: var(--main-bright);font-size:clamp(26px,3.4vw,44px);font-weight:800;line-height:1.25;letter-spacing:-2px;} .vmap-unit:after{content:"";display:block;width:1px;height:46px;margin:24px auto 26px;background:#c9d6ea;} /* ---------- VISION ---------- */ .vmap-head{position:relative;margin-bottom: 80px;text-align:center;} /* inline-block 이면 .vmap-vision 과 같은 줄에 붙으므로 블록으로 줄을 끊는다 */ .vmap-badge{display:block;width:fit-content;margin:0 auto 26px;padding:6px 16px;border-radius:6px;background:#e8f1fc;color:var(--bk-c2);font-family:var(--font-family2);font-size:14px;font-weight:800;line-height:1;letter-spacing:1.5px;} .vmap-vision{position:relative;display:inline-block;margin:0;padding: 0 clamp(40px,6vw,70px);color:#111;font-size: clamp(22px,3vw,40px);font-weight:500;line-height:1.45;letter-spacing:-1.6px;} .vmap-vision b{font-weight:800;} .vmap-vision:before, .vmap-vision:after{position:absolute;top:50%;color:#c9d6ea;font-family:var(--font-family2);font-family: "Playfair Display", serif;font-size: 120px;font-weight: 600;line-height:1;transform: translateY(-60%);} .vmap-vision:before{content:"(";left:0;} .vmap-vision:after{content:")";right:0;} /* ---------- 단계 헤딩 ---------- */ .vmap-step{position:relative;margin: 0 0 30px;text-align:center;} .vmap-step:before{content:"";position:absolute;left:0;right:0;top:50%;height: 1px;border-bottom: 1px dotted #c0c4cd;} .vmap-step span{position:relative;display:inline-block;padding:0 22px;background: #fff;color: #013378;font-size: 24px;font-weight: 700;letter-spacing:-1px;} .vmap-row{min-width:0;} .vmap-row + .vmap-step{margin-top:56px;} /* ---------- 인재상 ---------- */ .seeds-tit{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 16px;margin: 0 auto 40px;padding: 18px 30px;border-radius:999px;background:linear-gradient(120deg,var(--bk-c1),var(--bk-c2));color:#fff;text-align:center;} .seeds-tit strong{font-size: 24px;font-weight: 700;letter-spacing:-.8px;} .seeds-tit span{position:relative;padding-left:17px;font-size: 21px;font-weight: 600;letter-spacing:-.6px;opacity:.9;} .seeds-tit span:before{content:"";position:absolute;left:0;top:50%;width:1px;height: 16px;background: rgba(255,255,255,.25);transform:translateY(-50%);} .seeds{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,1vw,14px);margin:0;padding:0;list-style:none;} .seeds > li{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;aspect-ratio:1/1;padding:8px;border: 15px solid #e4e9f2;border-radius:50%;background:#fff;text-align:center;} .seeds > li:before{content:"";position:absolute;left:-2px;top:-2px;right:-2px;bottom:-2px;border-radius:50%;border: 8px solid transparent;} .seeds > li b{font-family:var(--font-family2);font-size: 38px;font-weight:700;line-height:1.1;letter-spacing: -.5px;} .seeds > li span{color: #444;font-size: 21px;font-weight: 700;line-height:1.3;letter-spacing:-.5px;} .seeds .c1{border-top-color:var(--bk-c1);} .seeds .c1 b{color:var(--bk-c1);} .seeds .c2{border-top-color:#1668c4;} .seeds .c2 b{color:#1668c4;} .seeds .c3{border-top-color:var(--bk-c2);} .seeds .c3 b{color:var(--bk-c2);} .seeds .c4{border-top-color:#4a5fc1;} .seeds .c4 b{color:#4a5fc1;} .seeds .c5{border-top-color:var(--bk-c3);} .seeds .c5 b{color:var(--bk-c3);} /* ---------- 깔때기 화살표 ---------- */ /* 3대 목표 → 6대 성장 사이 깔때기. 레퍼런스처럼 위가 뾰족하고 아래(제목 쪽)로 넓어지게 뒤집었다 */ .vmap-funnel{height: 80px;margin: 0 0 40px;background: linear-gradient( 0deg, #e9eff800, #dbe6f6);clip-path:polygon(50% 0,68% 38%,100% 100%,0 100%,32% 38%);} /* 깔때기가 위 칸과의 간격을 대신하므로 이 섹션만 위 여백을 줄인다 */ .bk-sec.is-funnel{margin-top:30px;} /* ---------- 3대 목표 ---------- */ .vgoal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin: 40px 0 0;padding:0;list-style:none;} .vgoal > li{position:relative;padding: 38px 10px 10px;border: 2px dotted #e2e8f2;border-radius: 20px;background:#f8fafd;text-align:center;} .vgoal-no{position:absolute;left:50%;top:0;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border: 5px solid #ffffff;border-radius:50%;color:#fff;font-family:var(--font-family2);font-size:17px;font-weight:800;line-height:1;transform:translate(-50%,-50%);} .vgoal-tit{display:block;margin-bottom:7px;font-size: 28px;font-weight: 700;line-height:1.35;letter-spacing:-1px;} .vgoal-en{display:block;color: #777;font-family:var(--font-family2);font-size: 17px;font-style:normal;font-weight:500;letter-spacing: -.5px;} .vgoal .t1 .vgoal-no{background:var(--bk-c1);} .vgoal .t1{border-color:#ccd7ec;} .vgoal .t1 .vgoal-tit{color:var(--bk-c1);} .vgoal .t2 .vgoal-no{background:var(--bk-c2);} .vgoal .t2{border-color:#c6e0f6;background:#f5faff;} .vgoal .t2 .vgoal-tit{color:var(--bk-c2);} .vgoal .t3 .vgoal-no{background:var(--bk-c3);} .vgoal .t3{border-color:#d8cff0;background:#f9f7fe;} .vgoal .t3 .vgoal-tit{color:var(--bk-c3);} /* ---------- 3대 목표 카드 안 추진과제 도트 리스트 ---------- */ .vgoal-list{margin:20px 0 0;/* padding: 20px 30px; *//* background: #fff; *//* border-radius: 15px; */list-style:none;text-align:left;} .vgoal-list > li{position:relative;padding-left:13px;color: #444;font-size: 18px;font-weight: 600;line-height:1.55;letter-spacing:-.7px;padding: 11px 30px 11px 45px;background: #fff;border-radius: 15px;} .vgoal-list > li + li{margin-top: 5px;} .vgoal-list > li:before{content:"";position:absolute;left: 29px;top: 22px;width: 5px;height: 5px;border-radius:50%;} .vgoal .t1 .vgoal-list > li:before{background:var(--bk-c1);} .vgoal .t2 .vgoal-list > li:before{background:var(--bk-c2);} .vgoal .t3 .vgoal-list > li:before{background:var(--bk-c3);} /* ---------- 하위 섹션 공통 ---------- */ .bk-sec{margin-top:80px;} .bk-sec-tit{position:relative;margin:0 0 28px;padding-left:16px;color:#111;font-size:24px;font-weight:600;line-height:1.35;letter-spacing:-1.1px;} .bk-sec-tit b{font-weight:800;} .bk-sec-tit:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:2px;background:var(--bk-c2);} /* ---------- GROWTH ---------- */ .growth{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0;list-style:none;} .growth > li{border:1px solid #e6eaf1;border-radius:14px;background:#fff;overflow:hidden;} .gw-head{display:flex;align-items:center;gap:12px;padding:15px 18px;color:#fff;} .gw-code{display:flex;align-items:center;justify-content:center;flex: 0 0 46px;width: 46px;height: 46px;border-radius:50%;background:rgba(255,255,255,.2);font-family:var(--font-family2);font-size: 24px;font-weight:800;line-height:1;} .gw-head p{margin:0;line-height:1.25;} .gw-head p b{display:block;font-family:var(--font-family2);font-size: 24px;font-weight:700;letter-spacing:-.3px;} .gw-head p small{display:block;margin-top:2px;font-size: 16px;font-weight:400;letter-spacing:-.6px;opacity:.85;} .gw-sub{display:block;padding:11px 14px;font-size: 19px;font-weight:700;line-height:1.35;letter-spacing:-.8px;text-align:center;} .gw-items{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding: 14px 12px;list-style:none;} .gw-items > li{flex:1 1 auto;padding:8px 11px;border-radius:7px;background:#f4f6fa;color:#4b5261;font-size: 16px;font-weight:500;line-height:1.35;letter-spacing:-.6px;text-align:center;} /* 6대 성장 색 : 무지개처럼 제각각이던 색을 청록 → 파랑 한 계열로 여섯 단계 흐르게 바꿨다. G(청록)에서 H(남파랑)로 갈수록 색이 깊어진다 */ .growth .gw-g .gw-head{background:#46c0a6;} .growth .gw-g .gw-sub{background:#eaf8f4;color:#1f8f77;} .growth .gw-r .gw-head{background:#3fb6bc;} .growth .gw-r .gw-sub{background:#e8f6f8;color:#1c8590;} .growth .gw-o .gw-head{background:#3babcb;} .growth .gw-o .gw-sub{background:#e7f4fa;color:#1a7b9b;} .growth .gw-w .gw-head{background:#3e9dd8;} .growth .gw-w .gw-sub{background:#e8f2fc;color:#1c6fae;} .growth .gw-t .gw-head{background:#4689da;} .growth .gw-t .gw-sub{background:#eaf1fc;color:#2360b4;} .growth .gw-h .gw-head{background:#5578d2;} .growth .gw-h .gw-sub{background:#eef0fb;color:#3c56b0;} /* ---------- 하단 2단 ---------- */ /* 하단 두 블록 : 위의 "인재상 및 3대 목표" 와 같은 모양(점선 가운데 제목, 카드 테두리 없음)으로 맞춘다 */ .bk-bottom{display:grid;grid-template-columns:repeat(2,1fr);gap:60px;align-items:stretch;} .bk-bottom .bk-sec{display:flex;flex-direction:column;margin-top:80px;} .bk-bottom .bk-sec + .bk-sec{margin-top:80px;} .bk-bottom .bk-sec-tit{margin-bottom:24px;padding-bottom:18px;padding-left:14px;border-bottom:1px solid #eef1f6;font-size:21px;} .bk-bottom .bk-sec-tit:before{top:2px;bottom:20px;} .bk-bottom .bench{flex:1 1 auto;} .bench{display:flex;align-items:stretch;gap:14px;} .bench-col{flex:1;display:flex;flex-direction:column;padding:20px 16px;border:1px solid #e6eaf1;border-radius:14px;background:#f8fafd;text-align:center;} .bench-tit{display:block;margin-bottom:14px;padding: 10px 10px;border-radius:999px;background:#e8f1fc;color:var(--bk-c1);font-size: 18px;font-weight:700;letter-spacing:-.6px;} .bench-univ{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap: 5px;flex:1 1 auto;margin:0 0 14px;padding:0;list-style:none;} .bench-univ > li{padding:7px 12px;border: 1px dotted #dde3ec;border-radius:7px;background:#fff;color:#3d4351;font-family:var(--font-family2);font-size: 16px;letter-spacing: -.5px;font-weight:600;} .bench-desc{margin:0;padding-top:12px;border-top:1px dashed #dde3ec;color:#111;font-size: 17px;font-weight:700;letter-spacing:-.6px;} .bench-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 30px;color:var(--bk-c2);font-size:28px;} .bench-result{margin:16px 0 0;padding:18px 16px;border-radius:14px;background:linear-gradient(120deg,var(--bk-c1),var(--bk-c2));color:#fff;font-size: 22px;font-weight:700;line-height:1.5;letter-spacing:-.8px;text-align:center;} .vlink{text-align:center;} .vlink-cap{display: block;padding: 13px 20px;border-radius:999px;font-size: 20px;font-weight:700;letter-spacing:-.6px;} .vlink-cap.top{margin-bottom:14px;background:#e8f1fc;color:var(--bk-c1);} .vlink-cap.bottom{margin-top:14px;background:#f1ecfb;color:var(--bk-c3);} .vlink-row{display:grid;gap:9px;margin:0;padding:0;list-style:none;} .vlink-row.top{grid-template-columns:repeat(4,1fr);} .vlink-row.bottom{grid-template-columns:repeat(3,1fr);} .vlink-row > li{display:flex;align-items:center;justify-content:center;min-height:64px;padding:10px 8px;border:1px solid #e6eaf1;border-radius:10px;background:#f8fafd;color:#3d4351;font-size: 17px;font-weight:600;line-height:1.4;letter-spacing:-.6px;} .vlink-row.bottom > li{border-color:#ddd3f2;background:#f9f7fe;color:var(--bk-c3);} .vlink-join{position:relative;display:block;height:32px;} .vlink-join:before{content:"";position:absolute;left:50%;top: 50%;width:0;height:0;border-left: 11px solid transparent;border-right: 11px solid transparent;border-top: 11px solid #cbd6e8;transform: translate(-50%, -50%);} /* ---------- 바로가기 ---------- */ .bk-cta{margin-top:66px;text-align:center;} /* 홈페이지 바로가기 : 예전 롤오버 모양(남색 채움)을 기본으로, 크기도 키웠다 */ .bk-cta a{display:inline-flex;align-items:center;gap:14px;padding:26px 56px;border:2px solid var(--bk-c1);border-radius:14px;background:var(--bk-c1);color:#fff;font-size:22px;font-weight:700;letter-spacing:-.8px;text-decoration:none;transition:background .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;} .bk-cta a:hover{border-color:#142d66;background:#142d66;color:#fff;transform:translateY(-3px);box-shadow:0 12px 26px rgba(27,59,134,.22);} .bk-cta a i{font-size:24px;} /* ---------- 반응형 ---------- */ @media (max-width:1500px){ .vmap-step span{font-size:19px;} .vgoal-en{font-size:13px;} .vgoal-list > li{font-size:15px;} .bk-sec-tit{font-size:22px;} .gw-head p b{font-size:17px;} } @media (max-width:1170px){ .vmap-unit:after{height:38px;margin:20px auto 22px;} .vmap-head{margin-bottom:46px;} .vmap-badge{margin-bottom:18px;} /* 좌측 라벨을 상단 제목으로 전환 */ .vmap-step{margin-bottom:20px;} .vmap-row + .vmap-step{margin-top:44px;} .vmap-step span{padding:0 16px;font-size:18px;} .vmap-funnel{margin-left:0;height:58px;} .seeds{grid-template-columns:repeat(3,1fr);gap:12px;} .seeds > li{aspect-ratio:auto;min-height:118px;border-radius:16px;} .vgoal{gap:14px;margin-top:22px;} .growth{grid-template-columns:repeat(2,1fr);} .bk-bottom{grid-template-columns:1fr;gap:0;} .bk-sec, .bk-bottom .bk-sec{margin-top:56px;} .vlink-row.top{grid-template-columns:repeat(2,1fr);} } @media (max-width:767px){ .vmap-unit{letter-spacing:-1.4px;} .vmap-unit:after{height:28px;margin:16px auto 18px;} .vmap-head{margin-bottom:36px;} .vmap-vision{padding:0 26px;letter-spacing:-1.1px;} .vmap-vision:before, .vmap-vision:after{font-size:2.2em;} .vmap-step span{padding:0 12px;font-size:16px;} .vmap-row + .vmap-step{margin-top:34px;} .seeds-tit{flex-direction:column;gap:3px;margin-bottom:18px;padding:11px 18px;border-radius:14px;} .seeds-tit strong{font-size:16px;} .seeds-tit span{padding-left:0;font-size:13px;} .seeds-tit span:before{display:none;} .seeds{grid-template-columns:repeat(2,1fr);gap:9px;} .seeds > li{min-height:92px;border-radius:12px;} .vmap-funnel{height:44px;margin:0 0 4px;} .vgoal{grid-template-columns:1fr;gap:26px;margin-top:34px;} .vgoal > li{padding:34px 16px 22px;} .vgoal-no{width:46px;height:46px;font-size:15px;} .vgoal-list > li{font-size:15px;} .bk-sec{margin-top:44px;} .bk-bottom .bk-sec{margin-top:44px;} .bk-bottom .bk-sec-tit{margin-bottom:18px;padding-bottom:14px;font-size:17px;} .bk-bottom .bk-sec-tit:before{bottom:16px;} .bk-sec-tit{margin-bottom:20px;padding-left:12px;font-size:19px;letter-spacing:-.9px;} .growth{grid-template-columns:1fr;gap:14px;} .gw-head{padding:13px 15px;} .gw-code{flex-basis:31px;width:31px;height:31px;font-size:17px;} .gw-head p b{font-size:16px;} .gw-sub{font-size:15px;} .gw-items{padding:13px 12px;} .gw-items > li{font-size:13px;padding:7px 9px;} .bench{flex-direction:column;gap:10px;} .bench-arrow{flex:none;font-size:23px;transform:rotate(90deg);} .bench-result{padding:15px 12px;font-size:15px;} .vlink-row.top, .vlink-row.bottom{grid-template-columns:1fr;} .vlink-row > li{min-height:48px;font-size:14px;} .vlink-row > li br{display:none;} .bk-cta{margin-top:40px;} .bk-cta a{width:100%;justify-content:center;padding:20px 20px;font-size:18px;} } /* ************************** sub2_2_c: 대학원 교과목 트리 *********************** * 학부 트리(#courseTree)와 달리 위→아래 3단 띠 구조다. * 줄(.gt-row)은 원본의 가로 줄, 칸은 CSS 그리드로 원본의 열 정렬을 재현한다. * 한 줄에 과목이 최대 16개까지 들어가므로 열 수에 따라 글자를 줄인다(원본 비율). ============================================================================== */ #gradTree{ --gt-line:#dce2ec; --gt-muted:#8a90a0; --gt-edge:#b9c4d4; --gt-hi:var(--main-color); --gt-dim:.2; --gt-gap-x:10px; --gt-gap-y:42px; --gt-fs:15px; /* 학부 트리와 같은 계열 : Douge Blue & Carribean Green. 아래 단계일수록 진하다 */ --t-기초-bg:#dde9fb; --t-기초-dot:#8fb4e8; --t-기초-tx:#2a558a; --t-심화-bg:#cdeee8; --t-심화-dot:#3fbfab; --t-심화-tx:#0a6b5e; --t-특론-bg:#2a6de6; --t-특론-dot:#2a6de6; --t-특론-tx:#ffffff; /* 흰 글씨 대비 4.74:1 (AA) */ position:relative;font-family:var(--font-family1);color:#1a1c20;word-break:keep-all; } /* 도입 */ #gradTree .gt-intro{margin-bottom: 60px;} #gradTree .gt-intro p{margin:0;color:#4d525c;font-size: 20px;font-weight: 600;line-height:1.8;letter-spacing:-.7px;} #gradTree .gt-intro p + p{margin-top: 20px;} #gradTree .gt-intro b{color:#1a1c20;font-weight:700;} /* 도표 영역 */ #gradTree .gt-board{padding:15px;border-radius:20px;background:#eef2f9;} #gradTree .gt-board-in{padding:0 20px 20px;} #gradTree .gt-lede{display:flex;align-items:flex-start;gap:10px;margin:0 0 30px;padding:20px 24px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(28,48,80,.10);color:#4d525c;font-size: 18px;font-weight:500;line-height:1.7;letter-spacing:-.6px;} /* 아이콘은 첫 줄 가운데에 놓이게 글줄 높이(16 x 1.7 = 27.2px)를 그대로 준다 (sub2_1_c 의 .ct-lede 와 동일) */ #gradTree .gt-lede i{flex:none;font-size: 23px;font-weight:normal;line-height: 29.2px;color:var(--main-color);} #gradTree .gt-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;} #gradTree .gt-tabs button{appearance:none;padding:12px 22px;border: 0;border-radius:999px;background:#fff;color: #222;font:inherit;font-size: 19px;font-weight: 700;letter-spacing:-.5px;white-space:nowrap;cursor:pointer;transition:background .25s cubic-bezier(.16,1,.3,1),color .25s cubic-bezier(.16,1,.3,1),border-color .25s ease;} #gradTree .gt-tabs button:hover{border-color:var(--main-color);color:var(--main-color);} #gradTree .gt-tabs button[aria-selected=true]{border-color:var(--main-color);background:var(--main-color);color:#fff;font-weight:700;} #gradTree .gt-tabs button:focus-visible{outline:2px solid var(--main-color);outline-offset:2px;} #gradTree .gt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-bottom: 20px;padding:0 0 16px;border-bottom:1px solid var(--gt-line);} #gradTree .gt-lg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;} #gradTree .gt-lg i{display:inline-flex;align-items:center;gap:7px;color:#4d525c;font-size: 16px;font-weight: 700;font-style:normal;letter-spacing:-.5px;} #gradTree .gt-lg i:before{content:"";width:12px;height:12px;border-radius:50%;} #gradTree .gt-lg-기초:before{background:var(--t-기초-dot);} #gradTree .gt-lg-심화:before{background:var(--t-심화-dot);} #gradTree .gt-lg-특론:before{background:var(--t-특론-dot);} #gradTree .gt-ln{display:inline-flex;align-items:center;gap:7px;color:var(--gt-muted);font-size: 16px;font-weight: 700;letter-spacing:-.5px;} #gradTree .gt-ln svg{display:block;} #gradTree .gt-mod i{width: 14px;height: 14px;border:2px dashed #0a7a6c;border-radius:50%;} #gradTree .gt-hint{margin:0 0 24px;color:var(--gt-muted);font-size: 16px;font-weight: 600;letter-spacing:-.5px;} /* 그래프 : 줄마다 CSS 그리드로 원본의 열 정렬을 맞춘다 */ #gradTree .gt-scroller{overflow-x:auto;padding:0;scrollbar-width:thin;} #gradTree .gt-graph{position:relative;display:flex;flex-direction:column;width:100%;padding:14px 6px 10px;} /* 위 여백은 선택 시 3px 링 + 3px 들림이 잘리지 않을 값. 줄 간격은 JS 가 레인 수에 맞춰 marginTop 으로 준다 */ /* 줄 간격은 JS 가 레인 수에 맞춰 marginTop 으로 준다 */ #gradTree #gtEdges{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none;} #gradTree .gt-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--gt-n),minmax(var(--gt-min,0px),1fr));gap:var(--gt-gap-x);align-items:stretch;} /* 모듈형수업 묶음 상자 : 카드 뒤에 깔려 여러 칸을 한 번에 감싼다 */ #gradTree .gt-row > *{grid-row:1;} /* 카드도 1행에 고정해야 묶음 상자가 카드를 덮는다 */ #gradTree .gt-modbox{z-index:0;margin:-7px -6px;border:2px dashed #0a7a6c;border-radius:12px;pointer-events:none;} #gradTree .gt-node{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:52px;padding:9px 7px;border:0;border-radius:8px;background:var(--bg2);color:var(--tx);box-shadow:0 1px 3px rgba(28,48,80,.10);font:inherit;text-align:center;cursor:pointer;transition:opacity .18s ease,box-shadow .18s ease,transform .18s ease;} #gradTree .gt-기초{--bg2:var(--t-기초-bg);--tx:var(--t-기초-tx);} #gradTree .gt-심화{--bg2:var(--t-심화-bg);--tx:var(--t-심화-tx);} #gradTree .gt-특론{--bg2:var(--t-특론-bg);--tx:var(--t-특론-tx);} #gradTree .gt-nm{display:block;font-size:var(--gt-fs);font-weight:600;line-height:1.35;letter-spacing:-.6px;overflow-wrap:anywhere;} #gradTree .gt-node:hover, #gradTree .gt-node:focus-visible{outline-color:var(--main-color);box-shadow:0 0 0 2px var(--main-color),0 6px 16px rgba(27,59,134,.14);transform:translateY(-1px);} #gradTree .gt-graph.active .gt-node{opacity:var(--gt-dim);} #gradTree .gt-graph.active .gt-node.on{opacity:1;box-shadow:0 0 0 2px var(--gt-hi),0 4px 12px rgba(27,59,134,.13);} #gradTree .gt-graph.active .gt-node.root{box-shadow:0 0 0 3px var(--gt-hi),0 10px 24px rgba(27,59,134,.22);transform:translateY(-3px);} #gradTree .gt-graph.active .gt-node:not(.on):hover{box-shadow:0 1px 3px rgba(28,48,80,.10);transform:none;} #gradTree .gt-edge{fill:none;stroke:var(--gt-edge);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#gtAr);transition:opacity .18s ease,stroke .18s ease,stroke-width .18s ease;} #gradTree .gt-edge.dashed{stroke-dasharray:6 5;} #gradTree .gt-edge.both{marker-start:url(#gtArS);} #gradTree .gt-graph.active .gt-edge{opacity:.08;} #gradTree .gt-graph.active .gt-edge.on{opacity:1;stroke:var(--gt-hi);stroke-width:2.4;marker-end:url(#gtArOn);} #gradTree .gt-graph.active .gt-edge.on.both{marker-start:url(#gtArOnS);} /* 한 줄에 들어가는 과목 수에 따라 원본 비율만큼 글자를 줄인다 */ #gradTree .gt-graph[data-cols="7"], #gradTree .gt-graph[data-cols="9"]{--gt-fs:14px;--gt-gap-x:9px;--gt-min:110px;} #gradTree .gt-graph[data-cols="10"]{--gt-fs:13px;--gt-gap-x:10px;--gt-min:100px;} #gradTree .gt-graph[data-cols="14"]{--gt-fs:12px;--gt-gap-x:9px;--gt-min:88px;} #gradTree .gt-graph[data-cols="16"]{--gt-fs: 11px;--gt-gap-x:8px;--gt-min:80px;} @media (max-width:1400px){ #gradTree .gt-board{padding:12px;} #gradTree .gt-board-in{padding:0 12px 14px;} } @media (max-width:1170px){ #gradTree .gt-intro p{font-size:17px;} #gradTree .gt-tabs button{padding:10px 17px;font-size:15px;} } @media (max-width:900px){ #gradTree .gt-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;} #gradTree .gt-tabs::-webkit-scrollbar{display:none;} #gradTree .gt-graph{--gt-fs:13px;} #gradTree{--gt-min:96px;} } @media (max-width:767px){ #gradTree .gt-intro{margin-bottom:26px;} #gradTree .gt-intro p{font-size:16px;line-height:1.75;} #gradTree .gt-board{padding:10px;} #gradTree .gt-board-in{padding:0 6px 10px;} #gradTree .gt-lede{margin-bottom:20px;padding:14px 16px;} /* 본문은 16px 아래로 내리지 않는다 */ } @media (prefers-reduced-motion:reduce){ #gradTree *{transition:none !important;} } /* 가로로 넘칠 때만 끌어서 옮기기 (학부·대학원 교과목 트리 공통) 끄는 동안에는 카드가 이벤트를 안 받게 해서 롤오버 강조가 깜빡이지 않게 한다. */ #courseTree.ct-can-drag .ct-scroller, #gradTree.gt-can-drag .gt-scroller{cursor:grab;} #courseTree.ct-dragging .ct-scroller, #gradTree.gt-dragging .gt-scroller{cursor:grabbing;} #courseTree.ct-dragging, #gradTree.gt-dragging{user-select:none;} #courseTree.ct-dragging .ct-node, #gradTree.gt-dragging .gt-node{pointer-events:none;} #courseTree .ct-dragnote, #gradTree .gt-dragnote{display:none;} #courseTree.ct-can-drag .ct-dragnote, #gradTree.gt-can-drag .gt-dragnote{display:inline;} /* ******************* sub2_1_d: 전기전자 종합설계 및 공지사항 ******************* * 내용 : https://ee.yonsei.ac.kr/ee/education/reu.do * 디자인 : https://daeguntech.com/sub/portfolio.html 의 .c_tit2 / .step_list / .info * 규칙을 값 그대로 옮겼다. 포인트 컬러(#2e3d96)만 우리 것으로 치환한다. * 아이콘은 원본 SVG 와 같은 모양을 RemixIcon 에서 가져왔다. * step_chk.svg(원+오른쪽 꺾쇠) → ri-arrow-right-s-line * info svg(원+느낌표) → ri-error-warning-fill ============================================================================== */ .cd-page{ --cd-pt:#1b3f86; /* 원본 #2e3d96 자리 */ --cd-pt-tint:#e6e7f1; /* 원본 .info 배경 그대로 */ --cd-pt-fade:#c1c7e9; /* 원본 마지막 카드 본문색 그대로 */ position:relative;font-family:var(--font-family1);color:#222;word-break:keep-all; } /* .c_tit2 */ .cd-page .cd-tit{display:flex;flex-flow:column;gap: 15px;align-items: flex-start;} .cd-page .cd-tit > em{font-style:normal;font-family: var(--font-family1);text-transform: uppercase;display: inline-block;font-size: 1.0416666667vw;font-weight: 700;line-height: 1.4;letter-spacing: -0.01em;/* background-color: var(--main-color); */color: var(--main-color);/* padding: min(.2604166667vw, 5px) min(.625vw, 12px); */border-radius: .5208333333vw;} .cd-page .cd-tit > strong{font-size: 42px;font-weight: 700;letter-spacing: -.5px;color:#222;} .cd-page .cd-tit > p{font-size: 22px;font-weight: 500;color: #333;line-height:1.7em;letter-spacing: -.5px;} /* 섹션 묶음 : 원본은 페이지 단위로 나뉘어 있어 우리 문서 흐름에 맞게만 잡는다 */ .cd-page .cd-sec{padding:0 0 80px;} .cd-page .cd-tint{margin-bottom:80px;padding:60px 50px;border-radius: 20px;background:#f4f5f8;} .cd-page .cd-sec.cd-tint{padding-bottom:60px;} /* .step_list */ .cd-page .cd-steps{display:flex;gap:48px;margin:40px 0 0;padding:0;list-style:none;} .cd-page .cd-steps > li{flex:1 1 0%;border-radius: 20px;border:1px solid #d9dce1;padding: 40px;display:flex;flex-flow:column;gap:12px;position:relative;background-color:#fff;} .cd-page .cd-steps > li:before{content:"";display:block;width:100%;height:2px;background-color:#e3e5ef;position:absolute;left:0;top:-20px;} .cd-page .cd-steps > li > strong{font-size: 26px;font-weight: 700;color:#222;} .cd-page .cd-steps > li > p{font-size:18px;line-height:1.6em;font-weight:400;color:#626f7e;margin:0;} .cd-page .cd-steps > li:last-child{background-color:var(--cd-pt);border-color:var(--cd-pt);} .cd-page .cd-steps > li:last-child > strong{color:#fff;} .cd-page .cd-steps > li:last-child > p{color:var(--cd-pt-fade);} /* 원본 li::after (step_chk.svg) 자리. 배경 이미지 대신 RemixIcon 을 얹는다 */ .cd-page .cd-step-ar{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cd-pt);color:#fff;font-size:14px;line-height:1;position:absolute;right:-13px;top:-18px;transform:translate(100%,-50%);} /* .info */ .cd-page .cd-info{background-color: #eef2f9;border-radius: 20px;padding: 40px 35px;margin-top: 40px;display:flex;gap:10px;} /* 회색 띠(.cd-tint) 안에서는 바탕(#f4f5f8)과 상자(#eef2f9)가 거의 같은 색이라 상자가 묻힌다. 그 안에서만 흰 바탕으로 뒤집고, 흰색끼리도 경계가 약하니 옅은 그림자로 가장자리를 살린다. (본문 안내 상자 .ct-lede / .gt-lede 와 같은 처리) */ .cd-page .cd-tint .cd-info{background-color:#fff;box-shadow:0 1px 3px rgba(28,48,80,.10);} .cd-page .cd-info > i{flex:0 0 auto;font-size:24px;line-height:1;color:var(--cd-pt);} .cd-page .cd-info dl{display:flex;flex-flow:column;gap:16px;margin:0;} .cd-page .cd-info dt{font-size: 22px;font-weight: 700;color:var(--cd-pt);} .cd-page .cd-info dd{font-size:18px;font-weight:400;color:#555a72;line-height:1.6em;margin:0;} .cd-page .cd-info b{color:#222;font-weight:600;} /* 트랙 : 원본 .step_list 카드 규칙을 그대로 쓰고 태그만 .cate 규칙을 따른다 */ .cd-page .cd-tracks{display:flex;gap: 40px;margin-top:40px;} .cd-page .cd-track{flex:1 1 0%;border-radius: 15px;border:1px solid #d9dce1;padding:30px;display:flex;flex-flow:column;align-items:flex-start;gap: 15px;background-color:#fff;} .cd-page .cd-track-tag{padding: 6px 12px;border-radius:6px;border:1px solid var(--cd-pt);font-size:15px;font-weight:600;color:var(--cd-pt);display:flex;align-items:center;} .cd-page .cd-track-nm{font-size: 30px;font-weight: 700;color:#222;} .cd-page .cd-track ul{margin:0;padding:0;list-style:none;display:flex;flex-flow:column;gap:8px;} .cd-page .cd-track li{position:relative;padding-left:16px;font-size:18px;line-height:1.6em;font-weight: 500;color: #666;} .cd-page .cd-track li:before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--cd-pt);} .cd-page .cd-track b{color:#222;font-weight:600;} .cd-page .cd-track i{color:var(--cd-pt);font-style:normal;} /* 서식 : 원본 .faq .f_list dl 규칙(70px · radius 10 · 1px #d9dce1)을 따른다 */ /* hct.co.kr 의 [관련 법령] 카드와 같은 치수(모서리 8px · 안여백 24px · 높이 78px · 간격 16px · 제목 20/700). 다만 이 블록은 회색 띠(.cd-tint) 안이라 카드는 흰 바탕 + 옅은 테두리로 둔다. 번호 자리에는 파일 아이콘을 그대로 두고, 오른쪽 내려받기 아이콘만 동그란 배경으로 채워 ri-arrow-right-circle-fill 과 같은 모양이 되게 했다. */ .cd-page .cd-files{display:flex;flex-flow:row wrap;gap:16px;margin:40px 0 0;padding:0;list-style:none;} .cd-page .cd-files > li{display:flex;flex:1 1 calc(25% - 12px);} .cd-page .cd-files a{box-sizing:border-box;flex:1 1 auto;display:flex;align-items:center;gap:16px;min-height:78px;padding:24px;border:1px solid #e2e6ee;border-radius:8px;background:#fff;color:#001a33;font-size:20px;font-weight:700;line-height:1.6;letter-spacing:-.8px;text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease;} .cd-page .cd-files a > i:first-child{flex:0 0 auto;font-size:24px;font-weight:normal;line-height:1;color:var(--main-bright);} .cd-page .cd-files a span{flex:1 1 auto;min-width:0;} .cd-page .cd-dl{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:50%;background:var(--main-bright);color:#fff;font-size:16px;font-weight:normal;line-height:1;transition:transform .2s ease;} .cd-page .cd-files a:hover, .cd-page .cd-files a:focus-visible{outline:0;border-color:var(--main-bright);box-shadow:0 6px 20px rgba(27,63,134,.12);} .cd-page .cd-files a:hover .cd-dl{transform:translateY(2px);} /* 맺음 : 사진이 쨍해서 검은 막을 한 겹 덮어 톤을 낮춘다. 바닥이 #000 이고 그 위에 사진, 다시 그 위에 검정 반투명 막이 올라간다. (막 0.58 = 사진이 42% 세기로 깔린 것과 같다. --cd-more-veil 숫자만 바꾸면 조절된다) background-attachment:fixed 는 조상에 transform 이 걸리면 죽으므로 마크업에서 wow 를 뺐다. */ .cd-page .cd-more{ --cd-more-veil:.58; padding:60px 50px;border-radius:20px; background-color:#000; background-image:linear-gradient(rgba(0,0,0,var(--cd-more-veil)),rgba(0,0,0,var(--cd-more-veil))),url("/images/sub/r_bg.jpg"); background-repeat:no-repeat,no-repeat; background-position:50% 50%,50% 50%; background-size:cover,cover; background-attachment:scroll,fixed; } .cd-page .cd-more .cd-tit > em{color:#a9b3dd;} .cd-page .cd-more .cd-tit > strong{color:#fff;} .cd-page .cd-more .cd-tit > p{color:var(--cd-pt-fade);} .cd-page .cd-btns{display:flex;gap:16px;margin-top:40px;} .cd-page .cd-btn{flex:1 1 0%;height:70px;border:1px solid rgba(255,255,255,.32);border-radius:10px;display:flex;align-items:center;gap:14px;padding:0 24px;color:#fff;font-size: 22px;font-weight: 600;text-decoration:none;transition:background .3s cubic-bezier(.16,1,.3,1),border-color .3s ease;} .cd-page .cd-btn span{flex:1 1 auto;} .cd-page .cd-btn i:first-child{font-size:22px;font-weight: normal;} .cd-page .cd-btn i:last-child{font-size:19px;opacity:.7;} .cd-page .cd-btn:hover, .cd-page .cd-btn:focus-visible{outline:0;border-color:#fff;background:rgba(255,255,255,.14);} /* 원본 @media (max-width:1400px) 의 .c_tit2 규칙 그대로 */ @media (max-width:1400px){ .cd-page .cd-tit > strong{font-size:28px;} .cd-page .cd-tit > em{font-size:13px;} .cd-page .cd-tit > p{font-size:14px;line-height:1.5;word-break:keep-all;margin-top:3px;} .cd-page .cd-steps, .cd-page .cd-tracks{gap:24px;} .cd-page .cd-step-ar{right:-2px;} .cd-page .cd-tint, .cd-page .cd-more{padding:44px 34px;} } /* 원본 @media (max-width:1300px) : 카드 위 연결선을 숨긴다 */ @media (max-width:1300px){ .cd-page .cd-steps > li:before{display:none;} } @media (max-width:1100px){ .cd-page .cd-info{margin-top:20px;} .cd-page .cd-steps{flex-wrap:wrap;} .cd-page .cd-steps > li{flex:1 1 calc(50% - 12px);} .cd-page .cd-step-ar{display:none;} .cd-page .cd-files > li{flex:1 1 calc(50% - 8px);} } @media (max-width:900px){ .cd-page .cd-sec{padding-bottom:56px;} .cd-page .cd-tint{margin-bottom:56px;} .cd-page .cd-tracks{flex-direction:column;} .cd-page .cd-btns{flex-direction:column;} } @media (max-width:660px){ .cd-page .cd-tint, .cd-page .cd-more{padding:34px 22px;} .cd-page .cd-steps{flex-direction:column;} .cd-page .cd-steps > li, .cd-page .cd-track{padding:24px;} .cd-page .cd-steps > li > strong, .cd-page .cd-track-nm{font-size:19px;} .cd-page .cd-steps > li > p, .cd-page .cd-track li, .cd-page .cd-info dd{font-size:16px;} .cd-page .cd-track-tag{font-size:12px;height:28px;padding:0 6px;} .cd-page .cd-info{flex-direction:column;padding:28px 22px;} .cd-page .cd-files{flex-direction:column;} .cd-page .cd-files > li{flex:1 1 auto;} .cd-page .cd-btn{height:64px;padding:0 18px;font-size:16px;} /* 카드는 height 가 아니라 min-height + 안여백으로 잡혀 있어 따로 준다 */ .cd-page .cd-files a{min-height:64px;gap:12px;padding:16px 18px;font-size:17px;} .cd-page .cd-files a > i:first-child{font-size:21px;} .cd-page .cd-dl{width:26px;height:26px;font-size:14px;} } /* sub2_1_e: 학부연구인턴제도 — .cd-page 규칙을 그대로 쓰고 아래만 더한다 (원본 https://ee.yonsei.ac.kr/ee/education/reu2.do) */ /* 활동 사진 3단 그리드 (원본 콜라주에서 한 장씩 추출) */ .cd-page .cd-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:40px 0 0;padding:0;list-style:none;} .cd-page .cd-gallery > li{border-radius:10px;overflow:hidden;background:#f4f5f8;} .cd-page .cd-gallery img{display:block;width:100%;aspect-ratio:5/2;object-fit:cover;} .cd-page .cd-gallery span{display:block;padding:14px 18px;font-size:16px;font-weight:500;color:#626f7e;letter-spacing:-.32px;} /* 연결선·뱃지 없이 카드만 쓰는 변형 (소개 문단) */ .cd-page .cd-steps-plain > li:before{display:none;} /* 목적 : 연구실 / 학부생 — 내놓는 것 → 얻는 것 */ .cd-page .cd-role{display:flex;align-items:stretch;gap:24px;margin-top:40px;} .cd-page .cd-role-nm{flex:0 0 150px;display:flex;flex-flow:column;align-items:center;justify-content:center;gap:10px;border-radius: 20px;border:1px solid #d9dce1;background-color:#fff;} .cd-page .cd-role-nm i{font-size:34px;color:var(--cd-pt);} .cd-page .cd-role-nm span{font-size:22px;font-weight:600;color:#222;} .cd-page .cd-role-box{flex:1 1 0%;border-radius: 20px;border:1px solid #d9dce1;padding:30px;display:flex;flex-flow:column;gap:12px;background-color:#fff;} .cd-page .cd-role-box ul{margin:0;padding:0;list-style:none;display:flex;flex-flow:column;gap:8px;} .cd-page .cd-role-box li{position:relative;padding-left:16px;font-size:18px;line-height:1.6em;font-weight:400;color:#626f7e;} .cd-page .cd-role-box li:before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--cd-pt);} .cd-page .cd-role-ar{flex:0 0 auto;align-self:center;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--cd-pt);color:#fff;font-size:18px;line-height:1;} .cd-page .cd-role-gain{background-color:var(--cd-pt);border-color:var(--cd-pt);} .cd-page .cd-role-gain li{color:var(--cd-pt-fade);} .cd-page .cd-role-gain li:before{background:#fff;} @media (max-width:1400px){ .cd-page .cd-role{gap:16px;} .cd-page .cd-role-nm{flex:0 0 120px;} } @media (max-width:1100px){ .cd-page .cd-role{flex-wrap:wrap;} .cd-page .cd-role-nm{flex:1 1 100%;flex-flow:row;padding:16px;} .cd-page .cd-role-ar{transform:rotate(90deg);margin:0 auto;} } @media (max-width:660px){ .cd-page .cd-gallery{grid-template-columns:1fr;margin-top:24px;} .cd-page .cd-role{gap:12px;margin-top:24px;} .cd-page .cd-role-box{padding:24px;} .cd-page .cd-role-box li{font-size:16px;} .cd-page .cd-role-nm span{font-size:19px;} } /* ************************** sub2_1_i: 졸업 요건 ****************************** * 내용 : https://ee.yonsei.ac.kr/ee/education/under_course03.do * 디자인 : http://hychem.dsso.kr/sub4_3.php 의 #GS-curri 규칙을 값 그대로 옮겼다. * 배너 300px/radius 20, 아코디언 radius 20 · padding 0 40px, * 제목 25px/600 · padding 35px 0, 펼친 내용 #f9f9f9 · radius 15 · 30px 35px * 색만 사이트 팔레트로 치환한다. ============================================================================== */ #gradReq{ --gr-pt:#2a6de6; --gr-pt-dk:#1b3f86; --gr-line:rgba(224,223,226,.6); position:relative;font-family:var(--font-family1);word-break:keep-all; } /* 상단 배너 : 원본은 사진 + 어두운 오버레이 + 좌→우 그라데이션. 사진 없이 그라데이션만으로 같은 구성을 만든다. 사진을 넣으려면 아래 background 에 url(...) 을 얹으면 된다. */ #gradReq .gr-hero{position:relative;display:table;overflow:hidden;border-radius:20px;width:100%;height:300px;padding:60px;box-sizing:border-box;background:var(--gr-pt-dk);} #gradReq .gr-hero:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;display:block;background: url("/images/sub/g_bg.jpg") no-repeat 50% 50%/cover;background-attachment: fixed;} #gradReq .gr-hero-txt{display:table-cell;vertical-align:bottom;position:relative;z-index:5;} #gradReq .gr-hero-txt big{display:block;font-weight: 700;font-size:48px;letter-spacing:-2px;color:#fff;} #gradReq .gr-hero-txt big > b{font-weight:600;} #gradReq .gr-hero-txt small{display:block;font-size:24px;font-weight:normal;line-height:1;letter-spacing:-.5px;color:#fff;margin-top:20px;} #gradReq .gr-hero-txt small > b{font-weight:600;} /* 안내 */ #gradReq .gr-notice{display:flex;gap:12px;margin-top:40px;padding:34px 36px;border-radius:20px;background:#eef2f9;} #gradReq .gr-notice > i{flex:0 0 auto;font-size:24px;line-height:1;color:var(--gr-pt-dk);} #gradReq .gr-notice dl{display:flex;flex-flow:column;gap:12px;margin:0;} #gradReq .gr-notice dt{font-size:20px;font-weight:600;color:var(--gr-pt-dk);} #gradReq .gr-notice dd{margin:0;font-size:18px;font-weight:400;line-height:1.7;letter-spacing:-.4px;color:#555a72;} #gradReq .gr-notice b{color:#222;font-weight:600;} /* 아코디언 */ #gradReq .gr-list{margin:60px 0 0;padding:0 40px;list-style:none;border-radius:20px;border:1px solid var(--gr-line);} #gradReq .gr-list > li{position:relative;border-bottom:1px solid var(--gr-line);} #gradReq .gr-list > li:last-child{border:0;} #gradReq .gr-que{display:flex;align-items:center;gap:24px;width:100%;padding:35px 0;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer;} #gradReq .gr-no{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#eef2f9;color:var(--gr-pt);font-family:var(--font-family2);font-size:19px;font-weight:700;letter-spacing:.5px;} #gradReq .gr-no-all{color:var(--gr-pt-dk);} #gradReq .gr-no-all i{font-size:24px;} #gradReq .gr-tit{flex:1 1 auto;font-size:25px;font-weight:600;letter-spacing:-1px;color:#1f1f1f;} #gradReq .gr-ar{flex:0 0 auto;font-size:30px;color:var(--gr-pt);line-height:1;transition:transform .3s cubic-bezier(.16,1,.3,1);} #gradReq .gr-list > li.on .gr-no{background:var(--gr-pt);color:#fff;} #gradReq .gr-list > li.on .gr-tit{color:var(--gr-pt-dk);} #gradReq .gr-list > li.on .gr-ar{transform:rotate(135deg);} #gradReq .gr-que:hover .gr-tit{color:var(--gr-pt);} #gradReq .gr-que:focus-visible{outline:2px solid var(--gr-pt);outline-offset:-4px;} /* 펼침 애니메이션 : grid-template-rows 0fr2194200b1fr 로 실제 높이를 전환한다. max-height 추정값을 쓰면 내용이 길 때 잘리거나 여는 속도가 들쭉날쭉해진다. */ #gradReq .gr-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1);} #gradReq .gr-list > li.on .gr-fold{grid-template-rows:1fr;} #gradReq .gr-fold-in{overflow:hidden;min-height:0;} #gradReq .gr-anw{position:relative;padding:30px 35px;background:#f9f9f9;border-radius:15px;margin-bottom:30px;opacity:0;transform:translateY(-6px);transition:opacity .3s ease .06s,transform .35s cubic-bezier(.16,1,.3,1) .06s;} #gradReq .gr-list > li.on .gr-anw{opacity:1;transform:none;} #gradReq .gr-anw > p{margin:0 0 20px;font-size:18px;line-height:1.8;font-weight:500;letter-spacing:-1px;color:#444;} /* 자료 버튼 */ #gradReq .gr-files{display:flex;flex-wrap:wrap;gap:12px;} #gradReq .gr-file{display:flex;align-items:center;gap:12px;height:64px;padding:0 24px;border:1px solid #e2e6ee;border-radius:10px;background:#fff;color:#222;font-size:17px;font-weight:500;letter-spacing:-.4px;text-decoration:none;transition:border-color .25s ease,box-shadow .25s ease,transform .25s cubic-bezier(.16,1,.3,1);} #gradReq .gr-file > i{flex:0 0 auto;font-size:24px;} #gradReq .gr-file > em{flex:0 0 auto;padding:4px 10px;border-radius:5px;font-family:var(--font-family2);font-size:13px;font-style:normal;font-weight:700;letter-spacing:.5px;} #gradReq .gr-pdf > i{color:#d8443c;} #gradReq .gr-pdf > em{background:#fdeceb;color:#c0392b;} #gradReq .gr-excel > i{color:#1d7044;} #gradReq .gr-excel > em{background:#e7f4ec;color:#1d7044;} #gradReq a.gr-file:hover, #gradReq a.gr-file:focus-visible{outline:0;border-color:var(--gr-pt);box-shadow:0 6px 18px rgba(27,63,134,.12);transform:translateY(-2px);} #gradReq .gr-off{color:#9aa4b4;cursor:default;} #gradReq .gr-off > i{color:#c3c9d4;} #gradReq .gr-off > em{background:#eef0f4;color:#8a90a0;} @media (max-width:1400px){ #gradReq .gr-hero{height:240px;padding:40px;} #gradReq .gr-hero-txt big{font-size:36px;letter-spacing:-1.4px;} #gradReq .gr-hero-txt small{font-size:19px;margin-top:14px;} #gradReq .gr-list{margin-top:44px;padding:0 30px;} #gradReq .gr-tit{font-size:21px;letter-spacing:-.8px;} } @media (max-width:900px){ #gradReq .gr-que{gap:16px;padding:26px 0;} #gradReq .gr-no{width:44px;height:44px;font-size:17px;} #gradReq .gr-anw{padding:24px 22px;} #gradReq .gr-file{width:100%;} } @media (max-width:660px){ #gradReq .gr-hero{height:200px;padding:26px;} #gradReq .gr-hero-txt big{font-size:28px;} #gradReq .gr-hero-txt small{font-size:16px;} #gradReq .gr-notice{flex-direction:column;padding:26px 22px;} #gradReq .gr-notice dd{font-size:16px;} #gradReq .gr-list{padding:0 20px;} #gradReq .gr-tit{font-size:18px;} #gradReq .gr-anw > p{font-size:16px;letter-spacing:-.5px;} #gradReq .gr-file{height:58px;padding:0 16px;font-size:16px;} } @media (prefers-reduced-motion:reduce){ #gradReq .gr-fold, #gradReq .gr-anw, #gradReq .gr-ar{transition:none !important;} } /* ******************* sub3_1_*: 연구분야 *************************************** * 내용 : https://ee.yonsei.ac.kr/ee/ResearchAreaBio.do * 디자인 : 레퍼런스(sub3_1_a.php / sub.css)의 #Rsch 규칙을 값 그대로 옮겼다. * 포인트 컬러(#0064dc · #223662)만 이 사이트 팔레트로 치환. * 교수 사진은 실물이 없어 쓰지 않고, 원본 표의 호실 · 교내전화 · 이메일을 넣는다. * 주의 : #subContents 가 이미 위 180 / 아래 120 패딩을 갖고 있어 * 레퍼런스의 padding-bottom:160px 는 덜어냈다. ============================================================================== */ #Rsch{ --rs-pt:#2a6de6; --rs-dk:#1b3f86; --rs-inner:var(--sub-width); /* 개요 · 연구실 목록 공통 본문 폭 — 다른 페이지와 같은 폭을 쓴다 */ position:relative;padding:0;font-family:var(--font-family1);word-break:keep-all; } #Rsch article{position:relative;max-width:1774px;width:100%;margin:0 auto;} /* 분야 탭 : 레퍼런스 sub.css 의 .vs-tabs 규칙(536~591행)을 값 그대로 옮겼다. 구분선 li+li:before(1x20 #ddd, left -35px) · 밑줄 a:before(100%x3px, bottom -8px) · 롤오버 시 strach 애니메이션(scaleX 0→1, .3s)까지 동일. 포인트 컬러(#006beb)만 사이트 팔레트로 치환. */ #Rsch .vs-tabs ul{display:flex;flex-wrap:wrap;justify-content:center;width:90%;margin:0 auto;padding:0 0 20px;list-style:none;white-space:nowrap;row-gap: 30px;column-gap:70px;} #Rsch .vs-tabs li{position:relative;flex:0 0 auto;line-height:1;} #Rsch .vs-tabs li + li:before{content:'';position:absolute;left:-35px;top:2px;width:1px;height:20px;background:#ddd;} #Rsch .vs-tabs li.tab-rowhead:before{display:none;} /* 줄이 넘어간 첫 항목 앞에는 구분선을 그리지 않는다 */ #Rsch .vs-tabs a{display:block;color:#8a8a8a;font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.5px;text-decoration:none;transition:color .2s ease;} #Rsch .vs-tabs a:hover, #Rsch .vs-tabs li.on a{color:#111;font-weight:700;} #Rsch .vs-tabs li.on a:before{content:'';position:absolute;left:0;bottom:-8px;width:100%;height:3px;background:var(--rs-pt);} #Rsch .vs-tabs a:hover:before{content:'';position:absolute;left:0;bottom:-8px;width:100%;height:3px;background:var(--rs-pt);animation:rschStrach .3s;} #Rsch .vs-tabs a:focus-visible{outline:2px solid var(--rs-pt);outline-offset:6px;} @keyframes rschStrach{ 0%{transform:scaleX(0);} 100%{transform:scaleX(1);} } /* 상단 배경 띠 : 스크롤해도 배경이 고정되는 형태(전공소개 배너와 동일). clip-path / transform 은 같은 요소 안의 background-attachment:fixed 를 깨뜨리므로 여닫는 건 width 로만 한다. margin:0 auto 라서 가운데에서 좌우로 열린다. fixed 배경은 크기·위치를 뷰포트 기준으로 잡으므로, 폭이 변해도 이미지는 미동도 없이 창만 벌어진다(그래서 늘어나거나 찌그러지지 않는다). */ #Rsch .img-wrap{position:relative;width:100%;height:380px;margin:40px auto 0;border-radius:20px;overflow:hidden;transition:width 1.2s cubic-bezier(.65,0,.35,1);} #Rsch .img-wrap.is-closed{width:0;} #Rsch .img-wrap:before{content:"";position:absolute;left:0;top:0;z-index:0;display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;background-attachment:fixed;} #Rsch .img-wrap:after{content:"";position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;background: linear-gradient(100deg, rgb(27 63 134) 0%, rgba(27, 63, 134, .24) 60%, rgba(27, 63, 134, .04) 100%);background-attachment:fixed;} #Rsch .img-wrap.rsch-bg1:before{background-image: url("/images/sub/r_bg1.jpg");} #Rsch .img-wrap.rsch-bg2:before{background-image:url("/images/sub/r_bg2.jpg");} #Rsch .img-wrap.rsch-bg3:before{background-image:url("/images/sub/r_bg3.jpg");} #Rsch .img-wrap.rsch-bg4:before{background-image:url("/images/sub/r_bg4.jpg");} #Rsch .img-wrap.rsch-bg5:before{background-image:url("/images/sub/r_bg5.jpg");} #Rsch .img-wrap.rsch-bg6:before{background-image:url("/images/sub/r_bg6.jpg");} #Rsch .img-wrap.rsch-bg7:before{background-image:url("/images/sub/r_bg7.jpg");} /* 개요 */ #Rsch .overview{position:relative;box-sizing:border-box;max-width:var(--rs-inner);margin:0 auto;padding: 100px 0;} #Rsch .overview .ov-top{position:relative;display:flex;align-items:flex-start;flex-direction:column;margin-bottom:100px;} #Rsch .overview .ov-tit{position:relative;z-index:1;} #Rsch .overview .ov-tit small{display:block;color:var(--rs-pt);font-family:var(--font-family2);font-size:24px;font-weight: 700;line-height:1.6;letter-spacing: -1px;} #Rsch .overview .ov-tit big{display:block;position:relative;margin-top:20px;color: #111;font-size: 60px;font-weight:700;line-height:1.2;letter-spacing:-2px;} #Rsch .overview p.ov-txt{position:relative;z-index:1;margin:50px 0 0;color: #444;font-size:28px;font-weight:700;line-height:1.8;letter-spacing:-1.2px;} #Rsch .paralax-title{position:absolute;left:50%;top:180px;z-index:0;display:block;width:400%;height:205px;margin:0;font-family:var(--font-family2);font-size:180px;font-weight:700;line-height:1;letter-spacing:-5px;word-spacing:-20px;white-space:nowrap;text-align:left;background-image:linear-gradient(to top,rgb(243 248 251),rgb(243 248 251 / 60%),rgb(243 248 251 / 0%));background-clip:text;-webkit-background-clip:text;color:transparent;pointer-events:none;user-select:none;} #Rsch .over-txt{position:relative;z-index:1;margin:0;padding:0;list-style:none;} #Rsch .over-txt > li{display:flex;flex-direction:column;margin-top: 80px;} /* 제목 위 · 내용 아래 (제목이 길어지면 좌우 배치가 무너진다) */ #Rsch .over-txt > li:first-child{margin-top:0;} #Rsch .over-txt .ov-subj{width:100%;margin-bottom: 15px;} #Rsch .over-txt .ov-subj h4{margin:0;} #Rsch .over-txt .ov-subj h4 > span{display:inline-block;padding:0;color:#000;font-family:var(--font-family2);font-size: 32px;font-weight: 900;line-height:1.25;text-transform:uppercase;} #Rsch .over-txt .ov-desc{width:100%;} #Rsch .over-txt .ov-desc p{margin:0;color: #444;font-size: 20px;font-weight: 500;line-height:1.6;letter-spacing:-1px;} #Rsch .over-txt .ov-desc p + p{margin-top:30px;} #Rsch .over-txt .ov-desc b{color:#1E1D1A;font-weight:700;} /* 구획 구분선 */ #Rsch .sec-cont{position:relative;} #Rsch .sec-cont.line{padding-bottom:0;padding-top: 100px;} #Rsch .sec-cont.line:before{content:"";position:absolute;left:0;right:0;top:0;z-index:0;display:block;height:0;border-top: 1px dotted #e8e8e8;} /* 연구실 목록 */ #Rsch .lab-list{position:relative;max-width:var(--rs-inner);margin:0 auto;} #Rsch .lab-head{margin: 0 0 40px;color:#1E1D1A;font-size: 38px;font-weight:400;line-height:1.4;letter-spacing: -1px;} #Rsch .lab-head b{font-weight:700;} #Rsch .lab-list > ul{display:flex;flex-wrap:wrap;gap:40px;margin:0;padding:0;list-style:none;} /* 카드 배경은 gccm.khu.ac.kr/sub6_1_b.php 와 동일하게 체크무늬로 번갈아 깐다. 2단이라 4n+1 · 4n+4 가 회색, 4n+2 · 4n+3 이 흰색(테두리)이 되어 대각선으로 엇갈린다. */ #Rsch .lab-list > ul > li{box-sizing:border-box;width:calc(50% - 20px);padding: 35px 45px;border:1px solid transparent;border-radius: 20px;background:#f6f6f9;} #Rsch .lab-list > ul > li:nth-child(4n+2), #Rsch .lab-list > ul > li:nth-child(4n+3){border-color:#e0e0e6;background:#fff;} #Rsch .lab-item{display:flex;flex-direction:row;align-items:flex-start;gap:28px;width:100%;height:100%;} #Rsch .lab-item .img-box{flex:0 0 auto;overflow:hidden;width:120px;height:120px;border-radius:50%;background:#e7ecf3;} #Rsch .lab-item .img-box img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;} /* 원본이 400x560 세로형이라 정사각으로 자르면서 얼굴이 가운데 오게 위쪽을 잡는다 */ /* 교수 사진이 없는 경우(학부 교수소개에 사진이 없는 분) 성을 크게 넣어 자리를 채운다 */ #Rsch .lab-item .img-box.no-photo{display:flex;align-items:center;justify-content:center;background:#e7ecf3;color:#8794aa;font-family:var(--font-family2);font-size:44px;font-weight:700;line-height:1;} #Rsch .lab-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;height:100%;} #Rsch .lab-tit{display:flex;flex-direction:column;width:100%;margin:0;} #Rsch .lab-tit > strong{color:var(--rs-dk);font-size: 28px;font-weight:700;line-height:1.3;letter-spacing:-1px;} #Rsch .lab-tit > small{display:block;margin-top: 5px;font-family:var(--font-family2);font-size: 18px;font-weight:500;line-height:1.4;letter-spacing:-.2px;color:#7a8090;} #Rsch .lab-tit > span{display:block;margin-top:16px;color:#555;font-size: 17px;font-weight:600;line-height:1.4;letter-spacing:-.6px;background: #fff;border-radius: 100px;padding: 9px 25px;} #Rsch .lab-tit > span i{margin-right:4px;color:var(--rs-pt);font-weight:normal;} #Rsch .lab-tit > span b{color: #111;font-weight:700;} #Rsch .lab-tit > span em{font-family:var(--font-family2);font-size:16px;font-style:normal;font-weight:500;color:#8a90a0;} /* 지도교수 알약은 카드 배경과 반대색이라야 보인다. 흰 카드에서는 회색으로 뒤집는다 */ #Rsch .lab-list > ul > li:nth-child(4n+2) .lab-tit > span, #Rsch .lab-list > ul > li:nth-child(4n+3) .lab-tit > span{background:#f6f6f9;} #Rsch .lab-info{box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;align-content:start;gap:10px 16px;width:100%;margin: 15px 0 0;} #Rsch .lab-info dt{display:flex;align-items:center;gap:6px;color:#8a90a0;font-size: 17px;font-weight:500;letter-spacing:-.3px;white-space:nowrap;} #Rsch .lab-info dt i{font-size: 18px;font-weight:normal;} #Rsch .lab-info dd{margin:0;color:#34322E;font-size: 17px;font-weight:600;letter-spacing:-.3px;overflow-wrap:anywhere;} #Rsch .lab-info dd a{color:#34322E;text-decoration:none;} #Rsch .lab-info dd a:hover{color:var(--rs-pt);text-decoration:underline;} @media (max-width:1620px){ #Rsch .vs-tabs ul{column-gap:56px;} #Rsch .vs-tabs li + li:before{left:-28px;} #Rsch .vs-tabs a{font-size:20px;} #Rsch .overview{padding:100px 0;} #Rsch .overview .ov-tit big{font-size:56px;letter-spacing:-1.6px;} #Rsch .overview p.ov-txt{font-size:24px;letter-spacing:-1px;} #Rsch .paralax-title{top:150px;height:160px;font-size:140px;} #Rsch .lab-list > ul > li{padding:35px 40px;} #Rsch .lab-item{gap:24px;} #Rsch .lab-item .img-box{width:104px;height:104px;} #Rsch .lab-tit > strong{font-size:24px;} } @media (max-width:1170px){ #Rsch .vs-tabs ul{width:100%;column-gap:44px;} #Rsch .vs-tabs li + li:before{left:-22px;} #Rsch .vs-tabs a{font-size:18px;} #Rsch .img-wrap{height:300px;margin-top:34px;} #Rsch .overview{padding:80px 0;} #Rsch .overview .ov-top{margin-bottom:60px;} #Rsch .overview .ov-tit small{font-size:19px;} #Rsch .overview .ov-tit big{font-size:44px;} #Rsch .overview p.ov-txt{margin-top:34px;font-size:21px;} #Rsch .paralax-title{top:120px;height:115px;font-size:100px;letter-spacing:-3px;} #Rsch .over-txt > li{margin-top:70px;} #Rsch .over-txt .ov-subj{margin-bottom:20px;} #Rsch .over-txt .ov-desc p{font-size:19px;letter-spacing:-.7px;} #Rsch .sec-cont{padding:80px 0;} #Rsch .lab-list > ul{gap:24px;} /* 1단이 되면 체크무늬가 의미 없어지므로 한 줄씩 번갈아 깐다 */ #Rsch .lab-list > ul > li{width:100%;} #Rsch .lab-list > ul > li:nth-child(2n+1){border-color:transparent;background:#f6f6f9;} #Rsch .lab-list > ul > li:nth-child(2n){border-color:#e0e0e6;background:#fff;} #Rsch .lab-list > ul > li:nth-child(2n+1) .lab-tit > span{background:#fff;} #Rsch .lab-list > ul > li:nth-child(2n) .lab-tit > span{background:#f6f6f9;} #Rsch .lab-head{margin-bottom:34px;font-size:26px;} } @media (max-width:767px){ /* 레퍼런스 767 구간의 박스형. 다만 라벨이 길어 3단 대신 1단으로 쌓는다 */ #Rsch .vs-tabs ul{justify-content:flex-start;width:100%;padding-bottom:0;row-gap:0;column-gap:0;background:#f9f7f7;text-align:center;} #Rsch .vs-tabs li{display:block;width:calc(100% + 1px);min-height:50px;height:auto;margin:-1px 0 0 -1px;line-height:1.5;} #Rsch .vs-tabs li + li:before{display:none;} #Rsch .vs-tabs a{position:relative;display:table;table-layout:fixed;width:100%;height:100%;border:1px solid #ddd;background:#fff;color:#222;font-size:18px;font-weight:500;transition:all .1s;box-sizing:border-box;} #Rsch .vs-tabs a span{display:table-cell;vertical-align:middle;width:100%;height:100%;padding:10px 5px 7px;font-size:16px;line-height:1.2;text-align:center;} #Rsch .vs-tabs li.on a:before, #Rsch .vs-tabs a:hover:before{display:none;} #Rsch .vs-tabs li.on a{border-color:var(--rs-dk);background:var(--rs-dk);color:#fff;} #Rsch .vs-tabs a:hover{z-index:2;border-color:var(--rs-pt);color:var(--rs-pt);} #Rsch .vs-tabs li.on a:hover{color:#fff;} #Rsch .img-wrap{height:220px;border-radius:14px;} #Rsch .overview .ov-tit big{font-size:32px;letter-spacing:-1.2px;} #Rsch .overview p.ov-txt{font-size:18px;line-height:1.7;letter-spacing:-.7px;} #Rsch .paralax-title{top:96px;height:74px;font-size:64px;letter-spacing:-2px;} #Rsch .over-txt .ov-desc p{font-size:17px;letter-spacing:-.5px;} #Rsch .lab-head{font-size:21px;} #Rsch .lab-list > ul > li{padding:26px 22px;} #Rsch .lab-item{gap:18px;} #Rsch .lab-item .img-box{width:84px;height:84px;} #Rsch .lab-tit > strong{font-size:21px;} #Rsch .lab-tit > span{margin-top:12px;font-size:18px;} } @media (prefers-reduced-motion:reduce){ #Rsch .paralax-title{transform:none !important;} #Rsch .img-wrap.is-closed{width:100%;transition:none;} } /* ************************** sub5_3_a: 동아리 및 동창회 ****************************** * 대학원 소개(#grad)의 제목 · 설명 · 하단 배너 스타일을 그대로 쓴다. * 한 페이지에 학과 동아리 / 학부 각반 동아리 / 동창회 세 구역. 위의 알약 버튼으로 바로 간다. ============================================================================== */ #grad.gd-club .gd-sec, #grad.gd-club #cl-alumni{scroll-margin-top:140px;} /* 동창회 배너 : 대학원 입학 안내 배너와 같은 모양, 배경 사진만 d_bg.jpg 로 바꾼다 */ #grad.gd-club #cl-alumni{background-image:url("/images/sub/d_bg.jpg");} /* 바로가기 알약 */ #grad .cl-jump{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:0 0 90px;} #grad .cl-jump a{display:inline-flex;align-items:center;gap:8px;height:56px;padding:0 28px;border:1px solid #dfe3ea;border-radius:999px;background:#fff;color:#1a1c20;font-size:18px;font-weight:700;letter-spacing:-.5px;text-decoration:none;transition:background .25s ease,border-color .25s ease,color .25s ease;} #grad .cl-jump a i{color:var(--main-color);font-size:20px;transition:color .25s ease;} #grad .cl-jump a:hover{border-color:var(--main-color);background:var(--main-color);color:#fff;} #grad .cl-jump a:hover i{color:#fff;} /* 학과 동아리 카드 */ #grad .cl-dept{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none;} #grad .cl-dept > li{display:flex;flex-direction:column;padding:40px 40px 34px;border:1px solid #e2e6ee;border-radius:24px;background:#fff;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;} #grad .cl-dept > li:hover{border-color:transparent;box-shadow:0 16px 40px rgba(20,40,90,.10);transform:translateY(-4px);} #grad .cl-tag{display:inline-block;padding: 8px 14px;border-radius:999px;background:#eef2fa;color:var(--main-color);font-size: 16px;font-style:normal;font-weight:700;line-height:1;letter-spacing:-.3px;} #grad .cl-card-head strong{display:block;margin-top:16px;color:#0f0f10;font-family:var(--font-family2);font-size: 38px;font-weight: 700;line-height:1.25;letter-spacing:-1px;} #grad .cl-card-head p{margin:10px 0 0;color:#4d525c;font-size: 20px;font-weight: 600;line-height:1.6;letter-spacing:-.6px;} #grad .cl-acts{margin:24px 0 0;padding:22px 0 0;border-top:1px solid #eef1f5;list-style:none;} #grad .cl-acts li{position:relative;padding-left:16px;color:#3a3f48;font-size:17px;font-weight: 600;line-height:1.65;letter-spacing:-.5px;} #grad .cl-acts li + li{margin-top:6px;} #grad .cl-acts li:before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--main-bright);} #grad .cl-card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;margin-top:auto;padding-top:28px;} #grad .cl-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;color:#1a1c20;font-size: 18px;font-weight:700;} #grad .cl-head span{padding: 7px 9px;border-radius:6px;background:#f1f3f6;color:#6b717c;font-size: 14px;font-weight:600;line-height:1;} #grad .cl-head a{display:inline-flex;align-items:center;gap:5px;color:#6b717c;font-family:var(--font-family2);font-size: 17px;font-weight:500;text-decoration:none;} #grad .cl-head a:hover{color:var(--main-color);} #grad .cl-sns{display:flex;flex-wrap:wrap;gap:6px;} #grad .cl-sns a{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;background:#f3f5f9;color:#1a1c20;font-size:15px;font-weight:600;letter-spacing:-.3px;text-decoration:none;transition:background .2s ease;} #grad .cl-sns a i{font-size:18px;} #grad .cl-sns a:hover{background:#e7ebf3;} #grad .cl-sns .sns-insta i{color:#e1306c;} #grad .cl-sns .sns-fb i{color:#1877f2;} #grad .cl-sns .sns-cafe i{color:#03c75a;} #grad .cl-sns .sns-home i{color:var(--main-color);} /* 카드 : 회색 바탕 / 흰 바탕+테두리가 체크무늬로 번갈아 나온다 (2열 기준 1 · 4 · 5 · 8 번째가 회색) */ #grad .cl-dept > li:nth-child(4n+1), #grad .cl-dept > li:nth-child(4n+4){border-color:transparent;background:#f4f5f8;} /* 제목 줄 : 이름 + 바로가기 화살표 / 오른쪽 남색 알약에 회장 */ #grad .cl-card-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;} #grad .cl-card-top strong{display:inline-flex;align-items:center;gap:12px;margin-top:0;} #grad .cl-go{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#f3f5f9;color:#1a1c20;font-size:19px;text-decoration:none;transition:background .2s ease,color .2s ease;} #grad .cl-go:hover{background:var(--main-color);color:#fff;} #grad .cl-chief{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 18px;border-radius:999px;background:var(--main-color);color:#fff;font-size:15px;font-weight:700;letter-spacing:-.3px;} #grad .cl-chief i{font-size:17px;} #grad .cl-mail{display:inline-flex;align-items:center;gap:6px;color:#6b717c;font-family:var(--font-family2);font-size:15px;font-weight:500;text-decoration:none;} #grad .cl-mail:hover{color:var(--main-color);} /* 회색 카드 안의 작은 버튼 · 선은 흰색 계열로 */ #grad .cl-dept > li:nth-child(4n+1) .cl-go, #grad .cl-dept > li:nth-child(4n+4) .cl-go, #grad .cl-dept > li:nth-child(4n+1) .cl-sns a, #grad .cl-dept > li:nth-child(4n+4) .cl-sns a{background:#fff;} #grad .cl-dept > li:nth-child(4n+1) .cl-acts, #grad .cl-dept > li:nth-child(4n+4) .cl-acts{border-top-color:#e3e6ec;} #grad .cl-dept > li:nth-child(4n+1) .cl-go:hover, #grad .cl-dept > li:nth-child(4n+4) .cl-go:hover{background:var(--main-color);} #grad .cl-dept > li:nth-child(4n+1) .cl-sns a:hover, #grad .cl-dept > li:nth-child(4n+4) .cl-sns a:hover{background:#e7ebf3;} /* 학부 각반 동아리 */ #grad .cl-class{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none;} #grad .cl-class > li{overflow:hidden;border:1px solid #e2e6ee;border-radius:24px;background:#fff;} #grad .cl-class-head{display:flex;gap:12px;padding:26px 30px;background:var(--main-color);color:#fff;justify-content: flex-start;flex-direction: row;align-items: center;} #grad .cl-class-head strong{font-size: 32px;font-weight:800;letter-spacing:-1px;} #grad .cl-class-head span{color:rgba(255,255,255,.72);font-family:var(--font-family2);font-size: 19px;font-weight:500;} #grad .cl-class-list{margin:0;padding:8px 30px 14px;list-style:none;} #grad .cl-class-list > li{padding:20px 0;border-bottom:1px solid #eef1f5;} #grad .cl-class-list > li:last-child{border-bottom:0;} #grad .cl-class-name{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;} #grad .cl-class-name strong{color:#0f0f10;font-size: 23px;font-weight:700;letter-spacing:-.5px;} #grad .cl-class-name em{flex:none;padding:5px 10px;border-radius:999px;background:#eef2fa;color:var(--main-color);font-size:13px;font-style:normal;font-weight:700;line-height:1;} #grad .cl-class-desc{margin:8px 0 0;color:#4d525c;font-size: 17px;font-weight: 600;line-height:1.6;letter-spacing:-.4px;} @media (max-width:1170px){ #grad .cl-class{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:1024px){ #grad .cl-dept{grid-template-columns:1fr;} /* 1열이 되면 체크무늬 대신 한 칸씩 번갈아 */ #grad .cl-dept > li:nth-child(n){border-color:#e2e6ee;background:#fff;} #grad .cl-dept > li:nth-child(n) .cl-go, #grad .cl-dept > li:nth-child(n) .cl-sns a{background:#f3f5f9;} #grad .cl-dept > li:nth-child(n) .cl-acts{border-top-color:#eef1f5;} #grad .cl-dept > li:nth-child(odd){border-color:transparent;background:#f4f5f8;} #grad .cl-dept > li:nth-child(odd) .cl-go, #grad .cl-dept > li:nth-child(odd) .cl-sns a{background:#fff;} #grad .cl-dept > li:nth-child(odd) .cl-acts{border-top-color:#e3e6ec;} #grad .cl-dept > li:nth-child(n) .cl-go:hover{background:var(--main-color);} #grad .cl-dept > li:nth-child(n) .cl-sns a:hover{background:#e7ebf3;} } @media (max-width:767px){ #grad .cl-jump{gap:8px;margin-bottom:56px;} #grad .cl-jump a{height:46px;padding:0 18px;font-size:15px;} #grad .cl-jump a i{font-size:17px;} #grad .cl-dept{gap:14px;} #grad .cl-dept > li{padding:28px 22px 24px;border-radius:18px;} #grad .cl-card-head strong{font-size:24px;} #grad .cl-card-head p{font-size:16px;} #grad .cl-acts{margin-top:18px;padding-top:16px;} #grad .cl-acts li{font-size:15px;} #grad .cl-card-foot{padding-top:20px;} #grad .cl-class{grid-template-columns:1fr;gap:14px;} #grad .cl-class > li{border-radius:18px;} #grad .cl-class-head{padding:20px 22px;} #grad .cl-class-head strong{font-size:22px;} #grad .cl-class-list{padding:4px 22px 10px;} #grad .cl-class-name strong{font-size:17px;} #grad .cl-class-desc{font-size:15px;} } @media (prefers-reduced-motion:reduce){ #grad .cl-dept > li, #grad .cl-jump a{transition:none;} #grad .cl-dept > li:hover{transform:none;} } /* ************************** 슈퍼와이드 모니터 (1981px 이상) ****************************** * 틀(#allWrap)이 1980px 에서 멈추므로, 화면 끝까지 뚫고 나가던 계산(100vw 기준)을 1980px 기준으로 바꿔 * 좌우 32px 여백이 그대로 유지되게 한다. 100vw 로 꽉 차는 요소는 #allWrap 의 overflow-x:clip 이 틀 끝에서 잘라 준다. * 위의 :root · #major · #grad 값을 덮어야 하므로 이 파일 맨 끝에 둔다. ============================================================================== */ @media (min-width:1981px){ :root{--area-gutter:calc((1980px - min(1900px, var(--sub-width))) / 2);} #major{--mj-wide-w:calc(1980px - 64px);--mj-wide-l:calc(50% - 990px + 32px);} #grad{--gd-wide-w:calc(1980px - 64px);--gd-wide-l:calc(50% - 990px + 32px);} } /* ************************** privacy: 개인정보처리방침 ****************************** * 긴 법률 문서라 읽기 편하게 : 본문 폭 1100px, 조항마다 번호 배지 + 선으로 구분. * 위에 조항 바로가기 알약을 둔다. ============================================================================== */ #privacy{max-width:1100px;margin:0 auto;font-family:var(--font-family1);word-break:keep-all;} #privacy .pv-art{scroll-margin-top:140px;} #privacy .pv-intro{padding:36px 40px;border-radius:20px;background:#f4f5f8;} #privacy .pv-intro p{margin:0;color:#3a3f48;font-size:18px;line-height:1.8;letter-spacing:-.5px;} #privacy .pv-intro p + p{margin-top:12px;} #privacy .pv-toc{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 70px;} #privacy .pv-toc a{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid #dfe3ea;border-radius:999px;background:#fff;color:#4d525c;font-size:15px;font-weight:600;letter-spacing:-.4px;text-decoration:none;transition:border-color .2s ease,color .2s ease;} #privacy .pv-toc a:hover{border-color:var(--main-color);color:var(--main-color);} #privacy .pv-art{padding:44px 0;border-top:1px solid #e3e6ec;} #privacy .pv-art:first-of-type{border-top:2px solid #1a1c20;} #privacy .pv-art h3{display:flex;align-items:center;gap:14px;margin:0 0 20px;color:#0f0f10;font-size:26px;font-weight:800;letter-spacing:-1px;} #privacy .pv-art h3 em{flex:none;padding:6px 12px;border-radius:999px;background:var(--main-color);color:#fff;font-size:15px;font-style:normal;font-weight:700;line-height:1;letter-spacing:-.3px;} #privacy .pv-art > p{margin:0;color:#3a3f48;font-size:18px;line-height:1.8;letter-spacing:-.5px;} #privacy .pv-art > p + p{margin-top:10px;} #privacy .pv-list{margin:16px 0 0;padding:0;list-style:none;} #privacy .pv-list li{position:relative;padding-left:16px;color:#3a3f48;font-size:17px;line-height:1.75;letter-spacing:-.5px;} #privacy .pv-list li + li{margin-top:6px;} #privacy .pv-list li:before{content:"";position:absolute;left:2px;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--main-bright);} #privacy .pv-dl{margin:20px 0 0;} #privacy .pv-dl dt{margin-top:20px;color:#1a1c20;font-size:18px;font-weight:700;letter-spacing:-.5px;} #privacy .pv-dl dt:first-child{margin-top:0;} #privacy .pv-dl dd{margin:8px 0 0;padding-left:14px;border-left:3px solid #e3e8f2;color:#4d525c;font-size:17px;line-height:1.75;letter-spacing:-.5px;} #privacy .pv-dl dd .pv-list{margin-top:10px;} #privacy .pv-note{margin-top:22px !important;padding:18px 22px;border-radius:12px;background:#f4f5f8;font-size:17px !important;} #privacy .pv-table{margin-top:20px;overflow-x:auto;} #privacy .pv-table table{width:100%;border-collapse:collapse;border-top:2px solid #1a1c20;} #privacy .pv-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);} #privacy .pv-table th, #privacy .pv-table td{padding:16px 20px;border-bottom:1px solid #e3e6ec;font-size:17px;line-height:1.7;letter-spacing:-.4px;text-align:left;vertical-align:top;} #privacy .pv-table th{width:160px;background:#f7f8fa;color:#1a1c20;font-weight:700;} #privacy .pv-table td{color:#3a3f48;} #privacy .pv-table td b{display:inline-block;min-width:56px;margin-right:6px;color:var(--main-color);} #privacy .pv-contact{margin-top:20px;padding:28px 32px;border-radius:16px;background:#f4f5f8;} #privacy .pv-contact strong{display:block;margin-bottom:16px;color:#0f0f10;font-size:18px;font-weight:700;} #privacy .pv-contact ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 30px;margin:0;padding:0;list-style:none;} #privacy .pv-contact li{display:flex;gap:14px;color:#3a3f48;font-size:17px;} #privacy .pv-contact li span{flex:0 0 52px;color:#8a90a0;font-weight:600;} #privacy .pv-contact a{color:inherit;text-decoration:none;} #privacy .pv-contact a:hover{color:var(--main-color);} #privacy .pv-date{display:flex;flex-wrap:wrap;gap:10px 30px;margin:20px 0 0;padding:0;list-style:none;} #privacy .pv-date li{color:#1a1c20;font-size:17px;font-weight:600;} #privacy .pv-date li span{margin-right:10px;color:#8a90a0;font-weight:600;} @media (max-width:767px){ #privacy .pv-intro{padding:24px 20px;border-radius:14px;} #privacy .pv-intro p{font-size:16px;} #privacy .pv-toc{margin:24px 0 44px;gap:6px;} #privacy .pv-toc a{height:34px;padding:0 12px;font-size:13px;} #privacy .pv-art{padding:32px 0;} #privacy .pv-art h3{flex-wrap:wrap;gap:10px;font-size:21px;} #privacy .pv-art > p, #privacy .pv-list li, #privacy .pv-dl dd{font-size:15px;} #privacy .pv-dl dt{font-size:16px;} #privacy .pv-table th{width:90px;padding:12px 12px;} #privacy .pv-table td{padding:12px 12px;font-size:15px;} #privacy .pv-table th{font-size:15px;} #privacy .pv-contact{padding:20px;} #privacy .pv-contact ul{grid-template-columns:1fr;} #privacy .pv-contact li{font-size:15px;} }