/* === DONGA-KOR SUBPAGE COMPONENTS (V2026_06_09_01) === 동아대학교 전용 서브페이지 공유 컴포넌트. 배포 시 donga_kor-tpl-001 의 template_json.globalCss 에 prepend 되어, 모든 동아대 서브페이지(content_v2.html)가 .dau-sub-* 클래스로 재사용한다. CMS `/cms/template` globalCss 패널에서 편집 가능. 격리: ① donga_kor-tpl-001 은 service_id=donga_kor 전용 템플릿 ② 모든 룰을 html[data-service-code="donga_kor"] 로 스코프 → 타 서비스 영향 0 (이중 격리). 디자인: 행 스타일(박스 없음, 하단 구분선) — 제목 + 📞전화 + 우측 홈 아이콘. 카드 전체 링크. 레퍼런스 Image#20. */ /* 본문 섹션 래퍼 */ html[data-service-code="donga_kor"] .dau-sub-section { margin: 80px 0 150px; } /* 2단 그리드 — 상단 라인 + 행마다 하단 구분선 */ html[data-service-code="donga_kor"] .dau-sub-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: start; } /* 행 = 카드 전체가 외부 홈페이지 링크 */ html[data-service-code="donga_kor"] .dau-sub-gcard { position: relative; display: flex; flex-direction: column; padding: 24px 28px 26px; background: transparent; border: 1px solid #e7ecf3; border-radius: 0; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } html[data-service-code="donga_kor"] .dau-sub-gcard:hover { border-color: #003265; box-shadow: 0 4px 14px rgba(0, 50, 101, 0.08); } /* 제목 */ html[data-service-code="donga_kor"] .dau-sub-gko { display: block; font-size: 20px; font-weight: 700; color: #1a1a1a; line-height: 1.3; transition: color 0.15s ease; } html[data-service-code="donga_kor"] .dau-sub-gcard:hover .dau-sub-gko { color: #003265; } /* 전화 행 (작은 전화 아이콘 + 번호, 원 없음) */ html[data-service-code="donga_kor"] .dau-sub-gmeta { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e7ecf3; font-size: 18px; color: #6b7280; } /* 전화 아이콘 — 원 안에 아이콘 (연블루 원 + 블루 전화) */ html[data-service-code="donga_kor"] .dau-sub-gtelico { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #eaf1f9; display: inline-flex; align-items: center; justify-content: center; } html[data-service-code="donga_kor"] .dau-sub-gtelico::before { content: ""; width: 16px; height: 16px; background-color: #003265; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat; } /* 우측 홈 아이콘 (네이비, 원 없음) — 호버 시 블루 */ html[data-service-code="donga_kor"] .dau-sub-glink { position: absolute; top: 24px; right: 26px; display: inline-flex; align-items: center; text-decoration: none; } html[data-service-code="donga_kor"] .dau-sub-ghomeico { width: 30px; height: 30px; background-color: #8a909c; transition: background-color 0.15s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat; } html[data-service-code="donga_kor"] .dau-sub-gcard:hover .dau-sub-ghomeico { background-color: #2b3a5a; } /* 모바일 — 1단 */ @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-sub-cards { grid-template-columns: 1fr; gap: 14px; } html[data-service-code="donga_kor"] .dau-sub-section { margin: 30px 0 100px; } html[data-service-code="donga_kor"] .dau-sub-gko { font-size: 20px; } html[data-service-code="donga_kor"] .dau-sub-gmeta { font-size: 15px; } html[data-service-code="donga_kor"] .dau-sub-gtelico { width: 30px; height: 30px; } } /* ── 정보형 콘텐츠 페이지 공통 (.dau-cd-*) — combined-degree 등 ── 외곽 여백은 .dau-sub-section(80/150), 헤딩 폰트 24px 로 graduate 와 동일 base 유지. 디자인만 신규. */ html[data-service-code="donga_kor"] .dau-cd-block { margin-top: 56px; } html[data-service-code="donga_kor"] .dau-cd-h { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 24px; font-weight: 700; color: #1a1a1a; line-height: 1.3; } html[data-service-code="donga_kor"] .dau-cd-h::before { content: ""; flex: none; width: 4px; height: 22px; background: #003265; } html[data-service-code="donga_kor"] .dau-cd-lead { margin: 0; font-size: 18px; text-align: justify; line-height: 1.75; } /* 본문 문단 — 18px(데스크탑) / 15px(반응형) */ html[data-service-code="donga_kor"] .dau-cd-body { font-size: 18px; line-height: 1.75; color: #444b58; text-align: justify; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-body { font-size: 15px; } } html[data-service-code="donga_kor"] .dau-cd-overview { position: relative; padding: 36px 38px; background: #f5f8fc; border: 1px solid #e3eaf4; border-radius: 14px; } html[data-service-code="donga_kor"] .dau-cd-overview .dau-cd-h { margin-bottom: 16px; font-size: 24px; } html[data-service-code="donga_kor"] .dau-cd-overview .dau-cd-h::before { display: none; } /* 흐름도 — 컴팩트 라인 리스트(에디토리얼). 박스/지그재그 X. 번호(01..) + 제목 + 회색 보조설명 + 얇은 구분선 */ html[data-service-code="donga_kor"] .dau-cd-flow { list-style: none; margin: 0; padding: 0; counter-reset: cdflow; } html[data-service-code="donga_kor"] .dau-cd-flow > li { counter-increment: cdflow; display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; padding: 24px 6px; border-top: 1px solid #e8ecf2; } html[data-service-code="donga_kor"] .dau-cd-flow > li:first-child { border-top: 0; padding-top: 6px; } html[data-service-code="donga_kor"] .dau-cd-flow > li::before { content: counter(cdflow); flex: none; width: 35px; height: 35px; border-radius: 50%; background: #003265; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; } html[data-service-code="donga_kor"] .dau-cd-flow .t1 { flex: 1; min-width: 220px; font-size: 18px; font-weight: 600; color: #1a1a1a; line-height: 1.5; text-align: justify; } /* 흐름도 li 안 .t1 외 콘텐츠 — 번호+텍스트 아래(53px 들여쓰기: 원35+gap18) + 상단여백 통일(10px) */ html[data-service-code="donga_kor"] .dau-cd-flow > li > *:not(.t1):not(.t2) { flex-basis: 100%; margin: 10px 0 0 53px; } /* 표·표뒤 콘텐츠 — 데스크톱은 53px 들여쓰기(line 222) 유지, 모바일에서만 전폭(0, 모바일 블록에서 처리) */ html[data-service-code="donga_kor"] .dau-cd-sub { list-style: none; margin: 0; padding: 0; } html[data-service-code="donga_kor"] .dau-cd-sub li { position: relative; padding-left: 16px; margin-top: 8px; line-height: 1.6; color: #444b58; font-size: 16px; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-sub li { font-size: 15px; } } /* 표 안의 dau-cd-sub 불릿 텍스트는 표 본문과 동일하게 18px → 반응형 15px */ html[data-service-code="donga_kor"] .dau-cd-tbl .dau-cd-sub li { font-size: 18px; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-tbl .dau-cd-sub li { font-size: 15px; } } html[data-service-code="donga_kor"] .dau-cd-sub li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: #6b7280; } /* 인라인 다운로드 링크 (표 셀 안 '양식 다운로드' 등) */ html[data-service-code="donga_kor"] .dau-cd-inline-dl { color: #006ee9; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } html[data-service-code="donga_kor"] .dau-cd-inline-dl:hover { color: #003265; } /* 네이비 변형 인라인 다운로드 링크 (텍스트·밑줄·아이콘 네이비, 호버 시 파랑) — field-major 매뉴얼 PDF */ html[data-service-code="donga_kor"] .dau-cd-inline-dl--navy, html[data-service-code="donga_kor"] .dau-cd-inline-dl--navy strong { color: #003265; } html[data-service-code="donga_kor"] .dau-cd-inline-dl--navy:hover, html[data-service-code="donga_kor"] .dau-cd-inline-dl--navy:hover strong { color: #1f6fe5; } html[data-service-code="donga_kor"] .dau-cd-inline-dl .dau-cd-dlico { display: inline-block; width: 16px; height: 16px; margin-left: 4px; vertical-align: -2px; background-color: currentColor; } html[data-service-code="donga_kor"] .dau-cd-inline-dl .dau-cd-arr { display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E") center/contain no-repeat; } html[data-service-code="donga_kor"] .dau-cd-inline-dl .ext-ico { display: inline-block; width: 13px; height: 13px; margin-left: 4px; vertical-align: -1px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; } /* 외부링크 텍스트 링크 — 네이비 굵게 + 외부링크 아이콘 */ html[data-service-code="donga_kor"] .dau-cd-extlink { display: inline-flex; align-items: center; gap: 5px; color: #003265; font-weight: 700; text-decoration: none; } html[data-service-code="donga_kor"] .dau-cd-extlink:hover { text-decoration: underline; } /* 강조(빨강) — 공결신청서/증빙서류/기한 등 */ html[data-service-code="donga_kor"] .dau-cd-red { color: #d8232a; } /* 강조(파랑) — 밑줄 없는 굵은 파란 텍스트 */ html[data-service-code="donga_kor"] .dau-cd-blue { color: #006ee9; } /* 본문 강조 — 파란 밑줄(#006ee9) / 빨간 밑줄 변형 */ html[data-service-code="donga_kor"] .dau-cd-em { color: #006ee9; text-decoration: underline; text-underline-offset: 3px; } html[data-service-code="donga_kor"] .dau-cd-em--red { color: #d8232a; } html[data-service-code="donga_kor"] .dau-cd-extlink .ext-ico { width: 16px; height: 16px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; } html[data-service-code="donga_kor"] .dau-cd-flow .t2 { flex-basis: 100%; margin: 9px 0 0 62px; padding: 0; background: none; border-radius: 0; color: #6b7280; font-size: 16px; font-weight: 400; line-height: 1.55; } /* t2 보조설명 앞 느낌표 배지 (예: 전공선택 이수학점 가변적임) */ html[data-service-code="donga_kor"] .dau-cd-flow .t2.t2--bang { position: relative; padding-left: 26px; } html[data-service-code="donga_kor"] .dau-cd-flow .t2.t2--bang::before { content: "!"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #003265; color: #003265; font-size: 11px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } html[data-service-code="donga_kor"] .dau-cd-info { margin: 0; border: 1px solid #e8ebf0; overflow: hidden; } html[data-service-code="donga_kor"] .dau-cd-info > div { display: flex; border-top: 1px solid #eef0f4; } html[data-service-code="donga_kor"] .dau-cd-info > div:first-child { border-top: 0; } html[data-service-code="donga_kor"] .dau-cd-info dt { flex: none; width: 220px; padding: 18px 22px; background: #f6f7f9; font-weight: 700; color: #1a1a1a; font-size: 16px; } html[data-service-code="donga_kor"] .dau-cd-info dd { margin: 0; padding: 18px 22px; font-size: 16px; color: #495163; line-height: 1.6; } /* 안내 콜아웃 — ⓘ 마커 + 제목 + 본문 (flow li 내 [○○ 제도] 등) */ html[data-service-code="donga_kor"] .dau-cd-callout { margin: 12px 0 0; } /* 제목 행 = ⓘ 아이콘 + 제목, flex 로 수직 중앙 정렬(줄 맞춤) */ html[data-service-code="donga_kor"] .dau-cd-callout-h { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: #1a1a1a; font-size: 16px; line-height: 1.5; } html[data-service-code="donga_kor"] .dau-cd-callout-h::before { content: "!"; flex: none; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid #003265; color: #003265; font-size: 12px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } /* 본문은 제목 텍스트 시작점(아이콘19+gap8=27px)에 맞춰 들여쓰기 */ html[data-service-code="donga_kor"] .dau-cd-callout p:not(.dau-cd-callout-h) { margin: 6px 0 0 27px; font-size: 16px; color: #495163; line-height: 1.6; } /* 흐름도 li 안 콜아웃 — 불릿과 동일하게 상단여백 10px 통일(좌측 들여쓰기 58px 유지) */ html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-callout.dau-cd-callout { margin-top: 10px; } /* 제목 없는 단순 안내 콜아웃 — ⓘ + 일반 굵기 한 줄(예: 8자리 교과목번호 안내) */ html[data-service-code="donga_kor"] .dau-cd-callout--notice .dau-cd-callout-h { font-weight: 500; color: #495163; } /* 파랑 강조 콜아웃 — 텍스트·! 배지 파랑 (예: 각 대학별 수료학점) */ html[data-service-code="donga_kor"] .dau-cd-callout--blue .dau-cd-callout-h { color: #006ee9; } html[data-service-code="donga_kor"] .dau-cd-callout--blue .dau-cd-callout-h::before { border-color: #006ee9; color: #006ee9; } /* 빨강 경고 콜아웃(편입학 '위 3번의…별도 안내') — 다른 탭 callout 과 동일 ! +텍스트, 색만 빨강 */ html[data-service-code="donga_kor"] .dau-cd-callout--red .dau-cd-callout-h { color: #e01803; } html[data-service-code="donga_kor"] .dau-cd-callout--red .dau-cd-callout-h::before { border-color: #e01803; color: #e01803; } /* field-major 연합전공 안내 — '기본-9' 설명 콜아웃: 본문 텍스트 데스크탑 18 / 모바일 15 (주변 흐름도 .t1 18px 과 통일) */ html[data-service-code="donga_kor"] .dau-cd-callout.dau-cd-callout--md > p { font-size: 18px; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-callout.dau-cd-callout--md > p { font-size: 15px; } } /* 장학금 안내 가~라 소제목 — 파랑(#1f6fe5) 17px, 좌측 바 제거 */ html[data-service-code="donga_kor"] .dau-cd-h.dau-cd-subh { color: #1f6fe5; font-size: 17px; } html[data-service-code="donga_kor"] .dau-cd-h.dau-cd-subh::before { display: none; } /* 셀 내부 미니 표 (예: 석당 도서구입비 학년별) — 셀 폭에 맞춤, 모바일 고정폭 없음 */ html[data-service-code="donga_kor"] .dau-cd-minitbl { width: 100%; border-collapse: collapse; margin: 8px 0; border: 1px solid #e5e9f0; border-top: 2px solid #003265; } /* !important: 부모 dau-cd-tbl--cols 의 td:first-child{border-left:0} 등이 중첩 미니표 칸까지 덮어쓰는 것 차단 → 좌우 세로선 보존 */ html[data-service-code="donga_kor"] .dau-cd-minitbl th, html[data-service-code="donga_kor"] .dau-cd-minitbl td { border: 1px solid #e5e9f0 !important; padding: 8px 6px; text-align: center; vertical-align: middle; font-size: 15px; } html[data-service-code="donga_kor"] .dau-cd-minitbl thead th { background: #f7fbff; font-weight: 700; } /* 장학금 공통사항/계속수혜조건 박스 — 박스 아래 여백 + 박스 내 두번째 헤딩(계속수혜조건) 위 여백 */ html[data-service-code="donga_kor"] [data-v^="scholarship-rules"] .dau-cd-overview:not(.dau-cd-guidebox) { margin-bottom: 28px; } html[data-service-code="donga_kor"] [data-v^="scholarship-rules"] .dau-cd-overview .dau-cd-paren + .dau-cd-h { margin-top: 24px; } /* 파란 박스(공통사항/계속수혜조건) 본문 — 786px 이하 18→15px */ @media (max-width: 786px) { html[data-service-code="donga_kor"] [data-v^="scholarship-rules"] .dau-cd-overview ol.dau-cd-paren > li { font-size: 15px; } } /* 네이비 강조 콜아웃 — 텍스트 전체 네이비(! 배지는 기본 네이비) (예: 우리학교 훈련일정) */ html[data-service-code="donga_kor"] .dau-cd-callout--navy .dau-cd-callout-h { color: #003265; } /* 경고(filled) 콜아웃 — 텍스트 네이비 + 채운 네이비 ! 배지 (예: 군번 입력 주의) */ html[data-service-code="donga_kor"] .dau-cd-callout--alert .dau-cd-callout-h { color: #003265; } html[data-service-code="donga_kor"] .dau-cd-callout--alert .dau-cd-callout-h::before { background: #003265; border-color: #003265; color: #fff; } /* 전역 — 모든 주의 콜아웃: ! 배지 첫 줄 상단 정렬(여러 줄에서도 일관). 한 줄은 center 와 동일하게 보임 */ html[data-service-code="donga_kor"] .dau-cd-callout-h { align-items: flex-start; } html[data-service-code="donga_kor"] .dau-cd-callout-h::before { margin-top: 2px; } html[data-service-code="donga_kor"] [data-v^="reserve-"] .dau-cd-flow > li > .dau-cd-callout + .dau-cd-callout { margin-top: 8px; } /* 표 바로 뒤 콜아웃·불릿 — 데스크톱은 표와 같이 53px 들여쓰기(line 222), 윗 여백만 16px. 모바일 전폭은 모바일 블록에서 처리 */ html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-scroll + .dau-cd-callout, html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-tbl + .dau-cd-callout, html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-scroll + .dau-cd-sub, html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-tbl + .dau-cd-sub { margin-top: 16px; } /* 불릿 바로 뒤 콜아웃 — 들여쓰기 유지(58px), 상단여백 통일(10px) */ html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-sub + .dau-cd-callout { margin-top: 10px; } /* 빨강 중앙 강조 안내문(예: 중점교양→중핵교양 변경 안내) */ html[data-service-code="donga_kor"] .dau-cd-rednote { margin: 20px 0 0; text-align: center; color: #d8232a; font-weight: 700; line-height: 1.7; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-rednote { font-size: 14px; } } /* leave(휴학) 페이지 — 보조설명(t2)·하위목록(불릿)·안내 콜아웃: PC 16px / 786px 이하 15px */ html[data-service-code="donga_kor"] [data-v^="leave"] .dau-cd-flow .t2, html[data-service-code="donga_kor"] [data-v^="leave"] .dau-cd-sub li, html[data-service-code="donga_kor"] [data-v^="leave"] .dau-cd-callout-h { font-size: 16px; } @media (max-width: 786px) { html[data-service-code="donga_kor"] [data-v^="leave"] .dau-cd-flow .t2, html[data-service-code="donga_kor"] [data-v^="leave"] .dau-cd-sub li, html[data-service-code="donga_kor"] [data-v^="leave"] .dau-cd-callout-h { font-size: 15px; } } /* (구) 페이지별 콜아웃 상단여백 14px 스코프 규칙 제거 — 전역 10px 통일로 대체 */ /* 수식/산출식 박스 — 연한 네이비 박스 중앙 정렬(예: 평점평균·백분위 환산식) */ html[data-service-code="donga_kor"] .dau-cd-formula { margin: 12px 0 0; padding: 18px 22px; background: #f5f8fc; border: 1px solid #e3eaf4; text-align: center; font-size: 16px; font-weight: 600; color: #1a3656; line-height: 1.7; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-formula { font-size: 15px; padding: 14px 16px; } } /* 분수형 산출식 — 표준 dau-cd-tbl 위에 분자/분모 셀만 가운데 정렬 + 좌측 헤더셀 우측 세로선 (예: 평점평균 산출식) */ html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-frac td { text-align: center; vertical-align: middle; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-frac th { border-right: 1px solid #e5e9f0; } /* 표 하단 행 — 좌측 주석 + 우측 다운로드 버튼 한 줄 정렬(모바일은 줄바꿈) */ html[data-service-code="donga_kor"] .dau-cd-tblfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 12px; } html[data-service-code="donga_kor"] .dau-cd-tblfoot .dau-cd-note { margin: 0; } html[data-service-code="donga_kor"] .dau-cd-tblfoot .dau-cd-dl { flex: none; margin-left: auto; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-tblfoot .dau-cd-dl { margin-left: 0; } } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-callout-h, html[data-service-code="donga_kor"] .dau-cd-callout p { font-size: 14px; } } /* 교과과정/편입학(curriculum) 콜아웃 — 다른 페이지(leave 등)와 동일하게 16px → 786이하 15px (글로벌 14px override) */ html[data-service-code="donga_kor"] [data-v^="curriculum"] .dau-cd-callout-h { font-size: 16px; } @media (max-width: 786px) { html[data-service-code="donga_kor"] [data-v^="curriculum"] .dau-cd-callout-h, html[data-service-code="donga_kor"] [data-v^="curriculum"] .dau-cd-callout p { font-size: 15px; } } /* 연도별 교과과정 아코디언 — 2열 그리드 + 라디오 hack(무 JS, dau-tabs 동일 방식, 한 번에 하나만 펼침). 헤더(label)는 그리드 칸 유지, 펼친 본문만 전폭(grid-column 1/-1)으로 아래에 → 옆 탭 그대로. */ html[data-service-code="donga_kor"] .dau-acc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; align-items: start; } html[data-service-code="donga_kor"] .dau-acc-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } html[data-service-code="donga_kor"] .dau-acc-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 26px; border: 1px solid #e5e9f0; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); font-size: 17px; font-weight: 600; color: #1a1a1a; cursor: pointer; -webkit-user-select: none; user-select: none; } html[data-service-code="donga_kor"] .dau-acc-h::after { content: ""; flex: none; width: 20px; height: 20px; background-color: #9aa3b2; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform 0.2s ease; } html[data-service-code="donga_kor"] .dau-acc-h:hover { border-color: #c3ccda; } html[data-service-code="donga_kor"] .dau-acc-body { display: none; grid-column: 1 / -1; margin-top: -18px; padding: 36px 30px; background: #f6f7f9; border: 1px solid #e5e9f0; border-top: 0; font-size: 16px; color: #495163; line-height: 1.75; } /* 펼침 토글 — 체크된 입력의 본문 표시 + 헤더 네이비 채움 + 셰브론 회전 */ html[data-service-code="donga_kor"] #dau-acc-2025:checked ~ #dau-acc-b-2025, html[data-service-code="donga_kor"] #dau-acc-2024:checked ~ #dau-acc-b-2024, html[data-service-code="donga_kor"] #dau-acc-2023:checked ~ #dau-acc-b-2023, html[data-service-code="donga_kor"] #dau-acc-2022:checked ~ #dau-acc-b-2022, html[data-service-code="donga_kor"] #dau-acc-2021:checked ~ #dau-acc-b-2021, html[data-service-code="donga_kor"] #dau-acc-2020:checked ~ #dau-acc-b-2020, html[data-service-code="donga_kor"] #dau-acc-2019:checked ~ #dau-acc-b-2019, html[data-service-code="donga_kor"] #dau-acc-2018:checked ~ #dau-acc-b-2018, html[data-service-code="donga_kor"] #dau-acc-2017:checked ~ #dau-acc-b-2017 { display: block; } html[data-service-code="donga_kor"] #dau-acc-2025:checked ~ label[for="dau-acc-2025"], html[data-service-code="donga_kor"] #dau-acc-2024:checked ~ label[for="dau-acc-2024"], html[data-service-code="donga_kor"] #dau-acc-2023:checked ~ label[for="dau-acc-2023"], html[data-service-code="donga_kor"] #dau-acc-2022:checked ~ label[for="dau-acc-2022"], html[data-service-code="donga_kor"] #dau-acc-2021:checked ~ label[for="dau-acc-2021"], html[data-service-code="donga_kor"] #dau-acc-2020:checked ~ label[for="dau-acc-2020"], html[data-service-code="donga_kor"] #dau-acc-2019:checked ~ label[for="dau-acc-2019"], html[data-service-code="donga_kor"] #dau-acc-2018:checked ~ label[for="dau-acc-2018"], html[data-service-code="donga_kor"] #dau-acc-2017:checked ~ label[for="dau-acc-2017"] { background: #006ee9; color: #fff; border-color: #006ee9; } /* 아코디언 본문 안 표는 컬럼헤더 배경을 옅은 파란색으로 */ html[data-service-code="donga_kor"] .dau-acc-body .dau-cd-tbl--summary thead th { background: #e8f1fc; color: #1a3656; } /* 아코디언 본문 안 와이드 표는 폭이 좁아지면 가로 스크롤(dau-cd-scroll 안에서) */ html[data-service-code="donga_kor"] .dau-acc-body .dau-cd-tbl--summary { min-width: 760px; } /* 786px 이하(태블릿~모바일)에서만 2017 표를 넓혀 가로 스크롤 + table-layout:fixed + 비교표(가/나) 구분·비고 축소. PC(>786) 는 손대지 않음 — 일반 아코디언 표와 동일(auto-layout, 기본 min-width 760). */ @media (max-width: 786px) { html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-tbl--summary { width: 1040px; min-width: 1040px; table-layout: fixed; } /* 비교표 가(7열) — 합 1040px. % 는 ≤768 fixed-layout 에서 오계산되므로 px 사용 */ html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-cmpa col:nth-child(1) { width: 90px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-cmpa col:nth-child(2) { width: 135px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-cmpa col:nth-child(3) { width: 229px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-cmpa col:nth-child(4) { width: 135px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-cmpa col:nth-child(5) { width: 135px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-cmpa col:nth-child(6) { width: 226px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-cmpa col:nth-child(7) { width: 90px; } /* 비교표 나(6열) — 합 1040px */ html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-cmpb col:nth-child(1) { width: 90px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-cmpb col:nth-child(2) { width: 125px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-cmpb col:nth-child(3) { width: 187px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-cmpb col:nth-child(4) { width: 146px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-cmpb col:nth-child(5) { width: 402px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-cmpb col:nth-child(6) { width: 90px; } /* 대체과목 표(7열, 가/나 가 아닌 2017 표) — ▶ 열(4번) 36px 로 축소, 합 1040px */ html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-tbl--summary:not(.dau-cd-cmpa):not(.dau-cd-cmpb) col:nth-child(1) { width: 130px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-tbl--summary:not(.dau-cd-cmpa):not(.dau-cd-cmpb) col:nth-child(2) { width: 190px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-tbl--summary:not(.dau-cd-cmpa):not(.dau-cd-cmpb) col:nth-child(3) { width: 130px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-tbl--summary:not(.dau-cd-cmpa):not(.dau-cd-cmpb) col:nth-child(4) { width: 36px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-tbl--summary:not(.dau-cd-cmpa):not(.dau-cd-cmpb) col:nth-child(5) { width: 130px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-tbl--summary:not(.dau-cd-cmpa):not(.dau-cd-cmpb) col:nth-child(6) { width: 294px; } html[data-service-code="donga_kor"] #dau-acc-b-2017 .dau-cd-tbl--summary:not(.dau-cd-cmpa):not(.dau-cd-cmpb) col:nth-child(7) { width: 130px; } } html[data-service-code="donga_kor"] #dau-acc-2025:checked ~ label[for="dau-acc-2025"]::after, html[data-service-code="donga_kor"] #dau-acc-2024:checked ~ label[for="dau-acc-2024"]::after, html[data-service-code="donga_kor"] #dau-acc-2023:checked ~ label[for="dau-acc-2023"]::after, html[data-service-code="donga_kor"] #dau-acc-2022:checked ~ label[for="dau-acc-2022"]::after, html[data-service-code="donga_kor"] #dau-acc-2021:checked ~ label[for="dau-acc-2021"]::after, html[data-service-code="donga_kor"] #dau-acc-2020:checked ~ label[for="dau-acc-2020"]::after, html[data-service-code="donga_kor"] #dau-acc-2019:checked ~ label[for="dau-acc-2019"]::after, html[data-service-code="donga_kor"] #dau-acc-2018:checked ~ label[for="dau-acc-2018"]::after, html[data-service-code="donga_kor"] #dau-acc-2017:checked ~ label[for="dau-acc-2017"]::after { transform: rotate(180deg); background-color: #fff; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-acc-grid { grid-template-columns: 1fr; gap: 12px; } html[data-service-code="donga_kor"] .dau-acc-h { padding: 16px 18px; font-size: 15px; min-width: 0; } html[data-service-code="donga_kor"] .dau-acc-body { margin-top: -12px; padding: 24px 18px; font-size: 14px; min-width: 0; } /* 1열일 때 본문을 자기 탭 바로 아래로 재배치(DOM 은 데스크톱 2열용 쌍 순서) */ html[data-service-code="donga_kor"] label[for="dau-acc-2025"] { order: 1; } html[data-service-code="donga_kor"] #dau-acc-b-2025 { order: 2; } html[data-service-code="donga_kor"] label[for="dau-acc-2024"] { order: 3; } html[data-service-code="donga_kor"] #dau-acc-b-2024 { order: 4; } html[data-service-code="donga_kor"] label[for="dau-acc-2023"] { order: 5; } html[data-service-code="donga_kor"] #dau-acc-b-2023 { order: 6; } html[data-service-code="donga_kor"] label[for="dau-acc-2022"] { order: 7; } html[data-service-code="donga_kor"] #dau-acc-b-2022 { order: 8; } html[data-service-code="donga_kor"] label[for="dau-acc-2021"] { order: 9; } html[data-service-code="donga_kor"] #dau-acc-b-2021 { order: 10; } html[data-service-code="donga_kor"] label[for="dau-acc-2020"] { order: 11; } html[data-service-code="donga_kor"] #dau-acc-b-2020 { order: 12; } html[data-service-code="donga_kor"] label[for="dau-acc-2019"] { order: 13; } html[data-service-code="donga_kor"] #dau-acc-b-2019 { order: 14; } html[data-service-code="donga_kor"] label[for="dau-acc-2018"] { order: 15; } html[data-service-code="donga_kor"] #dau-acc-b-2018 { order: 16; } html[data-service-code="donga_kor"] label[for="dau-acc-2017"] { order: 17; } html[data-service-code="donga_kor"] #dau-acc-b-2017 { order: 18; } } html[data-service-code="donga_kor"] .dau-cd-list { list-style: none; margin: 0; padding: 0; } /* early(조기졸업) 페이지 — 불릿 목록 폰트 18(반응형 15) */ html[data-service-code="donga_kor"] [data-v^="early"] .dau-cd-list > li, html[data-service-code="donga_kor"] [data-v^="early"] .dau-cd-list .dau-cd-sublist li { font-size: 18px; } @media (max-width: 768px) { html[data-service-code="donga_kor"] [data-v^="early"] .dau-cd-list > li, html[data-service-code="donga_kor"] [data-v^="early"] .dau-cd-list .dau-cd-sublist li { font-size: 15px; } } html[data-service-code="donga_kor"] .dau-cd-list > li { position: relative; padding-left: 20px; margin-top: 14px; font-size: 18px; line-height: 1.7; color: #495163; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-list > li { font-size: 15px; } } html[data-service-code="donga_kor"] .dau-cd-list > li:first-child { margin-top: 0; } html[data-service-code="donga_kor"] .dau-cd-list > li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 3px; height: 3px; border-radius: 50%; background: #003265; } /* '!' 마커 리스트 — 점 불릿을 ! 배지로 교체 (안내 노트, 박스 없이) */ html[data-service-code="donga_kor"] .dau-cd-list.dau-cd-list--notice { margin-top: 24px; } html[data-service-code="donga_kor"] .dau-cd-list.dau-cd-list--notice > li { padding-left: 28px; } html[data-service-code="donga_kor"] .dau-cd-list.dau-cd-list--notice > li::before { content: "!"; left: 0; top: 3px; width: 18px; height: 18px; border: 1.5px solid #003265; background: none; color: #003265; font-size: 11px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } html[data-service-code="donga_kor"] .dau-cd-sublist { list-style: none; margin: 8px 0 0; padding: 0; } html[data-service-code="donga_kor"] .dau-cd-sublist li { position: relative; padding-left: 16px; margin-top: 6px; font-size: 15px; line-height: 1.6; } html[data-service-code="donga_kor"] .dau-cd-sublist li::before { content: "–"; position: absolute; left: 2px; color: #aeb8c8; } html[data-service-code="donga_kor"] .dau-cd-note { display: block; margin-top: 6px; font-size: 14px; color: #e01803; } html[data-service-code="donga_kor"] .dau-cd-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } html[data-service-code="donga_kor"] .dau-cd-files li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; background: #fff; border: 1px solid #e8ebf0; border-radius: 10px; font-size: 16px; color: #1a1a1a; font-weight: 600; } html[data-service-code="donga_kor"] .dau-cd-dl { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid #003265; color: #003265; border-radius: 4px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.15s, color 0.15s; } html[data-service-code="donga_kor"] .dau-cd-dl:hover { background: #003265; color: #fff; } /* 관련규정 안내 박스(.dau-cd-guidebox) — 텍스트(좌) + CTA 버튼(우) 한 줄 정렬 (academics/lectures) */ html[data-service-code="donga_kor"] .dau-cd-guidebox { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; padding-bottom: 24px; } html[data-service-code="donga_kor"] .dau-cd-guidebox .dau-cd-lead { flex: 1; margin: 0; text-align: left; font-weight: 500; } html[data-service-code="donga_kor"] .dau-cd-guidebox .dau-cd-dl { flex: none; margin-top: 0; padding: 11px 20px; font-size: 15px; border-radius: 0; border-color: #003265; background: #003265; color: #fff; } html[data-service-code="donga_kor"] .dau-cd-guidebox .dau-cd-dl:hover { background: #00254d; border-color: #00254d; color: #fff; } html[data-service-code="donga_kor"] .dau-cd-dl .ext-ico { width: 14px; height: 14px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; } /* 내부 이동 '바로가기' 버튼용 > (chevron) 아이콘 — currentColor 라 hover 시 흰색 전환 */ html[data-service-code="donga_kor"] .dau-cd-dl .dau-cd-arr { width: 16px; height: 16px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E") center/contain no-repeat; } /* '바로가기' CTA 버튼(

래핑, 흐름도/블록 모두) — 텍스트 16px → 모바일 14px 반응형 */ html[data-service-code="donga_kor"] .dau-cd-block p > .dau-cd-dl { font-size: 16px; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-block p > .dau-cd-dl { font-size: 14px; } } /* 버튼 가로 나열 — 여러 CTA 버튼을 나란히(좁으면 줄바꿈) */ html[data-service-code="donga_kor"] .dau-cd-btnrow { display: flex; flex-wrap: wrap; gap: 10px; } /* 액션 버튼 줄(예비군 신고하기 등) — leave '신청 바로가기'(.dau-cd-dl)와 동일 스타일, 가로 나열 */ html[data-service-code="donga_kor"] .dau-cd-actrow { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; } html[data-service-code="donga_kor"] .dau-cd-actrow--mb { margin-bottom: 18px; } /* leave 버튼과 동일 높이(48px): font 16 + line-height 1.85(=29.6px) 일치 */ html[data-service-code="donga_kor"] .dau-cd-actrow .dau-cd-dl { font-size: 16px; line-height: 1.85; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-actrow .dau-cd-dl { font-size: 14px; } } /* 파란 서브헤딩(h4) — 섹션 내 하위 구분 (예: 복학 전/후 편성 시) */ html[data-service-code="donga_kor"] .dau-cd-subh { margin: 26px 0 12px; font-size: 17px; font-weight: 700; color: #1f6fe5; line-height: 1.4; } html[data-service-code="donga_kor"] .dau-cd-block > .dau-cd-subh:first-of-type { margin-top: 18px; } /* 연도별 기본원리 박스(dau-cd-yrbox) — 상단 회색 헤더(연도) + 본문 셀. 텍스트형이라 전폭 반응형(가로스크롤 X) */ html[data-service-code="donga_kor"] .dau-cd-yrbox { width: 100%; border-collapse: collapse; margin: 28px 0 24px; border-top: 2px solid #003265; } html[data-service-code="donga_kor"] .dau-cd-yrbox thead th { background: #f2f4f7; text-align: center; font-weight: 700; color: #1a1a1a; font-size: 17px; padding: 20px 16px; border: 0; border-bottom: 1px solid #e2e6ee; } html[data-service-code="donga_kor"] .dau-cd-yrbox td { padding: 20px 4px; text-align: left; color: #495163; font-size: 18px; line-height: 1.8; border: 0; border-bottom: 1px solid #e2e6ee; } html[data-service-code="donga_kor"] .dau-cd-yrbox td > .dau-cd-callout { margin-top: 14px; } /* yrbox 안내 콜아웃 — flex 해제 + 행잉 인덴트: 줄바꿈된 줄이 ! 배지 아래로 안 들어가고 텍스트 시작점에 정렬 */ html[data-service-code="donga_kor"] .dau-cd-yrbox .dau-cd-callout-h { display: block; position: relative; padding-left: 27px; } html[data-service-code="donga_kor"] .dau-cd-yrbox .dau-cd-callout-h::before { position: absolute; left: 0; top: 3px; margin: 0; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-yrbox thead th { font-size: 16px; padding: 13px 14px; } html[data-service-code="donga_kor"] .dau-cd-yrbox td { padding: 16px; font-size: 15px; } } /* 표 셀 내 보조 ※ 주석 — 줄바꿈 후 회색 텍스트(폰트 크기는 셀 본문과 동일) */ html[data-service-code="donga_kor"] .dau-cd-cellnote { display: block; margin-top: 8px; font-size: inherit; color: #6b7280; line-height: 1.6; } /* 국가우수장학금(이공계) 신규·재학중 표 — '구분'(첫 칸) 폭 동일하게. bare + 명시 table-layout:fixed + col 폭(reg7/reg9 방식). 데스크톱 16% / 모바일 120px 고정 */ html[data-service-code="donga_kor"] [data-v^="scholar-national"] .dau-cd-tbl--gbn { table-layout: fixed; } html[data-service-code="donga_kor"] [data-v^="scholar-national"] .dau-cd-tbl--gbn col:nth-child(1) { width: 16%; } @media (max-width: 768px) { html[data-service-code="donga_kor"] [data-v^="scholar-national"] .dau-cd-tbl--gbn { width: 820px; min-width: 820px; } html[data-service-code="donga_kor"] [data-v^="scholar-national"] .dau-cd-tbl--gbn col:nth-child(1) { width: 120px; } } /* 강조 컬럼 — 표에서 핵심 열을 파란 좌우 테두리로 강조 (예: 학생예비군 기본훈련) */ html[data-service-code="donga_kor"] .dau-cd-tbl .dau-emp { box-shadow: inset 1.5px 0 0 #2f6fe0, inset -1.5px 0 0 #2f6fe0; } html[data-service-code="donga_kor"] .dau-cd-tbl thead .dau-emp { box-shadow: inset 1.5px 0 0 #2f6fe0, inset -1.5px 0 0 #2f6fe0, inset 0 1.5px 0 #2f6fe0; } html[data-service-code="donga_kor"] .dau-cd-tbl .dau-emp-last { box-shadow: inset 1.5px 0 0 #2f6fe0, inset -1.5px 0 0 #2f6fe0, inset 0 -1.5px 0 #2f6fe0; } /* 서명/직인 줄 — 중앙 정렬 굵은 텍스트 (예: 동아대학교 직장예비군 연대장) */ html[data-service-code="donga_kor"] .dau-cd-signoff { margin: 30px 0 0; text-align: center; font-weight: 700; font-size: 17px; color: #1a2740; } /* 굵은 번호 라벨(예: 1) 제출서류) — 블록 내 하위 그룹 구분, 다크 굵게 */ html[data-service-code="donga_kor"] .dau-cd-flabel { margin: 24px 0 8px; font-size: 16px; font-weight: 700; color: #1a1a1a; } html[data-service-code="donga_kor"] .dau-cd-block > .dau-cd-flabel:first-of-type { margin-top: 16px; } /* 편입학(ctpanel3) — 표 제목 헤딩(subh, 별표 포함) 파랑→검정. 표 안 파랑(B열)은 유지 */ html[data-service-code="donga_kor"] #ctpanel3 .dau-cd-h.dau-cd-subh { color: #1a1a1a; } /* 편입학생 전적학교 전공교과목 인정(ctpanel4) — 1~5 소제목: 바 없이 검정 19px 타이틀(바는 상위 안내 헤딩에만) */ html[data-service-code="donga_kor"] #ctpanel4 .dau-cd-h.dau-cd-subh { color: #1a1a1a; font-size: 19px; } /* dau-cd-list 표제목(flabel) 불릿을 dau-cd-sub(세부사항/등록학기 본문)와 완전히 동일하게 — 점/들여쓰기/간격/텍스트 */ html[data-service-code="donga_kor"] #ctpanel3 .dau-cd-list > li { padding-left: 16px; margin-top: 8px; font-size: 16px; line-height: 1.6; } html[data-service-code="donga_kor"] #ctpanel3 .dau-cd-list > li::before { left: 2px; top: 11px; width: 4px; height: 4px; background: #6b7280; } html[data-service-code="donga_kor"] #ctpanel3 .dau-cd-list > li > .dau-cd-flabel { margin: 0; font-size: 16px; font-weight: 400; color: #444b58; line-height: 1.6; } /* 불릿 목록(예: 학점 인정기간 1·2학기) — 동그라미 점 마커 */ html[data-service-code="donga_kor"] .dau-cd-arrowlist { list-style: none; margin: 8px 0 0; padding: 0; } html[data-service-code="donga_kor"] .dau-cd-arrowlist > li { position: relative; padding-left: 18px; margin-top: 6px; font-size: 16px; color: #495163; line-height: 1.7; } html[data-service-code="donga_kor"] .dau-cd-arrowlist > li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: #6b7280; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-arrowlist > li { font-size: 15px; } } /* 인라인 다운로드 링크(본문/흐름도 내 [○○ 다운로드]) — 파란 링크 + 작은 다운로드 아이콘 */ html[data-service-code="donga_kor"] .dau-cd-ilink { display: inline-flex; align-items: center; gap: 4px; color: #1f6fe5; font-weight: 600; text-decoration: none; vertical-align: baseline; } html[data-service-code="donga_kor"] .dau-cd-ilink:hover { text-decoration: underline; } /* 네이비 호버 변형 ilink — 호버 시 텍스트·밑줄·아이콘 모두 네이비 (field-major 신청 바로가기) */ html[data-service-code="donga_kor"] .dau-cd-ilink--navyhover:hover { color: #003265; } html[data-service-code="donga_kor"] .dau-cd-ilink--navyhover:hover .ext-ico { background-color: #003265; } html[data-service-code="donga_kor"] .dau-cd-ilink .dau-cd-dlico { width: 14px; height: 14px; background-color: #1f6fe5; } html[data-service-code="donga_kor"] .dau-cd-ilink .ext-ico { width: 13px; height: 13px; flex: none; background-color: #1f6fe5; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; } /* 점프 내비게이션(dau-cd-jump) — 학년도별 앵커 칩. 라벨 + 흰색 알약 칩(앵커 링크) */ html[data-service-code="donga_kor"] .dau-cd-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 8px 0 0; padding: 22px 26px; background: #eef1f8; border-radius: 14px; scroll-margin-top: 100px; } html[data-service-code="donga_kor"] .dau-cd-jump-label { display: inline-flex; align-items: center; gap: 7px; flex: none; margin-right: 6px; font-size: 16px; font-weight: 700; color: #003265; } html[data-service-code="donga_kor"] .dau-cd-jump-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ffd44d; } html[data-service-code="donga_kor"] .dau-cd-jump-arr { width: 0; height: 0; border-style: solid; border-width: 5px 4px 0 4px; border-color: #003265 transparent transparent transparent; } html[data-service-code="donga_kor"] .dau-cd-jump a { display: inline-flex; align-items: center; padding: 10px 18px; background: #fff; border-radius: 999px; color: #5b6473; font-size: 15px; font-weight: 600; text-decoration: none; transition: color 0.15s, box-shadow 0.15s; } html[data-service-code="donga_kor"] .dau-cd-jump a:hover { color: #003265; box-shadow: 0 2px 8px rgba(0, 50, 101, 0.12); } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-jump { padding: 18px; gap: 8px; } html[data-service-code="donga_kor"] .dau-cd-jump-label { flex-basis: 100%; margin-right: 0; } html[data-service-code="donga_kor"] .dau-cd-jump a { font-size: 14px; padding: 9px 14px; } } /* 앵커 점프 시 고정 헤더 아래로 위치 보정 */ html[data-service-code="donga_kor"] [data-v^="special-credit"] .dau-cd-h[id] { scroll-margin-top: 100px; } /* 상단(점프내비)으로 이동 화살표 — 구분선 위 가운데 원형 버튼 */ html[data-service-code="donga_kor"] .dau-cd-totop { position: relative; margin: 34px 0 4px; text-align: center; } html[data-service-code="donga_kor"] .dau-cd-totop::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(217, 49, 172, 0.4); } html[data-service-code="donga_kor"] .dau-cd-totop a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #d931ac; opacity: 0.65; transition: opacity 0.15s; } html[data-service-code="donga_kor"] .dau-cd-totop a:hover { opacity: 1; } html[data-service-code="donga_kor"] .dau-cd-totop .arr { width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg); margin-top: 3px; } /* 참고사항 다열 표(7열·9열) — colspan 헤더 + % col 충돌로 fixed 분배가 깨짐. bare + 명시 폭으로 고정. 데스크톱 = %(컨테이너 채움), 786px 이하 = px(가로 스크롤). */ html[data-service-code="donga_kor"] [data-v^="reserve-reg"] table.dau-cd-tbl--reg7, html[data-service-code="donga_kor"] [data-v^="reserve-reg"] table.dau-cd-tbl--reg9 { table-layout: fixed; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(1) { width: 10%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(2) { width: 14%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(3) { width: 22%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(4) { width: 12%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(5) { width: 16%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(6) { width: 13%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(7) { width: 13%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(1) { width: 14%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(2) { width: 10%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(3) { width: 11%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(4) { width: 11%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(5) { width: 11%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(6) { width: 11%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(7) { width: 11%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(8) { width: 10%; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(9) { width: 11%; } @media (max-width: 768px) { html[data-service-code="donga_kor"] [data-v^="reserve-reg"] table.dau-cd-tbl--reg7 { width: 720px; min-width: 720px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(1) { width: 70px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(2) { width: 100px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(3) { width: 110px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(4) { width: 80px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(5) { width: 120px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(6) { width: 120px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg7 col:nth-child(7) { width: 120px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] table.dau-cd-tbl--reg9 { width: 900px; min-width: 900px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(1) { width: 130px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(2) { width: 80px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(3) { width: 90px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(4) { width: 100px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(5) { width: 100px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(6) { width: 100px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(7) { width: 100px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(8) { width: 100px; } html[data-service-code="donga_kor"] [data-v^="reserve-reg"] .dau-cd-tbl--reg9 col:nth-child(9) { width: 100px; } } /* 모집·지원 안내 표 — 좌측 행헤더(th) + 우측 내용(td). 스캔성 ↑ */ html[data-service-code="donga_kor"] .dau-cd-tbl { width: 100%; border-collapse: collapse; border-top: 2px solid #003265; } html[data-service-code="donga_kor"] .dau-cd-tbl th, html[data-service-code="donga_kor"] .dau-cd-tbl td { border-bottom: 1px solid #e5e9f0; padding: 20px 24px; text-align: left; vertical-align: top; } html[data-service-code="donga_kor"] .dau-cd-tbl th { width: 200px; background: #f7fbff; color: #1a1a1a; font-weight: 700; font-size: 18px; line-height: 1.5; text-align: center; vertical-align: middle; } html[data-service-code="donga_kor"] .dau-cd-tbl td { font-size: 18px; line-height: 1.7; } /* 요약 비교표 — 헤더 옅은 회색 + 모든 셀 상하좌우 중앙 + 내부 세로 구분선(양 끝 제외) */ html[data-service-code="donga_kor"] .dau-cd-tbl--summary th, html[data-service-code="donga_kor"] .dau-cd-tbl--summary td { text-align: center; vertical-align: middle; border-left: 1px solid #e5e9f0; border-right: 1px solid #e5e9f0; } html[data-service-code="donga_kor"] .dau-cd-tbl--summary th:first-child, html[data-service-code="donga_kor"] .dau-cd-tbl--summary td:first-child { border-left: 0; } /* 마지막 칸 우측(표 바깥) 선 제거. border-right 를 둔 이유: rowspan 칸(예: 토대교양 '선택영역') 아래 행에서 다음 칸이 :first-child 가 되어 border-left 가 사라지는 것을 좌측 칸의 border-right 로 보완 */ html[data-service-code="donga_kor"] .dau-cd-tbl--summary th:last-child, html[data-service-code="donga_kor"] .dau-cd-tbl--summary td:last-child { border-right: 0; } html[data-service-code="donga_kor"] .dau-cd-tbl--summary thead th { background: #f8f8f8; } /* 요약표 내 긴 텍스트 셀 좌측정렬(예: 학번별 교과이수 개요 비교표) */ html[data-service-code="donga_kor"] .dau-cd-tbl--summary td.l { text-align: left; } /* 요약표 모바일 — block 스택 대신 표 형태 유지 + 가로 스크롤. 복합선택자(.dau-cd-tbl.dau-cd-tbl--summary)로 base 모바일 block 규칙보다 우선. */ html[data-service-code="donga_kor"] .dau-cd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 본문 내 도식 이미지(예: 연합전공 MD/FD 비교 그래픽) — 가운데 정렬 + 반응형 축소 */ html[data-service-code="donga_kor"] .dau-cd-figure { margin: 18px 0 6px; text-align: center; } html[data-service-code="donga_kor"] .dau-cd-figure img { display: block; margin: 0 auto; max-width: 100%; height: auto; } /* 2026 영역별 이수학점표 — 구분(대학)·학과 열 폭 확대. 한글 학과명 CJK 글자단위 줄바꿈 압축 방지, 좁은 화면은 가로 스크롤 */ html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr2026 { min-width: 1380px; } html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr2026 col:nth-child(1) { width: 185px; } html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr2026 col:nth-child(2) { width: 560px; } /* 2025 영역별 이수학점표 — 구분(대학)·학과 열 폭 확대 (2026과 동일) */ html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr2025 { min-width: 1380px; } html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr2025 col:nth-child(1) { width: 185px; } html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr2025 col:nth-child(2) { width: 560px; } /* 2024~1996 메인 연도 영역별 이수학점표 — 구분/대학 열 폭 확대 (2026·2025와 동일) */ html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr-main { min-width: 1380px; } html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr-main col:nth-child(1) { width: 185px; } html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr-main col:nth-child(2) { width: 560px; } /* 전 연도 보조표(공과대학/별표 등) 이수구분·학과(1열) 폭 통일 — 2026 공과대학 기준 340px */ html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr-eng { min-width: 1120px; } html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr-eng col:nth-child(1) { width: 340px; } /* 모바일(≤768px): 구분/대학·이수구분/학과(1·2열)만 적당히 축소. 데이터 칸은 헤더가 글자단위로 깨지지 않도록 충분한 폭(≈70px) 유지 → 표는 가로 스크롤. (902행 width:820 보다 min-width 우선) */ @media (max-width: 768px) { html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr2026, html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr2025, html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr-main { min-width: 1120px; } html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr2026 col:nth-child(1), html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr2025 col:nth-child(1), html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr-main col:nth-child(1) { width: 140px; } html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr2026 col:nth-child(2), html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr2025 col:nth-child(2), html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr-main col:nth-child(2) { width: 300px; } html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr-eng { min-width: 1000px; } html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) table.dau-cr-eng col:nth-child(1) { width: 210px; } /* 모바일 영역별 이수학점표 다열표 폭 정상화 — table-layout:fixed + 1-col colgroup 조합이 데이터 열을 34~49px 로 압축해 헤더(교양필수/전공선택 등)가 글자단위로 깨지던 문제. 대형 마스터표(cr2026/cr2025, 긴 학과 목록열 보유)는 제외하고, 나머지 별표·요약표는 table-layout:auto + width:max-content 로 콘텐츠 기준 열 폭 산정 → 헤더 nowrap → 표는 가로 스크롤. (cr-main 17/26, cr-eng 17/36, 무클래스 35/42 표가 깨지던 것을 0으로) */ html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) .dau-cd-tbl--summary:not(.dau-cr2026):not(.dau-cr2025) { table-layout: auto !important; width: max-content !important; min-width: 100% !important; max-width: none !important; } html[data-service-code="donga_kor"] :is(#ctpanel2, #ctpanel3) .dau-cd-tbl--summary:not(.dau-cr2026):not(.dau-cr2025) th { white-space: nowrap; } } /* 연속된 표(중간 설명 없이 바로 이어지는 경우) 사이 간격 */ html[data-service-code="donga_kor"] .dau-cd-scroll + .dau-cd-scroll { margin-top: 22px; } /* 예비군 훈련내용 표(7열) — PC/모바일 컬럼폭 분리: inline 제거 후 CSS col 폭 + table-layout:fixed. PC 구분24/연차7/동원30/지역39 */ html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train { table-layout: fixed; } html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train col:nth-child(1) { width: 17%; } html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train col:nth-child(2) { width: 7%; } html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train col:nth-child(4) { width: 15%; } html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train col:nth-child(5) { width: 15%; } html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train col:nth-child(6) { width: 18%; } html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train col:nth-child(7) { width: 18%; } /* 연차(3열) — bare col+fixed 불안정 회피: 첫 행 th 폭으로 결정. PC 10% */ html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train thead tr:first-child th:nth-child(2) { width: 10% !important; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--summary { display: table; table-layout: fixed; width: 820px; min-width: 820px; } /* 예비군 훈련내용 표 — 모바일: 표 폭 확대 + 구분 더 넓게/연차 더 좁게 (PC와 분리). 구분38/연차5/동원28/지역29 */ html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl.dau-cd-tbl--train { width: 1400px; min-width: 1400px; table-layout: fixed; } html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train col:nth-child(1) { width: 36%; } html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train col:nth-child(2) { width: 7%; } html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train col:nth-child(4) { width: 14%; } html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train col:nth-child(5) { width: 14%; } html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train col:nth-child(6) { width: 12%; } html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train col:nth-child(7) { width: 12%; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--summary thead { display: table-header-group; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--summary tbody { display: table-row-group; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--summary tr { display: table-row; border-bottom: 0; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--summary th, html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--summary td { display: table-cell; width: auto; padding: 12px 10px; border-bottom: 1px solid #e5e9f0; word-break: keep-all; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--summary th:first-child, html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--summary td:first-child { border-left: 0; } /* field-major 복수전공 충족요건 표 — 모바일: 주전공 전공선택(기본 col4 / 전공마이크로모듈 col5) 폭 확대. 인라인 col % 극복 위해 !important */ html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--summary.dau-cd-tbl--cmpf { width: 940px; min-width: 940px; } html[data-service-code="donga_kor"] .dau-cd-tbl--summary.dau-cd-tbl--cmpf col:nth-child(2) { width: 9% !important; } html[data-service-code="donga_kor"] .dau-cd-tbl--summary.dau-cd-tbl--cmpf col:nth-child(3) { width: 16% !important; } html[data-service-code="donga_kor"] .dau-cd-tbl--summary.dau-cd-tbl--cmpf col:nth-child(4) { width: 16% !important; } html[data-service-code="donga_kor"] .dau-cd-tbl--summary.dau-cd-tbl--cmpf col:nth-child(5) { width: 27% !important; } html[data-service-code="donga_kor"] .dau-cd-tbl--summary.dau-cd-tbl--cmpf col:nth-child(6) { width: 18% !important; } /* field-major 가.이수유형별 이수학점(비고) · 라.소속학과 전공선택 인정(인정요건) 표 — 모바일 전체폭 확대로 넓은 컬럼 가독성 ↑ */ html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--summary.dau-cd-tbl--wide { width: 900px; min-width: 900px; } /* 관련규정 안내 박스 — 모바일에선 버튼을 텍스트 아래로 */ html[data-service-code="donga_kor"] .dau-cd-guidebox { flex-direction: column; align-items: stretch; gap: 14px; } html[data-service-code="donga_kor"] .dau-cd-guidebox .dau-cd-dl { margin-top: 0; width: 100%; justify-content: center; } } @media (max-width: 786px) { /* 예비군 훈련내용 표 연차(3열) — 모바일 px 고정(구분/동원/지역과 분리, col 불안정 회피) */ html[data-service-code="donga_kor"] [data-v^="reserve-training"] .dau-cd-tbl--train thead tr:first-child th:nth-child(2) { width: 88px !important; } } /* defer(유예) 등록사항 표 — 786px 이하 '수강신청을 안할 경우'(첫 칸) 폭 축소. bare + table-layout:fixed 에서 col 폭이 불안정 → col 미지정(auto) + 첫 행 th 폭(!important)으로 컬럼폭 결정 */ @media (max-width: 786px) { html[data-service-code="donga_kor"] [data-v^="defer"] .dau-defer-reg thead tr:first-child th:first-child { width: 200px !important; } } /* 표 아래 ※ 주석 — 여백 없이, 줄간격 1.75. 단, 표 바로 다음(첫 주석)만 위 여백 10px */ html[data-service-code="donga_kor"] .dau-cd-note--plain { margin: 0; line-height: 1.75; } html[data-service-code="donga_kor"] .dau-cd-tbl + .dau-cd-note--plain { margin-top: 10px; } /* 동그라미 불릿 텍스트 (18px → 반응형 15px) */ html[data-service-code="donga_kor"] .dau-cd-ref { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; line-height: 1.75; color: #444b58; } html[data-service-code="donga_kor"] .dau-cd-ref::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: #003265; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-ref { font-size: 15px; } } html[data-service-code="donga_kor"] .dau-cd-tbl strong { color: #003265; font-weight: 700; } html[data-service-code="donga_kor"] .dau-cd-tbl strong.dau-cd-ink { color: #1a1a1a; } /* 문의처 전화 아이콘 (번호 앞) */ html[data-service-code="donga_kor"] .dau-cd-telico { display: inline-block; width: 18px; height: 18px; margin: 0 7px 0 4px; vertical-align: -3px; flex: none; background-color: #003265; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat; } html[data-service-code="donga_kor"] .dau-cd-tbl td > ul { list-style: none; margin: 0; padding: 0; } html[data-service-code="donga_kor"] .dau-cd-tbl td > ul > li { position: relative; padding-left: 16px; margin-top: 10px; text-align: justify; } html[data-service-code="donga_kor"] .dau-cd-tbl td > ul > li:first-child { margin-top: 0; } html[data-service-code="donga_kor"] .dau-cd-tbl td > ul > li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: #003265; } html[data-service-code="donga_kor"] .dau-cd-tbl td > ul > li.dau-cd-fileitem { display: block; padding-left: 0; margin-top: 10px; margin-bottom: 14px; } html[data-service-code="donga_kor"] .dau-cd-tbl td > ul > li.dau-cd-fileitem::before { display: none; } /* 파일 항목 = 항목 전체가 다운로드 버튼 (제목 좌측 + 다운로드 아이콘 우측) */ html[data-service-code="donga_kor"] .dau-cd-fileitem .dau-cd-dl { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; box-sizing: border-box; padding: 16px 20px; border: 1px solid #d4dbe6; border-radius: 8px; color: #1a1a1a; font-size: 17px; font-weight: 600; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } html[data-service-code="donga_kor"] .dau-cd-fileitem .dau-cd-dl:hover { background: #003265; border-color: #003265; color: #fff; } html[data-service-code="donga_kor"] .dau-cd-dlico { flex: none; width: 16px; height: 16px; background-color: #003265; transition: background-color 0.15s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z'/%3E%3C/svg%3E") center/contain no-repeat; } html[data-service-code="donga_kor"] .dau-cd-fileitem .dau-cd-dlico { width: 22px; height: 22px; } html[data-service-code="donga_kor"] .dau-cd-fileitem .dau-cd-dl:hover .dau-cd-dlico { background-color: #fff; } /* 다운로드 없는 제출서류 — 동일한 박스, 아이콘/링크 없음 */ html[data-service-code="donga_kor"] .dau-cd-fileitem .dau-cd-file-static { display: block; width: 100%; box-sizing: border-box; padding: 16px 20px; border: 1px solid #e5e9f0; border-radius: 8px; background: #fafbfc; color: #6b7280; font-size: 17px; font-weight: 600; } /* 다운로드 카드 그리드 — 3열. 좌측 문서아이콘 + 중앙 라벨 + 우측 다운로드아이콘 (전과 현황/여석 등) */ html[data-service-code="donga_kor"] .dau-cd-dlgrid { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } html[data-service-code="donga_kor"] .dau-cd-dlgrid > li { margin: 0; } html[data-service-code="donga_kor"] .dau-cd-dlcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; box-sizing: border-box; padding: 16px 18px; border: 1px solid #d4dbe6; border-radius: 8px; color: #1a1a1a; font-size: 16px; font-weight: 600; line-height: 1.4; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } html[data-service-code="donga_kor"] .dau-cd-dlcard:hover { background: #003265; border-color: #003265; color: #fff; } html[data-service-code="donga_kor"] .dau-cd-dlcard-t { text-align: left; } html[data-service-code="donga_kor"] .dau-cd-fico { flex: none; width: 22px; height: 22px; background-color: #003265; transition: background-color 0.15s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E") center/contain no-repeat; } html[data-service-code="donga_kor"] .dau-cd-dlcard:hover .dau-cd-fico, html[data-service-code="donga_kor"] .dau-cd-dlcard:hover .dau-cd-dlico { background-color: #fff; } @media (max-width: 900px) { html[data-service-code="donga_kor"] .dau-cd-dlgrid { grid-template-columns: 1fr 1fr; } } /* 다운로드 카드 텍스트 — PC 16px / 786px 이하 15px 반응형 */ @media (max-width: 786px) { html[data-service-code="donga_kor"] .dau-cd-dlcard { font-size: 15px; } } @media (max-width: 600px) { html[data-service-code="donga_kor"] .dau-cd-dlgrid { grid-template-columns: 1fr; gap: 10px; } } /* 신분증 범주 표 — 구분(좌측) 열 좁게 → 범주 헤더 한 줄. 데스크탑만(모바일은 block 스택) */ @media (min-width: 769px) { html[data-service-code="donga_kor"] .dau-cd-tbl--idcheck th:first-child { width: 80px; } } /* idcheck 표 열 헤더도 다른 표와 동일한 옅은 회색 */ html[data-service-code="donga_kor"] .dau-cd-tbl--idcheck thead th { background: #f8f8f8; } /* 모바일 — idcheck 는 block 스택하지 않고 표 레이아웃 유지(구분 세로선 보존). 이미지 #43 과 동일 */ @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--idcheck { display: table; width: 100%; table-layout: auto; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--idcheck thead { display: table-header-group; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--idcheck tbody { display: table-row-group; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--idcheck tr { display: table-row; border-bottom: 0; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--idcheck th, html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--idcheck td { display: table-cell; width: auto; padding: 12px 12px; border-bottom: 1px solid #e5e9f0; word-break: keep-all; font-size: 14px; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--idcheck th:first-child { width: 56px; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--idcheck thead th { background: #f8f8f8; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--idcheck tbody th { background: #f7fbff; } } /* idcheck — 구분/내국인/외국인(첫 열) 오른쪽에 세로 구분선 */ html[data-service-code="donga_kor"] .dau-cd-tbl--idcheck th:first-child { border-right: 1px solid #e5e9f0; } /* micro-module / retake / exam-info / combined-degree 기본 표 — 바깥(좌우) 제외, 가운데 열 사이에만 세로 구분선. 요약표(--summary)·신분증표(--idcheck)는 자체 처리라 제외. */ html[data-service-code="donga_kor"] [data-v^="micro-module"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols) th:not(:first-child), html[data-service-code="donga_kor"] [data-v^="micro-module"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols) td:not(:first-child), html[data-service-code="donga_kor"] [data-v^="retake"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols) th:not(:first-child), html[data-service-code="donga_kor"] [data-v^="retake"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols) td:not(:first-child), html[data-service-code="donga_kor"] [data-v^="exam-info"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols) th:not(:first-child), html[data-service-code="donga_kor"] [data-v^="exam-info"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols) td:not(:first-child), html[data-service-code="donga_kor"] [data-v^="cd"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols) th:not(:first-child), html[data-service-code="donga_kor"] [data-v^="cd"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols) td:not(:first-child) { border-left: 1px solid #e5e9f0; } @media (max-width: 768px) { /* 모바일 block 스택에서는 세로선 의미 없음 → 제거. 단 표 레이아웃 유지하는 --eq 는 세로선 유지(제외) */ html[data-service-code="donga_kor"] [data-v^="micro-module"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols):not(.dau-cd-tbl--eq) th:not(:first-child), html[data-service-code="donga_kor"] [data-v^="micro-module"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols):not(.dau-cd-tbl--eq) td:not(:first-child), html[data-service-code="donga_kor"] [data-v^="retake"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols):not(.dau-cd-tbl--eq) th:not(:first-child), html[data-service-code="donga_kor"] [data-v^="retake"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols):not(.dau-cd-tbl--eq) td:not(:first-child), html[data-service-code="donga_kor"] [data-v^="exam-info"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols):not(.dau-cd-tbl--eq) th:not(:first-child), html[data-service-code="donga_kor"] [data-v^="exam-info"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols):not(.dau-cd-tbl--eq) td:not(:first-child), html[data-service-code="donga_kor"] [data-v^="cd"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols):not(.dau-cd-tbl--eq) th:not(:first-child), html[data-service-code="donga_kor"] [data-v^="cd"] .dau-cd-tbl:not(.dau-cd-tbl--summary):not(.dau-cd-tbl--idcheck):not(.dau-cd-tbl--cols):not(.dau-cd-tbl--eq) td:not(:first-child) { border-left: 0; } } /* 컬럼 헤더형 데이터 표 — auto 폭, 회색 thead 중앙, 내부 세로선. (colgroup/내용이 폭 결정) */ html[data-service-code="donga_kor"] .dau-cd-tbl--cols th { width: auto; } html[data-service-code="donga_kor"] .dau-cd-tbl--cols thead th { background: #f8f8f8; text-align: center; vertical-align: middle; white-space: nowrap; } /* --cols 데이터셀: 기본 가운데(상하좌우). 긴 텍스트/목록 셀만 class="l" 로 좌측 */ html[data-service-code="donga_kor"] .dau-cd-tbl--cols th, html[data-service-code="donga_kor"] .dau-cd-tbl--cols td { border-left: 1px solid #e5e9f0; text-align: center; vertical-align: middle; } html[data-service-code="donga_kor"] .dau-cd-tbl--cols td.l { text-align: left; } html[data-service-code="donga_kor"] .dau-cd-tbl--cols td.dau-cd-just { text-align: justify; } html[data-service-code="donga_kor"] .dau-cd-tbl--cols th:first-child, html[data-service-code="donga_kor"] .dau-cd-tbl--cols td:first-child { border-left: 0; } /* rowspan 으로 첫 칸이 밀려 :first-child 가 된 셀의 좌측 테두리 복원 (td/th 모두) */ html[data-service-code="donga_kor"] .dau-cd-tbl--cols td.bl, html[data-service-code="donga_kor"] .dau-cd-tbl--cols th.bl { border-left: 1px solid #e5e9f0; } /* 인정사유 표 — 데스크탑 컬럼 폭 (모바일은 아래 @media 에서 재정의) */ html[data-service-code="donga_kor"] .dau-ig1 { width: 32%; } html[data-service-code="donga_kor"] .dau-ig2 { width: 20%; } html[data-service-code="donga_kor"] .dau-ig3 { width: 14%; } html[data-service-code="donga_kor"] .dau-ig4 { width: 34%; } /* 취업/창업 라벨 한 줄 유지 */ html[data-service-code="donga_kor"] .dau-cd-tbl--cols td.nw, html[data-service-code="donga_kor"] .dau-cd-tbl--cols th.nw { white-space: nowrap; } /* 연락처 표 — 데스크탑 컬럼 폭 (모바일은 아래 @media 에서 재정의) */ html[data-service-code="donga_kor"] .dau-lg1 { width: 20%; } html[data-service-code="donga_kor"] .dau-lg2 { width: 28%; } html[data-service-code="donga_kor"] .dau-lg3 { width: 10%; } html[data-service-code="donga_kor"] .dau-lg4 { width: 17%; } html[data-service-code="donga_kor"] .dau-lg5 { width: 25%; } /* 모바일 — 다열 데이터 표는 표 형태 유지 + 가로 스크롤 (block 스택 방지) */ @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--cols { display: table; table-layout: fixed; width: 900px; min-width: 900px; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--cols thead { display: table-header-group; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--cols tbody { display: table-row-group; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--cols tr { display: table-row; border-bottom: 0; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--cols th, html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--cols td { display: table-cell; width: auto; padding: 12px 10px; word-break: keep-all; border-bottom: 1px solid #e5e9f0; } /* 인정사유 표 — 모바일 전용 컬럼 폭(데스크탑은 자동) */ html[data-service-code="donga_kor"] .dau-ig1 { width: 18%; } html[data-service-code="donga_kor"] .dau-ig2 { width: 14%; } html[data-service-code="donga_kor"] .dau-ig3 { width: 13%; } html[data-service-code="donga_kor"] .dau-ig4 { width: 55%; } /* 연락처 표 — 모바일 전용 컬럼 폭(예술체육 구분 컬럼 넓게) */ html[data-service-code="donga_kor"] .dau-lg1 { width: 18%; } html[data-service-code="donga_kor"] .dau-lg2 { width: 20%; } html[data-service-code="donga_kor"] .dau-lg3 { width: 20%; } html[data-service-code="donga_kor"] .dau-lg4 { width: 12%; } html[data-service-code="donga_kor"] .dau-lg5 { width: 20%; } /* 전과 수료학점 표(8열·2행 헤더) — 모바일에서 폭 확보 + 긴 컬럼헤더 줄바꿈 허용(겹침/잘림 방지) */ html[data-service-code="donga_kor"] [data-v^="transfer"] .dau-cd-tbl.dau-cd-tbl--cols { width: 1080px; min-width: 1080px; } html[data-service-code="donga_kor"] [data-v^="transfer"] .dau-cd-tbl--cols thead th { white-space: normal; font-size: 13px; line-height: 1.35; padding: 10px 8px; } /* 졸업요건(criteria) 표 — 긴 컬럼헤더(연도·재입학 안내)가 nowrap 으로 겹치는 문제: 줄바꿈 허용 + 폭 확보 */ html[data-service-code="donga_kor"] [data-v^="criteria"] .dau-cd-tbl.dau-cd-tbl--cols { width: 1080px; min-width: 1080px; } html[data-service-code="donga_kor"] [data-v^="criteria"] .dau-cd-tbl--cols thead th { white-space: normal; font-size: 13px; line-height: 1.35; padding: 10px 8px; } } html[data-service-code="donga_kor"] .dau-cd-tbl .dau-cd-sublist { list-style: none; margin: 8px 0 0; padding: 0; } html[data-service-code="donga_kor"] .dau-cd-tbl .dau-cd-sublist li { position: relative; padding-left: 16px; margin-top: 6px; font-size: 16px; line-height: 1.6; text-align: justify; } html[data-service-code="donga_kor"] .dau-cd-tbl .dau-cd-sublist li::before { content: "–"; position: absolute; left: 2px; top: 0; color: #aeb8c8; } html[data-service-code="donga_kor"] .dau-cd-tbl .dau-cd-note { display: block; margin-top: 6px; font-size: 14px; color: #e01803; } /* 기본 dau-cd-tbl 의 컬럼 헤더(thead)는 옅은 회색 */ html[data-service-code="donga_kor"] .dau-cd-tbl thead th { background: #f8f8f8; } /* (예시) 안내 노트 — 느낌표 아이콘 + 검정 텍스트 + 파란 밑줄 */ /* 인라인 텍스트(밑줄 span 포함)가 조각나지 않도록 flex 대신 좌측 padding + absolute 아이콘 */ html[data-service-code="donga_kor"] .dau-cd-ex { position: relative; padding-left: 28px; color: #555; font-size: 18px; line-height: 1.7; } html[data-service-code="donga_kor"] .dau-cd-ex::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; background-color: #1a1a1a; -webkit-mask: url("/resources/donga_kor/importance.png") center/contain no-repeat; mask: url("/resources/donga_kor/importance.png") center/contain no-repeat; } /* 밑줄 텍스트: 색은 그대로 검정(상위 상속), 밑줄만 글자에서 띄움 */ html[data-service-code="donga_kor"] .dau-cd-ex [style*="underline"] { text-underline-offset: 4px; } /* 네이비 변형 — 텍스트·아이콘 모두 네이비 */ html[data-service-code="donga_kor"] .dau-cd-ex--navy { color: #003265; } html[data-service-code="donga_kor"] .dau-cd-ex--navy::before { background-color: #003265; } /* 표 셀 안에서도 dau-cd-ex 는 #555 / 18(15)px 유지 (.dau-cd-tbl .dau-cd-note 우선순위 차단) */ html[data-service-code="donga_kor"] .dau-cd-tbl .dau-cd-ex { color: #555; font-size: 18px; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-tbl .dau-cd-ex { font-size: 15px; } html[data-service-code="donga_kor"] .dau-cmaj-cap { font-size: 15px !important; margin: 20px 0 16px !important;}} /* --eq 표 — colgroup 폭이 적용되도록 base th 270px 무력화 (데스크탑) */ html[data-service-code="donga_kor"] .dau-cd-tbl--eq th { width: auto; } /* --eq 컬럼 폭 (이수구분/이수학점/비고) — 데스크탑 */ html[data-service-code="donga_kor"] .dau-eqc1 { width: 16%; } html[data-service-code="donga_kor"] .dau-eqc2 { width: 42%; } html[data-service-code="donga_kor"] .dau-eqc3 { width: 42%; } /* 모바일 — --eq 도 block 스택하지 않고 표 레이아웃 유지(가로 스크롤). 스택 깨짐 방지 */ @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--eq { display: table; table-layout: fixed; width: 640px; min-width: 640px; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--eq thead { display: table-header-group; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--eq tbody { display: table-row-group; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--eq tr { display: table-row; border-bottom: 0; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--eq th, html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--eq td { display: table-cell; padding: 12px 12px; border-bottom: 1px solid #e5e9f0; word-break: keep-all; } html[data-service-code="donga_kor"] .dau-cd-tbl.dau-cd-tbl--eq thead th { background: #f8f8f8; } /* 모바일 — 이수구분/비고 폭 유지(px), 이수학점만 확대 (표 폭 560→640px) */ html[data-service-code="donga_kor"] .dau-eqc1 { width: 14%; } html[data-service-code="donga_kor"] .dau-eqc2 { width: 49%; } html[data-service-code="donga_kor"] .dau-eqc3 { width: 37%; } } /* 학점 구성도 — 예시 제목(캡션): 가운데 정렬 + 상단 마진 */ html[data-service-code="donga_kor"] .dau-cmaj-cap { margin: 44px 0 16px !important; text-align: center; font-weight: 700; font-size: 18px; line-height: 1.5; color: #006ee9; } /* 모바일에서 좁으면 가로 스크롤 */ html[data-service-code="donga_kor"] .dau-cmaj-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } html[data-service-code="donga_kor"] .dau-cmaj-foot { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #e3197f; } /* 학점 구성도 표 — 세부내용 칸의 항목 목록(항목 + 설명) */ html[data-service-code="donga_kor"] .dau-cmaj-tbl .dau-cmaj-tl { list-style: none; margin: 0; padding: 0; text-align: left; } html[data-service-code="donga_kor"] .dau-cmaj-tbl .dau-cmaj-tl > li { position: relative; padding-left: 16px; margin-top: 10px; line-height: 1.55; text-align: left; } html[data-service-code="donga_kor"] .dau-cmaj-tbl .dau-cmaj-tl > li:first-child { margin-top: 0; } html[data-service-code="donga_kor"] .dau-cmaj-tbl .dau-cmaj-tl > li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: #003265; } html[data-service-code="donga_kor"] .dau-cmaj-tbl .dau-cmaj-tl > li b { font-weight: 700; font-size: 18px; color: #1a1a1a; } html[data-service-code="donga_kor"] .dau-cmaj-tbl .dau-cmaj-tl > li span { display: block; margin-top: 2px; font-size: 15px; color: #6b7280; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cmaj-tbl .dau-cmaj-tl > li b { font-size: 15px; } html[data-service-code="donga_kor"] .dau-cmaj-tbl .dau-cmaj-tl > li span { font-size: 13px; } } html[data-service-code="donga_kor"] .dau-cmaj-tbl td.l > .done { margin: 12px 0 0; padding-left: 16px; font-weight: 700; color: #e3197f; } html[data-service-code="donga_kor"] .dau-cmaj-tbl thead th:nth-child(2) { text-align: center; } /* 표 합계 행 — 강조 */ html[data-service-code="donga_kor"] .dau-cd-tbl--cols tr.dau-cd-trow th, html[data-service-code="donga_kor"] .dau-cd-tbl--cols tr.dau-cd-trow td { background: #eef2f7; color: #003265; font-weight: 700; } /* 예시 노트 — 반응형 폰트(18 → 15) */ @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-ex { font-size: 15px; } } /* micro-module 표 안 밑줄(: 18학점 등)도 글자에서 띄움 */ html[data-service-code="donga_kor"] [data-v^="micro-module"] .dau-cd-tbl u { text-underline-offset: 4px; } /* 번호 목록 — 1) 2) 3) (네이비). 표 셀 안/밖(흐름도 li 등) 모두 사용 */ html[data-service-code="donga_kor"] ol.dau-cd-paren { list-style: none; margin: 0; padding: 0; counter-reset: dcp; font-size: 18px; line-height: 1.75; } html[data-service-code="donga_kor"] ol.dau-cd-paren > li { position: relative; padding-left: 32px; margin-top: 10px; counter-increment: dcp; } html[data-service-code="donga_kor"] ol.dau-cd-paren > li:first-child { margin-top: 0; } html[data-service-code="donga_kor"] ol.dau-cd-paren > li::before { content: counter(dcp) ")"; position: absolute; left: 0; top: 0; color: #003265; font-weight: 700; } /* 흐름도 li 밖(표 밖) 단독 사용 시 본문 톤·크기 */ html[data-service-code="donga_kor"] .dau-cd-block > ol.dau-cd-paren > li, html[data-service-code="donga_kor"] .dau-cd-flow ol.dau-cd-paren > li { font-size: 18px; line-height: 1.7; color: #495163; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-block > ol.dau-cd-paren > li, html[data-service-code="donga_kor"] .dau-cd-flow ol.dau-cd-paren > li { font-size: 15px; } } /* micro-module 표 — 특정 셀 정렬 유틸 (vc: 상하 가운데 / cc: 상하좌우 가운데) */ html[data-service-code="donga_kor"] [data-v^="micro-module"] .dau-cd-tbl td.dau-vc { vertical-align: middle; } html[data-service-code="donga_kor"] [data-v^="micro-module"] .dau-cd-tbl td.dau-cc { vertical-align: middle; text-align: center; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cd-block { margin-top: 40px; } html[data-service-code="donga_kor"] .dau-cd-h { font-size: 20px; } html[data-service-code="donga_kor"] .dau-cd-overview { padding: 22px 20px; } html[data-service-code="donga_kor"] .dau-cd-overview .dau-cd-h { font-size: 20px; } html[data-service-code="donga_kor"] .dau-cd-overview .dau-cd-lead { font-size: 15px; } html[data-service-code="donga_kor"] .dau-cd-info > div { flex-direction: column; } html[data-service-code="donga_kor"] .dau-cd-info dt { width: 100%; } html[data-service-code="donga_kor"] .dau-cd-files li { flex-direction: column; align-items: flex-start; } html[data-service-code="donga_kor"] .dau-cd-flow > li { padding: 20px 4px; gap: 0 14px; } html[data-service-code="donga_kor"] .dau-cd-flow > li > *:not(.t1):not(.t2) { margin-left: 0; } /* 콜아웃·불릿·버튼(

·btnrow) — 모바일에서도 들여쓰기 유지(44px: 원30+gap14, 번호+텍스트 정렬) */ html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-callout.dau-cd-callout, html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-sub.dau-cd-sub, html[data-service-code="donga_kor"] .dau-cd-flow > li > p:not(.t1):not(.t2) { margin-left: 44px; } /* 단, 표 아래(뒤)에 오는 콜아웃·불릿·버튼은 들여쓰기 X(전폭, 표 좌측 정렬) — ~ 로 표 이후 모두 적용 */ html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-scroll ~ .dau-cd-callout, html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-tbl ~ .dau-cd-callout, html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-scroll ~ .dau-cd-sub, html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-tbl ~ .dau-cd-sub, html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-scroll ~ p:not(.t1):not(.t2), html[data-service-code="donga_kor"] .dau-cd-flow > li > .dau-cd-tbl ~ p:not(.t1):not(.t2) { margin-left: 0; } html[data-service-code="donga_kor"] .dau-cd-tbl td { font-size: 15px; } html[data-service-code="donga_kor"] .dau-cd-flow > li::before { width: 30px; height: 30px; font-size: 12px; } html[data-service-code="donga_kor"] .dau-cd-flow .t1 { font-size: 15px; min-width: 0; } html[data-service-code="donga_kor"] .dau-cd-flow .t2 { margin-left: 52px; margin-top: 8px; font-size: 15px; } html[data-service-code="donga_kor"] .dau-cd-tbl, html[data-service-code="donga_kor"] .dau-cd-tbl tbody, html[data-service-code="donga_kor"] .dau-cd-tbl tr, html[data-service-code="donga_kor"] .dau-cd-tbl th, html[data-service-code="donga_kor"] .dau-cd-tbl td { display: block; width: 100%; box-sizing: border-box; } html[data-service-code="donga_kor"] .dau-cd-tbl th { background: #f0f4f9; border-bottom: 1px solid #e5e9f0; padding: 14px 16px; font-size: 16px; } html[data-service-code="donga_kor"] .dau-cd-tbl td { padding: 16px 16px 20px; border-bottom: none; } html[data-service-code="donga_kor"] .dau-cd-tbl tr { border-bottom: 6px solid #f0f2f5; } html[data-service-code="donga_kor"] .dau-cd-tbl tr:last-child { border-bottom: none; } html[data-service-code="donga_kor"] .dau-cd-tbl td > ul > li.dau-cd-fileitem { flex-direction: column; align-items: flex-start; gap: 10px; } html[data-service-code="donga_kor"] .dau-cd-fileitem .dau-cd-dl, html[data-service-code="donga_kor"] .dau-cd-fileitem .dau-cd-file-static { font-size: 15px; } html[data-service-code="donga_kor"] .dau-cd-tbl .dau-cd-sublist li { font-size: 15px; } /* 영역별 이수구분 변경(category-change) 신청가능대상|예시 표 — 모바일에서도 세로 스택 대신 2열 유지(구분선이 의미있게 보이도록). 컬럼헤더(신청가능대상/예시)도 정상 헤더로 표시. */ html[data-service-code="donga_kor"] [data-v^="category-change"] .dau-cd-tbl--kv2 { display: table; width: 100%; table-layout: fixed; } html[data-service-code="donga_kor"] [data-v^="category-change"] .dau-cd-tbl--kv2 thead { display: table-header-group; } html[data-service-code="donga_kor"] [data-v^="category-change"] .dau-cd-tbl--kv2 tbody { display: table-row-group; } html[data-service-code="donga_kor"] [data-v^="category-change"] .dau-cd-tbl--kv2 tr { display: table-row; border-bottom: 0; } html[data-service-code="donga_kor"] [data-v^="category-change"] .dau-cd-tbl--kv2 th, html[data-service-code="donga_kor"] [data-v^="category-change"] .dau-cd-tbl--kv2 td { display: table-cell; width: auto; padding: 12px 10px; font-size: 14px; line-height: 1.55; word-break: keep-all; border-bottom: 1px solid #e5e9f0; vertical-align: middle; } html[data-service-code="donga_kor"] [data-v^="category-change"] .dau-cd-tbl--kv2 thead th { background: #f8f8f8; text-align: center; } html[data-service-code="donga_kor"] [data-v^="category-change"] .dau-cd-tbl--kv2 tbody th { text-align: left; background: #f7fbff; font-weight: 600; } /* 신청가능대상(1열) 오른쪽 세로 구분선 — 모바일에서도 유지 */ html[data-service-code="donga_kor"] [data-v^="category-change"] .dau-cd-tbl--kv2 th:first-child { border-right: 1px solid #e5e9f0; } } /* 신청가능대상|예시 표 — 1열(신청가능대상/카테고리) 오른쪽 세로 구분선 (데스크톱) */ html[data-service-code="donga_kor"] [data-v^="category-change"] .dau-cd-tbl--kv2 th:first-child { border-right: 1px solid #e5e9f0; } /* ── 탭 컴포넌트 (.dau-tabs) — JS 없는 라디오 기반(SSR/하이드레이션 무관). UI(학교상징물) 등 ── */ html[data-service-code="donga_kor"] .dau-tabs { margin: 0; } html[data-service-code="donga_kor"] .dau-tabs .dau-tab-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } html[data-service-code="donga_kor"] .dau-tabs .dau-tab-bar { display: flex; gap: 0; margin-bottom: 40px; background: #f0f1f4; } html[data-service-code="donga_kor"] .dau-tabs .dau-tab { position: relative; z-index: 0; flex: 1 1 0; text-align: center; padding: 20px 16px; font-size: 17px; font-weight: 700; color: #8a8f99; background: #f0f1f4; cursor: pointer; transition: color 0.15s; -webkit-user-select: none; user-select: none; } html[data-service-code="donga_kor"] .dau-tabs .dau-tab:hover { background: #e7e9ee; color: #003265; } html[data-service-code="donga_kor"] .dau-tabs .dau-tab-panel { display: none; } /* 활성 탭 — 살짝 더 높고 기울어진(평행사변형) 배경. 텍스트는 똑바로 유지 */ html[data-service-code="donga_kor"] .dau-tabs .dau-tab-empty { padding: 90px 20px; text-align: center; color: #9aa3b2; font-size: 16px; border: 1px dashed #d4dbe6; border-radius: 8px; background: #fafbfc; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-tabs .dau-tab { padding: 14px 8px; font-size: 14px; } html[data-service-code="donga_kor"] .dau-tabs .dau-tab-bar { gap: 0; } } /* ── 페이지 네비게이션 탭 (.dau-ctab) — 형제 페이지/외부링크를 탭으로. dau-tab 비주얼(링크 기반) ── */ html[data-service-code="donga_kor"] .dau-ctab { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 40px; background: #f0f1f4; } html[data-service-code="donga_kor"] .dau-ctab a { position: relative; z-index: 0; flex: 0 0 25%; min-width: 25%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 20px 14px; font-size: 17px; font-weight: 700; line-height: 1.35; color: #8a8f99; background: #f0f1f4; text-decoration: none; transition: color 0.15s; } html[data-service-code="donga_kor"] .dau-ctab a:hover { color: #003265; background: #e7e9ee; } html[data-service-code="donga_kor"] .dau-ctab a.is-active { color: #003265; z-index: 1; } html[data-service-code="donga_kor"] .dau-ctab a.is-active::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #ffffff; border-top: 3px solid #c4a36a; border-radius: 9px; box-shadow: 0 1px 2px rgba(0,50,101,0.10), 0 3px 8px rgba(0,50,101,0.08); transform: none; z-index: -1; } html[data-service-code="donga_kor"] .dau-ctab a .ext-ico { width: 14px; height: 14px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-ctab a { min-width: 33.33%; padding: 14px 8px; font-size: 14px; } } /* ── UI 페이지 — 기본형/규격 박스 (그래프 배경 + 다운로드 + 치수 배지). 레퍼런스 Image#5 ── */ html[data-service-code="donga_kor"] .dau-ui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; } html[data-service-code="donga_kor"] .dau-ui-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } html[data-service-code="donga_kor"] .dau-ui-head h4 { margin: 0; font-size: 20px; font-weight: 700; color: #1a1a1a; } html[data-service-code="donga_kor"] .dau-ui-dl { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border: 1px solid #003265; color: #003265; border-radius: 4px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.15s, color 0.15s; } html[data-service-code="donga_kor"] .dau-ui-dl:hover { background: #003265; color: #fff; } html[data-service-code="donga_kor"] .dau-ui-box { display: flex; align-items: center; justify-content: center; gap: 40px; min-height: 300px; padding: 40px; border: 1px solid #e3e6ec; background-color: #fff; background-image: linear-gradient(#f3f5f8 1px, transparent 1px), linear-gradient(90deg, #f3f5f8 1px, transparent 1px); background-size: 26px 26px; } html[data-service-code="donga_kor"] .dau-ui-box img { max-width: 220px; height: auto; } html[data-service-code="donga_kor"] .dau-ui-spec { display: flex; flex-direction: column; gap: 12px; max-width: 230px; } html[data-service-code="donga_kor"] .dau-ui-badge { align-self: flex-start; background: #2b3a5a; color: #fff; font-size: 13px; font-weight: 700; padding: 6px 15px; border-radius: 16px; } html[data-service-code="donga_kor"] .dau-ui-spec p { margin: 0; font-size: 15px; line-height: 1.6; color: #495163; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-ui-grid { grid-template-columns: 1fr; gap: 32px; } html[data-service-code="donga_kor"] .dau-ui-box { padding: 24px; gap: 20px; min-height: 220px; flex-direction: column; } html[data-service-code="donga_kor"] .dau-ui-box img { max-width: 160px; } } /* ── 심볼마크 섹션 — 우리 토큰 + 모눈(그래프) 배경 + 중앙 스택(엠블럼 위/설명 아래). 레퍼런스 Image#8,9 ── */ html[data-service-code="donga_kor"] .dau-ui2-h { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 24px; font-weight: 700; color: #1a1a1a; line-height: 1.3; } html[data-service-code="donga_kor"] .dau-ui2-h::before { content: ""; flex: none; width: 4px; height: 22px; background: #003265; } html[data-service-code="donga_kor"] .dau-ui2-h .en { font-size: 15px; font-weight: 500; color: #9aa3b2; } html[data-service-code="donga_kor"] .dau-ui2-box { display: flex; flex-direction: column; align-items: center; gap: 52px; padding: 90px 56px; border: 1px solid #e3eaf4; background-color: #fff; background-image: linear-gradient(#eef1f5 1px, transparent 1px), linear-gradient(90deg, #eef1f5 1px, transparent 1px); background-size: 22px 22px; } html[data-service-code="donga_kor"] .dau-ui2-img img { width: 300px; max-width: 100%; height: auto; display: block; } /* 이미지 심볼 이미지 — 심볼마크와 별도 사이즈 */ html[data-service-code="donga_kor"] .dau-ui2-box:has(.dau-imgsym-info) .dau-ui2-img img { width: 500px; } html[data-service-code="donga_kor"] .dau-ui2-desc { text-align: center; font-size: 18px; line-height: 1.85; color: #495163; margin-bottom: 0px; } html[data-service-code="donga_kor"] .dau-ui2-em { color: #003265; font-weight: 700; font-size: 20px; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-ui2-box { padding: 36px 22px; gap: 28px; } html[data-service-code="donga_kor"] .dau-ui2-img img { width: 200px; } html[data-service-code="donga_kor"] .dau-ui2-desc { font-size: 15px; text-align: justify; } html[data-service-code="donga_kor"] .dau-ui2-h { font-size: 20px; } html[data-service-code="donga_kor"] .dau-br-pc { display: none; } html[data-service-code="donga_kor"] .dau-ui2-em { font-size: 17px; } } /* ── 최소 사용 규격 — 모눈 배경 박스 2개 나란히 + 캡션. 레퍼런스 Image#10,11 ── */ html[data-service-code="donga_kor"] .dau-ui2-mt { margin-top: 56px; } html[data-service-code="donga_kor"] .dau-ui-spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } html[data-service-code="donga_kor"] .dau-ui-spec-box { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 22px; min-height: 280px; padding: 44px 32px; border: 1px solid #e3eaf4; background-color: #fff; background-image: linear-gradient(#eef1f5 1px, transparent 1px), linear-gradient(90deg, #eef1f5 1px, transparent 1px); background-size: 22px 22px; } html[data-service-code="donga_kor"] .dau-ui-spec-box img { max-width: 100%; width: auto; height: auto; display: block; } html[data-service-code="donga_kor"] .dau-ui-spec-cap { align-self: center; margin: 0; padding: 5px 20px; background: #003265; color: #fff; border-radius: 999px; font-size: 15px; font-weight: 600; text-align: center; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-ui-spec-grid { grid-template-columns: 1fr; gap: 16px; } html[data-service-code="donga_kor"] .dau-ui-spec-box { min-height: 200px; padding: 32px 20px; } html[data-service-code="donga_kor"] .dau-ui2-mt { margin-top: 40px; } } /* ── 색상활용 — 컬러 칩 카드. 우리 토큰(플랫, #e3eaf4 보더, 직각) ── */ html[data-service-code="donga_kor"] .dau-ui-color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } html[data-service-code="donga_kor"] .dau-ui-color { border: 1px solid #e3eaf4; background: #fff; overflow: hidden; } html[data-service-code="donga_kor"] .dau-ui-color-chip { height: 150px; } html[data-service-code="donga_kor"] .dau-ui-color-chip.c-282 { background: #003265; } html[data-service-code="donga_kor"] .dau-ui-color-chip.c-black { background: #000; } html[data-service-code="donga_kor"] .dau-ui-color-chip.c-429 { background: #a2aaad; } html[data-service-code="donga_kor"] .dau-ui-color-info { padding: 18px 20px; } html[data-service-code="donga_kor"] .dau-ui-color-info strong { display: block; font-size: 18px; font-weight: 700; color: #1a1a1a; } html[data-service-code="donga_kor"] .dau-ui-color-info span { display: block; margin-top: 10px; font-size: 16px; color: #8a909c; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-ui-color-grid { grid-template-columns: 1fr; gap: 14px; } html[data-service-code="donga_kor"] .dau-ui-color-chip { height: 110px; } } /* ── 시그니처 색상 적용 — 컬러칩 카드와 동일 구조(보더 카드 = 모눈 이미지영역 + 구분선 + 캡션). 레퍼런스 Image#13 ── */ html[data-service-code="donga_kor"] .dau-ui-sig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; } html[data-service-code="donga_kor"] .dau-ui-sig { border: 1px solid #e3eaf4; background: #fff; overflow: hidden; } html[data-service-code="donga_kor"] .dau-ui-sig-box { display: flex; align-items: center; justify-content: center; min-height: 170px; padding: 28px 24px; border-bottom: 1px solid #e3eaf4; background-color: #fff; } html[data-service-code="donga_kor"] .dau-ui-sig-box img { max-width: 100%; max-height: 150px; width: auto; height: auto; display: block; } html[data-service-code="donga_kor"] .dau-ui-sig-cap { padding: 18px 20px; } html[data-service-code="donga_kor"] .dau-ui-sig-cap strong { display: block; font-size: 18px; font-weight: 700; color: #1a1a1a; } html[data-service-code="donga_kor"] .dau-ui-sig-cap span { display: block; margin-top: 10px; font-size: 16px; color: #8a909c; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-ui-sig-grid { grid-template-columns: 1fr; gap: 18px; } html[data-service-code="donga_kor"] .dau-ui-sig-box { min-height: 140px; } } /* ── 이미지 심볼 — 심볼마크와 동일 레이아웃(.dau-ui2-box: 모눈+중앙 이미지/텍스트) + 컬러칩(가운데) ── */ html[data-service-code="donga_kor"] .dau-imgsym-info { width: 100%; } html[data-service-code="donga_kor"] .dau-imgsym-colors { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 30px; margin-top: 28px; } html[data-service-code="donga_kor"] .dau-imgsym-color { display: inline-flex; align-items: center; padding: 9px 20px; border-radius: 22px; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; } html[data-service-code="donga_kor"] .dau-imgsym-color.c-green { background: #2a8536; color: #fff; } html[data-service-code="donga_kor"] .dau-imgsym-color.c-yellow { background: #f8b900; color: #3a2c00; } html[data-service-code="donga_kor"] .dau-imgsym-color.c-red { background: #e94d2e; color: #fff; } /* ── UI 페이지 모바일 폰트 조정 — 18→16, 16→15 (데스크톱 규칙 뒤라 캐스케이드로 적용) ── */ @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-ui2-desc { font-size: 15px; text-align: justify; } html[data-service-code="donga_kor"] .dau-ui-color-info strong, html[data-service-code="donga_kor"] .dau-ui-sig-cap strong { font-size: 15px; } html[data-service-code="donga_kor"] .dau-ui-color-info span, html[data-service-code="donga_kor"] .dau-ui-sig-cap span { font-size: 15px; } } /* ── 비율 및 배치 박스 — 이미지 동일영역 중앙 + 캡션 하단정렬(두 박스 일관) ── */ html[data-service-code="donga_kor"] .dau-ratio-box { justify-content: flex-start; gap: 0; } html[data-service-code="donga_kor"] .dau-ratio-box .dau-ratio-imgwrap { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; } html[data-service-code="donga_kor"] .dau-ratio-box .dau-ui-spec-cap { margin-top: 18px; } /* ── 신청 안내 — 사각 카드(라운드 없음). 상단 안내문 / 하단 행: 연락처 ↔ 다운로드 버튼 ── */ html[data-service-code="donga_kor"] .dau-req { display: flex; flex-direction: column; gap: 18px; margin-top: 40px; padding: 28px 36px; background: #f7fbff; border: 1px solid #e3e8f0; } html[data-service-code="donga_kor"] .dau-req-lead { margin: 0; font-size: 18px; font-weight: 700; color: #1a1a1a; line-height: 1.5; } html[data-service-code="donga_kor"] .dau-req-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; } html[data-service-code="donga_kor"] .dau-req-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: #6b7280; } html[data-service-code="donga_kor"] .dau-req-contact .ico-tel { width: 17px; height: 17px; flex: none; background-color: #003265; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat; } html[data-service-code="donga_kor"] .dau-req-contact strong { color: #003265; font-weight: 700; margin-right: 2px; } html[data-service-code="donga_kor"] .dau-req-citem { display: inline-flex; align-items: center; gap: 6px; } html[data-service-code="donga_kor"] .dau-req-contact .sep { display: inline-block; width: 1px; height: 12px; background: #cfd6e0; margin: 0 6px; } html[data-service-code="donga_kor"] .dau-req-link { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; background: #003265; color: #fff; border-radius: 0; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s; } html[data-service-code="donga_kor"] .dau-req-link:hover { background: #00254d; } html[data-service-code="donga_kor"] .dau-req-link .dl-ico { width: 17px; height: 17px; flex: none; background-color: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z'/%3E%3C/svg%3E") center/contain no-repeat; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-req { padding: 22px 20px; } html[data-service-code="donga_kor"] .dau-req-row { flex-direction: column; align-items: stretch; } html[data-service-code="donga_kor"] .dau-req-contact { font-size: 14px; flex-direction: column; align-items: flex-start; gap: 6px; } html[data-service-code="donga_kor"] .dau-req-contact .sep { display: none; } html[data-service-code="donga_kor"] .dau-req-link { justify-content: center; } html[data-service-code="donga_kor"] .dau-req-lead { font-size: 16px ;} } html[data-service-code="donga_kor"] .dau-ui-spec-box .dau-newsig { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; } html[data-service-code="donga_kor"] .dau-sig-cap-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; } html[data-service-code="donga_kor"] .dau-sig-desc { margin: 0; font-size: 14px; color: #6b7280; text-align: center; line-height: 1.5; } html[data-service-code="donga_kor"] .dau-ui-spec-box.dau-spec-full { grid-column: 1 / -1; } /* ── 시그니처 조합(B/C 등) — 라벨+설명 헤더 + 풀폭 박스(이미지 좌우 나란히 + 구분선). 레퍼런스 Image#24 ── */ html[data-service-code="donga_kor"] .dau-sig2 + .dau-sig2 { margin-top: 30px; } html[data-service-code="donga_kor"] .dau-sig2-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; } html[data-service-code="donga_kor"] .dau-sig2-label { font-size: 18px; font-weight: 700; color: #003265; } html[data-service-code="donga_kor"] .dau-sig2-desc { font-size: 15px; color: #6b7280; } html[data-service-code="donga_kor"] .dau-sig2-box { display: flex; align-items: center; border: 1px solid #e3eaf4; background-color: #fff; background-image: linear-gradient(#eef1f5 1px, transparent 1px), linear-gradient(90deg, #eef1f5 1px, transparent 1px); background-size: 22px 22px; padding: 44px 20px; } html[data-service-code="donga_kor"] .dau-sig2-item { flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 28px; } html[data-service-code="donga_kor"] .dau-sig2-item + .dau-sig2-item { border-left: 1px solid #dbe2ec; } html[data-service-code="donga_kor"] .dau-sig2-item img { max-width: 100%; height: auto; display: block; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-sig2-box { flex-direction: column; gap: 24px; padding: 26px 16px; } html[data-service-code="donga_kor"] .dau-sig2-item { padding: 0; } html[data-service-code="donga_kor"] .dau-sig2-item + .dau-sig2-item { border-left: 0; border-top: 1px solid #dbe2ec; padding-top: 24px; } } html[data-service-code="donga_kor"] .dau-spec3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-spec3 { grid-template-columns: 1fr; } } html[data-service-code="donga_kor"] .dau-char-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 24px; margin-top: 30px; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-char-grid { grid-template-columns: 1fr; } } /* 교상 마스코트 + 교목 = 같은 높이(데스크탑 2열) */ html[data-service-code="donga_kor"] .dau-char-grid .dau-ui-spec-box:nth-child(1) img, html[data-service-code="donga_kor"] .dau-char-grid .dau-ui-spec-box:nth-child(2) img { height: 200px; width: auto; } @media (max-width: 768px) { /* 하나씩 나열될 때 — height auto */ html[data-service-code="donga_kor"] .dau-char-grid .dau-ui-spec-box:nth-child(1) img, html[data-service-code="donga_kor"] .dau-char-grid .dau-ui-spec-box:nth-child(2) img { height: auto; } } /* 교가 페이지 — 영상 풀폭(상단) + 악보(좌, 제목+흰카드)·정보패널(우) — donga_kor 디자인 토큰 */ html[data-service-code="donga_kor"] .dau-song2 { display: flex; flex-direction: column; gap: 28px; } html[data-service-code="donga_kor"] .dau-song2-video video { width: 100%; height: auto; display: block; background: #000; border: 1px solid #e3eaf4; } html[data-service-code="donga_kor"] .dau-song2-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 24px; align-items: stretch; } html[data-service-code="donga_kor"] .dau-song2-score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px; background: #fff; border: 1px solid #e3eaf4; } html[data-service-code="donga_kor"] .dau-song2-score-title { margin: 0; font-size: 18px; font-weight: 800; color: #1a1a1a; text-align: center; } html[data-service-code="donga_kor"] .dau-song2-score img { width: 100%; max-width: 380px; height: auto; display: block; } html[data-service-code="donga_kor"] .dau-song2-info { position: relative; overflow: hidden; padding: 48px 52px; background: #f7fbff; border: 1px solid #e3e8f0; } html[data-service-code="donga_kor"] .dau-song2-credit { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: #003265; position: relative; z-index: 1; } html[data-service-code="donga_kor"] .dau-song2-lyric { margin: 0 0 34px; font-size: 18px; line-height: 1.95; color: #374151; position: relative; z-index: 1; } html[data-service-code="donga_kor"] .dau-song2-dl { display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; } html[data-service-code="donga_kor"] .dau-song2-wm { position: absolute; right: 0; bottom: 0; font-size: 80px; font-weight: 800; letter-spacing: 2px; line-height: 1.02; color: rgba(0, 50, 101, 0.05); pointer-events: none; white-space: nowrap; text-align: right; z-index: 0; } html[data-service-code="donga_kor"] .dau-song2-wm .dau-wm-l { display: block; } /* 1270px↓ — 다운로드 버튼 한 줄에 하나씩(가로 100%) */ @media (max-width: 1270px) { html[data-service-code="donga_kor"] .dau-song2-dl .dau-req-link { flex: 1 1 100%; justify-content: center; } } /* 1200px↓ — DONG-A UNIVERSITY 워터마크 숨김 */ @media (max-width: 1200px) { html[data-service-code="donga_kor"] .dau-song2-wm { display: none; } } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-song2-grid { grid-template-columns: 1fr; } html[data-service-code="donga_kor"] .dau-song2-info { padding: 32px 24px; } html[data-service-code="donga_kor"] .dau-song2-score-title, html[data-service-code="donga_kor"] .dau-song2-credit, html[data-service-code="donga_kor"] .dau-song2-lyric { font-size: 15px; } } /* ── 찾아오시는길(directions) 탭 — 3개(승학/구덕/부민). UI 탭 메커니즘 재사용 ── */ /* 지도 — 가로 풀폭 */ html[data-service-code="donga_kor"] .dau-dir-map { width: 100%; height: 440px; border: 1px solid #e3eaf4; overflow: hidden; background: #eef1f5; } html[data-service-code="donga_kor"] .dau-dir-map iframe { width: 100%; height: 100%; border: 0; display: block; } /* 주소 인포밴드 (지도 아래, 풀폭) */ html[data-service-code="donga_kor"] .dau-dir-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin: 0 0 48px; padding: 28px 34px; background: #f7fbff; border: 1px solid #e3e8f0; border-top: 3px solid #003265; } html[data-service-code="donga_kor"] .dau-dir-info-main { flex: 1 1 auto; min-width: 0; } html[data-service-code="donga_kor"] .dau-dir-name { margin: 0 0 14px; font-size: 24px; font-weight: 800; color: #003265; } html[data-service-code="donga_kor"] .dau-dir-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 15px; color: #374151; } html[data-service-code="donga_kor"] .dau-dir-meta:last-child { margin-bottom: 0; } html[data-service-code="donga_kor"] .dau-dir-meta-i { width: 18px; height: 18px; flex: none; background-color: #003265; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } html[data-service-code="donga_kor"] .dau-dir-meta-i.i-pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E"); } html[data-service-code="donga_kor"] .dau-dir-meta-i.i-tel { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); } /* 교통안내 — 카드(네이비 헤더바 + 아이콘) */ html[data-service-code="donga_kor"] .dau-dir-ways-h { margin: 0 0 10px; } html[data-service-code="donga_kor"] .dau-dir-way-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } html[data-service-code="donga_kor"] .dau-dir-way { padding: 24px 28px 26px; background: #f0f5fa; border: 1px solid #e7ecf3; border-radius: 12px; } html[data-service-code="donga_kor"] .dau-dir-way-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid #e7ecf3; } html[data-service-code="donga_kor"] .dau-dir-way-t { font-size: 18px; font-weight: 700; color: #1a1a1a; line-height: 1.3; } html[data-service-code="donga_kor"] .dau-dir-way-h .stit { margin-left: 5px; font-size: 12px; font-weight: 500; color: #9aa3b2; } html[data-service-code="donga_kor"] .dau-dir-way-ico { width: 28px; height: 28px; flex: none; background-color: #8a909c; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } html[data-service-code="donga_kor"] .dau-dir-way--full { grid-column: 1 / -1; } html[data-service-code="donga_kor"] .dau-dir-way--full .dau-dir-way-body { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 72px; align-items: start; } html[data-service-code="donga_kor"] .dau-dir-way--full .dau-dir-tl + .dau-dir-tl { margin-top: 0; padding-top: 0; border-top: 0; } html[data-service-code="donga_kor"] .dau-dir-way-ico.i-subway { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h12v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-4-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zM11 10H6V6h5v4zm2 0V6h5v4h-5zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h12v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-4-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zM11 10H6V6h5v4zm2 0V6h5v4h-5zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); } html[data-service-code="donga_kor"] .dau-dir-way-ico.i-bus { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 16c0 .88.39 1.67 1 2.22V20c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h8v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1.78c.61-.55 1-1.34 1-2.22V6c0-3.5-3.58-4-8-4s-8 .5-8 4v10zm3.5 1c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm9 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM18 11H6V6h12v5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 16c0 .88.39 1.67 1 2.22V20c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h8v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1.78c.61-.55 1-1.34 1-2.22V6c0-3.5-3.58-4-8-4s-8 .5-8 4v10zm3.5 1c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm9 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM18 11H6V6h12v5z'/%3E%3C/svg%3E"); } html[data-service-code="donga_kor"] .dau-dir-way-ico.i-car { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E"); } html[data-service-code="donga_kor"] .dau-dir-way-ico.i-air { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E"); } html[data-service-code="donga_kor"] .dau-dir-way-body { padding: 0; } html[data-service-code="donga_kor"] .dau-dir-steps { margin: 0; padding-left: 18px; } html[data-service-code="donga_kor"] .dau-dir-steps li { font-size: 15px; line-height: 1.75; color: #374151; } html[data-service-code="donga_kor"] .dau-dir-steps li + li { margin-top: 8px; } html[data-service-code="donga_kor"] .dau-dir-stop { margin: 0 0 12px; font-weight: 700; color: #1a1a1a; font-size: 16px; } html[data-service-code="donga_kor"] .dau-dir-busrow { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; font-size: 16px; color: #374151; } html[data-service-code="donga_kor"] .dau-dir-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed #e3e8f0; font-size: 14px; color: #6b7280; line-height: 1.6; } html[data-service-code="donga_kor"] .dau-dir-navi { margin: 0 0 18px; font-size: 16px; color: #374151; } /* 경로 타임라인 (Image#31 재해석) — 연결선 + 노드, 도착지 강조 */ html[data-service-code="donga_kor"] .dau-dir-tl { list-style: none; margin: 0; padding: 0; } html[data-service-code="donga_kor"] .dau-dir-tl + .dau-dir-tl { margin-top: 18px; padding-top: 18px; border-top: 1px dashed #e3e8f0; } html[data-service-code="donga_kor"] .dau-dir-tl-item { position: relative; padding: 0 0 20px 32px; } html[data-service-code="donga_kor"] .dau-dir-tl-item:last-child { padding-bottom: 0; } html[data-service-code="donga_kor"] .dau-dir-tl-item::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: -8px; width: 2px; background: #cdd8e8; } html[data-service-code="donga_kor"] .dau-dir-tl-item:last-child::before { display: none; } html[data-service-code="donga_kor"] .dau-dir-tl-item::after { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #a8adb8; box-sizing: border-box; } html[data-service-code="donga_kor"] .dau-dir-tl-item--end::after { left: -2px; top: 4px; width: 14px; height: 14px; background: #003265; border-color: #003265; } html[data-service-code="donga_kor"] .dau-dir-tl-txt { display: block; font-size: 16px; line-height: 1.55; color: #374151; } html[data-service-code="donga_kor"] .dau-dir-tl-lead { display: block; margin-bottom: 5px; font-weight: 700; color: #1a1a1a; } html[data-service-code="donga_kor"] .dau-dir-tl-item--end .dau-dir-tl-txt { font-weight: 700; color: #003265; } html[data-service-code="donga_kor"] .dau-dir-line { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 22px; padding: 0 8px; background: #003265; color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; } html[data-service-code="donga_kor"] .dau-dir-line--1 { background: #f06a00; } html[data-service-code="donga_kor"] .dau-dir-line--2 { background: #81bf48; } html[data-service-code="donga_kor"] .dau-dir-bus { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 22px; padding: 0 9px; border-radius: 4px; font-size: 12px; font-weight: 700; color: #fff; } html[data-service-code="donga_kor"] .dau-dir-bus--g { background: #2a6fb0; } html[data-service-code="donga_kor"] .dau-dir-bus--s { background: #e2562a; } html[data-service-code="donga_kor"] .dau-req-link .dau-map-ico { width: 17px; height: 17px; flex: none; background-color: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z'/%3E%3C/svg%3E") center/contain no-repeat; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-dir-map { height: 300px; } html[data-service-code="donga_kor"] .dau-dir-way-grid { grid-template-columns: 1fr; } html[data-service-code="donga_kor"] .dau-dir-way--full .dau-dir-way-body { grid-template-columns: 1fr; row-gap: 0; } html[data-service-code="donga_kor"] .dau-dir-way--full .dau-dir-tl + .dau-dir-tl { margin-top: 26px; padding-top: 26px; border-top: 1px dashed #e3e8f0; } /* 반응형 — 타임라인(왼쪽 바) 텍스트 제외: 제목 18→16, 하단 본문 16→15 */ html[data-service-code="donga_kor"] .dau-dir-way-t { font-size: 16px; } html[data-service-code="donga_kor"] .dau-dir-stop, html[data-service-code="donga_kor"] .dau-dir-busrow, html[data-service-code="donga_kor"] .dau-dir-navi, html[data-service-code="donga_kor"] .dau-dir-tl-txt { font-size: 15px; } } /* 홍보영상 갤러리 — 메인 플레이어 + 카테고리/언어 칩 선택 (content.video-gallery) */ html[data-service-code="donga_kor"] .dau-video { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 22px; align-items: stretch; } html[data-service-code="donga_kor"] .dau-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid #e3eaf4; overflow: hidden; } html[data-service-code="donga_kor"] .dau-video-frame .dau-video-el { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } html[data-service-code="donga_kor"] .dau-video-meta { display: flex; align-items: center; gap: 12px; margin-top: 16px; } html[data-service-code="donga_kor"] .dau-video-cat { font-size: 18px; font-weight: 700; color: #003265; } html[data-service-code="donga_kor"] .dau-video-lang { padding-left: 12px; border-left: 1px solid #e3e8f0; font-size: 15px; color: #6b7280; } /* 영상 선택 — 버튼 리스트 (우측, 같은 선상) */ html[data-service-code="donga_kor"] .dau-video-list { display: flex; flex-direction: column; gap: 13px; height: 100%; } html[data-service-code="donga_kor"] .dau-video-item { flex: 1; display: flex; align-items: center; gap: 13px; width: 100%; min-height: 60px; padding: 14px 18px; background: #fff; border: 1px solid #e5e9f0; border-radius: 12px; cursor: pointer; text-align: left; box-shadow: 0 1px 2px rgba(0, 40, 90, 0.03); transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s, background 0.18s; } html[data-service-code="donga_kor"] .dau-video-item:hover { border-color: #003265; box-shadow: 0 6px 16px rgba(0, 40, 90, 0.12); transform: translateY(-2px); } html[data-service-code="donga_kor"] .dau-video-item.active { background: linear-gradient(135deg, #013a78, #002a57); border-color: #002a57; box-shadow: 0 6px 18px rgba(0, 45, 92, 0.28); } html[data-service-code="donga_kor"] .dau-video-item-ico { order: 2; margin-left: auto; flex: none; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #0a4fa0, #003265); display: inline-flex; align-items: center; justify-content: center; transition: transform 0.18s, background 0.18s; } html[data-service-code="donga_kor"] .dau-video-item-ico::before { content: ""; margin-left: 2px; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent #fff; transition: border-color 0.18s; } html[data-service-code="donga_kor"] .dau-video-item:hover .dau-video-item-ico { transform: scale(1.08); } html[data-service-code="donga_kor"] .dau-video-item.active .dau-video-item-ico { background: #fff; box-shadow: none; } html[data-service-code="donga_kor"] .dau-video-item.active .dau-video-item-ico::before { border-left-color: #003265; } html[data-service-code="donga_kor"] .dau-video-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; line-height: 1.25; } html[data-service-code="donga_kor"] .dau-video-item-txt b { font-size: 16px; font-weight: 600; color: #6b7c96; } html[data-service-code="donga_kor"] .dau-video-item-txt span { font-size: 24px; font-weight: 700; color: #1a2b45; } html[data-service-code="donga_kor"] .dau-video-item.active .dau-video-item-txt b { color: #9fb8db; } html[data-service-code="donga_kor"] .dau-video-item.active .dau-video-item-txt span { color: #fff; } @media (max-width: 1500px) { html[data-service-code="donga_kor"] .dau-video { grid-template-columns: minmax(0, 1fr); max-width: none; } html[data-service-code="donga_kor"] .dau-video-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; height: auto; } html[data-service-code="donga_kor"] .dau-video-item { flex: none; width: auto; min-width: 0; min-height: 0; } } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-video-cat { font-size: 16px; } html[data-service-code="donga_kor"] .dau-video-item-txt b { font-size: 15px; } html[data-service-code="donga_kor"] .dau-video-item-txt span { font-size: 18px; } } @media (max-width: 500px) { html[data-service-code="donga_kor"] .dau-video-list { grid-template-columns: 1fr; } } /* 국외협정체결 대학·기관 — 다컬럼 데이터 표 (순번/기관/영문/국가/체결일/홈페이지) */ html[data-service-code="donga_kor"] .dau-itbl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; } html[data-service-code="donga_kor"] .dau-itbl-count { font-size: 16px; color: #6b7280; } html[data-service-code="donga_kor"] .dau-itbl-count strong { color: #003265; font-weight: 700; } html[data-service-code="donga_kor"] .dau-itbl-asof { font-size: 16px; color: #8a909c; } html[data-service-code="donga_kor"] .dau-itbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } html[data-service-code="donga_kor"] .dau-itbl { width: 100%; border-collapse: collapse; border-top: 2px solid #003265; } html[data-service-code="donga_kor"] .dau-itbl thead th { position: sticky; top: 0; background: #f7fbff; color: #003265; font-size: 18px; font-weight: 700; padding: 18px 16px; text-align: center; white-space: nowrap; border-bottom: 1px solid #e1e6ee; } html[data-service-code="donga_kor"] .dau-itbl tbody td { border-bottom: 1px solid #eef1f6; padding: 18px 16px; font-size: 18px; color: #374151; line-height: 1.6; vertical-align: middle; text-align: center; } html[data-service-code="donga_kor"] .dau-itbl thead th + th { border-left: 1px solid #e1e6ee; } html[data-service-code="donga_kor"] .dau-itbl tbody td + td { border-left: 1px solid #eef1f6; } html[data-service-code="donga_kor"] .dau-itbl tbody tr:hover { background: #fafbfc; } html[data-service-code="donga_kor"] .dau-itbl .c-no { width: 64px; color: #8a909c; } html[data-service-code="donga_kor"] .dau-itbl .c-kr { font-weight: 700; color: #1a2b45; } html[data-service-code="donga_kor"] .dau-itbl .c-en { color: #6b7280; } html[data-service-code="donga_kor"] .dau-itbl .c-country { white-space: nowrap; } html[data-service-code="donga_kor"] .dau-itbl .c-date { white-space: nowrap; color: #6b7280; } html[data-service-code="donga_kor"] .dau-itbl .c-home { white-space: nowrap; } html[data-service-code="donga_kor"] .dau-itbl-out { display: inline-block; width: 20px; height: 20px; background-color: #003265; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") center/contain no-repeat; transition: background-color 0.15s; } html[data-service-code="donga_kor"] .dau-itbl-out:hover { background-color: #0a5bc4; } html[data-service-code="donga_kor"] .dau-itbl-none { color: #b6bcc7; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-itbl thead th, html[data-service-code="donga_kor"] .dau-itbl tbody td { font-size: 15px; padding: 11px 13px; } html[data-service-code="donga_kor"] .dau-itbl-count, html[data-service-code="donga_kor"] .dau-itbl-asof { font-size: 15px; } } /* 국내자매결연학교 — 로고 카드 그리드 (이미지 + 교명 + 외부 링크) */ html[data-service-code="donga_kor"] .dau-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } html[data-service-code="donga_kor"] .dau-logo-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 22px; background: transparent; border: 1px solid #e7ecf3; border-radius: 0; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 40, 90, 0.03); transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s; } html[data-service-code="donga_kor"] .dau-logo-card:hover { border-color: #003265; } html[data-service-code="donga_kor"] .dau-logo-img { width: 100%; height: 92px; display: flex; align-items: center; justify-content: center; } html[data-service-code="donga_kor"] .dau-logo-img img { max-width: 80%; max-height: 80%; object-fit: contain; } html[data-service-code="donga_kor"] .dau-logo-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding-top: 16px; border-top: 1px solid #e7ecf3; } html[data-service-code="donga_kor"] .dau-logo-name { font-size: 18px; font-weight: 700; color: #1a1a1a; text-align: center; line-height: 1.4; } html[data-service-code="donga_kor"] .dau-logo-ico { flex: none; width: 20px; height: 20px; background-color: #b6bcc7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") center/contain no-repeat; transition: background-color 0.18s; } html[data-service-code="donga_kor"] .dau-logo-card:hover .dau-logo-ico { background-color: #003265; } @media (max-width: 1100px) { html[data-service-code="donga_kor"] .dau-logos { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-logos { grid-template-columns: repeat(2, 1fr); gap: 14px; } html[data-service-code="donga_kor"] .dau-logo-name { font-size: 16px; } } @media (max-width: 100%) { html[data-service-code="donga_kor"] .dau-logos { grid-template-columns: 1fr; } } /* 연구기관 — 이름 카드 그리드 (링크 있으면 아웃링크 아이콘) */ html[data-service-code="donga_kor"] .dau-rinst { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } html[data-service-code="donga_kor"] .dau-rinst-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 66px; padding: 20px 24px; background: transparent; border: 1px solid #e7ecf3; text-decoration: none; text-align: left; transition: border-color 0.15s; } html[data-service-code="donga_kor"] a.dau-rinst-item:hover { border-color: #003265; } html[data-service-code="donga_kor"] .dau-rinst-name { font-size: 18px; font-weight: 700; color: #1a1a1a; line-height: 1.4; } html[data-service-code="donga_kor"] .dau-rinst-ico { flex: none; width: 20px; height: 20px; background-color: #b6bcc7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") center/contain no-repeat; transition: background-color 0.15s; } html[data-service-code="donga_kor"] a.dau-rinst-item:hover .dau-rinst-ico { background-color: #003265; } html[data-service-code="donga_kor"] .dau-rinst-item.is-plain .dau-rinst-name { color: #6b7280; font-weight: 600; } @media (max-width: 1100px) { html[data-service-code="donga_kor"] .dau-rinst { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-rinst { grid-template-columns: repeat(2, 1fr); } html[data-service-code="donga_kor"] .dau-rinst-name { font-size: 15px; } } @media (max-width: 100%) { html[data-service-code="donga_kor"] .dau-rinst { grid-template-columns: 1fr; } } /* 대학기구(조직도) — 총장→그룹→단위→하위부서 전부 연결선 트리 */ html[data-service-code="donga_kor"] .dau-otree { list-style: none; margin: 0; padding: 0; } html[data-service-code="donga_kor"] .dau-otree ul { list-style: none; margin: 0; padding-left: 30px; } html[data-service-code="donga_kor"] .dau-otree ul li { position: relative; padding: 8px 0 0 24px; } html[data-service-code="donga_kor"] .dau-otree ul li::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; border-left: 1px solid #c9d6e8; } html[data-service-code="donga_kor"] .dau-otree ul li:last-child::before { height: 26px; } html[data-service-code="donga_kor"] .dau-otree ul li::after { content: ""; position: absolute; left: 0; top: 26px; width: 18px; border-top: 1px solid #c9d6e8; } html[data-service-code="donga_kor"] .dau-otree .node { display: inline-block; padding: 9px 17px; border: 1px solid #dbe2ec; background: #fff; color: #1a2b45; font-size: 15px; line-height: 1.35; } html[data-service-code="donga_kor"] .dau-otree .node-root { background: #003265; border-color: #003265; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 2px; padding: 12px 34px; } html[data-service-code="donga_kor"] .dau-otree .node-grp { background: #eef2f8; border-color: #c9d6e8; color: #003265; font-weight: 700; font-size: 16px; } html[data-service-code="donga_kor"] .dau-otree .node-unit { font-weight: 700; color: #1a2b45; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-otree ul { padding-left: 18px; } html[data-service-code="donga_kor"] .dau-otree ul li { padding: 7px 0 0 20px; } html[data-service-code="donga_kor"] .dau-otree .node { font-size: 14px; padding: 8px 12px; } html[data-service-code="donga_kor"] .dau-otree .node-root { font-size: 16px; padding: 10px 22px; } } /* 대학기구 — 총장 배너 + 부문 탭(6) + 단위 미니트리 그리드 */ html[data-service-code="donga_kor"] .dau-org2-ceo { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 50%; box-sizing: border-box; margin: 0 auto 4px; padding: 0; background: linear-gradient(135deg, #013a78, #002a57); color: #fff; font-size: 20px; font-weight: 800; letter-spacing: 3px; text-align: center; } html[data-service-code="donga_kor"] .dau-org2-stem { width: 2px; height: 70px; margin: 0 auto; background: #c2cfe2; position: relative; z-index: 1; } html[data-service-code="donga_kor"] .dau-org2-branch { position: relative; display: flex; width: 100%; margin: -25px auto 0; box-sizing: border-box; } html[data-service-code="donga_kor"] .dau-org2-branch::before { content: ""; position: absolute; top: 50%; left: 442px; right: 200px; height: 1px; background: #c2cfe2; transform: translateY(-50%); z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-stem::before { content: ""; position: absolute; top: 0; left: 50%; width: 15px; height: 15px; border-radius: 50%; background: #f4c01e; transform: translate(-50%, -50%); z-index: 2; } html[data-service-code="donga_kor"] .dau-org2-aux { position: relative; z-index: 1; box-sizing: border-box; width: 200px; text-align: center; background: #3d4a5c; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; padding: 13px 16px; border-radius: 999px; white-space: nowrap; } html[data-service-code="donga_kor"] .dau-org2-aux--left::after { content: ""; position: absolute; top: 50%; right: -5px; width: 9px; height: 9px; border-radius: 50%; background: #ee2a7b; transform: translateY(-50%); z-index: 3; } html[data-service-code="donga_kor"] .dau-org2-aux--right::before { content: ""; position: absolute; top: 50%; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: #ee2a7b; transform: translateY(-50%); z-index: 3; } html[data-service-code="donga_kor"] .dau-org2-stem2 { width: 2px; height: 56px; margin: -25px auto 0; background: #c2cfe2; position: relative; z-index: 1; } html[data-service-code="donga_kor"] .dau-org2-sec { position: relative; display: block; box-sizing: border-box; width: 200px; text-align: center; background: #3d4a5c; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; padding: 13px 16px; border-radius: 999px; } html[data-service-code="donga_kor"] .dau-org2-stem3 { width: 2px; height: 26px; margin: 0 auto 14px; background: #c2cfe2; } html[data-service-code="donga_kor"] .dau-org2-grid { position: relative; display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: 44px; row-gap: 14px; } html[data-service-code="donga_kor"] .dau-org2-cell { position: relative; box-sizing: border-box; width: 200px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #c8d0dc; border-radius: 999px; color: #2a2f3a; font-size: 14px; font-weight: 600; padding: 13px 16px; text-align: center; line-height: 1.35; } html[data-service-code="donga_kor"] .dau-org2-subrow { position: relative; display: grid; grid-template-columns: repeat(2, max-content); column-gap: 40px; align-self: flex-start; margin: 36px 0 0 -120px; } html[data-service-code="donga_kor"] .dau-org2-subrow::after { content: ""; position: absolute; top: -36px; left: 50%; width: 2px; height: 20px; background: #c2cfe2; transform: translateX(-50%); } html[data-service-code="donga_kor"] .dau-org2-subrow::before { content: ""; position: absolute; top: -16px; left: 100px; right: 100px; height: 2px; background: #c2cfe2; } html[data-service-code="donga_kor"] .dau-org2-subpill { position: relative; box-sizing: border-box; width: 200px; text-align: center; background: #f4f6f9; color: #013a78; font-size: 14px; font-weight: 600; padding: 13px 16px; border-radius: 999px; white-space: nowrap; } html[data-service-code="donga_kor"] .dau-org2-l3 { position: relative; width: 100%; margin: 40px auto 0; min-height: 380px; } html[data-service-code="donga_kor"] .dau-org2-l3::before { content: ""; position: absolute; top: -60px; bottom: 0; left: 50%; width: 2px; background: #c2cfe2; transform: translateX(-50%); z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-l3-left { position: relative; flex: 1 1 50%; display: flex; flex-direction: column; align-items: flex-end; } html[data-service-code="donga_kor"] .dau-org2-staffrow { position: absolute; top: 0; right: calc(50% + 108px); display: flex; align-items: center; gap: 6px; } html[data-service-code="donga_kor"] .dau-org2-staff { position: relative; z-index: 1; background: #fff; border: 1px solid #c8d0dc; border-radius: 999px; color: #2a2f3a; font-size: 14px; font-weight: 600; padding: 10px 12px; white-space: nowrap; } html[data-service-code="donga_kor"] .dau-org2-vp { position: relative; z-index: 1; box-sizing: border-box; width: 200px; text-align: center; background: #3d4a5c; color: #fff; font-size: 15px; font-weight: 700; padding: 13px 16px; border-radius: 999px; white-space: nowrap; } html[data-service-code="donga_kor"] .dau-org2-vp--c { position: absolute; left: 50%; top: 0; transform: translateX(-50%); } html[data-service-code="donga_kor"] .dau-org2-edurow { position: absolute; top: 84px; left: 10px; display: grid; grid-template-columns: repeat(2, max-content); gap: 10px; } html[data-service-code="donga_kor"] .dau-org2-edu { box-sizing: border-box; width: 200px; background: #f4f6f9; color: #013a78; border-radius: 999px; font-size: 14px; font-weight: 600; padding: 13px 16px; white-space: nowrap; text-align: center; } html[data-service-code="donga_kor"] .dau-org2-l3-right { position: absolute; top: 0; right: 0; display: flex; gap: 28px; align-items: center; } html[data-service-code="donga_kor"] .dau-org2-l3::after { content: ""; position: absolute; top: -60px; left: 50%; right: 100px; height: 2px; background: #c2cfe2; z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-l3-right .dau-org2-vp::after { content: ""; position: absolute; top: -60px; left: 50%; width: 2px; height: 57px; background: #c2cfe2; transform: translateX(-50%); z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-staffrow::before { content: ""; position: absolute; top: 50%; left: 0; right: -8px; height: 2px; background: #c2cfe2; transform: translateY(-50%); z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-staff--edu::after { content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: 34px; background: #c2cfe2; transform: translateX(-50%); z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-edurow::before { content: ""; position: absolute; top: -16px; left: 100px; right: 100px; height: 2px; background: #c2cfe2; z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-edu { position: relative; } html[data-service-code="donga_kor"] .dau-org2-edu::before { content: ""; position: absolute; top: -16px; left: 50%; width: 2px; height: 16px; background: #c2cfe2; transform: translateX(-50%); z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-vp--c::before { content: ""; position: absolute; top: 0; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #2f6fe0; transform: translate(-50%, -50%); z-index: 3; } html[data-service-code="donga_kor"] .dau-org2-l3-right .dau-org2-vp::before { content: ""; position: absolute; top: 0; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #2f6fe0; transform: translate(-50%, -50%); z-index: 3; } html[data-service-code="donga_kor"] .dau-org2-subpill::before { content: ""; position: absolute; top: -16px; left: 50%; width: 2px; height: 16px; background: #c2cfe2; transform: translateX(-50%); } html[data-service-code="donga_kor"] .dau-org2-link { position: relative; cursor: pointer; text-decoration: none; transition: transform 0.25s ease; } html[data-service-code="donga_kor"] .dau-org2-link { transition: box-shadow 0.2s ease, background 0.2s ease; } html[data-service-code="donga_kor"] .dau-org2-link:hover { box-shadow: 0 4px 14px rgba(1, 58, 120, 0.28); z-index: 5; } html[data-service-code="donga_kor"] .dau-org2-aux, html[data-service-code="donga_kor"] .dau-org2-sec, html[data-service-code="donga_kor"] .dau-org2-vp, html[data-service-code="donga_kor"] .dau-org2-cell, html[data-service-code="donga_kor"] .dau-org2-edu, html[data-service-code="donga_kor"] .dau-org2-subpill { min-height: 48px; display: flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; } html[data-service-code="donga_kor"] .dau-org2-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 8px 0 16px; } html[data-service-code="donga_kor"] .dau-org2-canvas { position: relative; margin: 0 auto; } html[data-service-code="donga_kor"] .dau-org2-l4 { position: relative; display: flex; width: max-content; justify-content: center; gap: 12px; margin: 40px auto 0; } html[data-service-code="donga_kor"] .dau-extlink { display: inline-block; width: 13px; height: 13px; margin-left: 6px; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E"); } html[data-service-code="donga_kor"] .dau-extlink--w { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E"); } html[data-service-code="donga_kor"] .dau-org2-l4::before { content: ""; position: absolute; top: -40px; left: 100px; right: 100px; height: 2px; background: #c2cfe2; z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-l4pill::after { content: ""; position: absolute; top: -40px; left: 50%; width: 2px; height: 40px; background: #c2cfe2; transform: translateX(-50%); z-index: 0; } html[data-service-code="donga_kor"] .dau-org3-radio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } html[data-service-code="donga_kor"] label.dau-org2-l4pill { cursor: pointer; } html[data-service-code="donga_kor"] .dau-org3-panels { margin: 40px auto 0; } html[data-service-code="donga_kor"] .dau-org3-panel { display: none; } html[data-service-code="donga_kor"] #dau-org3-1:checked ~ .dau-org3-panels > .dau-org3-panel:nth-child(1) { display: block; } html[data-service-code="donga_kor"] #dau-org3-2:checked ~ .dau-org3-panels > .dau-org3-panel:nth-child(2) { display: block; } html[data-service-code="donga_kor"] #dau-org3-3:checked ~ .dau-org3-panels > .dau-org3-panel:nth-child(3) { display: block; } html[data-service-code="donga_kor"] #dau-org3-4:checked ~ .dau-org3-panels > .dau-org3-panel:nth-child(4) { display: block; } html[data-service-code="donga_kor"] #dau-org3-5:checked ~ .dau-org3-panels > .dau-org3-panel:nth-child(5) { display: block; } html[data-service-code="donga_kor"] #dau-org3-6:checked ~ .dau-org3-panels > .dau-org3-panel:nth-child(6) { display: block; } html[data-service-code="donga_kor"] #dau-org3-1:checked ~ .dau-org2-l4 > .dau-org2-l4pill:nth-child(1), html[data-service-code="donga_kor"] #dau-org3-2:checked ~ .dau-org2-l4 > .dau-org2-l4pill:nth-child(2), html[data-service-code="donga_kor"] #dau-org3-3:checked ~ .dau-org2-l4 > .dau-org2-l4pill:nth-child(3), html[data-service-code="donga_kor"] #dau-org3-4:checked ~ .dau-org2-l4 > .dau-org2-l4pill:nth-child(4), html[data-service-code="donga_kor"] #dau-org3-5:checked ~ .dau-org2-l4 > .dau-org2-l4pill:nth-child(5), html[data-service-code="donga_kor"] #dau-org3-6:checked ~ .dau-org2-l4 > .dau-org2-l4pill:nth-child(6) { box-shadow: 0 0 0 3px #f4c01e; } html[data-service-code="donga_kor"] .dau-tab-tail { display: none; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid #0072bc; z-index: 4; filter: drop-shadow(0 1.5px 0 #f4c01e) drop-shadow(1.5px 0.5px 0 #f4c01e) drop-shadow(-1.5px 0.5px 0 #f4c01e); } html[data-service-code="donga_kor"] .dau-org2-l4pill:nth-child(4) .dau-tab-tail { border-top-color: #2f9bdc; } html[data-service-code="donga_kor"] .dau-org2-l4pill:nth-child(5) .dau-tab-tail { border-top-color: #6b46c9; } html[data-service-code="donga_kor"] .dau-org2-l4pill:nth-child(6) .dau-tab-tail { border-top-color: #ee2a7b; } html[data-service-code="donga_kor"] #dau-org3-1:checked ~ .dau-org2-l4 > .dau-org2-l4pill:nth-child(1) .dau-tab-tail, html[data-service-code="donga_kor"] #dau-org3-2:checked ~ .dau-org2-l4 > .dau-org2-l4pill:nth-child(2) .dau-tab-tail, html[data-service-code="donga_kor"] #dau-org3-3:checked ~ .dau-org2-l4 > .dau-org2-l4pill:nth-child(3) .dau-tab-tail, html[data-service-code="donga_kor"] #dau-org3-4:checked ~ .dau-org2-l4 > .dau-org2-l4pill:nth-child(4) .dau-tab-tail, html[data-service-code="donga_kor"] #dau-org3-5:checked ~ .dau-org2-l4 > .dau-org2-l4pill:nth-child(5) .dau-tab-tail, html[data-service-code="donga_kor"] #dau-org3-6:checked ~ .dau-org2-l4 > .dau-org2-l4pill:nth-child(6) .dau-tab-tail { display: block; } html[data-service-code="donga_kor"] .dau-org3-row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; } html[data-service-code="donga_kor"] .dau-org3-dept { box-sizing: border-box; width: 200px; min-height: 48px; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid #013a78; border-radius: 999px; color: #013a78; font-weight: 700; font-size: 15px; } html[data-service-code="donga_kor"] .dau-org3-teams { display: flex; gap: 10px; flex-wrap: wrap; } html[data-service-code="donga_kor"] .dau-org3-team { box-sizing: border-box; min-width: 180px; min-height: 46px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #c8d0dc; border-radius: 8px; color: #2a2f3a; font-size: 14px; font-weight: 600; padding: 0 14px; } html[data-service-code="donga_kor"] .dau-org3-subrow2 { position: relative; display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 8px 216px; } html[data-service-code="donga_kor"] .dau-org3-subrow2.dau-org3-line { margin-left: 232px; } html[data-service-code="donga_kor"] .dau-org3-subrow2.dau-org3-sub-r3 { margin-left: 596px; } html[data-service-code="donga_kor"] .dau-org3-subrow2.dau-org3-line.dau-org3-line--tall::before { height: 85px; top: -60px; } html[data-service-code="donga_kor"] .dau-org3-subrow2.dau-org3-line::before { content: ""; position: absolute; left: -192px; top: -8px; width: 192px; height: 30px; border-left: 1.5px dashed #aab2c0; border-bottom: 1.5px dashed #aab2c0; z-index: 0; } html[data-service-code="donga_kor"] .dau-org3-aux2 { box-sizing: border-box; min-width: 180px; min-height: 46px; display: flex; align-items: center; justify-content: center; background: #f4f6f9; border-radius: 8px; color: #5a6270; font-size: 14px; padding: 0 14px; } html[data-service-code="donga_kor"] .dau-org3-empty { padding: 36px; text-align: center; color: #999; font-size: 14px; } @media (min-width: 769px) { html[data-service-code="donga_kor"] .dau-org2-l4 { width: max-content !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; gap: 12px !important; } html[data-service-code="donga_kor"] .dau-org2-l4pill { width: 200px !important; flex: 0 0 200px !important; max-width: none !important; padding: 0 !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; } } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-org2-scroll { overflow: visible; } html[data-service-code="donga_kor"] .dau-org2-canvas { width: 100%; } html[data-service-code="donga_kor"] .dau-org2-branch, html[data-service-code="donga_kor"] .dau-org2-l2, html[data-service-code="donga_kor"] .dau-org2-half-l, html[data-service-code="donga_kor"] .dau-org2-half-r, html[data-service-code="donga_kor"] .dau-org2-bh, html[data-service-code="donga_kor"] .dau-org2-grid, html[data-service-code="donga_kor"] .dau-org2-subrow, html[data-service-code="donga_kor"] .dau-org2-l3, html[data-service-code="donga_kor"] .dau-org2-l3sub, html[data-service-code="donga_kor"] .dau-org2-kgwrap, html[data-service-code="donga_kor"] .dau-org2-kgrid, html[data-service-code="donga_kor"] .dau-org2-ksubrow, html[data-service-code="donga_kor"] .dau-org2-l3-right, html[data-service-code="donga_kor"] .dau-org2-l4, html[data-service-code="donga_kor"] .dau-org3-panels, html[data-service-code="donga_kor"] .dau-org3-row, html[data-service-code="donga_kor"] .dau-org3-teams, html[data-service-code="donga_kor"] .dau-org3-subrow2 { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; margin: 0 auto; gap: 8px; position: static; } html[data-service-code="donga_kor"] .dau-org2-vp--c, html[data-service-code="donga_kor"] .dau-org2-staffrow, html[data-service-code="donga_kor"] .dau-org2-edurow, html[data-service-code="donga_kor"] .dau-org2-secwrap { position: static; width: 100%; left: auto; right: auto; top: auto; transform: none; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto; } html[data-service-code="donga_kor"] .dau-org2-aux, html[data-service-code="donga_kor"] .dau-org2-sec, html[data-service-code="donga_kor"] .dau-org2-cell, html[data-service-code="donga_kor"] .dau-org2-edu, html[data-service-code="donga_kor"] .dau-org2-subpill, html[data-service-code="donga_kor"] .dau-org2-l4pill, html[data-service-code="donga_kor"] .dau-org3-dept, html[data-service-code="donga_kor"] .dau-org3-team, html[data-service-code="donga_kor"] .dau-org3-aux2 { width: 100%; max-width: 100%; flex: none; margin: 0 auto; } html[data-service-code="donga_kor"] .dau-org2-stem, html[data-service-code="donga_kor"] .dau-org2-stem2, html[data-service-code="donga_kor"] .dau-org2-stem3, html[data-service-code="donga_kor"] .dau-org2-secline, html[data-service-code="donga_kor"] .dau-org2-kstem, html[data-service-code="donga_kor"] .dau-org2-kline, html[data-service-code="donga_kor"] .dau-tab-tail, html[data-service-code="donga_kor"] .dau-org2-kempty { display: none; } html[data-service-code="donga_kor"] .dau-org2-branch::before, html[data-service-code="donga_kor"] .dau-org2-branch::after, html[data-service-code="donga_kor"] .dau-org2-l2::before, html[data-service-code="donga_kor"] .dau-org2-grid::before, html[data-service-code="donga_kor"] .dau-org2-cell::before, html[data-service-code="donga_kor"] .dau-org2-cell::after, html[data-service-code="donga_kor"] .dau-org2-aux--left::after, html[data-service-code="donga_kor"] .dau-org2-aux--right::before, html[data-service-code="donga_kor"] .dau-org2-sec::before, html[data-service-code="donga_kor"] .dau-org2-stem::before, html[data-service-code="donga_kor"] .dau-org2-subrow::before, html[data-service-code="donga_kor"] .dau-org2-subrow::after, html[data-service-code="donga_kor"] .dau-org2-subpill::before, html[data-service-code="donga_kor"] .dau-org2-l4::before, html[data-service-code="donga_kor"] .dau-org2-l4pill::before, html[data-service-code="donga_kor"] .dau-org2-l4pill::after, html[data-service-code="donga_kor"] .dau-org2-kgrid::before, html[data-service-code="donga_kor"] .dau-org2-ksubrow::before, html[data-service-code="donga_kor"] .dau-org2-kedu::before, html[data-service-code="donga_kor"] .dau-org2-l3::before, html[data-service-code="donga_kor"] .dau-org2-l3::after, html[data-service-code="donga_kor"] .dau-org3-subrow2::before { display: none; } html[data-service-code="donga_kor"] .dau-org2-ceo { width: 96px; height: 96px; } } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-org2-l4pill, html[data-service-code="donga_kor"] .dau-org2-cell, html[data-service-code="donga_kor"] .dau-org2-aux, html[data-service-code="donga_kor"] .dau-org2-sec, html[data-service-code="donga_kor"] .dau-org2-edu, html[data-service-code="donga_kor"] .dau-org2-subpill, html[data-service-code="donga_kor"] .dau-org3-dept, html[data-service-code="donga_kor"] .dau-org3-team, html[data-service-code="donga_kor"] .dau-org3-aux2 { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 46px; } html[data-service-code="donga_kor"] .dau-org2-half-r, html[data-service-code="donga_kor"] .dau-org2-l3sub, html[data-service-code="donga_kor"] .dau-org2-vp--c, html[data-service-code="donga_kor"] .dau-org2-l3-right, html[data-service-code="donga_kor"] .dau-org2-staffrow, html[data-service-code="donga_kor"] .dau-org2-edurow, html[data-service-code="donga_kor"] .dau-org2-secwrap, html[data-service-code="donga_kor"] .dau-org2-branch, html[data-service-code="donga_kor"] .dau-org2-l2, html[data-service-code="donga_kor"] .dau-org2-l3 { position: static !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; } } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-org2-kgrid, html[data-service-code="donga_kor"] .dau-org2-grid, html[data-service-code="donga_kor"] .dau-org2-ksubrow, html[data-service-code="donga_kor"] .dau-org2-subrow, html[data-service-code="donga_kor"] .dau-org2-edurow, html[data-service-code="donga_kor"] .dau-org2-staffrow, html[data-service-code="donga_kor"] .dau-org3-teams, html[data-service-code="donga_kor"] .dau-org3-subrow2 { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; margin-left: auto !important; margin-right: auto !important; } html[data-service-code="donga_kor"] .dau-org2-bh { width: 100% !important; align-items: center !important; } } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-sub-section, html[data-service-code="donga_kor"] .dau-org2-canvas { text-align: center; } html[data-service-code="donga_kor"] .dau-org2-ceo { margin: 0 auto 14px !important; } html[data-service-code="donga_kor"] .dau-org2-aux, html[data-service-code="donga_kor"] .dau-org2-sec, html[data-service-code="donga_kor"] .dau-org2-cell, html[data-service-code="donga_kor"] .dau-org2-edu, html[data-service-code="donga_kor"] .dau-org2-subpill, html[data-service-code="donga_kor"] .dau-org2-l4pill, html[data-service-code="donga_kor"] .dau-org2-vp, html[data-service-code="donga_kor"] .dau-org3-dept, html[data-service-code="donga_kor"] .dau-org3-team, html[data-service-code="donga_kor"] .dau-org3-aux2 { margin: 0 auto 12px !important; align-self: center !important; } html[data-service-code="donga_kor"] .dau-org2-l4, html[data-service-code="donga_kor"] .dau-org2-l2, html[data-service-code="donga_kor"] .dau-org2-branch, html[data-service-code="donga_kor"] .dau-org2-l3, html[data-service-code="donga_kor"] .dau-org2-l3sub, html[data-service-code="donga_kor"] .dau-org2-l3-right, html[data-service-code="donga_kor"] .dau-org2-half-l, html[data-service-code="donga_kor"] .dau-org2-half-r, html[data-service-code="donga_kor"] .dau-org2-grid, html[data-service-code="donga_kor"] .dau-org2-kgrid, html[data-service-code="donga_kor"] .dau-org2-ksubrow, html[data-service-code="donga_kor"] .dau-org2-subrow, html[data-service-code="donga_kor"] .dau-org2-edurow, html[data-service-code="donga_kor"] .dau-org2-staffrow, html[data-service-code="donga_kor"] .dau-org3-panels, html[data-service-code="donga_kor"] .dau-org3-row, html[data-service-code="donga_kor"] .dau-org3-teams, html[data-service-code="donga_kor"] .dau-org3-subrow2 { align-items: center !important; justify-content: center !important; gap: 12px !important; } html[data-service-code="donga_kor"] .dau-org3-row { margin-bottom: 16px !important; } } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-org2-half-l, html[data-service-code="donga_kor"] .dau-org2-half-r, html[data-service-code="donga_kor"] .dau-org2-bh, html[data-service-code="donga_kor"] .dau-org2-secwrap, html[data-service-code="donga_kor"] .dau-org2-gridwrap, html[data-service-code="donga_kor"] .dau-org2-kgwrap, html[data-service-code="donga_kor"] .dau-org2-l3sub, html[data-service-code="donga_kor"] .dau-org2-l3-right { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; } } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-org2-branch { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 2% !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; align-self: center !important; } html[data-service-code="donga_kor"] .dau-org2-bh { width: auto !important; flex: 0 1 auto !important; margin: 0 !important; } html[data-service-code="donga_kor"] .dau-org2-bh .dau-org2-aux { width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 0 8px !important; margin: 0 !important; } html[data-service-code="donga_kor"] .dau-org2-bh:first-child, html[data-service-code="donga_kor"] .dau-org2-bh:last-child { flex: 0 0 49% !important; width: 49% !important; justify-content: center !important; padding: 0 !important; } html[data-service-code="donga_kor"] .dau-org2-subrow { flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; } html[data-service-code="donga_kor"] .dau-org2-subpill { width: 49% !important; max-width: 49% !important; flex: 1 1 49% !important; margin: 0 !important; font-size: 13px !important; padding: 0 6px !important; } html[data-service-code="donga_kor"] .dau-org2-grid > .dau-org2-cell:nth-child(11), html[data-service-code="donga_kor"] .dau-org2-kgrid > .dau-org2-cell:nth-child(5) { position: relative !important; margin-bottom: 24px !important; } html[data-service-code="donga_kor"] .dau-org2-grid > .dau-org2-cell:nth-child(11)::after, html[data-service-code="donga_kor"] .dau-org2-kgrid > .dau-org2-cell:nth-child(5)::after { content: "" !important; display: block !important; position: absolute !important; bottom: -18px !important; left: 50% !important; top: auto !important; right: auto !important; width: 2px !important; height: 16px !important; background: #c2cfe2 !important; transform: translateX(-50%) !important; } html[data-service-code="donga_kor"] .dau-org2-l3-right .dau-org2-vp::after, html[data-service-code="donga_kor"] .dau-org2-l3-right .dau-org2-vp::before, html[data-service-code="donga_kor"] .dau-org2-vp--c::before, html[data-service-code="donga_kor"] .dau-org2-vp--c::after { display: none !important; } html[data-service-code="donga_kor"] .dau-org2-vp { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; margin: 0 auto 12px !important; } html[data-service-code="donga_kor"] .dau-org2-l4 { flex-direction: column !important; align-items: center !important; gap: 8px !important; width: 100% !important; } html[data-service-code="donga_kor"] .dau-org2-l4pill { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; padding: 0 !important; } html[data-service-code="donga_kor"] .dau-org3wrap { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; margin-top: 32px !important; } html[data-service-code="donga_kor"] .dau-org3-panel { margin-top: 18px !important; width: 100% !important; } html[data-service-code="donga_kor"] .dau-org2-l4 { display: contents !important; } html[data-service-code="donga_kor"] .dau-org3-panels { display: contents !important; } html[data-service-code="donga_kor"] .dau-org2-l4 > .dau-org2-l4pill:nth-child(1) { order: 1 !important; } html[data-service-code="donga_kor"] .dau-org3-panels > .dau-org3-panel:nth-child(1) { order: 2 !important; } html[data-service-code="donga_kor"] .dau-org2-l4 > .dau-org2-l4pill:nth-child(2) { order: 3 !important; } html[data-service-code="donga_kor"] .dau-org3-panels > .dau-org3-panel:nth-child(2) { order: 4 !important; } html[data-service-code="donga_kor"] .dau-org2-l4 > .dau-org2-l4pill:nth-child(3) { order: 5 !important; } html[data-service-code="donga_kor"] .dau-org3-panels > .dau-org3-panel:nth-child(3) { order: 6 !important; } html[data-service-code="donga_kor"] .dau-org2-l4 > .dau-org2-l4pill:nth-child(4) { order: 7 !important; } html[data-service-code="donga_kor"] .dau-org3-panels > .dau-org3-panel:nth-child(4) { order: 8 !important; } html[data-service-code="donga_kor"] .dau-org2-l4 > .dau-org2-l4pill:nth-child(5) { order: 9 !important; } html[data-service-code="donga_kor"] .dau-org3-panels > .dau-org3-panel:nth-child(5) { order: 10 !important; } html[data-service-code="donga_kor"] .dau-org2-l4 > .dau-org2-l4pill:nth-child(6) { order: 11 !important; } html[data-service-code="donga_kor"] .dau-org3-panels > .dau-org3-panel:nth-child(6) { order: 12 !important; } html[data-service-code="donga_kor"] .dau-org2-l4 > .dau-org2-l4pill:nth-child(7) { order: 13 !important; } html[data-service-code="donga_kor"] .dau-org2-grid { display: contents !important; } html[data-service-code="donga_kor"] .dau-org2-grid > .dau-org2-cell { order: 0 !important; } html[data-service-code="donga_kor"] .dau-org2-subrow { order: 1 !important; } html[data-service-code="donga_kor"] .dau-org2-grid > .dau-org2-cell:last-child { order: 2 !important; } html[data-service-code="donga_kor"] .dau-org2-l3 { display: flex !important; flex-direction: column !important; align-items: center !important; } html[data-service-code="donga_kor"] .dau-org2-l3-right { order: 0 !important; } html[data-service-code="donga_kor"] .dau-org2-vp--c { order: 1 !important; } html[data-service-code="donga_kor"] .dau-org2-l3sub { order: 2 !important; } html[data-service-code="donga_kor"] .dau-org2-kgwrap { display: flex !important; flex-direction: column !important; align-items: center !important; } html[data-service-code="donga_kor"] .dau-org2-kgrid { display: contents !important; } html[data-service-code="donga_kor"] .dau-org2-ksubrow { display: contents !important; } html[data-service-code="donga_kor"] .dau-org2-kgrid > .dau-org2-cell:nth-child(1), html[data-service-code="donga_kor"] .dau-org2-kgrid > .dau-org2-cell:nth-child(2), html[data-service-code="donga_kor"] .dau-org2-kgrid > .dau-org2-cell:nth-child(5) { order: 0 !important; } html[data-service-code="donga_kor"] .dau-org2-ksubrow .dau-org2-edu { order: 1 !important; } html[data-service-code="donga_kor"] .dau-org2-kgrid > .dau-org2-cell:nth-child(3), html[data-service-code="donga_kor"] .dau-org2-kgrid > .dau-org2-cell:nth-child(4) { order: 2 !important; } } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-org2-l2 { flex-direction: column !important; } html[data-service-code="donga_kor"] .dau-org2-half-r { order: -1 !important; } } html[data-service-code="donga_kor"] .dau-org2-l4pill { position: relative; box-sizing: border-box; width: 200px; flex: 0 0 200px; min-height: 48px; display: flex; align-items: center; justify-content: center; background: #3d4a5c; color: #fff; font-size: 15px; font-weight: 700; padding: 0; border-radius: 999px; white-space: nowrap; } html[data-service-code="donga_kor"] .dau-org2-l4pill::before { content: ""; position: absolute; top: 0; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: #f4c01e; transform: translate(-50%, -50%); z-index: 2; } html[data-service-code="donga_kor"] .dau-org2-l4 .dau-org2-l4pill:nth-child(-n+3) { background: #0072bc; } html[data-service-code="donga_kor"] .dau-org2-l4 .dau-org2-l4pill:nth-child(4) { background: #2f9bdc; } html[data-service-code="donga_kor"] .dau-org2-l4 .dau-org2-l4pill:nth-child(5) { background: #6b46c9; } html[data-service-code="donga_kor"] .dau-org2-l4 .dau-org2-l4pill:nth-child(6) { background: #ee2a7b; } html[data-service-code="donga_kor"] .dau-org2-l4 .dau-org2-l4pill:nth-child(7) { background: #26889e; } html[data-service-code="donga_kor"] .dau-org2-l3sub { position: absolute; top: 0; left: 120px; right: calc(50% + 100px); display: flex; align-items: flex-start; } html[data-service-code="donga_kor"] .dau-org2-kgwrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; } html[data-service-code="donga_kor"] .dau-org2-kline { flex: 1 1 auto; min-width: 48px; height: 2px; background: #c2cfe2; margin-top: 24px; } html[data-service-code="donga_kor"] .dau-org2-kgrid > .dau-org2-kedu { grid-column: 1 / -1; justify-self: center; } html[data-service-code="donga_kor"] .dau-org2-kgrid > .dau-org2-kedu::after { display: none; } html[data-service-code="donga_kor"] .dau-org2-kedu::before { content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: 30px; background: #c2cfe2; transform: translateX(-50%); z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-kstem { width: 2px; height: 22px; background: #c2cfe2; } html[data-service-code="donga_kor"] .dau-org2-kgrid { position: relative; display: grid; grid-template-columns: repeat(2, max-content); column-gap: 44px; row-gap: 14px; } html[data-service-code="donga_kor"] .dau-org2-kgrid::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; width: 2px; background: #c2cfe2; transform: translateX(-50%); z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-kgrid > .dau-org2-cell:nth-child(odd)::after { content: ""; position: absolute; top: 50%; right: -22px; width: 22px; height: 2px; background: #c2cfe2; transform: translateY(-50%); z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-kgrid > .dau-org2-cell:nth-child(even)::before { content: ""; position: absolute; top: 50%; left: -22px; width: 22px; height: 2px; background: #c2cfe2; transform: translateY(-50%); z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-kempty { width: 200px; } html[data-service-code="donga_kor"] .dau-org2-ksubrow { position: relative; align-self: flex-start; display: grid; grid-template-columns: repeat(2, max-content); column-gap: 56px; row-gap: 12px; margin-top: 50px; } html[data-service-code="donga_kor"] .dau-org2-ksubrow::before { content: ""; position: absolute; top: -20px; left: 100px; right: 100px; height: 2px; background: #c2cfe2; z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-ksubrow .dau-org2-edu { position: relative; } html[data-service-code="donga_kor"] .dau-org2-ksubrow .dau-org2-edu:nth-child(-n+2)::before { content: ""; position: absolute; top: -20px; left: 50%; width: 2px; height: 20px; background: #c2cfe2; transform: translateX(-50%); z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-l2 { position: relative; display: flex; align-items: flex-start; width: 100%; margin: 22px auto 0; } html[data-service-code="donga_kor"] .dau-org2-l2::before { content: ""; position: absolute; top: -50px; bottom: 20px; left: 50%; width: 2px; background: #c2cfe2; transform: translateX(-50%); z-index: 0; } html[data-service-code="donga_kor"] .dau-org2-gridwrap { flex: 0 0 auto; } html[data-service-code="donga_kor"] .dau-org2-secwrap { flex: 1 1 auto; display: flex; align-items: center; min-width: 220px; padding-top: 14px; } html[data-service-code="donga_kor"] .dau-org2-secline { flex: 1 1 auto; height: 1px; background: #c2cfe2; } html[data-service-code="donga_kor"] .dau-org2-sec::before { content: ""; position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #2f6fe0; transform: translateY(-50%); z-index: 2; } html[data-service-code="donga_kor"] .dau-org2-bh { flex: 1 1 50%; display: flex; } html[data-service-code="donga_kor"] .dau-org2-bh:first-child { justify-content: flex-start; padding-left: 242px; } html[data-service-code="donga_kor"] .dau-org2-bh:last-child { justify-content: flex-end; } html[data-service-code="donga_kor"] .dau-org2-half-l { display: flex; flex-direction: column; align-items: flex-start; margin-left: 120px; } html[data-service-code="donga_kor"] .dau-org2-half-r { flex: 1 1 50%; display: flex; justify-content: flex-end; align-items: center; } html[data-service-code="donga_kor"] .dau-org2-grid::before { content: ""; position: absolute; top: 22px; bottom: 22px; left: 50%; width: 2px; background: #c2cfe2; transform: translateX(-50%); } html[data-service-code="donga_kor"] .dau-org2-cell:nth-child(odd)::after { content: ""; position: absolute; top: 50%; right: -22px; width: 22px; height: 2px; background: #c2cfe2; transform: translateY(-50%); } html[data-service-code="donga_kor"] .dau-org2-cell:nth-child(even)::before { content: ""; position: absolute; top: 50%; left: -22px; width: 22px; height: 2px; background: #c2cfe2; transform: translateY(-50%); } /* 다전공 개요 6탭(dau-tab-mm) — 활성 탭 강조 + 패널 표시 (org 6탭 패턴 동일) */ /* 다전공 개요 탭 바 — 한 줄 4개(25%) 줄바꿈 (curriculum dau-ctab 와 동일), 모바일 3개(33.33%) */ html[data-service-code="donga_kor"] [data-v^="mm-overview"] .dau-tab-bar { flex-wrap: wrap; } html[data-service-code="donga_kor"] [data-v^="mm-overview"] .dau-tab-bar .dau-tab { flex: 0 0 25%; min-width: 25%; } @media (max-width: 768px) { html[data-service-code="donga_kor"] [data-v^="mm-overview"] .dau-tab-bar .dau-tab { flex-basis: 33.33%; min-width: 33.33%; } } /* 글로컬 Field 연합전공 5탭(dau-tab-fm) — 활성 탭 강조 + 패널 표시 (dau-tab-mm 패턴 동일) */ /* Field 탭 바 — 데스크톱 한 줄 5개(기본 flex:1), 모바일 줄바꿈 3개(33.33%) */ html[data-service-code="donga_kor"] [data-v^="fm-overview"] .dau-tab-bar { flex-wrap: wrap; } @media (max-width: 768px) { html[data-service-code="donga_kor"] [data-v^="fm-overview"] .dau-tab-bar .dau-tab { flex: 0 0 33.33%; min-width: 33.33%; } } /* 회사형 top-down 조직도 (탭 내부) — 부문→단위→하위부서, 연결선 */ html[data-service-code="donga_kor"] .dau-octree-wrap { width: 100%; overflow-x: auto; padding-bottom: 10px; } html[data-service-code="donga_kor"] .dau-octree, html[data-service-code="donga_kor"] .dau-octree ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; } html[data-service-code="donga_kor"] .dau-octree ul { padding-top: 26px; position: relative; } html[data-service-code="donga_kor"] .dau-octree li { position: relative; padding: 26px 8px 0; text-align: center; } html[data-service-code="donga_kor"] .dau-octree li::before, html[data-service-code="donga_kor"] .dau-octree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 26px; border-top: 1px solid #c2cfe2; } html[data-service-code="donga_kor"] .dau-octree li::after { right: auto; left: 50%; border-left: 1px solid #c2cfe2; } html[data-service-code="donga_kor"] .dau-octree li:only-child::before, html[data-service-code="donga_kor"] .dau-octree li:only-child::after { display: none; } html[data-service-code="donga_kor"] .dau-octree li:only-child { padding-top: 0; } html[data-service-code="donga_kor"] .dau-octree li:first-child::before, html[data-service-code="donga_kor"] .dau-octree li:last-child::after { border: 0 none; } html[data-service-code="donga_kor"] .dau-octree li:last-child::before { border-right: 1px solid #c2cfe2; } html[data-service-code="donga_kor"] .dau-octree ul ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 26px; border-left: 1px solid #c2cfe2; } html[data-service-code="donga_kor"] .dau-octree .node { display: inline-block; max-width: 168px; padding: 10px 16px; border: 1px solid #cdd8e8; background: #fff; color: #1a2b45; font-size: 14px; line-height: 1.35; } html[data-service-code="donga_kor"] .dau-octree .node-grp { background: linear-gradient(135deg, #013a78, #002a57); border-color: #002a57; color: #fff; font-size: 16px; font-weight: 800; max-width: none; } html[data-service-code="donga_kor"] .dau-octree .node-unit { background: #eef2f8; border-color: #c9d6e8; color: #003265; font-weight: 700; font-size: 15px; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-octree .node { font-size: 13px; padding: 8px 12px; max-width: 140px; } } /* 총장 인사말 — 좌(따옴표+슬로건 제목+본문) / 우(인물 컷아웃 사진 + 도트 데코) */ html[data-service-code="donga_kor"] .dau-pres { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; } html[data-service-code="donga_kor"] .dau-pres-quote { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 120px; line-height: 0.8; color: #4473EF; font-weight: 700; margin: 0 0 -24px; padding: 0; } html[data-service-code="donga_kor"] .dau-pres-h { font-size: 36px; font-weight: 800; line-height: 1.4;} html[data-service-code="donga_kor"] .dau-pres-h::before, html[data-service-code="donga_kor"] .dau-pres-h::after { display: none; } html[data-service-code="donga_kor"] .dau-pres-text p { margin: 0 0 16px; font-size: 18px; line-height: 1.85; text-align: justify; } html[data-service-code="donga_kor"] .dau-pres-sign { margin: 26px 0 0; text-align: left; } html[data-service-code="donga_kor"] .dau-pres-sign .role { font-size: 15px; color: #6b7280; margin-right: 10px; } html[data-service-code="donga_kor"] .dau-pres-sign .name { font-size: 22px; font-weight: 800; color: #003265; letter-spacing: 4px; } html[data-service-code="donga_kor"] .dau-pres-sign::before, html[data-service-code="donga_kor"] .dau-pres-sign::after, html[data-service-code="donga_kor"] .dau-pres-sign .role::before, html[data-service-code="donga_kor"] .dau-pres-sign .role::after, html[data-service-code="donga_kor"] .dau-pres-sign .name::before, html[data-service-code="donga_kor"] .dau-pres-sign .name::after { display: none; content: none; } html[data-service-code="donga_kor"] .dau-pres-photo { position: relative; min-height: 420px; display: flex; align-items: flex-end; justify-content: center; } html[data-service-code="donga_kor"] .dau-pres-photo::before { content: ""; position: absolute; top: -80px; right: -8px; width: 500px; height: 500px; background: url("/resources/donga_kor/dot.png") right top / contain no-repeat; z-index: 0; } html[data-service-code="donga_kor"] .dau-pres-photo::after { content: ""; position: absolute; bottom: -8px; left: -8px; width: 200px; height: 200px; background: url("/resources/donga_kor/dot.png") left bottom / contain no-repeat; z-index: 0; } html[data-service-code="donga_kor"] .dau-pres-photo img { position: relative; z-index: 1; max-width: 100%; max-height: 540px; height: auto; object-fit: contain; display: block; } @media (max-width: 900px) { html[data-service-code="donga_kor"] .dau-pres { grid-template-columns: 1fr; gap: 20px; } html[data-service-code="donga_kor"] .dau-pres-photo { min-height: 0; } html[data-service-code="donga_kor"] .dau-pres-photo img { max-height: 380px; } html[data-service-code="donga_kor"] .dau-pres-photo::before { top: -40px; right: -4px; width: 240px; height: 240px; } html[data-service-code="donga_kor"] .dau-pres-photo::after { bottom: -4px; left: -4px; width: 110px; height: 110px; } html[data-service-code="donga_kor"] .dau-pres-text p { font-size: 15px; } html[data-service-code="donga_kor"] .dau-pres-h { font-size: 20px; } html[data-service-code="donga_kor"] .dau-pres-quote { font-size: 48px; } } /* 총장 인사말 — 5대 과제(번호 + 제목 + 본문) */ html[data-service-code="donga_kor"] .dau-ptasks { margin-top: 56px; border-top: 2px solid #003265; } html[data-service-code="donga_kor"] .dau-ptasks-h { margin: 28px 0 8px; font-size: 24px; font-weight: 800; color: #1a1a1a; } html[data-service-code="donga_kor"] .dau-ptasks-h::before, html[data-service-code="donga_kor"] .dau-ptasks-h::after { display: none; } html[data-service-code="donga_kor"] .dau-ptask { display: grid; grid-template-columns: 96px 1fr; gap: 30px; padding: 34px 0; border-bottom: 1px solid #eaedf2; align-items: start; } html[data-service-code="donga_kor"] .dau-ptask-no { font-size: 46px; font-weight: 800; line-height: 1; color: #4473ef; } html[data-service-code="donga_kor"] .dau-ptask-tit { margin: 0 0 14px; font-size: 18px; font-weight: 700; line-height: 1.45; color: #003265; } html[data-service-code="donga_kor"] .dau-ptask-body { margin: 0; font-size: 18px; line-height: 1.9; color: #444; text-align: justify; } /* 총장 인사말 — 맺음말 + 서명 */ html[data-service-code="donga_kor"] .dau-pres-closing { margin-top: 48px; } html[data-service-code="donga_kor"] .dau-pres-closing p { margin: 0 0 16px; font-size: 18px; line-height: 1.85; color: #444; text-align: justify; } html[data-service-code="donga_kor"] .dau-pres-rule { border: 0; border-top: 1px solid #d8dde6; margin: 36px 0 24px; } html[data-service-code="donga_kor"] .dau-pres-closing p.dau-pres-signoff { margin: 0; text-align: right; font-size: 20px; font-weight: 700; color: #333; } html[data-service-code="donga_kor"] .dau-pres-closing .dau-pres-signoff .name { margin-left: 14px; font-size: 24px; letter-spacing: 6px; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-pres-quote { margin: 0 0 -10px; } html[data-service-code="donga_kor"] .dau-pres-closing p { font-size: 15px; } html[data-service-code="donga_kor"] .dau-pres-closing p.dau-pres-signoff { font-size: 16px; } html[data-service-code="donga_kor"] .dau-pres-closing .dau-pres-signoff .name { font-size: 19px; letter-spacing: 4px; } html[data-service-code="donga_kor"] .dau-ptasks-h { font-size: 18px; margin-bottom: 0; padding-bottom: 0;} html[data-service-code="donga_kor"] .dau-ptask { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; } html[data-service-code="donga_kor"] .dau-ptask-no { font-size: 24px; } html[data-service-code="donga_kor"] .dau-ptask-tit { font-size: 17px; } html[data-service-code="donga_kor"] .dau-ptask-body { font-size: 15px; } } /* ===== /about/intro/vision — 교육목표 및 인재상 ===== */ html[data-service-code="donga_kor"] .dau-vis-mt { margin-top: 96px; } /* 1. 건학이념/교육목적/교육목표 — 블록 헤더(서수 + 그라데이션 헤어라인) + 번호 row */ html[data-service-code="donga_kor"] .dau-vis-blk + .dau-vis-blk { margin-top: 46px; } html[data-service-code="donga_kor"] .dau-vis-blkhead { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; } html[data-service-code="donga_kor"] .dau-vis-blkhead .num { font-size: 24px; font-weight: 800; line-height: 1; color: #003265; } html[data-service-code="donga_kor"] .dau-vis-blkhead .tit { font-size: 18px; font-weight: 800; color: #1a1a1a; letter-spacing: -0.2px; } html[data-service-code="donga_kor"] .dau-vis-blkhead .cap { font-size: 15px; font-weight: 500; color: #8a93a3; } html[data-service-code="donga_kor"] .dau-vis-blkhead .ln { flex: 1; height: 1px; background: linear-gradient(90deg, #d4ddec, rgba(212, 221, 236, 0)); } html[data-service-code="donga_kor"] .dau-vis-goals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } html[data-service-code="donga_kor"] .dau-vis-goals.dau-vis-goals--1 { grid-template-columns: 1fr; } html[data-service-code="donga_kor"] .dau-vis-goal { position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px; padding: 20px 30px; background: #f7fbff; border: 1px solid #eef1f6; border-radius: 14px; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s; } html[data-service-code="donga_kor"] .dau-vis-goal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #4473ef, #003265); transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease; } html[data-service-code="donga_kor"] .dau-vis-goal:hover { background: #fff; border-color: #d9e2f1; box-shadow: 0 10px 26px rgba(0, 50, 101, 0.08); transform: translateY(-2px); } html[data-service-code="donga_kor"] .dau-vis-goal:hover::before { transform: scaleY(1); } html[data-service-code="donga_kor"] .dau-vis-goal-no { flex: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #eaf1ff, #fff); border: 1px solid #cdd8ea; font-family: Georgia, serif; font-size: 16px; font-weight: 800; color: #4473ef; transition: background 0.2s, border-color 0.2s, color 0.2s; } html[data-service-code="donga_kor"] .dau-vis-goal:hover .dau-vis-goal-no { background: linear-gradient(135deg, #003265, #1565c0); border-color: #003265; color: #fff; } html[data-service-code="donga_kor"] .dau-vis-goal-tit { font-size: 17px; font-weight: 700; color: #1a1a1a; line-height: 1.45; } /* 건학이념 — 원형 허브 + 점선 커넥터 + 중앙정렬 박스 (Image#42) */ html[data-service-code="donga_kor"] .dau-vis-found { display: flex; flex-direction: column; align-items: center; } html[data-service-code="donga_kor"] .dau-vis-found-circle { position: relative; width: 190px; height: 190px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 38% 32%, #7088f6, #4a57df); color: #fff; font-size: 19px; font-weight: 800; line-height: 1.4; box-shadow: 0 0 0 13px rgba(108, 138, 246, 0.26), 0 0 0 27px rgba(108, 138, 246, 0.12); margin-bottom: 58px; } html[data-service-code="donga_kor"] .dau-vis-found-circle::after { content: ""; position: absolute; left: 50%; top: calc(100% + 28px); transform: translateX(-50%); height: 30px; border-left: 2px dotted #9aa6c4; } html[data-service-code="donga_kor"] .dau-vis-found-list { position: relative; width: 100%; margin: 0; padding: 0; list-style: none; } html[data-service-code="donga_kor"] .dau-vis-found-list li { position: relative; text-align: center; padding: 24px; border: 1px solid #e3e7ee; background: #fff; font-size: 17px; font-weight: 500; color: #333; } html[data-service-code="donga_kor"] .dau-vis-found-list li + li { margin-top: 14px; } html[data-service-code="donga_kor"] .dau-vis-found-list li + li::before { content: ""; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); height: 14px; border-left: 2px dotted #9aa6c4; } /* 2. 설립자 교육철학 — 네이비 그라데이션 히어로 */ html[data-service-code="donga_kor"] .dau-vis-philo { position: relative; overflow: hidden; text-align: center; padding: 84px 24px; border-radius: 18px; background: linear-gradient(135deg, #002a56 0%, #014b97 100%); } html[data-service-code="donga_kor"] .dau-vis-philo::before { content: "道"; position: absolute; top: -56px; right: 2%; font-family: serif; font-size: 300px; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, 0.06); pointer-events: none; } html[data-service-code="donga_kor"] .dau-vis-philo::after { content: ""; position: absolute; left: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(120, 180, 255, 0.18), transparent 70%); } html[data-service-code="donga_kor"] .dau-vis-philo-inner { position: relative; z-index: 1; } html[data-service-code="donga_kor"] .dau-vis-philo-eyebrow { display: inline-block; margin-bottom: 22px; padding: 7px 18px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 30px; font-size: 13px; font-weight: 600; letter-spacing: 3px; color: #cfe1f6; } html[data-service-code="donga_kor"] .dau-vis-philo-main { display: block; font-size: 48px; font-weight: 800; color: #fff; letter-spacing: 2px; } html[data-service-code="donga_kor"] .dau-vis-philo-main .ko { font-size: 28px; font-weight: 700; color: #8fcbff; margin-left: 8px; } html[data-service-code="donga_kor"] .dau-vis-philo-sub { display: block; margin-top: 16px; font-size: 21px; font-weight: 500; color: rgba(255, 255, 255, 0.85); } html[data-service-code="donga_kor"] .dau-vis-philo-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 44px; } html[data-service-code="donga_kor"] .dau-vis-chip { min-width: 104px; padding: 14px 30px; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 40px; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 17px; font-weight: 700; transition: background 0.2s, transform 0.2s; } html[data-service-code="donga_kor"] .dau-vis-chip:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-2px); } /* 3. 인재상·핵심역량 — 흐름 다이어그램(라벨 그라데이션 + 커넥터) */ html[data-service-code="donga_kor"] .dau-vis-frame { display: flex; flex-direction: column; } html[data-service-code="donga_kor"] .dau-vis-row { position: relative; display: grid; grid-template-columns: 168px 1fr; gap: 26px; align-items: center; border: 1px solid #e7ecf3; border-radius: 14px; padding: 26px 30px; background: #fff; } html[data-service-code="donga_kor"] .dau-vis-row + .dau-vis-row { margin-top: 40px; } html[data-service-code="donga_kor"] .dau-vis-row + .dau-vis-row::before { content: ""; position: absolute; top: -40px; left: 113px; width: 2px; height: 40px; background: #cdd8ea; } html[data-service-code="donga_kor"] .dau-vis-row + .dau-vis-row::after { content: ""; position: absolute; top: -10px; left: 108px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #003265; } html[data-service-code="donga_kor"] .dau-vis-rlabel { align-self: stretch; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg, #003265, #1565c0); color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 1px; padding: 18px 8px; } html[data-service-code="donga_kor"] .dau-vis-rbody { font-size: 18px; line-height: 1.7; color: #444; } html[data-service-code="donga_kor"] .dau-vis-philo-inline b { color: #003265; } html[data-service-code="donga_kor"] .dau-vis-ol { margin: 0; padding-left: 20px; } html[data-service-code="donga_kor"] .dau-vis-ol li { padding: 4px 0; } /* 인재상 3 원형 */ html[data-service-code="donga_kor"] .dau-vis-talent { display: flex; flex-wrap: wrap; gap: 22px; } html[data-service-code="donga_kor"] .dau-vis-talent-item { width: 124px; height: 124px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: linear-gradient(135deg, #003265, #2477d4); color: rgba(255, 255, 255, 0.85); font-size: 15px; box-shadow: 0 10px 24px rgba(0, 50, 101, 0.18); } html[data-service-code="donga_kor"] .dau-vis-talent-item b { font-size: 26px; font-weight: 800; color: #fff; } /* 핵심역량 6 dot-chip */ html[data-service-code="donga_kor"] .dau-vis-comp { display: flex; flex-wrap: wrap; gap: 12px; } html[data-service-code="donga_kor"] .dau-vis-comp span { position: relative; padding: 12px 22px 12px 40px; background: #fff; border: 1px solid #dbe3f0; border-radius: 40px; color: #003265; font-size: 16px; font-weight: 600; } html[data-service-code="donga_kor"] .dau-vis-comp span::before { content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #4473ef, #003265); } /* 3-alt. 비전 체계도 — donga 원본(Image#44) 재해석: 라운드 타일 라벨 + pill + 3색 원 + 열정렬 점선 매핑 */ html[data-service-code="donga_kor"] .dau-vx { border: 1px solid #e3e9f2; border-radius: 0; padding: 34px 38px; background: #fff; display: flex; flex-direction: column; gap: 22px; } html[data-service-code="donga_kor"] .dau-vx-row { display: grid; grid-template-columns: 116px 1fr; gap: 24px; align-items: stretch; } html[data-service-code="donga_kor"] .dau-vx-label { display: flex; align-items: center; justify-content: center; min-height: 80px; border-radius: 10px; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 1px; } html[data-service-code="donga_kor"] .dau-vx-label.l1 { background: linear-gradient(135deg, #5b97e0, #3f7fd1); } html[data-service-code="donga_kor"] .dau-vx-label.l2 { background: linear-gradient(135deg, #2f6cb5, #1f5fa8); } html[data-service-code="donga_kor"] .dau-vx-label.l3 { background: linear-gradient(135deg, #1a5793, #134c88); } html[data-service-code="donga_kor"] .dau-vx-label.l4 { background: linear-gradient(135deg, #0a3a70, #002a56); } html[data-service-code="donga_kor"] .dau-vx-pill { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; min-height: 80px; padding: 16px 28px; background: #f2f4f8; border-radius: 10px; text-align: center; } html[data-service-code="donga_kor"] .dau-vx-phil { font-size: 18px; font-weight: 700; color: #003265; } html[data-service-code="donga_kor"] .dau-vx-phil .ko { color: #4473ef; } html[data-service-code="donga_kor"] .dau-vx-step { background: #fff; border: 1px solid #e1e6ef; border-radius: 10px; padding: 12px 24px; font-size: 18px; font-weight: 600; color: #333; } html[data-service-code="donga_kor"] .dau-vx-ar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #4473ef; color: #fff; font-size: 13px; flex: none; } html[data-service-code="donga_kor"] .dau-vx-talent { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; min-height: 80px; padding: 8px 12px; background: #f2f4f8; border-radius: 10px; } html[data-service-code="donga_kor"] .dau-vx-tcell { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; } html[data-service-code="donga_kor"] .dau-vx-tcell::after { content: ""; position: absolute; left: 50%; top: calc(100% + 9px); transform: translateX(-50%); height: 24px; border-left: 2px dotted #b3bed2; } html[data-service-code="donga_kor"] .dau-vx-circle { flex: none; width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; } html[data-service-code="donga_kor"] .dau-vx-circle.c1 { background: #1f9d76; } html[data-service-code="donga_kor"] .dau-vx-circle.c2 { background: #2f86c9; } html[data-service-code="donga_kor"] .dau-vx-circle.c3 { background: #7a5fc4; } html[data-service-code="donga_kor"] .dau-vx-suf { font-size: 18px; color: #555; } html[data-service-code="donga_kor"] .dau-vx-comp { display: grid; grid-template-columns: repeat(3, 1fr); } html[data-service-code="donga_kor"] .dau-vx-cgroup { display: flex; justify-content: center; gap: 12px; } html[data-service-code="donga_kor"] .dau-vx-chip { padding: 13px 18px; border-radius: 10px; font-size: 18px; font-weight: 600; white-space: nowrap; } html[data-service-code="donga_kor"] .dau-vx-chip.g1 { background: #e3f5ee; color: #15795a; } html[data-service-code="donga_kor"] .dau-vx-chip.g2 { background: #e4f1fb; color: #1f5f96; } html[data-service-code="donga_kor"] .dau-vx-chip.g3 { background: #ece6fa; color: #54409a; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-vx { padding: 22px 16px; gap: 16px; } html[data-service-code="donga_kor"] .dau-vx-row { grid-template-columns: 1fr; gap: 12px; } html[data-service-code="donga_kor"] .dau-vx-label { min-height: 50px; font-size: 15px; } html[data-service-code="donga_kor"] .dau-vx-pill { min-height: 0; padding: 16px 18px; border-radius: 10px; } html[data-service-code="donga_kor"] .dau-vx-phil { font-size: 15px; } html[data-service-code="donga_kor"] .dau-vx-step { padding: 10px 16px; font-size: 15px; } html[data-service-code="donga_kor"] .dau-vx-suf { font-size: 15px; } html[data-service-code="donga_kor"] .dau-vx-circle { font-size: 15px; } html[data-service-code="donga_kor"] .dau-vx-talent { grid-template-columns: 1fr; gap: 14px; min-height: 0; padding: 18px; border-radius: 10px; } html[data-service-code="donga_kor"] .dau-vx-tcell::after { display: none; } html[data-service-code="donga_kor"] .dau-vx-comp { grid-template-columns: 1fr; gap: 12px; margin-top: 4px; } html[data-service-code="donga_kor"] .dau-vx-cgroup { flex-wrap: wrap; } html[data-service-code="donga_kor"] .dau-vx-chip { font-size: 15px; padding: 11px 16px; } } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-vis-mt { margin-top: 60px; } html[data-service-code="donga_kor"] .dau-vis-blk + .dau-vis-blk { margin-top: 36px; } html[data-service-code="donga_kor"] .dau-vis-blkhead { gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } html[data-service-code="donga_kor"] .dau-vis-blkhead .num { font-size: 24px; } html[data-service-code="donga_kor"] .dau-vis-blkhead .tit { font-size: 18px; } html[data-service-code="donga_kor"] .dau-vis-blkhead .cap { font-size: 13px; } html[data-service-code="donga_kor"] .dau-vis-goals { grid-template-columns: 1fr; } html[data-service-code="donga_kor"] .dau-vis-goal { gap: 16px; padding: 16px 18px; } html[data-service-code="donga_kor"] .dau-vis-goal-no { width: 38px; height: 38px; font-size: 14px; } html[data-service-code="donga_kor"] .dau-vis-goal-tit { font-size: 15px; } html[data-service-code="donga_kor"] .dau-vis-found-circle { width: 150px; height: 150px; font-size: 16px; box-shadow: 0 0 0 10px rgba(108, 138, 246, 0.26), 0 0 0 21px rgba(108, 138, 246, 0.12); margin-bottom: 48px; } html[data-service-code="donga_kor"] .dau-vis-found-list li { padding: 18px; font-size: 15px; } html[data-service-code="donga_kor"] .dau-vis-philo { padding: 52px 18px; border-radius: 14px; } html[data-service-code="donga_kor"] .dau-vis-philo::before { font-size: 200px; top: -36px; } html[data-service-code="donga_kor"] .dau-vis-philo-main { font-size: 32px; } html[data-service-code="donga_kor"] .dau-vis-philo-main .ko { font-size: 20px; } html[data-service-code="donga_kor"] .dau-vis-philo-sub { font-size: 17px; } html[data-service-code="donga_kor"] .dau-vis-philo-eyebrow { font-size: 12px; letter-spacing: 2px; } html[data-service-code="donga_kor"] .dau-vis-chip { min-width: 0; padding: 11px 22px; font-size: 15px; } html[data-service-code="donga_kor"] .dau-vis-row { grid-template-columns: 1fr; gap: 14px; padding: 20px 18px; } html[data-service-code="donga_kor"] .dau-vis-row + .dau-vis-row { margin-top: 28px; } html[data-service-code="donga_kor"] .dau-vis-row + .dau-vis-row::before { left: 50%; } html[data-service-code="donga_kor"] .dau-vis-row + .dau-vis-row::after { left: calc(50% - 5px); } html[data-service-code="donga_kor"] .dau-vis-rlabel { padding: 13px 8px; font-size: 16px; } html[data-service-code="donga_kor"] .dau-vis-rbody { font-size: 15px; } html[data-service-code="donga_kor"] .dau-vis-talent { gap: 16px; justify-content: center; } html[data-service-code="donga_kor"] .dau-vis-talent-item { width: 104px; height: 104px; font-size: 13px; } html[data-service-code="donga_kor"] .dau-vis-talent-item b { font-size: 22px; } html[data-service-code="donga_kor"] .dau-vis-comp span { font-size: 14px; padding: 10px 18px 10px 34px; } } /* ===== /about/intro/history — board.history 타임라인 (Image#45 재해석) ===== */ /* 탭 바 — 디자인시스템 .dau-tab 스타일(회색 바 + 등분 + 활성 네이비 평행사변형) 차용 */ html[data-service-code="donga_kor"] .history-type01 .c-tab01.histTab { display: flex; gap: 0; list-style: none; margin: 0 0 48px; padding: 0; background: #f0f1f4; } html[data-service-code="donga_kor"] .history-type01 .c-tab01.histTab li { flex: 1 1 0; margin: 0; position: relative; } html[data-service-code="donga_kor"] .history-type01 .c-tab01.histTab li a { position: relative; z-index: 0; display: block; text-align: center; padding: 20px 12px; font-size: 17px; font-weight: 700; color: #8a8f99; background: #f0f1f4; text-decoration: none; transition: color 0.15s; } html[data-service-code="donga_kor"] .history-type01 .c-tab01.histTab li:not(.over):not([data-active="true"]) a:hover { background: #e7e9ee; color: #003265; } html[data-service-code="donga_kor"] .history-type01 .c-tab01.histTab li.over a, html[data-service-code="donga_kor"] .history-type01 .c-tab01.histTab li[data-active="true"] a { color: #9a7a35; background: transparent; z-index: 1; } html[data-service-code="donga_kor"] .history-type01 .c-tab01.histTab li.over a::before, html[data-service-code="donga_kor"] .history-type01 .c-tab01.histTab li[data-active="true"] a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #ffffff; border-top: 3px solid #c4a36a; border-radius: 9px; box-shadow: 0 1px 2px rgba(0,50,101,0.10), 0 3px 8px rgba(0,50,101,0.08); transform: none; z-index: -1; } html[data-service-code="donga_kor"] .history-type01 .c-tab01.histTab li a span { pointer-events: none; } /* 패널 */ html[data-service-code="donga_kor"] .history-type01 .histPkg[hidden] { display: none; } html[data-service-code="donga_kor"] .history-type01 .hist-unitWr { position: relative; } /* 중앙 레일 */ html[data-service-code="donga_kor"] .history-type01 .histRail { position: absolute; left: 340px; top: 50px; bottom: 6px; width: 3px; z-index: 0; } html[data-service-code="donga_kor"] .history-type01 .histRail .road { width: 3px; height: 100%; background: #e3e7ee; } /* 스크롤 진행 채움(노란색) + 이동 노드 (Image#48/49/50) */ html[data-service-code="donga_kor"] .history-type01 .histRail::after { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: var(--hist-prog, 0%); background: #c4a36a; z-index: 1; } /* 시작점 원 (레일 상단 캡 — 첫 행 가로 중앙) */ html[data-service-code="donga_kor"] .history-type01 .histRail .road::before { content: ""; position: absolute; left: 1.5px; top: 0; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: #c4a36a; z-index: 2; } html[data-service-code="donga_kor"] .history-type01 .histNode { position: absolute; left: 1.5px; top: var(--hist-node, 0%); transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: #c4a36a; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(196, 163, 106, 0.25); z-index: 2; pointer-events: none; } html[data-service-code="donga_kor"] .history-type01 .histNode .histNode-ar { width: 17px; height: 17px; display: block; } /* 연도 unit — 좌:연도 / 우:이벤트 */ html[data-service-code="donga_kor"] .history-type01 .hist-unit { position: relative; display: grid; grid-template-columns: 300px 1fr; gap: 100px; padding: 0 0 150px; } html[data-service-code="donga_kor"] .history-type01 .hist-unit:last-child { padding-bottom: 0; } html[data-service-code="donga_kor"] .history-type01 .his-tit { font-size: 100px; font-weight: 800; line-height: 1; color: #003265; letter-spacing: -4px; white-space: nowrap; } html[data-service-code="donga_kor"] .history-type01 .hist-unit:first-child .his-tit { color: #4473ef; } /* 이벤트 목록 */ html[data-service-code="donga_kor"] .history-type01 .his-lst { list-style: none; margin-left: 30px; padding: 28px 0 0; } html[data-service-code="donga_kor"] .history-type01 .his-lst > li { display: flex; gap: 30px; align-items: baseline; padding: 7px 0; } html[data-service-code="donga_kor"] .history-type01 .hDate { flex: none; min-width: 56px; font-size: 18px; font-weight: 700; color: #006ee9; white-space: nowrap; } html[data-service-code="donga_kor"] .history-type01 .hDate .hStrMonth::after { content: "."; } html[data-service-code="donga_kor"] .history-type01 .hText { position: relative; flex: 1; padding-left: 15px; font-size: 18px; line-height: 1.65; color: #444; text-align: justify; } html[data-service-code="donga_kor"] .history-type01 .hText::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: #b9c3d3; } html[data-service-code="donga_kor"] .history-type01 .hText ul { list-style: none; margin: 0; padding: 0; } html[data-service-code="donga_kor"] .history-type01 .hText li { margin: 0; padding: 0; } html[data-service-code="donga_kor"] .history-type01 .hText strong { color: #1a1a1a; font-weight: 700; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .history-type01 .c-tab01.histTab { flex-wrap: wrap; margin-bottom: 32px; } html[data-service-code="donga_kor"] .history-type01 .c-tab01.histTab li { flex: 1 1 33.33%; } html[data-service-code="donga_kor"] .history-type01 .c-tab01.histTab li a { padding: 13px 6px; font-size: 13px; } html[data-service-code="donga_kor"] .history-type01 .histRail { display: none; } html[data-service-code="donga_kor"] .history-type01 .hist-unit { grid-template-columns: 112px 1fr; gap: 16px; padding-bottom: 80px; } html[data-service-code="donga_kor"] .history-type01 .his-lst { margin-left: 12px; padding-top: 4px; } html[data-service-code="donga_kor"] .history-type01 .hist-unit::before { display: none; } html[data-service-code="donga_kor"] .history-type01 .his-tit { font-size: 44px; letter-spacing: -2px; } html[data-service-code="donga_kor"] .history-type01 .his-lst > li { gap: 10px; padding: 6px 0; } html[data-service-code="donga_kor"] .history-type01 .hDate { min-width: 46px; font-size: 15px; } html[data-service-code="donga_kor"] .history-type01 .hText { font-size: 15px; padding-left: 12px; } } @media (max-width: 500px) { /* 년도 위 / 날짜 아래 세로 스택 */ html[data-service-code="donga_kor"] .history-type01 .hist-unit { grid-template-columns: 1fr; gap: 6px; padding-bottom: 28px; } html[data-service-code="donga_kor"] .history-type01 .his-tit { font-size: 40px; } html[data-service-code="donga_kor"] .history-type01 .his-lst { margin-left: 0; padding-top: 0; } } /* content.file-embed — 레거시 다운로드/Adobe Reader 설치 버튼 제거 */ html[data-service-code="donga_kor"] .pdfCont-wr .btnsDown { display: none; } /* /about/intro/handbook — 요람 표지 카드 그리드 */ html[data-service-code="donga_kor"] .dau-bk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } html[data-service-code="donga_kor"] .dau-bk-card { display: flex; flex-direction: column; align-items: center; } html[data-service-code="donga_kor"] .dau-bk-cover { width: 100%; } html[data-service-code="donga_kor"] .dau-bk-cover img { display: block; width: 100%; height: auto; border: 1px solid #e7ecf3; box-shadow: 0 16px 38px rgba(0, 50, 101, 0.13); } html[data-service-code="donga_kor"] .dau-bk-year { margin: 28px 0 4px; font-size: 15px; font-weight: 700; letter-spacing: 1px; color: #006ee9; } html[data-service-code="donga_kor"] .dau-bk-title { margin: 0 0 18px; font-size: 20px; font-weight: 800; color: #1a1a1a; } html[data-service-code="donga_kor"] .dau-bk-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; } html[data-service-code="donga_kor"] .dau-bk-ebook { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; background: #fff; color: #003265; border: 1px solid #003265; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; } html[data-service-code="donga_kor"] .dau-bk-ebook:hover { background: #003265; color: #fff; } html[data-service-code="donga_kor"] .dau-bk-ebook .ext-ico { width: 15px; height: 15px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-bk-grid { grid-template-columns: 1fr; gap: 32px; max-width: 360px; margin: 0 auto; } html[data-service-code="donga_kor"] .dau-bk-title { font-size: 18px; } html[data-service-code="donga_kor"] .dau-bk-btns .dau-req-link, html[data-service-code="donga_kor"] .dau-bk-ebook { flex: 1 1 auto; justify-content: center; } } /* PDF 뷰어 높이 반응형 — 데스크톱 900 고정, 모바일은 뷰포트 비례로 축소 */ @media (max-width: 768px) { html[data-service-code="donga_kor"] .pdfCont-wr, html[data-service-code="donga_kor"] .pdfCont-wr .pkgWrap, html[data-service-code="donga_kor"] .pdfCont-wr .pkgCore, html[data-service-code="donga_kor"] .pdfCont-wr iframe { height: 72vh !important; min-height: 440px; } } /* /about/intro/ethics — 동아인 윤리강령 */ html[data-service-code="donga_kor"] .dau-eth-mt { margin-top: 80px; } html[data-service-code="donga_kor"] .dau-eth-lead { margin: 0; padding: 34px 38px; background: #f7fbff; border-left: 4px solid #003265; font-size: 18px; line-height: 1.9; color: #444; text-align: justify; } html[data-service-code="donga_kor"] .dau-eth-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } html[data-service-code="donga_kor"] .dau-eth-item { position: relative; overflow: hidden; display: block; padding: 30px 30px 32px; background: #fff; border: 1px solid #e7ecf3; border-top: 3px solid #003265; } html[data-service-code="donga_kor"] .dau-eth-no { position: absolute; top: 2px; right: 20px; width: auto; height: auto; padding: 0; background: none; border-radius: 0; font-weight: 800; font-size: 92px; line-height: 1; color: #e9eff7; z-index: 0; pointer-events: none; } html[data-service-code="donga_kor"] .dau-eth-text { position: relative; z-index: 1; margin: 30px 0 0; font-size: 18px; line-height: 1.75; color: #444; text-align: justify; } html[data-service-code="donga_kor"] .dau-eth-text .lead { margin-right: 2px; font-weight: 700; color: #003265; } html[data-service-code="donga_kor"] .dau-eth-group { margin-top: 28px; } html[data-service-code="donga_kor"] .dau-eth-role { display: inline-flex; margin: 0 0 14px; padding: 9px 24px; background: #ffd44d; color: #1a1a1a; font-size: 17px; font-weight: 700; border-radius: 30px; } /* 구성원별 — 흐름도(.dau-cd-flow) 스타일 + 노란 뱃지 */ html[data-service-code="donga_kor"] .dau-cd-flow.dau-flow-yellow li { align-items: flex-start; } html[data-service-code="donga_kor"] .dau-cd-flow.dau-flow-yellow .t1 { font-weight: 500; line-height: 1.7; text-align: justify; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-eth-mt { margin-top: 56px; } html[data-service-code="donga_kor"] .dau-eth-lead { padding: 22px 18px; font-size: 15px; } html[data-service-code="donga_kor"] .dau-eth-list { grid-template-columns: 1fr; gap: 14px; } html[data-service-code="donga_kor"] .dau-eth-item { padding: 24px 22px 26px; } html[data-service-code="donga_kor"] .dau-eth-no { font-size: 66px; right: 16px; } html[data-service-code="donga_kor"] .dau-eth-text { margin-top: 20px; font-size: 15px; } html[data-service-code="donga_kor"] .dau-eth-role { font-size: 15px; padding: 8px 18px; } } /* /colleges — 단과대학별 학과 (우리 디자인: dau-ui2-h 헤딩 + 카드 + 위치/전화/홈/학과안내) */ html[data-service-code="donga_kor"] .dau-cg + .dau-cg { margin-top: 70px; } html[data-service-code="donga_kor"] .dau-cg .dau-ui2-h .en { font-size: 15px; font-weight: 500; color: #9aa3b2; } html[data-service-code="donga_kor"] .dau-dept-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } html[data-service-code="donga_kor"] .dau-dept-card { position: relative; display: flex; flex-direction: column; padding: 24px 28px; border: 1px solid #e7ecf3; transition: border-color 0.15s ease, box-shadow 0.15s ease; } html[data-service-code="donga_kor"] .dau-dept-card:hover { border-color: #003265; box-shadow: 0 4px 14px rgba(0, 50, 101, 0.08); } html[data-service-code="donga_kor"] .dau-dept-name { margin: 0; font-size: 20px; font-weight: 700; color: #1a1a1a; line-height: 1.3; padding-right: 38px; } /* 우상단 홈 아이콘 (graduate gcard 와 동일 패턴) */ html[data-service-code="donga_kor"] .dau-dept-home { position: absolute; top: 24px; right: 26px; width: 30px; height: 30px; background-color: #8a909c; transition: background-color 0.15s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat; } html[data-service-code="donga_kor"] .dau-dept-card:hover .dau-dept-home { background-color: #003265; } /* 위치/전화 메타 (작은 네이비 아이콘 + 텍스트) */ html[data-service-code="donga_kor"] .dau-dept-meta { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; line-height: 1.5; color: #6b7280; } html[data-service-code="donga_kor"] .dau-dept-meta + .dau-dept-meta { margin-top: 12px; } html[data-service-code="donga_kor"] .dau-dept-info { margin-top: 16px; margin-bottom: 18px; padding-top: 18px; border-top: 1px solid #eef1f6; } html[data-service-code="donga_kor"] .dau-dept-mi { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #eaf1f9; position: relative; } html[data-service-code="donga_kor"] .dau-dept-mi::before { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background-color: #003265; } html[data-service-code="donga_kor"] .dau-dept-mi.loc::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center/contain no-repeat; } html[data-service-code="donga_kor"] .dau-dept-mi.tel::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat; } html[data-service-code="donga_kor"] .dau-dept-meta b { flex: none; font-weight: 700; color: #003265; } /* 학과안내 — 우리 .dau-req-link 의 소형 outline 버전 */ html[data-service-code="donga_kor"] .dau-dept-guide { align-self: stretch; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 18px; border: 1px solid #003265; background: #003265; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; transition: background 0.15s; } html[data-service-code="donga_kor"] .dau-dept-guide:hover { background: #00254d; } /* 단일 대학원 상세 — 홈페이지 2버튼(국문/English) 가로 배치 */ /* 대학원 상세 — 좌측 정렬 카드(680px). 연락처 세로 스택 */ html[data-service-code="donga_kor"] .dau-grad-detail { max-width: 680px; } /* 좌 카드 / 우 이미지 2단 — 오른쪽 영역을 대학원 이미지로 채움 */ html[data-service-code="donga_kor"] .dau-grad-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; } html[data-service-code="donga_kor"] .dau-grad-row .dau-grad-detail { max-width: none; } html[data-service-code="donga_kor"] .dau-grad-photo { overflow: hidden; min-height: 0; } html[data-service-code="donga_kor"] .dau-grad-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-grad-row { grid-template-columns: 1fr; } } /* 500px 이하 — 이미지를 텍스트 카드 위로 */ @media (max-width: 500px) { html[data-service-code="donga_kor"] .dau-grad-photo { order: -1; } } /* 설립/교육 목적 리드 문단 — 배너와 연락처 카드 사이, 네이비 좌측 액센트 */ html[data-service-code="donga_kor"] .dau-grad-lead { max-width: 680px; margin: 0 0 22px; padding: 2px 0 2px 18px; border-left: 3px solid #003265; font-size: 18px; line-height: 1.75; color: #444b58; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-grad-lead { font-size: 15px; padding-left: 14px; } } /* 아이덴티티 박스 — 네이비, 우측에 동아대 심볼 옅게(워터마크) */ html[data-service-code="donga_kor"] .dau-grad-id { position: relative; overflow: hidden; width: 100%; margin-bottom: 18px; padding: 38px 36px; background: linear-gradient(120deg, #0a417c 0%, #003265 55%, #002a52 100%); } /* 호버 없는 상시 효과 — 아주 느린 빛 스윕(고급스러운 sheen) */ html[data-service-code="donga_kor"] .dau-grad-id::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0.13) 50%, rgba(255, 255, 255, 0.05) 52%, transparent 65%); background-size: 220% 100%; background-position: 140% 0; animation: dauGradSheen 7.5s ease-in-out infinite; } @keyframes dauGradSheen { 0% { background-position: 140% 0; } 55%, 100% { background-position: -40% 0; } } @media (prefers-reduced-motion: reduce) { html[data-service-code="donga_kor"] .dau-grad-id::after { animation: none; } } html[data-service-code="donga_kor"] .dau-grad-id-en { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } html[data-service-code="donga_kor"] .dau-grad-id-ko { display: block; margin-top: 10px; font-size: 30px; font-weight: 800; color: #fff; line-height: 1.2; } html[data-service-code="donga_kor"] .dau-grad-id-sub { display: block; margin-top: 12px; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.74); text-align: justify; } html[data-service-code="donga_kor"] .dau-grad-id-symbol { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 110px; height: 110px; opacity: 0.16; filter: brightness(0) invert(1); pointer-events: none; -webkit-user-select: none; user-select: none; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-grad-id { padding: 28px 22px; } html[data-service-code="donga_kor"] .dau-grad-id-ko { font-size: 20px; } html[data-service-code="donga_kor"] .dau-grad-id-en { font-size: 13px; } html[data-service-code="donga_kor"] .dau-grad-id-sub { font-size: 16px; } html[data-service-code="donga_kor"] .dau-grad-id-symbol { width: 85px; height: 85px; right: 14px; } } html[data-service-code="donga_kor"] .dau-dept-links { display: flex; gap: 10px; margin-top: 20px; } html[data-service-code="donga_kor"] .dau-dept-links .dau-dept-guide { flex: 1; align-self: auto; margin-top: 0; } html[data-service-code="donga_kor"] .dau-dept-guide .ext-ico { width: 14px; height: 14px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cg + .dau-cg { margin-top: 48px; } html[data-service-code="donga_kor"] .dau-dept-grid { grid-template-columns: 1fr; gap: 14px; } html[data-service-code="donga_kor"] .dau-dept-name { font-size: 17px; } html[data-service-code="donga_kor"] .dau-dept-meta { font-size: 15px; } html[data-service-code="donga_kor"] .dau-dept-links { flex-direction: column; gap: 8px; } } /* graduate 번호 라벨 네이비 (값은 회색, colleges 위치/번호 라벨과 통일) */ html[data-service-code="donga_kor"] .dau-sub-gmeta b { font-weight: 700; color: #003265; margin-right: 2px; } /* /colleges 단과대학 탭 (CSS 라디오, 우리 디자인 그리드) */ html[data-service-code="donga_kor"] .dau-ctab-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* 좌측 세로 탭 변형 — 왼쪽 단과대학 리스트(sticky) + 오른쪽 학과 */ html[data-service-code="donga_kor"] .dau-ctabs--side { display: grid; grid-template-columns: 180px 1fr; gap: 44px; align-items: start; } html[data-service-code="donga_kor"] .dau-ctabs--side .dau-ctab-bar { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0; position: sticky; top: 100px; } html[data-service-code="donga_kor"] .dau-ctabs--side .dau-ctab-chip { justify-content: flex-start; text-align: left; padding: 14px 18px; } @media (max-width: 900px) { html[data-service-code="donga_kor"] .dau-ctabs--side { grid-template-columns: 1fr; gap: 24px; } html[data-service-code="donga_kor"] .dau-ctabs--side .dau-ctab-bar { flex-direction: row; flex-wrap: wrap; position: static; gap: 6px; } html[data-service-code="donga_kor"] .dau-ctabs--side .dau-ctab-chip { flex: 0 0 auto; justify-content: center; padding: 11px 14px; background: #f2f5fa; } } html[data-service-code="donga_kor"] .dau-ctab-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 50px; } html[data-service-code="donga_kor"] .dau-ctab-chip { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 14px 16px; border-radius: 10px; background: transparent; color: #5b6473; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center; cursor: pointer; transition: background 0.15s, color 0.15s; -webkit-user-select: none; user-select: none; } html[data-service-code="donga_kor"] .dau-ctab-chip:hover { background: #f2f5fa; color: #003265; } html[data-service-code="donga_kor"] .dau-ctab-chip::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 2px; background: #ffd44d; opacity: 0; transition: opacity 0.15s; } html[data-service-code="donga_kor"] .dau-ctab-panels .dau-cg { display: none; } html[data-service-code="donga_kor"] .dau-ctab-panels .dau-cg + .dau-cg { margin-top: 0; } #cf-all:checked ~ .dau-ctab-panels .dau-cg { display: block; } html[data-service-code="donga_kor"] #cf-all:checked ~ .dau-ctab-bar label[for="cf-all"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-all:checked ~ .dau-ctab-bar label[for="cf-all"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-1:checked ~ .dau-ctab-panels .dau-cg:nth-child(1) { display: block; } html[data-service-code="donga_kor"] #cf-1:checked ~ .dau-ctab-bar label[for="cf-1"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-1:checked ~ .dau-ctab-bar label[for="cf-1"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-2:checked ~ .dau-ctab-panels .dau-cg:nth-child(2) { display: block; } html[data-service-code="donga_kor"] #cf-2:checked ~ .dau-ctab-bar label[for="cf-2"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-2:checked ~ .dau-ctab-bar label[for="cf-2"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-3:checked ~ .dau-ctab-panels .dau-cg:nth-child(3) { display: block; } html[data-service-code="donga_kor"] #cf-3:checked ~ .dau-ctab-bar label[for="cf-3"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-3:checked ~ .dau-ctab-bar label[for="cf-3"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-4:checked ~ .dau-ctab-panels .dau-cg:nth-child(4) { display: block; } html[data-service-code="donga_kor"] #cf-4:checked ~ .dau-ctab-bar label[for="cf-4"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-4:checked ~ .dau-ctab-bar label[for="cf-4"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-5:checked ~ .dau-ctab-panels .dau-cg:nth-child(5) { display: block; } html[data-service-code="donga_kor"] #cf-5:checked ~ .dau-ctab-bar label[for="cf-5"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-5:checked ~ .dau-ctab-bar label[for="cf-5"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-6:checked ~ .dau-ctab-panels .dau-cg:nth-child(6) { display: block; } html[data-service-code="donga_kor"] #cf-6:checked ~ .dau-ctab-bar label[for="cf-6"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-6:checked ~ .dau-ctab-bar label[for="cf-6"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-7:checked ~ .dau-ctab-panels .dau-cg:nth-child(7) { display: block; } html[data-service-code="donga_kor"] #cf-7:checked ~ .dau-ctab-bar label[for="cf-7"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-7:checked ~ .dau-ctab-bar label[for="cf-7"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-8:checked ~ .dau-ctab-panels .dau-cg:nth-child(8) { display: block; } html[data-service-code="donga_kor"] #cf-8:checked ~ .dau-ctab-bar label[for="cf-8"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-8:checked ~ .dau-ctab-bar label[for="cf-8"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-9:checked ~ .dau-ctab-panels .dau-cg:nth-child(9) { display: block; } html[data-service-code="donga_kor"] #cf-9:checked ~ .dau-ctab-bar label[for="cf-9"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-9:checked ~ .dau-ctab-bar label[for="cf-9"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-10:checked ~ .dau-ctab-panels .dau-cg:nth-child(10) { display: block; } html[data-service-code="donga_kor"] #cf-10:checked ~ .dau-ctab-bar label[for="cf-10"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-10:checked ~ .dau-ctab-bar label[for="cf-10"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-11:checked ~ .dau-ctab-panels .dau-cg:nth-child(11) { display: block; } html[data-service-code="donga_kor"] #cf-11:checked ~ .dau-ctab-bar label[for="cf-11"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-11:checked ~ .dau-ctab-bar label[for="cf-11"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-12:checked ~ .dau-ctab-panels .dau-cg:nth-child(12) { display: block; } html[data-service-code="donga_kor"] #cf-12:checked ~ .dau-ctab-bar label[for="cf-12"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-12:checked ~ .dau-ctab-bar label[for="cf-12"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-13:checked ~ .dau-ctab-panels .dau-cg:nth-child(13) { display: block; } html[data-service-code="donga_kor"] #cf-13:checked ~ .dau-ctab-bar label[for="cf-13"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-13:checked ~ .dau-ctab-bar label[for="cf-13"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-14:checked ~ .dau-ctab-panels .dau-cg:nth-child(14) { display: block; } html[data-service-code="donga_kor"] #cf-14:checked ~ .dau-ctab-bar label[for="cf-14"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-14:checked ~ .dau-ctab-bar label[for="cf-14"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-15:checked ~ .dau-ctab-panels .dau-cg:nth-child(15) { display: block; } html[data-service-code="donga_kor"] #cf-15:checked ~ .dau-ctab-bar label[for="cf-15"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-15:checked ~ .dau-ctab-bar label[for="cf-15"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-16:checked ~ .dau-ctab-panels .dau-cg:nth-child(16) { display: block; } html[data-service-code="donga_kor"] #cf-16:checked ~ .dau-ctab-bar label[for="cf-16"] { background: #003265; color: #fff; } html[data-service-code="donga_kor"] #cf-16:checked ~ .dau-ctab-bar label[for="cf-16"]::before { opacity: 1; } html[data-service-code="donga_kor"] #cf-all:checked ~ .dau-ctab-panels .dau-cg + .dau-cg { margin-top: 70px; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-ctab-bar { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 36px; } html[data-service-code="donga_kor"] .dau-ctab-chip { font-size: 13px; padding: 12px 5px; gap: 5px; } html[data-service-code="donga_kor"] .dau-ctab-chip::before { width: 4px; height: 4px; } } /* /colleges 상단 YouTube 갤러리 (Image#58) */ html[data-service-code="donga_kor"] .dau-yt { margin: 72px 0 0; padding-top: 56px; border-top: 1px solid #e3e9f2; } html[data-service-code="donga_kor"] .dau-yt-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; } html[data-service-code="donga_kor"] .dau-yt-h { margin: 0; } html[data-service-code="donga_kor"] .dau-yt-univ { display: block; font-size: 18px; font-weight: 800; letter-spacing: 1px; color: #1a1a1a; } html[data-service-code="donga_kor"] .dau-yt-tag { display: block; font-size: 40px; font-weight: 800; line-height: 1.15; background: linear-gradient(90deg, #ff9100, #ff1f1f); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-service-code="donga_kor"] .dau-yt-actions { display: flex; align-items: center; gap: 18px; } html[data-service-code="donga_kor"] .dau-yt-ch { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: #d6171d; } html[data-service-code="donga_kor"] .dau-yt-ch::before { content: ""; width: 24px; height: 24px; background-color: #d6171d; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.5 15.5v-7l6.3 3.5-6.3 3.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.5 15.5v-7l6.3 3.5-6.3 3.5z'/%3E%3C/svg%3E") center/contain no-repeat; } html[data-service-code="donga_kor"] .dau-yt-chbtn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border: 1px solid #d6171d; background: #d6171d; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; transition: background 0.15s; } html[data-service-code="donga_kor"] .dau-yt-chbtn:hover { background: #c00000; } html[data-service-code="donga_kor"] .dau-yt-chbtn .ext-ico { width: 15px; height: 15px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; } html[data-service-code="donga_kor"] .dau-yt-body { display: grid; grid-template-columns: 1fr 1.05fr; gap: 36px; align-items: stretch; } html[data-service-code="donga_kor"] .dau-yt-main { background: none; border: 0; padding: 0; } html[data-service-code="donga_kor"] .dau-yt-frame { position: relative; aspect-ratio: 16 / 9; background: #0a0f1c; overflow: hidden; } html[data-service-code="donga_kor"] .dau-yt-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } html[data-service-code="donga_kor"] .dau-yt-poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9aa3b2; font-size: 15px; background: #0a0f1c; } html[data-service-code="donga_kor"] .dau-yt-posterbtn { padding: 0; border: 0; cursor: pointer; } html[data-service-code="donga_kor"] .dau-yt-posterbtn img { width: 100%; height: 100%; object-fit: cover; } html[data-service-code="donga_kor"] .dau-yt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; border-radius: 12px; background: rgba(230, 0, 0, 0.92); transition: background 0.15s; } html[data-service-code="donga_kor"] .dau-yt-posterbtn:hover .dau-yt-play { background: #d6171d; } html[data-service-code="donga_kor"] .dau-yt-play::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; } html[data-service-code="donga_kor"] .dau-yt-main-title { margin: 18px 0 4px; font-size: 18px; font-weight: 800; color: #1a1a1a; } html[data-service-code="donga_kor"] .dau-yt-main-sub { margin: 0; font-size: 14px; color: #6b7280; line-height: 1.5; } html[data-service-code="donga_kor"] .dau-yt-side { display: flex; flex-direction: column; gap: 16px; } html[data-service-code="donga_kor"] .dau-yt-list { flex: 1; display: flex; flex-direction: column; } html[data-service-code="donga_kor"] .dau-yt-page { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } html[data-service-code="donga_kor"] .dau-yt-page[hidden] { display: none; } html[data-service-code="donga_kor"] .dau-yt-thumb { display: grid; grid-template-columns: 148px 1fr; gap: 16px; align-items: center; width: 100%; text-align: left; background: none; border: 2px solid transparent; border-bottom: 1px dotted #d8dde6; padding: 16px 12px; cursor: pointer; font: inherit; } html[data-service-code="donga_kor"] .dau-yt-thumb.active { border: 2px solid transparent; border-image: linear-gradient(90deg, #f57c1f 0%, #e23744 42%, #a93aa0 72%, #6f3fc4 100%) 1; background: none; } html[data-service-code="donga_kor"] .dau-yt-thumb-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #e4e8ef; border: 2px solid transparent; transition: border-color 0.15s; } html[data-service-code="donga_kor"] .dau-yt-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; } html[data-service-code="donga_kor"] .dau-yt-thumb-text { min-width: 0; } html[data-service-code="donga_kor"] .dau-yt-thumb-title { display: block; font-size: 16px; font-weight: 700; color: #1a1a1a; line-height: 1.4; } html[data-service-code="donga_kor"] .dau-yt-thumb-sub { display: block; margin-top: 5px; font-size: 13px; color: #8a909c; line-height: 1.45; } html[data-service-code="donga_kor"] .dau-yt-pager { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } html[data-service-code="donga_kor"] .dau-yt-dots { display: flex; align-items: center; gap: 7px; } html[data-service-code="donga_kor"] .dau-yt-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d8dde6; cursor: pointer; transition: width 0.15s, background 0.15s; } html[data-service-code="donga_kor"] .dau-yt-dot.active { width: 22px; border-radius: 5px; background: #d6171d; } html[data-service-code="donga_kor"] .dau-yt-arrows { display: flex; gap: 8px; } html[data-service-code="donga_kor"] .dau-yt-arr { width: 36px; height: 36px; border: 1px solid #d8dde6; background: #fff; color: #555; font-size: 23px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } html[data-service-code="donga_kor"] .dau-yt-arr:hover { border-color: #003265; color: #003265; } html[data-service-code="donga_kor"] .dau-yt-arr--next { background: #fff; border-color: #d8dde6; color: #555; } html[data-service-code="donga_kor"] .dau-yt-arr--next:hover { border-color: #003265; color: #003265; } @media (max-width: 900px) { html[data-service-code="donga_kor"] .dau-yt { margin-top: 48px; padding-top: 40px; } html[data-service-code="donga_kor"] .dau-yt-body { grid-template-columns: 1fr; gap: 22px; } html[data-service-code="donga_kor"] .dau-yt-thumb { grid-template-columns: 120px 1fr; gap: 12px; padding: 13px 2px; } } /* ── 인페이지 탭 (.dau-cttabs) — 교과과정 안내 4개 형제 페이지 라디오-핵 통합 + 외부 조회링크 ── */ html[data-service-code="donga_kor"] .dau-cttab-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } html[data-service-code="donga_kor"] .dau-cttab-bar { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 40px; background: #f0f1f4; } html[data-service-code="donga_kor"] .dau-cttab-bar > label, html[data-service-code="donga_kor"] .dau-cttab-bar > a { position: relative; z-index: 0; flex: 0 0 25%; min-width: 25%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; padding: 20px 14px; font-size: 17px; font-weight: 700; line-height: 1.35; color: #8a8f99; background: #f0f1f4; text-decoration: none; cursor: pointer; -webkit-user-select: none; user-select: none; transition: color 0.15s; } html[data-service-code="donga_kor"] .dau-cttab-bar > label:hover, html[data-service-code="donga_kor"] .dau-cttab-bar > a:hover { color: #003265; background: #e7e9ee; } html[data-service-code="donga_kor"] .dau-cttab-bar > a .ext-ico { width: 14px; height: 14px; flex: none; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42L17.59 5H14V3zM5 5h6v2H5v12h12v-6h2v6c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V7c0-1.1.9-2 2-2z'/%3E%3C/svg%3E") center/contain no-repeat; } html[data-service-code="donga_kor"] .dau-cttab-panel { display: none; } html[data-service-code="donga_kor"] #cttab1:checked ~ .dau-cttab-bar > label[for="cttab1"], html[data-service-code="donga_kor"] #cttab2:checked ~ .dau-cttab-bar > label[for="cttab2"], html[data-service-code="donga_kor"] #cttab3:checked ~ .dau-cttab-bar > label[for="cttab3"], html[data-service-code="donga_kor"] #cttab4:checked ~ .dau-cttab-bar > label[for="cttab4"] { color: #9a7a35; z-index: 1; } html[data-service-code="donga_kor"] #cttab1:checked ~ .dau-cttab-bar > label[for="cttab1"]::before, html[data-service-code="donga_kor"] #cttab2:checked ~ .dau-cttab-bar > label[for="cttab2"]::before, html[data-service-code="donga_kor"] #cttab3:checked ~ .dau-cttab-bar > label[for="cttab3"]::before, html[data-service-code="donga_kor"] #cttab4:checked ~ .dau-cttab-bar > label[for="cttab4"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #ffffff; border-top: 3px solid #c4a36a; border-radius: 9px; box-shadow: 0 1px 2px rgba(0,50,101,0.10), 0 3px 8px rgba(0,50,101,0.08); transform: none; z-index: -1; } html[data-service-code="donga_kor"] #cttab1:checked ~ #ctpanel1, html[data-service-code="donga_kor"] #cttab2:checked ~ #ctpanel2, html[data-service-code="donga_kor"] #cttab3:checked ~ #ctpanel3, html[data-service-code="donga_kor"] #cttab4:checked ~ #ctpanel4 { display: block; } @media (max-width: 768px) { html[data-service-code="donga_kor"] .dau-cttab-bar > label, html[data-service-code="donga_kor"] .dau-cttab-bar > a { flex: 0 0 33.33%; min-width: 33.33%; padding: 14px 8px; font-size: 14px; } } /* 레거시 패널(영역별/편입학 이수학점표) 렌더 호환 시ymar — .dau-cttab-panel 하위로만 한정 */ html[data-service-code="donga_kor"] .dau-cttab-panel .is-wauto-box, html[data-service-code="donga_kor"] .dau-cttab-panel .contanch-list { overflow-x: auto; } html[data-service-code="donga_kor"] .dau-cttab-panel table.tbl-type01 { width: 100%; border-collapse: collapse; border-top: 2px solid #003265; margin: 10px 0 24px; font-size: 14px; } html[data-service-code="donga_kor"] .dau-cttab-panel table.tbl-type01 th, html[data-service-code="donga_kor"] .dau-cttab-panel table.tbl-type01 td { border: 1px solid #e5e9f0; padding: 8px 10px; text-align: center; vertical-align: middle; line-height: 1.5; word-break: keep-all; } html[data-service-code="donga_kor"] .dau-cttab-panel table.tbl-type01 thead th, html[data-service-code="donga_kor"] .dau-cttab-panel table.tbl-type01 tbody th { background: #f7fbff; font-weight: 700; color: #1a3656; } html[data-service-code="donga_kor"] .dau-cttab-panel td.left, html[data-service-code="donga_kor"] .dau-cttab-panel .left { text-align: left; } html[data-service-code="donga_kor"] .dau-cttab-panel .c-tit01 { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 36px 0 16px; } html[data-service-code="donga_kor"] .dau-cttab-panel .c-tit02 { font-size: 19px; font-weight: 700; color: #1a3656; margin: 28px 0 12px; } html[data-service-code="donga_kor"] .dau-cttab-panel .c-tit03 { font-size: 16px; font-weight: 700; color: #003265; margin: 20px 0 8px; } html[data-service-code="donga_kor"] .dau-cttab-panel .cblue { color: #0a4fa0; } html[data-service-code="donga_kor"] .dau-cttab-panel .info-ex01 { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 8px 0; } html[data-service-code="donga_kor"] .dau-cttab-panel .ssgap { height: 12px; } html[data-service-code="donga_kor"] .dau-cttab-panel .sgap { height: 20px; } html[data-service-code="donga_kor"] .dau-cttab-panel .gap { height: 36px; } html[data-service-code="donga_kor"] .dau-cttab-panel .blind { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html[data-service-code="donga_kor"] .dau-cttab-panel ul.c-list01, html[data-service-code="donga_kor"] .dau-cttab-panel ul.c-list02 { margin: 8px 0; padding-left: 18px; line-height: 1.7; } /* 영역별 이수학점표 표 하단 안내문(note--plain) — 15px / #555 + 느낌표 배지 */ html[data-service-code="donga_kor"] [data-v="curriculum-2"] .dau-cd-note--plain { position: relative; padding-left: 24px; margin-top: 14px; color: #555; font-size: 15px; } html[data-service-code="donga_kor"] [data-v="curriculum-2"] .dau-cd-note--plain::before { content: "!"; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid #555; color: #555; font-size: 10px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } /* === DONGA-KOR SUBPAGE COMPONENTS end === */ /* === SVISUAL/SIDEBAR LAYOUT FIX (V13) === */ /* (1) 운영처럼 sidebar 좌측 absolute 정렬 — 운영: position:absolute / left:0 / w:200. anchor: #container 의 position:relative (chrome inline style 에 명시). */ .cont-sub-navi { position: absolute; left: 0; top: 0; width: 200px; background: #fff; z-index: 5; box-sizing: border-box; } .cont-sub-navi > ul { list-style: none; padding: 0; margin: 0; } .cont-sub-navi > ul > li { border-bottom: 1px solid #e5e7eb; } .cont-sub-navi > ul > li:first-child { border-top: 2px solid #111; } .cont-sub-navi > ul > li > a { display: block; padding: 14px 18px; font-family: "Paperlogy", "Pretendard", sans-serif; font-size: 14px; font-weight: 500; color: #555; text-decoration: none; transition: background 0.2s, color 0.2s; position: relative; } .cont-sub-navi > ul > li > a:hover { background: #f4f6fb; color: #006ee9; } .cont-sub-navi > ul > li.on > a { background: #006ee9; color: #fff; font-weight: 700; } .cont-sub-navi > ul > li.on > a::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-50%) rotate(-45deg); } /* (2) svisual 만 풀-블리드 — chrome `

` wrapper 우회. calc(50% - 50vw) trick 으로 부모 1400 안에서 viewport 100vw 까지 좌우로 negative margin. */ #container-wrap > .svisual-wrap { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* svisual 안 .svis 는 그대로 max-width 1400 + margin auto 로 centered */ /* (3) cont-top (h2 cont-tit) 도 sidebar 옆에 자리잡도록 운영 정확: 운영 cont-top: max-width:1400 + position:relative + margin-bottom 84px. #contents 안에 있으므로 자동으로 padding-left:200 영향 받음. */ .cont-top { max-width: 1400px; position: relative; margin: 0 0 56px; padding: 30px 0 0; } .cont-top .cont-tit { font-family: "Paperlogy", "Pretendard", sans-serif; font-size: 36px; font-weight: 700; color: #111; letter-spacing: -0.02em; margin: 0; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; } /* (4) #contents max-width / padding 운영 매칭 */ #container > #contents { max-width: 1400px; padding: 0 30px; position: relative; margin: 0 auto; box-sizing: border-box; } @media (max-width: 768px) { .cont-sub-navi { position: static; width: 100%; margin-bottom: 20px; } #container[style] { padding-left: 0 !important; } .cont-top { padding: 20px 0 0; } .cont-top .cont-tit { font-size: 26px; } } /* === SVISUAL/SIDEBAR LAYOUT FIX (V13) end === */ /* === SVISUAL UPSTREAM EXACT (V12) === */ .svisual-wrap { position: relative; height: 410px; background: none; overflow: hidden; isolation: isolate; } .svisual-wrap .svis-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .svisual-wrap .svis-deco .deco { display: block; position: absolute; right: -300px; top: -200px; width: 1500px; height: 1500px; border-radius: 50%; background: radial-gradient(circle, rgba(0,110,233,0.05) 0%, rgba(0,0,0,0) 65%); transition: transform 0.8s ease-out; } .svisual-wrap:hover .svis-deco .deco { transform: translate(40px, 30px) scale(1.05); } .svisual-wrap .svis-sec { width: 100%; height: 100%; } .svisual-wrap .svis { display: flex; flex-direction: row; align-items: stretch; max-width: 1400px; height: 100%; margin: 0 auto; padding: 0 30px; position: relative; z-index: 2; } .svisual-wrap .img-box { position: relative; flex: 1 1 auto; height: 100%; min-width: 0; order: 2; overflow: hidden; } .svisual-wrap .img-box img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .svisual-wrap .txt-box { position: relative; z-index: 3; flex: 0 0 450px; height: 100%; padding: 130px 30px 30px 20px; order: 1; background: linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.96) 80%, rgba(255,255,255,0) 100%); box-sizing: border-box; } .svisual-wrap .txt-pkg { display: block; } .svisual-wrap .txt-eng { display: block; font-family: "Paperlogy", "Pretendard", sans-serif; font-size: 20px; font-weight: 700; color: #006ee9; letter-spacing: 0.05em; animation: dauSvisEngReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } .svisual-wrap .txt-pkg > .txt { display: block; font-family: "Paperlogy", "Pretendard", sans-serif; font-size: 55px; font-weight: 500; color: #111; letter-spacing: -0.02em; line-height: 1.15; margin-top: 19px; animation: dauSvisTxtReveal 0.9s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes dauSvisEngReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes dauSvisTxtReveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .svisual-wrap #contNavi { margin-top: 20px; animation: dauSvisNaviReveal 0.9s 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes dauSvisNaviReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .svisual-wrap .cont-navi { display: flex; align-items: center; flex-wrap: wrap; font-size: 13px; color: #555; font-family: inherit; } .svisual-wrap .cont-navi a { color: #555; transition: color 0.2s; } .svisual-wrap .cont-navi a:hover { color: #006ee9; } .svisual-wrap .cont-navi .home { display: block; width: 18px; height: 18px; background: url("/resources/_Templet/Layout/layout_kor/Img/layout_spr.png") no-repeat -324px 0; margin: -1px 9px 0 0; text-indent: -9999px; } .svisual-wrap .cont-navi .blind { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .svisual-wrap .cont-navi dl { display: inline-flex; align-items: center; margin: 0 0 0 6px; } .svisual-wrap .cont-navi dl::before { content: "›"; margin-right: 6px; opacity: 0.5; color: #aaa; font-weight: 400; } .svisual-wrap .cont-navi dl dt { display: inline; margin: 0; } .svisual-wrap .cont-navi dl dt a { display: inline-flex; align-items: center; } .svisual-wrap .cont-navi dl .txt { font-family: inherit; font-size: 13px; font-weight: 400; color: #555; margin: 0; animation: none; } @media (max-width: 768px) { .svisual-wrap { height: 280px; } .svisual-wrap .svis { padding: 0 20px; } .svisual-wrap .img-box { display: none; } .svisual-wrap .txt-box { flex: 1; background: transparent; padding: 80px 20px 30px 0; } .svisual-wrap .txt-pkg > .txt { font-size: 36px; } .svisual-wrap .txt-eng { font-size: 16px; } .svisual-wrap #contNavi { margin-top: 12px; } } /* === SVISUAL UPSTREAM EXACT (V12) end === */ nn n /* === SUB-PAGE MODERN HERO (V2026_04_27_06) === */ .dau-sub-hero { position: relative; min-height: 480px; padding: 120px 60px 80px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(135deg, rgba(0,29,61,0.85) 0%, rgba(0,110,233,0.6) 100%), var(--dau-sub-hero-image, linear-gradient(135deg, #001d3d 0%, #006ee9 100%)); background-size: cover; background-position: center; color: #fff; overflow: hidden; isolation: isolate; transition: background-position 0.4s ease-out; } .dau-sub-hero::after { content: ""; position: absolute; right: -180px; top: -100px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(255,211,37,0.25) 0%, transparent 70%); z-index: -1; transition: transform 0.6s ease-out; } .dau-sub-hero:hover::after { transform: translate(40px, 30px) scale(1.1); } .dau-sub-hero .dau-sub-breadcrumb { font-size: 13px; opacity: 0.85; margin-bottom: 16px; letter-spacing: 0.05em; } .dau-sub-hero .dau-sub-breadcrumb a { color: #fff; } .dau-sub-hero .dau-sub-breadcrumb a:hover { opacity: 0.7; } .dau-sub-hero .dau-sub-title { font-size: 56px; font-weight: 900; line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.03em; color: #fff; animation: dauSubTitleReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; } .dau-sub-hero .dau-sub-subtitle { font-size: 20px; font-weight: 400; opacity: 0.9; max-width: 720px; line-height: 1.5; animation: dauSubSubtitleReveal 0.9s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes dauSubTitleReveal { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes dauSubSubtitleReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 0.9; transform: none; } } @media (max-width: 768px) { .dau-sub-hero { padding: 80px 24px 60px; min-height: 360px; } .dau-sub-hero .dau-sub-title { font-size: 36px; } .dau-sub-hero .dau-sub-subtitle { font-size: 16px; } } .dau-sub-anchor-nav { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--ds-color-border, #e2e8f0); padding: 12px 60px; display: flex; gap: 24px; overflow-x: auto; font-size: 14px; font-weight: 500; } .dau-sub-anchor-nav a { white-space: nowrap; padding: 6px 0; color: #555; position: relative; transition: color 0.2s; } .dau-sub-anchor-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ds-color-primary, #006ee9); transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease-out; } .dau-sub-anchor-nav a:hover { color: var(--ds-color-primary, #006ee9); } .dau-sub-anchor-nav a:hover::after { transform: scaleX(1); } @media (max-width: 768px) { .dau-sub-anchor-nav { padding: 10px 16px; gap: 16px; } } .dau-sub-content { max-width: 1100px; margin: 0 auto; padding: 60px 40px 100px; } .dau-sub-section { scroll-margin-top: 80px; margin-bottom: 56px; } .dau-sub-section h2 { font-size: 32px; font-weight: 800; margin: 0 0 20px; position: relative; padding-bottom: 16px; color: #1a1a2e; letter-spacing: -0.02em; } .dau-sub-section h2::after { content: ""; position: absolute; bottom: 0; left: 0; width: 48px; height: 4px; background: linear-gradient(90deg, var(--ds-color-primary, #006ee9), #ffd325); border-radius: 2px; } .dau-sub-section h3 { font-size: 22px; font-weight: 700; margin: 32px 0 12px; color: #1a1a2e; } .dau-sub-section p { font-size: 16px; line-height: 1.85; color: #333; margin: 0 0 14px; } .dau-sub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 24px 0; } .dau-sub-card { position: relative; padding: 28px 24px; border-radius: 16px; background: #fff; border: 1px solid #eee; box-shadow: 0 2px 12px rgba(0,0,0,0.04); transition: transform 0.25s, box-shadow 0.25s; } .dau-sub-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,29,61,0.12); } .dau-sub-card .dau-card-num { font-size: 14px; font-weight: 700; color: var(--ds-color-primary, #006ee9); letter-spacing: 0.1em; margin-bottom: 10px; } .dau-sub-card .dau-card-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #1a1a2e; } .dau-sub-card .dau-card-desc { font-size: 14px; line-height: 1.6; color: #555; } .dau-sub-timeline { position: relative; padding-left: 32px; margin: 24px 0; } .dau-sub-timeline::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--ds-color-primary, #006ee9), #ffd325); } .dau-sub-timeline-item { position: relative; padding: 0 0 32px 28px; } .dau-sub-timeline-item::before { content: ""; position: absolute; left: -25px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--ds-color-primary, #006ee9); box-shadow: 0 0 0 4px #fff; } .dau-sub-timeline-item .dau-timeline-year { font-size: 13px; font-weight: 700; color: var(--ds-color-primary, #006ee9); letter-spacing: 0.1em; } .dau-sub-timeline-item .dau-timeline-title { font-size: 18px; font-weight: 700; color: #1a1a2e; margin: 4px 0 8px; } .dau-sub-timeline-item .dau-timeline-desc { font-size: 14px; line-height: 1.6; color: #555; } .dau-sub-signature { margin: 40px 0; padding: 24px 28px; background: linear-gradient(135deg, #f0f5fa 0%, #fff 100%); border-left: 4px solid var(--ds-color-primary, #006ee9); font-size: 17px; line-height: 1.8; color: #1a1a2e; } .dau-sub-signature .dau-sig-name { display: block; margin-top: 16px; font-weight: 700; font-size: 18px; } .dau-sub-related { max-width: 1100px; margin: 0 auto; padding: 60px 40px 80px; border-top: 1px solid #eee; } .dau-sub-related h3 { font-size: 22px; font-weight: 700; margin: 0 0 24px; color: #1a1a2e; } .dau-sub-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .dau-sub-related-card { display: block; padding: 20px 22px; border-radius: 12px; background: #f0f5fa; font-size: 15px; font-weight: 600; color: #1a1a2e; transition: transform 0.2s, background 0.2s; } .dau-sub-related-card:hover { transform: translateY(-2px); background: #006ee9; color: #fff; } /* === SUB-PAGE MODERN HERO end === */ /* GLOBAL a reset — 운영 reset.css 누락 분 보강 (V2026_04_27_05) */ a { text-decoration: none; color: inherit; } /* donga main_kor + footer + supplement v4 (Hero z-auto, wrapper display:contents, mquick ctrl arrow) 2026-04-22 */ /* === supplement 2026-04-22 v4 === */ /* sr-only */ .blind, .wblind, .sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .hide { display: none !important; } /* CMS wrapper + React client wrapper 모두 투명화 (CSR 이후 hydration 에 추가되는

포함) */ /* Hero — 원본과 동일한 stacking. :before 는 배경, #mVisual 내부는 z:1 (원본 .img-box/.txt-box 가 이미 z:1. :before z-auto 만으로 뒤. 명시적 z-index:0 로 안전성) */ .mVisual-wr { position: relative; } .mVisual-wr:before { z-index: 0; } .mVisual-wr > #mVisual.swiper, .mVisual-wr #mVisual { position: relative; z-index: 1; } /* msec 섹션 stacking containment (:before z:-1 이 ancestor escape 방지) */ .msec01, .msec02, .msec03, .msec05, .msec06, .msec07 { isolation: isolate; } /* Quick data-ctrl arrow pseudo (원본은 .mquick-wr .data-ctrl 만 정의되어 있어 data-ctrl 이 .mquick 내부에 있을 때 arrow 가 매치되지 않음) */ .mquick .data-ctrl { position: absolute; right: 0; top: 50%; margin-top: -47px; z-index: 2; } .mquick .data-ctrl > .data-pkgs { display: block; } .mquick .data-ctrl button { display: block; position: relative; background: var(--ds-color-quickCtrl-bg, #d6d8e1); border: 0; border-radius: 50%; width: 44px; height: 44px; margin-bottom: 5px; cursor: pointer; } .mquick .data-ctrl button:last-child { margin-bottom: 0; } .mquick .data-ctrl button:before, .mquick .data-ctrl button:after { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: var(--ds-color-quickCtrl-arrow, #0b1747); border: 0; width: 2px; height: 8px; transition: all 0.3s ease-out; } .mquick .data-ctrl .btn-prev:before { transform: translateY(-35%) rotate(45deg); } .mquick .data-ctrl .btn-prev:after { transform: translateY(35%) rotate(-45deg); } .mquick .data-ctrl .btn-next:before { transform: translateY(35%) rotate(45deg); } .mquick .data-ctrl .btn-next:after { transform: translateY(-35%) rotate(-45deg); } /* Quick mIcban positioning — data-ctrl 기준점 확보 */ .mquick .tab-container div[role="tabpanel"] { position: relative; } @charset "utf-8"; .msec { width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; } .msec-l { width: 100%; max-width: 1600px; margin: 0 auto; box-sizing: border-box; } .m-tit-box { width: 410px; } .m-tit-box .m-tit { color: var(--ds-primitive-gray-900, #111); font-size: 3.333em; font-weight: 700; font-family: "Paperlogy", "Pretendard", sans-serif; letter-spacing: 0; } .m-tit-box .m-eng-tit { display: block; margin-bottom: 17px; color: var(--ds-component-text-engtitleFg, #006ee9); font-size: 0.333em; font-weight: 700; font-family: "Paperlogy", "Pretendard", sans-serif; letter-spacing: 0; } @media all and (max-width: 1759px) { .msec-l { padding: 0 30px; } } @media all and (max-width: 1459px) { .msec { padding: 0 30px; } } @media all and (max-width: 999px) { #mcontainer-wrap { font-size: 17px; } .msec-l, .msec { padding: 0 20px; } .m-tit-box { width: auto; } .m-tit-box .m-tit { font-size: 2.353em; } .m-tit-box .m-eng-tit { font-size: 0.4615em; } } @media all and (max-width: 768px) { #mcontainer-wrap { font-size: 16px; } .m-tit-box .m-tit { font-size: 1.733em; } } @media all and (max-width: 599px) { #mcontainer-wrap { font-size: 15px; } } /* ============================== * 메인비쥬얼 ================================= */ .mVisual-wr { position: relative; padding: 0 60px; } .mVisual-wr:before { content: ""; display: block; position: absolute; right: -440px; top: -140px; background-color: var(--ds-component-hero-bg, #006ee9); width: 100%; height: calc(100% + 60px); } .mVisual-wr:after, .msec01:before { content: ""; display: block; position: absolute; left: 60px; bottom: 0; background-color: var(--ds-component-hero-backdropBg, #e9ebf1); width: 2000px; height: 100%; z-index: -1; } .mVisual-wr:after { height: 50%; } #mVisual { } #mVisual .data-list { } #mVisual .data-list .item-box { display: flex; align-items: center; } #mVisual .data-list .img-box { align-self: flex-start; flex: 1 1 0; position: relative; border-radius: 0 0 100px 30px; overflow: hidden; z-index: 1; } #mVisual .data-list .img-box:before { content: ""; display: block; width: 0; padding-top: 55.5555%; } #mVisual .data-list .img-box img { display: block; position: absolute; width: auto; height: 100%; left: 50%; top: 0; transform: translateX(-50%); } #mVisual .data-list .txt-box { position: relative; width: 545px; padding: 0 0 190px 65px; box-sizing: border-box; z-index: 1; } #mVisual .data-list .txt-box .txt-core { position: relative; } #mVisual .data-list .txt-box .txt-core .p-txt1, #mVisual .data-list .txt-box .txt-core .p-txt2 { color: var(--ds-primitive-neutral-0, #fff); line-height: 1.22; font-family: "Paperlogy", "Pretendard", sans-serif; word-wrap: break-word; word-break: keep-all; white-space: normal; box-sizing: border-box; word-wrap: break-word; opacity: 0; } #mVisual .data-list .txt-box .txt-core .p-txt1 { font-size: 3.333em; font-weight: 700; letter-spacing: -0.05em; transform: translateY(-60px); } #mVisual .data-list .txt-box .txt-core .p-txt1:before { content: ""; display: block; background-color: var(--ds-component-hero-dot, #ffd325); border-radius: 50%; width: 16px; height: 16px; margin: 0 0 24px 4px; } #mVisual .data-list .txt-box .txt-core .p-txt2 { margin: 24px 0 0 3px; font-size: 1.111em; letter-spacing: 0; transform: translateY(60px); } #mVisual .data-list .swiper-slide-active { } #mVisual .data-list .swiper-slide-active .txt-box .txt-core .p-txt1, #mVisual .data-list .swiper-slide-active .txt-box .txt-core .p-txt2 { opacity: 1; transform: translateY(0); } #mVisual .data-list .swiper-slide-active .txt-box .txt-core .p-txt1 { transition: all 1s ease 0.4s; } #mVisual .data-list .swiper-slide-active .txt-box .txt-core .p-txt2 { transition: all 1s ease 0.6s; } #mVisual .data-list .hasNoData { background: #f5f5f5; text-align: center; } #mVisual .data-list .hasNoData:before { content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; } #mVisual .hasNoData .no-data { display: inline-block; vertical-align: middle; width: auto; } #mVisual .data-ctrl { position: absolute; left: calc(100% - 545px); bottom: 190px; padding-left: 70px; z-index: 1; } #mVisual .data-ctrl button { display: block; position: relative; background: none; border: 0; width: 25px; height: 25px; } #mVisual .data-ctrl button:before, #mVisual .data-ctrl button:after { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } #mVisual .data-pkgs { display: inline-flex; align-items: center; } #mVisual .data-pkgs > button { margin: 0 -7px; } #mVisual .data-pkgs > button:before, #mVisual .data-pkgs > button:after { background: var(--ds-primitive-neutral-0, #fff); border: 0; width: 2px; height: 14px; } #mVisual .data-pkgs .btn-prev, #mVisual .data-pkgs .btn-next { transition: transform 0.3s ease-out; } #mVisual .data-pkgs .btn-prev:hover { transform: translateX(-6px); } #mVisual .data-pkgs .btn-next:hover { transform: translateX(6px); } #mVisual .data-pkgs .btn-prev:before { transform: translateY(-35%) rotate(39deg); } #mVisual .data-pkgs .btn-prev:after { transform: translateY(35%) rotate(-39deg); } #mVisual .data-pkgs .btn-next:before { transform: translateY(35%) rotate(39deg); } #mVisual .data-pkgs .btn-next:after { transform: translateY(-35%) rotate(-39deg); } #mVisual .data-nums { display: inline-flex; align-items: center; flex-direction: column; margin: 0 auto; width: 160px; font-size: 0.889em; font-weight: 500; letter-spacing: -0.05em; text-align: center; position: relative; } #mVisual .data-nums:before { content: ""; display: block; background-color: var(--ds-primitive-neutral-0, #fff); width: 1px; height: 28px; transform: rotate(45deg); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } #mVisual .data-nums span { margin: 2px 0; } #mVisual .data-nums .current { color: var(--ds-primitive-neutral-0, #fff); margin-right: 18px; } #mVisual .data-nums .total { color: rgba(255, 255, 255, 0.6); margin-left: 26px; } #mVisual .data-auto { display: inline-flex; align-items: center; align-self: center; margin-left: 20px; } #mVisual .data-auto.disabled { display: none; } #mVisual .data-auto button { background-color: var(--ds-primitive-neutral-0, #fff); border-radius: 50%; width: 30px; height: 30px; } #mVisual .data-auto .btn-stop:before { border: 2px solid #626262; border-top: 0; border-bottom: 0; width: 6px; height: 10px; box-sizing: border-box; } #mVisual .data-auto .btn-play { display: none; } #mVisual .data-auto .btn-play:before { border-width: 5px 0 5px 7px; border-style: solid; border-color: transparent; border-left-color: #626262; width: 0; height: 0; } @media all and (max-width: 1799px) { .mVisual-wr:before { right: -360px; } #mVisual .data-ctrl { bottom: 100px; } } @media all and (max-width: 1699px) { .mVisual-wr { padding: 0 30px; } .mVisual-wr:before { right: -315px; } .mVisual-wr:after, .msec01:before { left: 30px; } } @media all and (max-width: 1599px) { .mVisual-wr:before { right: -260px; } #mVisual .data-list .txt-box .txt-core .p-txt1 { font-size: 2.8em; } } @media all and (max-width: 1399px) { .mVisual-wr:before { top: 0; right: 0; border-bottom-left-radius: 200px; height: 100%; } .mVisual-wr:after, .msec01:before { left: 0; } #mVisual .data-list .item-box { flex-direction: column; } #mVisual .data-list .img-box { width: 80%; flex: auto; border-bottom-right-radius: 170px; } #mVisual .data-list .txt-box { align-self: flex-end; width: auto; margin-top: -223px; padding: 0 0 120px; } #mVisual .data-list .txt-box .txt-core .p-txt1 { font-size: 2.6em; } #mVisual .data-ctrl { bottom: 45px; } } @media all and (max-width: 999px) { .mVisual-wr { padding: 0 20px; } } @media all and (max-width: 768px) { .mVisual-wr:before { border-bottom-left-radius: 100px; } #mVisual .data-list .item-box { display: block; } #mVisual .data-list .img-box { width: auto; border-radius: 0 0 80px 20px; } #mVisual .data-list .txt-box { margin-top: -45px; padding: 0 30px 60px 30px; } #mVisual .data-list .txt-box .txt-core .p-txt1 { margin-top: -40px; font-size: 2.3em; } #mVisual .data-list .txt-box .txt-core .p-txt1:before { margin-bottom: 10px; width: 10px; height: 10px; } #mVisual .data-list .txt-box .txt-core .p-txt2 { font-size: 1em; } #mVisual .data-ctrl { left: auto; right: 10px; bottom: 20px; } #mVisual .data-nums { width: 120px; } } @media all and (max-width: 399px) { #mVisual .data-list .txt-box { padding: 0 15px 60px 15px; } #mVisual .data-list .txt-box .txt-core .p-txt2 br { display: none; } #mVisual .data-ctrl { bottom: 15px; } } /* ============================== * 주요서비스 ================================= */ .msec01 { position: relative; padding: 45px 0; } .msec01:before { border-bottom-left-radius: 30px; } .msec01 .mquick-wr { display: flex; flex-flow: row wrap; align-items: center; } .mquick-wr .m-tit-box .m-tit { position: relative; font-size: 2em; letter-spacing: -0.05em; } .mquick-wr .m-tit-box .m-tit:before { content: ""; display: block; position: absolute; left: -4px; top: -9px; background-color: var(--ds-component-keyword-dotBg, #ffd325); border-radius: 50%; width: 13px; height: 13px; z-index: -1; } .mquick-wr .m-tit-box .m-txt { margin-top: 17px; color: var(--ds-primitive-gray-700, #555); line-height: 1.2; } .mquick-wr .mquick { display: flex; align-items: center; align-self: flex-start; width: calc(100% - 410px); box-sizing: border-box; } .mquick > ul { width: 170px; padding-right: 40px; } .mquick > ul > li button { background: var(--ds-component-quick-service-bg); border: 1px solid var(--ds-primitive-gray-300, #ddd); border-radius: 30px; width: 130px; margin-bottom: 3px; padding: 12px 10px; color: var(--ds-component-slider-controlsFg, #0d1744); font-size: 16px; font-weight: 500; font-family: "Paperlogy", "Pretendard", sans-serif; letter-spacing: -0.05em; box-sizing: border-box; transition: all 0.3s; } .mquick > ul > li:last-child button { margin-bottom: 0; } .mquick > ul > li button.over, .mquick > ul > li button:hover { background: var(--ds-semantic-brand-secondary-dark, #22264c); border-color: var(--ds-semantic-brand-secondary-dark, #22264c); color: var(--ds-primitive-neutral-0, #fff); box-shadow: 0 13px 28px 0 rgba(144, 156, 187, 0.4); } .mquick-wr .mquick .tab-container { width: calc(100% - 170px); padding: 20px; box-sizing: border-box; } .mquick-wr .mquick .tab-container div[role="tabpanel"] { display: none; position: relative; padding-right: 60px; box-sizing: border-box; } .mquick-wr .mquick .tab-container div[role="tabpanel"].active { display: block; } .mquick-wr .mquick .swiper { margin: -30px; padding: 30px; } .mquick-wr .mquick .swiper-slide a { display: flex; flex-flow: column; justify-content: center; background-color: var(--ds-component-quick-service-bg); border-radius: 40px; height: 150px; padding: 5px 7px; text-align: center; box-shadow: 0 13px 25px 0 rgba(204, 209, 222, 0.4); box-sizing: border-box; } .mquick-wr .mquick .swiper-slide a span { display: block; } .mquick-wr .mquick .swiper-slide a .s-ico { display: block; background-repeat: no-repeat; background-position: center; width: 60px; height: 60px; margin: 0 auto; transition: transform 0.3s ease-out; } .mquick-wr .mIcban1 .swiper-slide a .s-ico.icon1 { background-image: url(/resources/_Img/MainModule/micban/l1/ico1.png); } .mquick-wr .mIcban1 .swiper-slide a .s-ico.icon2 { background-image: url(/resources/_Img/MainModule/micban/l1/ico2.png); } .mquick-wr .mIcban1 .swiper-slide a .s-ico.icon3 { background-image: url(/resources/_Img/MainModule/micban/l1/ico3.png); } .mquick-wr .mIcban1 .swiper-slide a .s-ico.icon4 { background-image: url(/resources/_Img/MainModule/micban/l1/ico4.png); } .mquick-wr .mIcban1 .swiper-slide a .s-ico.icon5 { background-image: url(/resources/_Img/MainModule/micban/l1/ico5.png); } .mquick-wr .mIcban1 .swiper-slide a .s-ico.icon6 { background-image: url(/resources/_Img/MainModule/micban/l1/ico6.png); } .mquick-wr .mIcban1 .swiper-slide a .s-ico.icon7 { background-image: url(/resources/_Img/MainModule/micban/l1/ico7.png); } .mquick-wr .mIcban1 .swiper-slide a .s-ico.icon8 { background-image: url(/resources/_Img/MainModule/micban/l1/ico8.png); } .mquick-wr .mIcban1 .swiper-slide a .s-ico.icon9 { background-image: url(/resources/_Img/MainModule/micban/l1/ico9.png); } .mquick-wr .mIcban1 .swiper-slide a .s-ico.icon10 { background-image: url(/resources/_Img/MainModule/micban/l1/ico10.png); } .mquick-wr .mIcban2 .swiper-slide a .s-ico.icon1 { background-image: url(/resources/_Img/MainModule/micban/l2/ico1.png); } .mquick-wr .mIcban2 .swiper-slide a .s-ico.icon2 { background-image: url(/resources/_Img/MainModule/micban/l2/ico2.png); } .mquick-wr .mIcban2 .swiper-slide a .s-ico.icon3 { background-image: url(/resources/_Img/MainModule/micban/l2/ico3.png); } .mquick-wr .mIcban2 .swiper-slide a .s-ico.icon4 { background-image: url(/resources/_Img/MainModule/micban/l2/ico4.png); } .mquick-wr .mIcban2 .swiper-slide a .s-ico.icon5 { background-image: url(/resources/_Img/MainModule/micban/l2/ico5.png); } .mquick-wr .mIcban2 .swiper-slide a .s-ico.icon6 { background-image: url(/resources/_Img/MainModule/micban/l2/ico6.png); } .mquick-wr .mIcban2 .swiper-slide a .s-ico.icon7 { background-image: url(/resources/_Img/MainModule/micban/l2/ico7.png); } .mquick-wr .mIcban2 .swiper-slide a .s-ico.icon8 { background-image: url(/resources/_Img/MainModule/micban/l2/ico8.png); } .mquick-wr .mIcban2 .swiper-slide a .s-ico.icon9 { background-image: url(/resources/_Img/MainModule/micban/l2/ico9.png); } .mquick-wr .mIcban2 .swiper-slide a .s-ico.icon10 { background-image: url(/resources/_Img/MainModule/micban/l2/ico10.png); } .mquick-wr .mIcban3 .swiper-slide a .s-ico.icon1 { background-image: url(/resources/_Img/MainModule/micban/l3/ico1.png); } .mquick-wr .mIcban3 .swiper-slide a .s-ico.icon2 { background-image: url(/resources/_Img/MainModule/micban/l3/ico2.png); } .mquick-wr .mIcban3 .swiper-slide a .s-ico.icon3 { background-image: url(/resources/_Img/MainModule/micban/l3/ico3.png); } .mquick-wr .mIcban3 .swiper-slide a .s-ico.icon4 { background-image: url(/resources/_Img/MainModule/micban/l3/ico4.png); } .mquick-wr .mIcban3 .swiper-slide a .s-ico.icon5 { background-image: url(/resources/_Img/MainModule/micban/l3/ico5.png); } .mquick-wr .mIcban3 .swiper-slide a .s-ico.icon6 { background-image: url(/resources/_Img/MainModule/micban/l3/ico6.png); } .mquick-wr .mIcban3 .swiper-slide a .s-ico.icon7 { background-image: url(/resources/_Img/MainModule/micban/l3/ico7.png); } .mquick-wr .mIcban3 .swiper-slide a .s-ico.icon8 { background-image: url(/resources/_Img/MainModule/micban/l3/ico8.png); } .mquick-wr .mIcban3 .swiper-slide a .s-ico.icon9 { background-image: url(/resources/_Img/MainModule/micban/l3/ico9.png); } .mquick-wr .mIcban3 .swiper-slide a .s-ico.icon10 { background-image: url(/resources/_Img/MainModule/micban/l3/ico10.png); } .mquick-wr .mquick .swiper-slide a:hover .s-ico { transform: translateY(-6px); } .mquick-wr .mquick .swiper-slide a .s-tit { margin-top: 10px; color: var(--ds-component-slider-controlsFg, #0d1744); font-size: 0.944em; font-weight: 500; letter-spacing: -0.05em; overflow: hidden; word-wrap: break-word; } .mquick-wr .data-ctrl { position: absolute; right: 0; top: 50%; margin-top: -47px; z-index: 2; } .mquick-wr .data-ctrl button { display: block; position: relative; background: var(--ds-color-quickCtrl-bg, #d6d8e1); border: 0; border-radius: 50%; width: 44px; height: 44px; margin-bottom: 5px; transition: all 0.3s ease-out; } .mquick-wr .data-ctrl button:last-child { margin-bottom: 0; } .mquick-wr .data-ctrl .btn-prev { } .mquick-wr .data-ctrl .btn-next { } .mquick-wr .data-ctrl button:before, .mquick-wr .data-ctrl button:after { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .mquick-wr .data-ctrl > button:before, .mquick-wr .data-ctrl > button:after { background: var(--ds-color-quickCtrl-arrow, #0b1747); border: 0; width: 2px; height: 8px; transition: all 0.3s ease-out; } .mquick-wr .data-ctrl .btn-prev:before { transform: translateY(-35%) rotate(45deg); } .mquick-wr .data-ctrl .btn-prev:after { transform: translateY(35%) rotate(-45deg); } .mquick-wr .data-ctrl .btn-next:before { transform: translateY(35%) rotate(45deg); } .mquick-wr .data-ctrl .btn-next:after { transform: translateY(-35%) rotate(-45deg); } .mquick-wr .data-ctrl .btn-prev:hover, .mquick-wr .data-ctrl .btn-next:hover { background-color: var(--ds-component-quick-service-bg); } .mquick-wr .data-ctrl > button:hover:before, .mquick-wr .data-ctrl > button:hover:after { background: var(--ds-color-quickCtrl-arrow, #0b1747); } @media all and (min-width: 1400px) { .mquick-wr .data-ctrl.hide { display: none !important; } } @media all and (max-width: 1799px) { .msec01 .msec-l { padding-right: 10px; } .mquick-wr .mquick { padding-right: 0; } .msec01 .mquick-wr { padding-left: 30px; } } @media all and (max-width: 1599px) { .msec01 .m-tit-box { width: 320px; } .mquick-wr .mquick { width: calc(100% - 320px); } .mquick > ul { padding-right: 10px; } .mquick-wr .mquick .tab-container { width: calc(100% - 140px); } } @media all and (max-width: 1399px) { .msec01 .mquick-wr { padding-left: 0; } .mquick-wr .mquick .swiper { margin: -30px 0; padding: 30px 0; } } @media all and (max-width: 999px) { .msec01 { padding-bottom: 30px; } .msec01 .mquick-wr { display: block; } .mquick-wr .m-tit-box { margin-bottom: 12px; } .mquick-wr .m-tit-box .m-tit { font-size: 1.765em; } .mquick-wr .m-tit-box .m-txt { display: none; } .mquick-wr .mquick { position: relative; display: block; width: auto; z-index: 1; } .mquick > ul.mquick-list { display: flex; justify-content: flex-end; position: absolute; right: 0; bottom: 100%; width: 100%; padding-right: 0; } .mquick > ul.mquick-list > li { position: relative; margin-left: -15px; } .mquick > ul.mquick-list > li:first-child { z-index: 2; } .mquick > ul.mquick-list > li:nth-child(2) { z-index: 1; } .mquick > ul.mquick-list > li button { margin-bottom: 5px; padding: 11px 10px; } .mquick-wr .mquick .tab-container { width: auto; padding: 20px 18px; } .mquick-wr .mquick .tab-container div[role="tabpanel"] { padding-right: 0; } .mquick-wr .mquick .swiper { margin: 0; padding: 0; } .mquick-wr .mquick .swiper-slide a { border-radius: 30px; height: 120px; box-shadow: none; } .mquick-wr .mquick .swiper-slide a .s-ico { background-size: 42px auto; width: 42px; height: 42px; } .mquick-wr .data-ctrl { position: static; margin-top: 0; } .mquick-wr .data-ctrl button { position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; z-index: 2; } .mquick-wr .data-ctrl .btn-prev { left: -18px; } .mquick-wr .data-ctrl .btn-next { right: -18px; } } @media all and (max-width: 768px) { .mquick-wr .m-tit-box .m-tit { font-size: 1.25em; } .mquick-wr .mquick .tab-container { padding: 10px 20px; } .mquick > ul.mquick-list > li { margin-left: -10px; } .mquick > ul.mquick-list > li button { width: 78px; margin-bottom: 5px; padding: 6px 10px; font-size: 12px; } .mquick-wr .mquick .swiper-slide { height: auto; min-height: 88px; } .mquick-wr .mquick .swiper-slide a { border-radius: 15px; min-height: auto; height: 100%; padding: 10px 5px; box-sizing: border-box; } .mquick-wr .mquick .swiper-slide a .s-tit { margin-top: 3px; } .mquick-wr .data-ctrl button { width: 30px; height: 30px; margin-top: -15px; } .mquick-wr .data-ctrl > button:before, .mquick-wr .data-ctrl > button:after { background-color: var(--ds-component-slider-controlsFg, #0a1646); height: 6px; } } @media all and (max-width: 399px) { .mquick > ul.mquick-list { position: static; } } /* ============================== * 대학 공지 ================================= */ .msec02 { margin-top: 100px; } .mboard-wr { height: 410px; } .mboard-wr .m-tit-box { padding-bottom: 25px; } .mboard-wr .m-tit-box .m-txt { margin: 10px 0 0 3px; color: var(--ds-primitive-gray-700, #555); font-size: 1.111em; line-height: 1.2; } #mTabBoard { display: flex; flex-flow: row wrap; position: relative; width: 410px; box-sizing: border-box; } #mTabBoard dl { } #mTabBoard dl dt { position: relative; z-index: 1; } #mTabBoard dl dt a { display: block; background-color: var(--ds-primitive-neutral-0, #fff); border: 1px solid var(--ds-primitive-gray-300, #ddd); border-radius: 30px; min-width: 64px; margin: 11px 3px 0 0; padding: 14px 18px 12px; color: #666; font-size: 0.889em; font-weight: 400; text-align: center; line-height: 1; letter-spacing: -0.05em; box-sizing: border-box; transition: all 0.3s ease; } #mTabBoard dl.isOn dt a, #mTabBoard dl dt a:hover { background-color: var(--ds-semantic-brand-secondary-dark, #22264c); border-color: var(--ds-semantic-brand-secondary-dark, #22264c); color: var(--ds-primitive-neutral-0, #ffffff); font-weight: 500; box-shadow: 0 13px 28px 0 rgba(144, 156, 187, 0.4); } #mTabBoard dl dd { display: none; position: absolute; top: -120px; left: 0; width: calc(50vw + 800px); max-width: 2000px; padding-left: 410px; box-sizing: border-box; } #mTabBoard dl dd .swiper-slide { } #mTabBoard dl dd .swiper-slide > a { display: block; position: relative; background-color: var(--ds-primitive-neutral-0, #fff); border: 1px solid #bac7d8; border-radius: 30px; height: 410px; padding: 40px 50px; box-sizing: border-box; transition: all 0.3s ease-out; } #mTabBoard dl dd .swiper-slide > a:before { content: ""; display: block; position: absolute; right: 0; bottom: 0; border-radius: 30px; transition: all 0.3s ease-out; z-index: -1; } #mTabBoard dl dd .swiper-slide > a:before { background-color: #f5f9fd; width: calc(100% - 20px); height: calc(100% - 20px); } #mTabBoard dl dd .swiper-slide > a span { display: block; letter-spacing: -0.05em; } #mTabBoard dl dd .swiper-slide > a .s-cate { border-width: 1px; border-style: solid; border-radius: 50%; width: 50px; height: 50px; margin-left: -10px; line-height: 48px; text-align: center; box-sizing: border-box; transition: all 0.3s ease-out; } #mTabBoard dl dd .swiper-slide > a.c01 .s-cate { background-color: var(--ds-semantic-info); border-color: var(--ds-semantic-info); } #mTabBoard dl dd .swiper-slide > a.c02 .s-cate { background-color: var(--ds-component-badge-bg-academic, #1e40af); border-color: var(--ds-component-badge-bg-academic, #1e40af); } #mTabBoard dl dd .swiper-slide > a.c03 .s-cate { background-color: var(--ds-component-badge-bg-scholarship, #d97706); border-color: var(--ds-component-badge-bg-scholarship, #d97706); } #mTabBoard dl dd .swiper-slide > a.c04 .s-cate { background-color: var(--ds-component-badge-bg-event, #16a34a); border-color: var(--ds-component-badge-bg-event, #16a34a); } #mTabBoard dl dd .swiper-slide > a.c05 .s-cate { background-color: var(--ds-component-badge-bg-recruit, #ea580c); border-color: var(--ds-component-badge-bg-recruit, #ea580c); } #mTabBoard dl dd .swiper-slide > a .s-cate .txt { display: inline-block; color: var(--ds-primitive-neutral-0, #fff); font-size: 0.889em; font-weight: 500; transition: color 0.3s ease-out; } #mTabBoard dl dd .swiper-slide > a .date-box { position: absolute; right: 37px; top: 33px; color: var(--ds-primitive-gray-500, #71788e); font-weight: 500; letter-spacing: -0.05em; text-align: center; } #mTabBoard dl dd .swiper-slide > a .date-box .day { font-size: 2.222em; } #mTabBoard dl dd .swiper-slide > a .date-box .year { margin-top: 4px; font-size: 0.833em; } #mTabBoard dl dd .swiper-slide > a .s-tit { margin-top: 30px; color: var(--ds-primitive-neutral-1000, #000); font-size: 1.333em; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; height: 90px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } #mTabBoard dl dd .swiper-slide > a .s-txt { margin-top: 22px; color: #777; font-size: 0.944em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; height: 41px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #mTabBoard dl dd .swiper-slide > a .s-charge { margin-top: 32px; color: var(--ds-semantic-brand-secondary-dark, #22264c); font-size: 0.944em; font-weight: 500; } #mTabBoard dl dd .swiper-slide > a .s-period { margin-top: 11px; color: var(--ds-semantic-brand-secondary-dark, #22264c); font-size: 0.889em; letter-spacing: 0; } #mTabBoard dl dd .data-ctrl { display: flex; align-items: center; position: absolute; left: 0; bottom: 0; z-index: 1; } #mTabBoard dl dd .data-ctrl button, #mTabBoard dl dd .data-ctrl a { position: relative; display: block; background-color: var(--ds-primitive-neutral-0, #fff); border: 1px solid var(--ds-primitive-gray-300, #ddd); border-radius: 50%; width: 40px; height: 40px; margin-right: 5px; box-sizing: border-box; transition: all 0.3s ease-out; } #mTabBoard dl dd .data-ctrl button:before, #mTabBoard dl dd .data-ctrl button:after { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } #mTabBoard dl dd .data-ctrl > button:before, #mTabBoard dl dd .data-ctrl > button:after { background: var(--ds-component-slider-controlsFg, #0c2042); border: 0; width: 2px; height: 13px; } #mTabBoard dl dd .data-ctrl .btn-prev:before { transform: translateY(-35%) rotate(45deg); } #mTabBoard dl dd .data-ctrl .btn-prev:after { transform: translateY(35%) rotate(-45deg); } #mTabBoard dl dd .data-ctrl .btn-next:before { transform: translateY(35%) rotate(45deg); } #mTabBoard dl dd .data-ctrl .btn-next:after { transform: translateY(-35%) rotate(-45deg); } #mTabBoard dl dd .data-ctrl button:hover { background-color: var(--ds-primitive-gray-300, #ddd); } #mTabBoard dl dd .data-ctrl .data-more { background-color: var(--ds-primitive-gray-500, #71788e); border-color: var(--ds-primitive-gray-500, #71788e); transition: all 0.3s ease; } #mTabBoard dl dd .data-ctrl .data-more:before, #mTabBoard dl dd .data-ctrl .data-more:after { content: ""; display: block; position: absolute; width: 16px; height: 2px; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: var(--ds-primitive-neutral-0, #fff); } #mTabBoard dl dd .data-ctrl .data-more:before { } #mTabBoard dl dd .data-ctrl .data-more:after { transform: rotate(90deg); } #mTabBoard dl dd .data-ctrl .data-more:hover { transform: rotate(270deg); } #mTabBoard dl dd .data-auto button { } #mTabBoard dl dd .data-auto .btn-stop:before { border: 2px solid var(--ds-component-slider-controlsFg, #0a1646); border-top: 0; border-bottom: 0; width: 8px; height: 16px; box-sizing: border-box; } #mTabBoard dl dd .data-auto .btn-play { display: none; } #mTabBoard dl dd .data-auto .btn-play:before { border-width: 5px 0 5px 7px; border-style: solid; border-color: transparent; border-left-color: var(--ds-component-slider-controlsFg, #0a1646); width: 0; height: 0; } #mTabBoard dl.isOn dd { display: block; } @media all and (min-width: 1400px) { /* #mTabBoard dl dd .data-ctrl.hide button {display:none !important} */ } @media all and (min-width: 769px) { #mTabBoard dl dd .swiper-slide > a:hover { background-color: #f5f9fd; border-color: #f5f9fd; border-bottom-right-radius: 150px; } #mTabBoard dl dd .swiper-slide > a.c01:hover:before { background-color: var(--ds-semantic-info); } #mTabBoard dl dd .swiper-slide > a.c02:hover:before { background-color: var(--ds-component-badge-bg-academic, #1e40af); } #mTabBoard dl dd .swiper-slide > a.c03:hover:before { background-color: var(--ds-component-badge-bg-scholarship, #d97706); } #mTabBoard dl dd .swiper-slide > a.c04:hover:before { background-color: var(--ds-component-badge-bg-event, #16a34a); } #mTabBoard dl dd .swiper-slide > a.c05:hover:before { background-color: var(--ds-component-badge-bg-recruit, #ea580c); } #mTabBoard dl dd .swiper-slide > a:hover .s-cate { background-color: var(--ds-primitive-neutral-0, #fff); } #mTabBoard dl dd .swiper-slide > a:hover.c01 .s-cate .txt { color: var(--ds-semantic-info); } #mTabBoard dl dd .swiper-slide > a:hover.c02 .s-cate .txt { color: var(--ds-component-badge-bg-academic, #1e40af); } #mTabBoard dl dd .swiper-slide > a:hover.c03 .s-cate .txt { color: var(--ds-component-badge-bg-scholarship, #d97706); } #mTabBoard dl dd .swiper-slide > a:hover.c04 .s-cate .txt { color: var(--ds-component-badge-bg-event, #16a34a); } #mTabBoard dl dd .swiper-slide > a:hover.c05 .s-cate .txt { color: var(--ds-component-badge-bg-recruit, #ea580c); } } @media all and (max-width: 1659px) { #mTabBoard dl dd { width: calc(100vw - 60px); } } @media all and (max-width: 1599px) { #mTabBoard dl dd .swiper-slide > a { padding: 40px 30px; } } @media all and (max-width: 1399px) { .mboard-wr { height: auto; } .mboard-wr .m-tit-box { width: auto; text-align: center; } #mTabBoard { justify-content: center; width: auto; height: 530px; } #mTabBoard dl dd { top: 0; width: 100%; margin-top: 120px; padding-left: 0; } #mTabBoard dl dd .data-ctrl { justify-content: center; right: 0; bottom: 100%; margin: 0 auto 20px; } } @media all and (max-width: 999px) { .msec02 { margin-top: 45px; } .mboard-wr .m-tit-box { padding-bottom: 2px; } .mboard-wr .m-tit-box .m-txt { margin: 15px 0 0; } #mTabBoard { height: 498px; } #mTabBoard dl dt a { margin-right: 9px; } #mTabBoard dl dd { /*width:calc(100vw + 151px);*/ margin-top: 130px; } #mTabBoard dl dd .swiper-slide > a { height: 368px; } #mTabBoard dl dd .swiper-slide > a .s-cate { width: 40px; height: 40px; font-size: 0.765em; line-height: 38px; } #mTabBoard dl dd .swiper-slide > a .date-box .day { font-size: 1.882em; } #mTabBoard dl dd .swiper-slide > a .date-box .year { font-size: 0.706em; } #mTabBoard dl dd .swiper-slide > a .s-tit { height: 72px; font-size: 1.117em; } #mTabBoard dl dd .swiper-slide > a .s-txt { height: 39px; } } @media all and (max-width: 768px) { .mboard-wr { height: 405px; } .mboard-wr .m-tit-box .m-txt { display: none; } #mTabBoard { height: auto; } #mTabBoard dl dt a { min-width: auto; margin: 7px 3px 0 0; padding: 10px 9px 7px 7px; } #mTabBoard dl dd { width: 100%; height: 295px; margin-top: 85px; } #mTabBoard dl dd .swiper-wrapper { height: 292px; } #mTabBoard dl dd .swiper-slide > a { display: flex; align-items: center; background-color: #f5f9fd; border: 0; border-radius: 10px; height: 70px; margin-bottom: 5px; padding: 5px 27px 5px 20px; } #mTabBoard dl dd .swiper-slide > a .date-box, #mTabBoard dl dd .swiper-slide > a .s-txt, #mTabBoard dl dd .swiper-slide > a .s-charge, #mTabBoard dl dd .swiper-slide > a .s-period { display: none; } #mTabBoard dl dd .swiper-slide > a .s-cate { width: 41px; height: 41px; margin-left: 0; margin-right: 13px; line-height: 38px; } #mTabBoard dl dd .swiper-slide > a .s-tit { flex: 1 1 0; margin-top: 0; height: auto; max-height: 35px; font-size: 0.933em; -webkit-line-clamp: 2; } #mTabBoard dl dd .data-ctrl button, #mTabBoard dl dd .data-ctrl a { width: 25px; height: 25px; } #mTabBoard dl dd .data-ctrl { margin-bottom: 10px; } #mTabBoard dl dd .data-ctrl > button:before, #mTabBoard dl dd .data-ctrl > button:after { height: 6px; } #mTabBoard dl dd .data-auto .btn-stop:before { width: 6px; height: 10px; } #mTabBoard dl dd .data-auto .btn-play:before { border-width: 4px 0 4px 5px; } #mTabBoard dl dd .data-ctrl .data-more:before, #mTabBoard dl dd .data-ctrl .data-more:after { width: 10px; } } @media all and (max-width: 399px) { .mboard-wr { height: 440px; } #mTabBoard { padding: 0 30px; } #mTabBoard dl dd { margin-top: 125px; } } /* ============================== * 동아뉴스 ================================= */ .msec03 { position: relative; margin-top: 130px; } .msec03 .deco { display: block; position: absolute; top: -30px; left: calc(50% - 100px); width: 1920px; color: var(--ds-primitive-neutral-0, #fff); font-size: 9.445em; font-weight: 700; font-family: "Paperlogy", "Pretendard", sans-serif; text-shadow: -1px 0 var(--ds-semantic-brand-primary-dark, #003d80), 0 1px var(--ds-semantic-brand-primary-dark, #003d80), 1px 0 var(--ds-semantic-brand-primary-dark, #003d80), 0 -1px var(--ds-semantic-brand-primary-dark, #003d80); opacity: 0.3; } #mNews { } #mNews .mnews-sld-box { position: relative; margin-top: 35px; z-index: 1; } #mNews .mnews-txt-box { position: absolute; right: 0; bottom: 55px; background-color: #1962cc; border-radius: 20px; width: 47.16%; margin-left: -40px; padding: 46px 60px 30px; box-sizing: border-box; z-index: 1; } #mNews .mnews-txt-box a { display: block; color: var(--ds-primitive-neutral-0, #fff); } #mNews .mnews-sld-box .s-cate { position: absolute; left: 60px; top: -15px; background-color: #203a91; border-radius: 10px; padding: 11px 20px 9px; color: var(--ds-primitive-neutral-0, #fff); font-size: 0.889em; font-weight: 300; letter-spacing: -0.05em; } #mNews .mnews-sld-box .s-tit { position: relative; color: var(--ds-primitive-neutral-0, #fff); font-size: 1.444em; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; height: 114px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; transition: all 0.3s ease-out; } #mNews .mnews-sld-box .s-tit:before { content: ""; display: block; background-color: var(--ds-semantic-accent-highlight, #ffd325); border-radius: 50%; width: 10px; height: 10px; margin: 0 0 10px 8px; } #mNews .mnews-sld-box .s-txt { margin-top: 15px; font-size: 0.889em; font-weight: 300; line-height: 1.2; letter-spacing: -0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; height: 39px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #mNews .mnews-sld-box .s-date { display: flex; align-items: center; position: relative; margin-top: 38px; color: var(--ds-primitive-neutral-0, #fff); font-size: 0.833em; font-weight: 300; } #mNews .mnews-sld-box .s-date:before { content: ""; display: block; background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; width: 28px; height: 28px; margin-right: 8px; } #mNews .mnews-sld-box .s-date:after { content: ""; display: block; position: absolute; left: 8px; top: 7px; background: url(/resources/_Templet/Main/main_kor/Img/main_spr.png) no-repeat 0 0; width: 13px; height: 13px; } #mNews .mnews-sld-box .s-more { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; position: absolute; right: 42px; bottom: 20px; font-size: 0.889em; z-index: 1; } #mNews .mnews-sld-box .s-more:after { content: ""; display: block; background: url(/resources/_Templet/Main/main_kor/Img/main_spr.png) no-repeat -23px 0; margin-left: -10px; width: 45px; height: 47px; transition: transform 0.3s ease; z-index: -1; } #mNews .mnews-txt-box .s-tit, #mNews .mnews-txt-box .s-txt { opacity: 0; transform: translateY(30px); } #mNews .mnews-txt-box .s-tit { transition: all 0.3s ease-out; } #mNews .mnews-txt-box .s-txt { transition: all 0.3s ease-out 0.1s; } #mNews .mnews-txt-box.news-on .s-tit, #mNews .mnews-txt-box.news-on .s-txt { opacity: 1; transform: translateY(0); } #mNews .mnews-txt-box a:hover .s-more:after { transform: translateX(6px); } #mNews .mnews-sld-box .swiper-slide { } #mNews .mnews-sld-box .swiper-slide > a, #mNews .mnews-sld-box .swiper-slide > a span { display: block; } #mNews .mnews-sld-box .swiper-slide .img-box { position: relative; background-color: #f2f2f2; border-radius: 20px; overflow: hidden; } #mNews .mnews-sld-box .swiper-slide .img-box:before { content: ""; display: block; padding-top: 66.6666%; } #mNews .mnews-sld-box .swiper-slide .img-box > img { position: absolute; left: 50%; top: 0; height: 100%; max-width: none; transform: translateX(-50%) scale(1); transition: transform 0.5s ease-out; } #mNews .mnews-sld-box .swiper-slide > a:hover .img-box > img { transform: translateX(-50%) scale(1.1); } #mNews .mnews-sld-box .swiper-slide .txt-box { display: none !important; } #mNews .mnews-sld-box .swiper-slide a { display: flex; align-items: flex-end; } #mNews .mnews-sld-box .swiper-slide .img-box { width: 58.54%; } #mNews .mnews-sld .data-ctrl { display: flex; position: absolute; right: 0; bottom: 380px; z-index: 2; } #mNews .mnews-sld .data-ctrl button, #mNews .mnews-sld .data-ctrl a { position: relative; display: block; background-color: var(--ds-primitive-neutral-0, #fff); border: 1px solid var(--ds-primitive-gray-300, #ddd); border-radius: 50%; margin-left: 5px; width: 40px; height: 40px; box-sizing: border-box; transition: all 0.3s ease-out; } #mNews .mnews-sld .data-ctrl button:before, #mNews .mnews-sld .data-ctrl button:after { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } #mNews .mnews-sld .data-ctrl > button:before, #mNews .mnews-sld .data-ctrl > button:after { background: var(--ds-component-slider-controlsFg, #0c2042); border: 0; width: 2px; height: 13px; } #mNews .mnews-sld .data-ctrl .btn-prev:before { transform: translateY(-35%) rotate(45deg); } #mNews .mnews-sld .data-ctrl .btn-prev:after { transform: translateY(35%) rotate(-45deg); } #mNews .mnews-sld .data-ctrl .btn-next:before { transform: translateY(35%) rotate(45deg); } #mNews .mnews-sld .data-ctrl .btn-next:after { transform: translateY(-35%) rotate(-45deg); } #mNews .mnews-sld .data-ctrl button:hover { background-color: var(--ds-primitive-gray-300, #ddd); } #mNews .mnews-sld .data-ctrl .data-more { background-color: var(--ds-primitive-gray-500, #71788e); border-color: var(--ds-primitive-gray-500, #71788e); transition: all 0.3s ease; } #mNews .mnews-sld .data-ctrl .data-more:before, #mNews .mnews-sld .data-ctrl .data-more:after { content: ""; display: block; position: absolute; width: 16px; height: 2px; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: var(--ds-primitive-neutral-0, #fff); } #mNews .mnews-sld .data-ctrl .data-more:before { } #mNews .mnews-sld .data-ctrl .data-more:after { transform: rotate(90deg); } #mNews .mnews-sld .data-ctrl .data-more:hover { transform: rotate(270deg); } @media all and (min-width: 1000px) and (max-width: 1599px) { #mNews .mnews-sld-box .swiper-slide a { padding-bottom: 55px; box-sizing: border-box; } #mNews .mnews-sld-box .swiper-slide .img-box { width: 69.54%; } #mNews .mnews-txt-box { padding: 40px 30px 30px; } #mNews .mnews-sld-box .s-more { right: 25px; } } @media all and (min-width: 1000px) { #mNews .mnews-sld-box { display: flex; flex-flow: row wrap; width: calc(50vw + 900px); } #mNews .mnews-sld-box .mnews-sld { width: 56.99%; margin: 0 40px 0 0; } #mNews .mnews-sld-box .mnwes-thumb-sld { width: 37.21%; margin: 50px 0 0; } /* #mNews .mnews-sld-box .mnwes-thumb-sld .swiper-slide-active {display:none} */ #mNews .mnews-sld-box .mnwes-thumb-sld .img-box { width: auto; } #mNews .mnews-sld-box .mnwes-thumb-sld a { display: block; margin-top: 90px; } #mNews .mnews-sld-box .mnwes-thumb-sld .s-cate, #mNews .mnews-sld-box .mnwes-thumb-sld .s-txt { display: none !important; } #mNews .mnews-sld-box .mnwes-thumb-sld .txt-box { display: block !important; background: none; margin: 35px 0 0; padding: 0; } #mNews .mnews-sld-box .mnwes-thumb-sld .txt-box .s-tit { color: var(--ds-primitive-neutral-1000, #000); font-size: 1.111em; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; height: 48px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #mNews .mnews-sld-box .mnwes-thumb-sld .txt-box .s-tit:before { display: none; } #mNews .mnews-sld-box .mnwes-thumb-sld .txt-box .s-date { display: block; margin-top: 13px; color: #222; font-size: 0.833em; } #mNews .mnews-sld-box .mnwes-thumb-sld .txt-box .s-date:before, #mNews .mnews-sld-box .mnwes-thumb-sld .txt-box .s-date:after { display: none; } #mNews .mnews-sld-box .mnews-sld .data-ctrl.hide { display: none !important; } } @media all and (min-width: 1000px) and (max-width: 1459px) { .msec03 .deco { font-size: 7em; } #mNews .mnews-sld-box { width: calc(100vw + 60px); } #mNews .mnews-sld-box .mnews-sld { margin-right: 20px; } } @media all and (max-width: 999px) { .msec03 { margin-top: 45px; } .msec03 .deco { top: -14px; font-size: 6em; } #mNews .mnews-sld { margin-top: 20px; } #mNews .mnews-sld-box .mnwes-thumb-sld { display: none !important; } #mNews .mnews-sld .swiper-slide a { align-items: flex-start; } #mNews .mnews-sld-box .s-tit { height: 79px; -webkit-line-clamp: 2; } #mNews .mnews-sld-box .s-txt { height: 37px; } #mNews .mnews-sld-box .s-date { margin-top: 17px; } #mNews .mnews-sld .data-ctrl { right: 0; bottom: auto; top: 0; } #mNews .mnews-txt-box { bottom: 0; padding: 30px 30px 25px; } } @media all and (max-width: 768px) { .msec03 .deco { display: none; } #mNews .mnews-sld { margin-top: -63px; padding-top: 40px; } #mNews .mnews-sld .swiper-slide a { display: block; } #mNews .mnews-sld .swiper-slide .img-box { width: auto; } #mNews .mnews-txt-box { position: relative; right: auto; bottom: auto; border-radius: 20px; width: 100%; height: auto; margin-left: 0; padding: 40px 20px 20px; } #mNews .mnews-txt-box .s-cate { left: 20px; } #mNews .mnews-txt-box .s-tit { height: 63px; font-size: 1.067em; } #mNews .mnews-txt-box .s-tit:before { width: 8px; height: 8px; margin: 0 0 5px; } #mNews .mnews-txt-box .s-txt { display: none; } #mNews .mnews-sld-box .s-more { right: 20px; bottom: 18px; } #mNews .mnews-sld-box .s-more:after { background-size: 94px auto; background-position: -16px 0; width: 32px; height: 33px; margin-left: -5px; } #mNews .mnews-sld .data-ctrl { } #mNews .mnews-sld .data-ctrl a, #mNews .mnews-sld .data-ctrl button { width: 26px; height: 26px; } #mNews .mnews-sld .data-ctrl > button:before, #mNews .mnews-sld .data-ctrl > button:after { height: 7px; } #mNews .mnews-sld .data-ctrl .data-more:before, #mNews .mnews-sld .data-ctrl .data-more:after { width: 10px; } } @media all and (max-width: 599px) { #mNews .mnews-txt-box .txt-box .s-tit { height: 71px; } } /* ============================== * 동아피플 ================================= */ .msec04 { position: relative; margin-top: 143px; padding-bottom: 110px; } .msec04:before, .msec04:after { content: ""; display: block; position: absolute; background-color: rgba(68, 144, 254, 0.2); width: 600px; height: 500px; z-index: -1; } .msec04:before { left: -100px; top: 45px; border-top-right-radius: 200px; } .msec04:after { right: -100px; bottom: 0; border-bottom-left-radius: 200px; } .msec04 .mpeople-wr { box-sizing: border-box; } .mpeople-wr .m-tit-box { width: auto; margin-bottom: 36px; text-align: center; } #mPeople { position: relative; } .mpeople-wr .m-tit-box .m-txt { margin-top: 8px; color: var(--ds-semantic-brand-secondary-dark, #22264c); font-size: 1.111em; font-weight: 500; letter-spacing: -0.05em; } .mpeople-sld { padding: 40px; margin: -40px 0; } .mpeople-sld a { display: block; position: relative; max-width: 400px; margin: 0 auto; } .mpeople-sld a span { display: block; } .mpeople-sld .mpeople-box { position: relative; border-radius: 20px; box-shadow: 0 8px 16px -2px rgba(10, 10, 10, 0.1), 0 13px 28px 0 rgba(144, 156, 187, 0.4); overflow: hidden; } .mpeople-sld .img-box { position: relative; } .mpeople-sld .img-box:before { content: ""; display: block; width: 0; padding-top: 142.5%; } .mpeople-sld .img-box > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); width: 100% !important; height: auto; min-height: 100%; transition: transform 0.5s ease-out; } .mpeople-sld .txt-box { display: flex; flex-direction: column; justify-content: flex-end; position: absolute; left: 0; bottom: 0; background: url(/resources/_Templet/Main/main_kor/Img/mpeople_bg.png) no-repeat center bottom; width: 100%; min-height: 328px; padding: 0 40px 25px; color: var(--ds-primitive-neutral-0, #fff); box-sizing: border-box; } .mpeople-sld .txt-box .s-tit { font-size: 1.222em; line-height: 1.364; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; height: 90px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .mpeople-sld .txt-box .s-more { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; position: relative; font-size: 0.889em; z-index: 1; } .mpeople-sld .txt-box .s-more:after { content: ""; display: block; background: url(/resources/_Templet/Main/main_kor/Img/main_spr.png) no-repeat -23px 0; margin-left: -10px; width: 45px; height: 47px; transition: transform 0.3s ease; z-index: -1; } .mpeople-sld a:hover .img-box > img { transform: translate(-50%, -50%) scale(1.1); } .mpeople-sld a:hover .txt-box .s-more:after { transform: translateX(6px); } #mPeople .data-ctrl button { display: block; position: absolute; top: 50%; background-color: var(--ds-primitive-neutral-0, #fff); border: 0; border-radius: 50%; width: 80px; height: 80px; margin-top: -40px; transition: transform 0.3s ease-out; z-index: 2; } #mPeople .data-ctrl .btn-prev { left: 0; } #mPeople .data-ctrl .btn-next { right: 0; } #mPeople .data-ctrl button:before, #mPeople .data-ctrl button:after { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } #mPeople .data-ctrl > button:before, #mPeople .data-ctrl > button:after { background: var(--ds-component-slider-controlsFg, #0a1646); border: 0; width: 2px; height: 12px; } #mPeople .data-ctrl .btn-prev:before { transform: translateY(-35%) rotate(45deg); } #mPeople .data-ctrl .btn-prev:after { transform: translateY(35%) rotate(-45deg); } #mPeople .data-ctrl .btn-next:before { transform: translateY(35%) rotate(45deg); } #mPeople .data-ctrl .btn-next:after { transform: translateY(-35%) rotate(-45deg); } #mPeople .data-ctrl .btn-prev:hover { transform: translateX(-6px); } #mPeople .data-ctrl .btn-next:hover { transform: translateX(6px); } @media all and (min-width: 1000px) { .mpeople-wr .data-ctrl.hide { display: none !important; } } @media all and (max-width: 1399px) { .mpeople-sld { padding: 40px 20px; } } @media all and (max-width: 999px) { .msec04 { margin-top: 45px; padding-bottom: 0; } .msec04:before { left: 0; width: 250px; } .msec04:after { display: none; } .mpeople-wr { padding-left: 70px; } .mpeople-wr .m-tit-box { margin-bottom: 5px; margin-left: -70px; } .mpeople-sld { margin: 0 -20px -40px; } .mpeople-sld .txt-box .s-tit { height: 86px; } .mpeople-sld .mpeople-box { box-shadow: 0 8px 16px -2px rgba(10, 10, 10, 0.1), 0 13px 12px 0 rgba(144, 156, 187, 0.4); } #mPeople .data-ctrl { position: absolute; left: -70px; top: 50%; margin-top: -65px; } #mPeople .data-ctrl button { position: relative; top: auto; left: auto; right: auto; border: 1px solid var(--ds-primitive-gray-300, #ddd); width: 65px; height: 65px; margin-top: 0; } #mPeople .data-ctrl .btn-prev { z-index: 1; } #mPeople .data-ctrl .btn-next { margin-top: -10px; } } @media all and (max-width: 768px) { .msec04:before { height: 60%; } .mpeople-sld .mpeople-box { box-shadow: none; } .mpeople-sld .txt-box { min-height: 100%; padding: 0 20px 15px; } .mpeople-sld .txt-box .s-tit { height: 70px; font-size: 1em; } } @media all and (max-width: 599px) { .mpeople-wr { padding-left: 20px; } .mpeople-wr .m-tit-box { margin-left: -20px; } .mpeople-sld .txt-box { } .mpeople-sld .txt-box .s-tit { height: 62px; } #mPeople .data-ctrl { left: -20px; margin-top: -43px; } #mPeople .data-ctrl button { width: 40px; height: 40px; } #mPeople .data-ctrl .btn-next { margin-top: -5px; } #mPeople .data-ctrl > button:before, #mPeople .data-ctrl > button:after { height: 7px; } } @media all and (max-width: 399px) { .mpeople-sld .txt-box { background-position: center -60%; } } /* ============================== * what's on ================================= */ .msec05 { margin-top: 40px; } .msec05 .mkeyword-wr { display: flex; flex-flow: row wrap; align-items: center; } .mkeyword-wr .m-tit-box { width: auto; margin-right: 158px; } .mkeyword-wr .m-tit-box h3 { color: var(--ds-primitive-gray-900, #111); font-size: 5.556em; font-weight: 700; font-family: "Paperlogy", "Pretendard", sans-serif; letter-spacing: 0; } .mkeyword-wr .m-tit-box h3:before { content: ""; display: block; background-color: #fff300; border-radius: 50%; margin-bottom: 23px; width: 18px; height: 18px; } .mkeyword-wr .m-tit-box .m-sub-tit { margin-top: 34px; color: var(--ds-component-keyword-subtitleFg, #006ee9); font-size: 2em; font-weight: 700; font-family: "Paperlogy", "Pretendard", sans-serif; letter-spacing: 0; } .mkeyword-wr .m-tit-box .m-txt { margin-top: 18px; color: var(--ds-semantic-brand-secondary-dark, #22264c); font-weight: 500; letter-spacing: -0.05em; } .mkeyword-wr .mkeyword { display: flex; flex-flow: row wrap; flex: 1 1 0; margin-top: -20px; } .mkeyword-wr .mkeyword > button { background-color: #e1e1e2; border: 0; border-radius: 50px; min-width: 112px; margin: 20px 10px 0 0; padding: 16px 21px; color: #333; font-size: 20px; font-weight: 500; letter-spacing: -0.05em; text-align: center; box-sizing: border-box; } .mkeyword-wr .mkeyword > button:hover { background-color: var(--ds-primitive-gray-900, #111); color: var(--ds-primitive-neutral-0, #fff); } .msec05 .mad-wr { display: flex; flex-flow: row wrap; margin-top: 85px; padding-top: 30px; overflow: hidden; } .msec05 .mad-wr .msns-wr { position: relative; width: 67.1875%; } .msec05 .mad-wr .msns-wr:before { content: ""; display: block; position: absolute; right: -70px; top: 225px; background-color: #e0e0e0; width: 2px; height: 100%; } .msec05 .mad-wr #mImban1 { align-self: flex-end; width: 32.8125%; padding-left: 155px; box-sizing: border-box; } .msns-wr .m-tit { margin-bottom: 33px; color: var(--ds-primitive-neutral-1000, #000); font-size: 2em; font-weight: 700; font-family: "Paperlogy", "Pretendard", sans-serif; letter-spacing: 0; } .msns-wr .msns-list { display: flex; flex-flow: row wrap; align-items: center; position: absolute; left: 202px; top: 4px; } .msns-wr .msns-list li { margin-right: 22px; } .msns-wr .msns-list li:last-child { margin-right: 0; } .msns-wr .msns-list a { display: block; background: url(/resources/_Templet/Main/main_kor/Img/main_spr.png) no-repeat 0 -57px; width: 26px; height: 26px; } .msns-wr .msns-list a.yb { background-position-x: 0; } .msns-wr .msns-list a.face { background-position-x: -36px; } .msns-wr .msns-list a.nb { background-position-x: -72px; } .msns-wr .msns-list a.insta { background-position-x: -108px; } .msns-wr .msns-list a:hover { background-position-y: -93px; } .msns-wr .msns-sld a, .msns-wr .msns-sld a span { display: block; } .msns-wr .msns-sld .img-box { display: block; position: relative; background-color: #434343; border-radius: 20px; overflow: hidden; } .msns-wr .msns-sld .img-box:before { content: ""; display: block; width: 0; padding-top: 100%; } .msns-wr .msns-sld .img-box > img { position: absolute; left: 0; top: 0; width: 100%; height: auto; } .msns-wr .msns-sld .txt-box { position: relative; padding-top: 23px; } .msns-wr .msns-sld .txt-box .icon { position: absolute; right: 20px; top: -20px; border-radius: 15px; width: 40px; height: 40px; transition: transform 0.3s ease-out; } .msns-wr .msns-sld .yb .txt-box .icon { background-color: #d00000; } .msns-wr .msns-sld .face .txt-box .icon { background-color: #3545b5; } .msns-wr .msns-sld .nb .txt-box .icon { background-color: #00ab4c; } .msns-wr .msns-sld .insta .txt-box .icon { background: radial-gradient( circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90% ); } .msns-wr .msns-sld .txt-box .icon:before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(/resources/_Templet/Main/main_kor/Img/main_spr.png) no-repeat 0 -129px; width: 20px; height: 20px; margin: auto; } .msns-wr .msns-sld .yb .txt-box .icon:before { background-position-x: 0; } .msns-wr .msns-sld .face .txt-box .icon:before { background-position-x: -30px; } .msns-wr .msns-sld .nb .txt-box .icon:before { background-position-x: -60px; } .msns-wr .msns-sld .insta .txt-box .icon:before { background-position-x: -90px; } .msns-wr .msns-sld .txt-box .sns-name { font-size: 0.889em; font-weight: 700; font-family: "Paperlogy", "Pretendard", sans-serif; } .msns-wr .msns-sld .yb .txt-box .sns-name { color: #d00000; } .msns-wr .msns-sld .face .txt-box .sns-name { color: #3545b5; } .msns-wr .msns-sld .nb .txt-box .sns-name { color: #00ab4c; } .msns-wr .msns-sld .insta .txt-box .sns-name { color: #db34a7; } .msns-wr .msns-sld .txt-box .s-tit { margin-top: 9px; color: var(--ds-primitive-gray-700, #555); font-size: 0.889em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; height: 58px; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .msns-wr .msns-sld a:hover .txt-box .icon { transform: translateY(-5px); } .msns-wr .data-ctrl { position: absolute; right: -90px; top: 70px; background-color: var(--ds-primitive-neutral-0, #fff); } .msns-wr .data-ctrl button, .msns-wr .data-ctrl a { position: relative; display: block; background-color: var(--ds-primitive-neutral-0, #fff); border: 1px solid var(--ds-primitive-gray-300, #ddd); border-radius: 50%; width: 40px; height: 40px; margin-bottom: 5px; box-sizing: border-box; transition: all 0.3s ease-out; } .msns-wr .data-ctrl button:before, .msns-wr .data-ctrl button:after { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .msns-wr .data-ctrl > button:before, .msns-wr .data-ctrl > button:after { background: var(--ds-component-slider-controlsFg, #0c2042); border: 0; width: 2px; height: 13px; } .msns-wr .data-ctrl .btn-prev:before { transform: translateY(-35%) rotate(45deg); } .msns-wr .data-ctrl .btn-prev:after { transform: translateY(35%) rotate(-45deg); } .msns-wr .data-ctrl .btn-next:before { transform: translateY(35%) rotate(45deg); } .msns-wr .data-ctrl .btn-next:after { transform: translateY(-35%) rotate(-45deg); } .msns-wr .data-ctrl button:hover { background-color: var(--ds-primitive-gray-300, #ddd); } .msns-wr .data-ctrl .data-more { background-color: var(--ds-primitive-gray-500, #71788e); border-color: var(--ds-primitive-gray-500, #71788e); transition: all 0.3s ease; } .msns-wr .data-ctrl .data-more:before, .msns-wr .data-ctrl .data-more:after { content: ""; display: block; position: absolute; width: 16px; height: 2px; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: var(--ds-primitive-neutral-0, #fff); } .msns-wr .data-ctrl .data-more:before { } .msns-wr .data-ctrl .data-more:after { transform: rotate(90deg); } .msns-wr .data-ctrl .data-more:hover { transform: rotate(270deg); } .msns-wr .data-auto button { } .msns-wr .data-auto .btn-stop:before { border: 2px solid var(--ds-component-slider-controlsFg, #0a1646); border-top: 0; border-bottom: 0; width: 8px; height: 16px; box-sizing: border-box; } .msns-wr .data-auto .btn-play { display: none; } .msns-wr .data-auto .btn-play:before { border-width: 5px 0 5px 7px; border-style: solid; border-color: transparent; border-left-color: var(--ds-component-slider-controlsFg, #0a1646); width: 0; height: 0; } #mImban1 a, #mImban1 a span { display: block; } #mImban1 a { position: relative; max-width: 258px; } #mImban1 a .icon { position: absolute; left: -18px; top: -18px; background: #ffd44d; border-radius: 25px; width: 60px; height: 60px; transition: transform 0.3s ease-out; z-index: 1; } #mImban1 a .icon:before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url(/resources/_Templet/Main/main_kor/Img/main_spr.png) no-repeat -78px 0; width: 27px; height: 29px; margin: auto; } #mImban1 a .s-img-wr { box-shadow: 0 13px 28px 0 rgba(144, 156, 187, 0.4); } #mImban1 a .s-img { position: relative; overflow: hidden; } #mImban1 a .s-img:before { content: ""; display: block; width: 0; padding-top: 130.6201%; } #mImban1 a .s-img img { position: absolute; left: 50%; top: 50%; width: 100%; min-width: 100%; transform: translate(-50%, -50%); } #mImban1 a .s-tit { position: absolute; right: -35px; top: 59px; color: rgba(9, 52, 104, 0.3); font-size: 3.333em; font-weight: 700; font-family: "Paperlogy", "Pretendard", sans-serif; letter-spacing: -0.05em; writing-mode: vertical-rl; text-orientation: sideways; z-index: -1; } #mImban1 a .s-txt { margin-top: 22px; color: var(--ds-primitive-neutral-1000, #000); font-size: 0.722em; font-weight: 500; letter-spacing: -0.05em; text-align: right; } #mImban1 a:hover .icon { transform: translateY(-5px); } @media all and (max-width: 1399px) { .msec05 .mkeyword-wr { display: block; } .mkeyword-wr .mkeyword { margin-top: 0; } .msec05 .mad-wr .msns-wr { padding-right: 50px; box-sizing: border-box; } .msec05 .mad-wr .msns-wr:before { right: 0; } .msns-wr .data-ctrl { right: -15px; } .msec05 .mad-wr #mImban1 { padding-left: 5%; } } @media all and (max-width: 999px) { .msec05 { margin-top: 25px; } .mkeyword-wr .m-tit-box { margin-right: 0; } .mkeyword-wr .m-tit-box h3 { font-size: 3.529em; } .mkeyword-wr .m-tit-box h3:before { margin-bottom: 15px; } .mkeyword-wr .m-tit-box .m-sub-tit { font-size: 1.764em; } .msec05 .mad-wr { margin-top: 45px; } .msns-wr .msns-sld .txt-box .s-tit { height: 55px; } .msec05 .mad-wr #mImban1 { align-self: center; } #mImban1 a { padding-right: 30px; box-sizing: border-box; } #mImban1 a .icon { width: 50px; height: 50px; } #mImban1 a .s-tit { right: 0; } } @media all and (max-width: 768px) { .mkeyword-wr .m-tit-box h3 { font-size: 2em; } .mkeyword-wr .m-tit-box h3:before { width: 10px; height: 10px; margin-bottom: 10px; } .mkeyword-wr .m-tit-box .m-sub-tit { margin-top: 20px; font-size: 1em; } .mkeyword-wr .m-tit-box .m-txt { margin-top: 8px; font-size: 0.889em; } .mkeyword-wr .mkeyword > button { min-width: 90px; margin: 10px 5px 0 0; padding: 12px 20px; font-size: 12px; } .msec05 .mad-wr .msns-wr { width: calc(100% - 290px); flex: 1 1 0; } .msns-wr .msns-list { left: auto; right: 0; } .msns-wr .msns-list li { margin-right: 15px; } .msec05 .mad-wr #mImban1 { width: 290px; } .msns-wr .msns-sld .txt-box .s-tit { height: 52px; } } @media all and (max-width: 699px) { .msec05 .mad-wr .msns-wr { padding-right: 35px; } .msec05 .mad-wr .msns-wr:before { top: 185px; right: 11px; } .msns-wr .msns-list { margin-right: -35px; } .msns-wr .data-ctrl { right: 0; top: 90px; } .msns-wr .m-tit { margin-bottom: 10px; } .msns-wr .msns-list { justify-content: flex-end; position: static; right: auto; top: auto; margin-bottom: 23px; } .msns-wr .data-ctrl button, .msns-wr .data-ctrl a { width: 25px; height: 25px; } .msns-wr .data-ctrl { margin-bottom: 10px; } .msns-wr .data-ctrl > button:before, .msns-wr .data-ctrl > button:after { height: 6px; } .msns-wr .data-auto .btn-stop:before { width: 6px; height: 10px; } .msns-wr .data-auto .btn-play:before { border-width: 4px 0 4px 5px; } .msns-wr .data-ctrl .data-more:before, .msns-wr .data-ctrl .data-more:after { width: 10px; } } @media all and (max-width: 599px) { .msec05 .mad-wr { display: block; } .msec05 .mad-wr .msns-wr, .msec05 .mad-wr #mImban1 { width: auto; } .msec05 .mad-wr #mImban1 { display: none; } .msns-wr .msns-sld .txt-box .s-tit { height: 46px; } } /* ============================== * 동아파워 ================================= */ .msec06 { position: relative; background-color: #f4f5f8; border-radius: 70px 70px 0 0; margin-top: 105px; overflow: hidden; } .msec06 .msec06-deco { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .msec06 .msec06-deco:before, .msec06 .msec06-deco:after { content: ""; display: block; position: absolute; border: 1px solid rgba(63, 81, 181, 0.2); border-radius: 50%; } .msec06 .msec06-deco:before { left: 118px; bottom: 196px; width: 1263px; height: 1263px; } .msec06 .msec06-deco:after { left: 100%; bottom: 100%; width: 1643px; height: 1643px; margin: 0 0 -163px -1060px; } .msec06 .mpower-wr { padding: 83px 0 55px; z-index: 1; } .mpower-wr .m-tit-box { width: auto; margin-bottom: 65px; text-align: center; } .mpower-wr .m-tit-box .m-txt { margin-top: 8px; color: var(--ds-semantic-brand-secondary-dark, #22264c); font-size: 1.111em; font-weight: 500; letter-spacing: -0.05em; } .mpower-wr .mpower { left: 50%; width: 1952px; padding: 40px; margin: -40px; margin-left: -1016px; } .mpower .data-ctrl { margin-top: 25px; font-size: 0; text-align: center; } .mpower .data-ctrl > * { display: inline-block; } .mpower .data-ctrl button { display: inline-block; position: relative; background: none; border: 0; width: 33px; height: 20px; margin: 0 11px; transition: transform 0.3s ease-out; } .mpower .data-ctrl button.btn-prev:hover { transform: translateX(-6px); } .mpower .data-ctrl button.btn-next:hover { transform: translateX(6px); } .mpower .data-ctrl button .arr { display: block; position: relative; background: var(--ds-semantic-brand-secondary-deep, #0a1646); border: 0; width: 100%; height: 2px; transition: 0.35s 0.35s; } .mpower .data-ctrl button .arr:before, .mpower .data-ctrl button .arr:after { content: ""; display: block; position: absolute; top: 50%; background-color: var(--ds-semantic-brand-secondary-deep, #0a1646); width: 2px; height: 13px; transition: 0.35s; } .mpower .data-ctrl button.btn-prev .arr:before { left: 2px; transform: translateY(-2px) rotate(-45deg); } .mpower .data-ctrl button.btn-prev .arr:after { left: 2px; transform: translateY(-11px) rotate(225deg); } .mpower .data-ctrl button.btn-next .arr:before { right: 2px; transform: translateY(-2px) rotate(225deg); } .mpower .data-ctrl button.btn-next .arr:after { right: 2px; transform: translateY(-11px) rotate(-45deg); } .mpower .data-auto button { width: 12px; } .mpower .data-auto button:before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .mpower .data-auto .btn-stop:before { border: 2px solid var(--ds-component-slider-controlsFg, #0a1646); border-top: 0; border-bottom: 0; width: 8px; height: 16px; box-sizing: border-box; } .mpower .data-auto .btn-play { display: none; } .mpower .data-auto .btn-play:before { border-width: 5px 0 5px 7px; border-style: solid; border-color: transparent; border-left-color: var(--ds-component-slider-controlsFg, #0a1646); width: 0; height: 0; } .mpower .mpower-box { position: relative; background-color: var(--ds-primitive-neutral-0, #fff); border-radius: 20px; min-height: 446px; padding: 36px 42px; box-shadow: 0 13px 28px 0 rgba(144, 156, 187, 0.4); box-sizing: border-box; transition: all 0.25s ease-out; } .mpower-box .mp-tit { margin-bottom: 27px; color: var(--ds-primitive-neutral-1000, #000); font-size: 1.333em; font-weight: 700; letter-spacing: -0.05em; line-height: 1.2; } .mpower-box .mp-num { font-weight: 700; font-family: "Paperlogy", "Pretendard", sans-serif; } .mpower-box .mp-num em { font-size: 2.667em; font-style: normal; } .mpower-box .mp-txt { font-size: 1.111em; font-weight: 500; font-family: "Paperlogy", "Pretendard", sans-serif; line-height: 1.2; } .mpower-box .mp-txt.s { margin-top: 18px; color: #686868; font-size: 0.889em; } .mpower-box .mp-ico { } .mpower-box .mp-img-box { position: relative; background: #f2f4f6; border-radius: 50%; width: 156px; height: 156px; margin: 0 auto 33px; } .mpower-box .mp-img-box > img { position: absolute; left: 0; right: 0; margin: 0 auto; } .mpower-box .mp-list { } .mpower-box .mp-list li { border-bottom: 1px solid #dee4ea; margin-bottom: 20px; padding-bottom: 20px; box-sizing: border-box; } .mpower-box .mp-list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .mpower-box .mp-list .mp-list-box { display: flex; align-items: center; justify-content: space-between; background: #f2f4f6; border-radius: 10px; height: 80px; padding: 8px 24px; box-sizing: border-box; } .mpower-box .mp-list .mp-list-box .txt { color: var(--ds-primitive-neutral-1000, #000); font-weight: 500; line-height: 1.2; letter-spacing: -0.05em; font-family: "Paperlogy", "Pretendard", sans-serif; } .mpower-box .mp-list .mp-list-box02 { display: flex; align-items: center; justify-content: space-between; background: #f2f4f6; border-radius: 10px; height: 120px; padding: 8px 24px; box-sizing: border-box; } .mpower-box .mp-list .mp-list-box02 .txt { color: var(--ds-primitive-neutral-1000, #000); font-weight: 500; line-height: 1.2; letter-spacing: -0.05em; font-family: "Paperlogy", "Pretendard", sans-serif; } .mpower-box .mp-list .mp-list-box .txt > span { font-size: 0.778em; } .mpower-box.p01 .mp-txt span { color: #9264e5; } .mpower-box.p01 .mp-img-box > img { bottom: -8px; } .mpower-box.p02 .mp-num { color: #e6446c; } .mpower-box.p02 .mp-ico { position: absolute; right: 49px; bottom: 49px; } .mpower-box.p03 .mp-num { position: relative; margin-bottom: -8px; color: #0946a1; font-size: 2em; line-height: 1; z-index: 1; } .mpower-box.p04 .mp-num, .mpower-box.p06 .mp-num { color: var(--ds-semantic-brand-secondary-deep, #0a1646); } .mpower-box.p04 .mp-num .p04-c, .mpower-box.p06 .mp-num .p06-c { color: #3f51b5; } .mpower-box.p04 .mp-ico, .mpower-box.p06 .mp-ico { position: absolute; right: 45px; bottom: 43px; } .mpower-box.p03 .mp-txt { position: relative; background-color: var(--ds-semantic-brand-primary-medium, #1962cc); border-radius: 30px; padding: 12px 5px 6px; color: var(--ds-primitive-neutral-0, #fff); font-size: 0.889em; line-height: 1; text-align: center; box-sizing: border-box; z-index: 1; } .mpower-box.p03 .mp-txt:after { content: ""; position: absolute; left: 25px; top: 100%; border-style: solid; border-color: var(--ds-semantic-brand-primary-medium, #1962cc) transparent transparent transparent; border-width: 12px 12px 12px 0; width: 0; height: 0; margin: auto; } .mpower-box.p05 .mp-num { color: #1eacb4; } .mpower-box.p07 .mp-num { color: #faad18; } .mpower-box.p07 .mp-ico { position: absolute; right: 45px; bottom: 49px; } .mpower-box.p08 .mp-txt span { color: #1eb48f; } .mpower-box.p08 .mp-img-box > img { bottom: 10px; } .mpower-box.p09 .mp-num { color: #8451e1; } .mpower-box.p09 .mp-ico { position: absolute; right: 49px; bottom: 49px; } .mpower-box.p09 .mp-tit9 { font-size: 1.35em; padding-bottom: 9px; } .mpower-box.p09 .mp-num .num9 { font-size: 1em; padding-left: 4px; } .mp-txt9 { font-size: 0.9em; } .mpower-box.p10 .mp-num { color: var(--ds-semantic-brand-primary-medium, #1962cc); } .mpower-box.p10 .mp-num { color: var(--ds-semantic-brand-primary-medium, #1962cc); } .mpower-box.swiper-slide-active .mp-tit, .mpower-box.swiper-slide-active .mp-tit9, .mpower-box.swiper-slide-active .mp-num, .mpower-box.swiper-slide-active .mp-num, .mpower-box.swiper-slide-active .mp-txt, .mpower-box.swiper-slide-active .mp-txt span, .mpower-box.swiper-slide-active .mp-num span, .mpower-box.swiper-slide-active .mp-list .mp-list-box .txt { color: var(--ds-primitive-neutral-0, #fff) !important; } .mpower-box.swiper-slide-active .mp-list .mp-list-box02 .txt { color: var(--ds-primitive-neutral-0, #fff) !important; } .mpower-box.swiper-slide-active .mp-img-box { background-color: rgba(242, 244, 246, 0.3); } .mpower-box.swiper-slide-active .mp-list-box { background-color: rgba(200, 200, 200, 0.25); } .mpower-box.swiper-slide-active .mp-list-box02 { background-color: rgba(200, 200, 200, 0.25); } .mpower-box.p01.swiper-slide-active { background-color: #9264e5; } .mpower-box.p01.swiper-slide-active .mp-img-box { } .mpower-box.p02.swiper-slide-active { background-color: #e6446c; } .mpower-box.p03.swiper-slide-active { background-color: var(--ds-semantic-brand-primary-medium, #1962cc); } .mpower-box.p03.swiper-slide-active .mp-txt { background-color: var(--ds-primitive-neutral-0, #fff); color: var(--ds-semantic-brand-primary-medium, #1962cc) !important; } .mpower-box.p03.swiper-slide-active .mp-txt:after { border-color: var(--ds-primitive-neutral-0, #fff) transparent transparent transparent; } .mpower-box.p04.swiper-slide-active { background-color: #3f51b5; } .mpower-box.p05.swiper-slide-active { background-color: #1eacb4; } .mpower-box.p06.swiper-slide-active { background-color: #3f51b5; } .mpower-box.p07.swiper-slide-active { background-color: #faad18; } .mpower-box.p08.swiper-slide-active { background-color: #1eb48f; } .mpower-box.p09.swiper-slide-active { background-color: #8451e1; } .mpower-box.p10.swiper-slide-active { background-color: var(--ds-semantic-brand-primary-medium, #1962cc); } @media all and (max-width: 999px) { .msec06 { margin-top: 45px; } .msec06 .mpower-wr { padding: 35px 0; } .mpower-wr .mpower { width: 1200px; margin-left: -640px; } } @media all and (max-width: 929px) { .mpower-wr .m-tit-box { margin-bottom: 35px; } .mpower-wr .mpower { width: 986px; margin-left: -533px; } .mpower-sld .mpower-box { min-height: auto; height: auto; padding: 25px 35px; } .mpower-box .mp-txt { font-size: 1em; } .mpower-box .mp-tit { margin-bottom: 17px; } .mpower-box .mp-list .mp-list-box { flex-flow: column; align-items: baseline; height: auto; } .mpower-box .mp-list .mp-list-box .txt br { display: none; } .mpower-box .mp-list .mp-list-box .mp-num { align-self: flex-end; margin-top: 1px; } .mpower-box .mp-list .mp-list-box02 { flex-flow: column; align-items: baseline; height: auto; } .mpower-box .mp-list .mp-list-box02 .txt br { display: none; } .mpower-box .mp-list .mp-list-box02 .mp-num { align-self: flex-end; margin-top: 7px; } .mpower-box.p03 img { display: block; width: 80% !important; margin: 0 auto; } } @media all and (max-width: 768px) { .msec06 .mpower-wr { padding: 30px 0 25px; } .mpower-box.p02 .mp-ico, .mpower-box.p09 .mp-ico, .mpower-box.p04 .mp-ico, .mpower-box.p06 .mp-ico, .mpower-box.p07 .mp-ico { right: 20px; bottom: 20px; } .mpower .data-ctrl button { width: 26px; height: 17px; margin: 0 5px; } .mpower .data-ctrl button .arr:before, .mpower .data-ctrl button .arr:after { height: 9px; transition: 0.35s; } .mpower .data-ctrl button.btn-prev .arr:after { transform: translateY(-7px) rotate(225deg); } .mpower .data-ctrl button.btn-next .arr:after { transform: translateY(-7px) rotate(-45deg); } } @media all and (max-width: 699px) { .mpower-wr .mpower { width: 734px; margin-left: -407px; } .mpower-sld .mpower-box { padding: 25px; } } /* ============================== * DAU 배너모음 ================================= */ .msec07 { background-color: #e8eaf6; padding: 28px 0; } .msec07 .mbnr-wr { display: flex; flex-flow: row wrap; } .mbnr-wr .m-tit-box { display: flex; align-items: center; flex-basis: 264px; } .mbnr-wr .m-tit-box h3 { margin-right: 22px; color: var(--ds-primitive-gray-900, #111); font-weight: 700; font-family: "Paperlogy", "Pretendard", sans-serif; letter-spacing: 0; } .mbnr-wr .mbnr-sld a { display: block; border-radius: 10px; overflow: hidden; } .mbnr-wr .data-ctrl { display: flex; align-items: center; } .mbnr-wr .data-ctrl button { position: relative; display: block; background-color: var(--ds-primitive-neutral-0, #fff); border: 0; border-radius: 50%; width: 26px; height: 26px; margin-right: 2px; } .mbnr-wr .data-ctrl button:before, .mbnr-wr .data-ctrl button:after { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .mbnr-wr .data-ctrl > button:before, .mbnr-wr .data-ctrl > button:after { background: var(--ds-component-slider-controlsFg, #0a1646); border: 0; width: 2px; height: 6px; } .mbnr-wr .data-ctrl .btn-prev:before { transform: translateY(-35%) rotate(39deg); } .mbnr-wr .data-ctrl .btn-prev:after { transform: translateY(35%) rotate(-39deg); } .mbnr-wr .data-ctrl .btn-next:before { transform: translateY(35%) rotate(39deg); } .mbnr-wr .data-ctrl .btn-next:after { transform: translateY(-35%) rotate(-39deg); } .mbnr-wr .data-auto button { } .mbnr-wr .data-auto .btn-stop:before { border: 2px solid var(--ds-component-slider-controlsFg, #0a1646); border-top: 0; border-bottom: 0; width: 6px; height: 8px; box-sizing: border-box; } .mbnr-wr .data-auto .btn-play { display: none; } .mbnr-wr .data-auto .btn-play:before { border-width: 5px 0 5px 7px; border-style: solid; border-color: transparent; border-left-color: var(--ds-component-slider-controlsFg, #0a1646); width: 0; height: 0; } .mbnr-wr .mbnr-sld-wr { flex: 1 1 0; } @media all and (max-width: 999px) { .mbnr-wr .m-tit-box { flex-basis: auto; margin-right: 15px; } } @media all and (max-width: 768px) { .msec07 .mbnr-wr { display: block; } .mbnr-wr .m-tit-box { display: block; position: relative; margin-right: 0; margin-bottom: 15px; } .mbnr-wr .data-ctrl { position: absolute; top: -7px; right: 0; } } /* === footer_kor.css === */ #footer-wrap { position: relative; background-color: var(--ds-primitive-neutral-0, #fff); z-index: 3000; } #footer-wrap .ft-wr { position: relative; padding: 0 0 46px; line-height: 1.2; max-width: 1400px; margin: 0 auto; } #footer-wrap .ft-svce { display: flex; flex-direction: column; position: relative; box-sizing: border-box; } #footer-wrap .ft-svce:after { content: ""; display: block; position: absolute; width: 2000px; height: 1px; left: 50%; bottom: 0; transform: translateX(-50%); background: rgba(255, 255, 255, 0.1); } #footer-wrap .top-bt { position: fixed; bottom: -150px; right: 20px; width: 50px; height: 80px; text-align: center; border-radius: 30px; /*overflow:hidden;*/ background: rgb(34, 34, 34, 0.9); z-index: 3500; transition: all 0.3s ease; } #footer-wrap .top-bt .top-btT { width: 100%; height: 40px; display: block; position: relative; } #footer-wrap .top-bt .top-btB { width: 100%; height: 40px; display: block; position: relative; } #footer-wrap .top-bt .top-btT:before { display: block; content: ""; width: 10px; height: 10px; border: 2px solid transparent; border-top: 2px solid var(--ds-primitive-neutral-0, #fff); border-left: 2px solid var(--ds-primitive-neutral-0, #fff); position: absolute; top: 22px; left: 0; right: 0; margin: auto; transform: rotate(45deg); -ms-transform: rotate(45deg); } #footer-wrap .top-bt .top-btB:before { display: block; content: ""; width: 10px; height: 10px; border: 2px solid transparent; border-top: 2px solid var(--ds-primitive-neutral-0, #fff); border-left: 2px solid var(--ds-primitive-neutral-0, #fff); position: absolute; top: 6px; left: 0; right: 0; margin: auto; transform: rotate(-135deg); -ms-transform: rotate(-135deg); } #footer-wrap .top-bt.over { bottom: 50px; } #footer-wrap .top-bt.end .top-btB { display: none; } #footer-wrap .top-bt.end .top-btT { height: 50px; } #footer-wrap .top-bt.end { height: 50px; border-radius: 50%; } #footer-wrap .top-bt .top-btT:focus, #footer-wrap .top-bt .top-btB:focus { outline-color: red; } #footer-wrap .ft-svce .fts-link { order: 2; padding: 13px 0 10px; } #footer-wrap .ft-svce .fts-link .arr { display: none; } #footer-wrap .ft-svce .fts-link ul { display: flex; flex-flow: row wrap; } #footer-wrap .ft-svce .fts-link ul li { position: relative; margin-right: 17px; padding: 10px 23px 10px 0; box-sizing: border-box; } #footer-wrap .ft-svce .fts-link ul li:after { content: ""; display: block; position: absolute; right: 0; top: 15px; background-color: #c8c8c8; border-radius: 50%; width: 5px; height: 5px; } #footer-wrap .ft-svce .fts-link ul li:last-child { margin-right: 0; padding-right: 0; } #footer-wrap .ft-svce .fts-link ul li:last-child:after { display: none; } #footer-wrap .ft-svce .fts-link a { display: block; color: var(--ds-primitive-gray-700, #555); font-size: 16px; transition: all 0.3s ease; } #footer-wrap .ft-svce .fts-link a.privacy { color: var(--ds-component-footer-privacyFg, #006ee9); font-weight: 500; } #footer-wrap .ft-svce .fts-link a span { display: block; line-height: 1; } #footer-wrap .ft-svce .fts-link a:hover { } #footer-wrap .ft-svce .fts-fmls { position: relative; } #footer-wrap .ft-svce .fts-fmls:before { content: ""; display: block; position: absolute; left: 50%; top: 0; background-color: var(--ds-semantic-brand-secondary-dark, #22264c); width: 3000px; height: 100%; margin-left: -1500px; } #footer-wrap .ft-svce .fts-fmls .fmls-pkg { display: flex; flex-flow: row wrap; } #footer-wrap .ft-svce .fts-fmls .f-site { flex-basis: 20%; } #footer-wrap .ft-svce .fts-fmls .f-site dl { position: relative; } #footer-wrap .ft-svce .fts-fmls .f-site dl dt { } #footer-wrap .ft-svce .fts-fmls .f-site dl dt button { display: flex; align-items: center; position: relative; background: transparent; border: 0; border-right: 1px solid rgba(255, 255, 255, 0.2); width: 100%; height: 70px; padding-left: 40px; font-size: 16px; text-align: left; box-sizing: border-box; } #footer-wrap .ft-svce .fts-fmls .f-site:first-child dl dt button { border-left: 1px solid rgba(255, 255, 255, 0.2); } #footer-wrap .ft-svce .fts-fmls .f-site dl dt button span { color: var(--ds-primitive-neutral-0, #fff); transition: all 0.3s ease; } #footer-wrap .ft-svce .fts-fmls .f-site dl dt button .arr { display: block; position: absolute; width: 22px; height: 22px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; top: 0; right: 0; bottom: 0; left: 0; margin: auto 20px auto auto; transition: all 0.3s ease; } #footer-wrap .ft-svce .fts-fmls .f-site dl dt button .arr:after { content: ""; display: block; position: absolute; width: 4px; height: 4px; border: solid; border-width: 2px 2px 0 0; border-color: var(--ds-primitive-neutral-0, #fff) var(--ds-primitive-neutral-0, #fff) transparent transparent; transform: rotate(-45deg); top: 0; right: 0; bottom: 0; left: 0; margin: 8px auto auto auto; opacity: 0.6; transition: all 0.3s ease; } #footer-wrap .ft-svce .fts-fmls .f-site dl dt button.is-open, #footer-wrap .ft-svce .fts-fmls .f-site dl dt button:focus span, #footer-wrap .ft-svce .fts-fmls .f-site dl dt button:hover span { opacity: 1; } #footer-wrap .ft-svce .fts-fmls .f-site dl dt button.is-open .arr, #footer-wrap .ft-svce .fts-fmls .f-site dl dt button:focus .arr, #footer-wrap .ft-svce .fts-fmls .f-site dl dt button:hover .arr { border-color: var(--ds-primitive-neutral-0, #fff); } #footer-wrap .ft-svce .fts-fmls .f-site dl dt button.is-open .arr:after, #footer-wrap .ft-svce .fts-fmls .f-site dl dt button:focus .arr:after, #footer-wrap .ft-svce .fts-fmls .f-site dl dt button:hover .arr:after { opacity: 1; } #footer-wrap .ft-svce .fts-fmls .f-site dl dt button.is-open .arr:after { transform: rotate(135deg); margin: 6px auto auto auto; } #footer-wrap .ft-svce .fts-fmls .f-site dl dd { display: none; position: absolute; width: 100%; left: 0; bottom: 100%; box-sizing: border-box; background: var(--ds-semantic-brand-secondary-dark, #22264c); box-sizing: border-box; } #footer-wrap .ft-svce .fts-fmls .f-site dl dd .sel { box-sizing: border-box; height: 330px; overflow-x: hidden; overflow-y: auto; padding: 9px 2px 9px 18px; } #footer-wrap .ft-svce .fts-fmls .f-site dl dd .sel ul { display: block; box-sizing: border-box; } #footer-wrap .ft-svce .fts-fmls .f-site dl dd .sel ul li { display: block; box-sizing: border-box; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.5); } #footer-wrap .ft-svce .fts-fmls .f-site dl dd .sel ul li:first-child { border-top: 0; } #footer-wrap .ft-svce .fts-fmls .f-site dl dd .sel ul li:last-child { border-bottom: 0; } #footer-wrap .ft-svce .fts-fmls .f-site dl dd .sel a { display: block; color: var(--ds-primitive-neutral-0, #fff); opacity: 0.6; padding: 10px 0; text-align: left; transition: all 0.3s ease; } #footer-wrap .ft-svce .fts-fmls .f-site dl dd .sel a span { display: block; font-size: 14px; letter-spacing: -0.05em; } #footer-wrap .ft-svce .fts-fmls .f-site dl dd button { display: block; position: absolute; width: 100%; height: 35px; left: 0; bottom: 100%; border: 0; border-radius: 10px 10px 0 0; background: rgba(103, 145, 200, 0.88); } #footer-wrap .ft-svce .fts-fmls .f-site dl dd button:before, #footer-wrap .ft-svce .fts-fmls .f-site dl dd button:after { content: ""; display: block; position: absolute; width: 12px; height: 2px; background: var(--ds-primitive-neutral-0, #fff); top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #footer-wrap .ft-svce .fts-fmls .f-site dl dd button:before { transform: rotate(45deg); } #footer-wrap .ft-svce .fts-fmls .f-site dl dd button:after { transform: rotate(135deg); } #footer-wrap .ft-info { position: relative; padding: 30px 0 0 267px; box-sizing: border-box; } #footer-wrap .ft-info:before { content: ""; display: block; position: absolute; left: 50%; top: 0; background-color: #ededed; width: 3000px; height: 1px; margin-left: -1500px; } #footer-wrap .ft-info .fti-logo { position: absolute; left: 0; top: 30px; } #footer-wrap .ft-info .fti-logo .flogo { } #footer-wrap .ft-info .fti-logo .flogo a { display: block; } #footer-wrap .ft-info .fti-logo .flogo a img { display: block; } #footer-wrap .ft-info .fti-addr { display: flex; flex-flow: row wrap; justify-content: space-between; } #footer-wrap .ft-info .fti-addr dl { margin: 6px 20px 0 0; color: #333; font-size: 15px; } #footer-wrap .ft-info .fti-addr dl:last-child { margin-right: 0; } #footer-wrap .ft-info .fti-addr dl dt { font-weight: 500; } #footer-wrap .ft-info .fti-addr dl dd { display: flex; flex-flow: row wrap; margin-top: 8px; font-weight: 300; } #footer-wrap .ft-info .fti-addr dl dd address { margin-bottom: 5px; } #footer-wrap .ft-info .fti-addr dl dd ul { display: flex; flex-flow: row wrap; } #footer-wrap .ft-info .fti-addr dl dd address + ul { margin-left: 6px; } #footer-wrap .ft-info .fti-addr dl dd ul li { font-weight: 400; } #footer-wrap .ft-info .fti-copy { display: block; flex-basis: 100%; margin: 10px 0 0 2px; color: rgba(51, 51, 51, 0.6); font-size: 15px; line-height: 1.3; } #footer-wrap .ft-info .fti-copy span { } #footer-wrap .ftMark { position: absolute; right: 0; top: 100px; } #footer-wrap .ftMark ul { display: block; font-size: 0; } #footer-wrap .ftMark ul li { display: inline-block; vertical-align: top; margin: 0 10px 0 0; } #footer-wrap .ftMark ul li:last-child { margin: 0; } #footer-wrap .ftMark a { } #footer-wrap .ftMark img { } @media all and (max-width: 1459px) { #footer-wrap .ft-wr { padding: 0 30px; } #footer-wrap .ft-info .fti-addr { justify-content: flex-start; } } @media all and (max-width: 999px) { #footer-wrap .ft-wr { padding: 0 20px; } #footer-wrap .ft-svce .fts-fmls .f-site { flex-grow: 1; flex-basis: 33.33%; position: relative; } #footer-wrap .ft-svce .fts-fmls .f-site:before { content: ""; display: block; position: absolute; right: 8px; top: 50%; background-color: rgba(255, 255, 255, 0.2); width: 1px; height: 20px; margin-top: -10px; } #footer-wrap .ft-svce .fts-fmls .f-site:nth-child(3n):before, #footer-wrap .ft-svce .fts-fmls .f-site:last-child:before { display: none; } #footer-wrap .ft-svce .fts-fmls .f-site dl dt button { border-top: 1px solid rgba(255, 255, 255, 0.2); border-right: 0; height: 60px; padding-left: 0; font-size: 14px; } #footer-wrap .ft-svce .fts-fmls .f-site:first-child dl dt button { border-left: 0; } #footer-wrap .ft-svce .fts-link ul { justify-content: center; } #footer-wrap .ft-svce .fts-link ul li { margin-right: 12px; padding: 8px 18px 10px 0; } #footer-wrap .ft-svce .fts-link ul li:after { top: 12px; } #footer-wrap .ft-svce .fts-link a { font-size: 14px; } #footer-wrap .ft-info { padding: 27px 0 50px; text-align: center; } #footer-wrap .ft-info .fti-logo { position: static; left: auto; top: auto; } #footer-wrap .ft-info .fti-logo .flogo { display: inline-block; } #footer-wrap .ft-info .fti-addr { display: block; margin-top: 21px; } #footer-wrap .ft-info .fti-addr dl { font-size: 13px; margin: 9px 0 0 0; } #footer-wrap .ft-info .fti-addr dl dd { justify-content: center; margin-top: 6px; } #footer-wrap .ft-info .fti-copy { font-size: 13px; } .mobile-sideMenu-open #footer-wrap { z-index: 0; } } @media all and (max-width: 768px) { #footer-wrap .ft-svce .fts-fmls .f-site { flex-basis: 50%; } #footer-wrap .ft-svce .fts-fmls .f-site:nth-child(3n):before { display: block; } #footer-wrap .ft-svce .fts-fmls .f-site:nth-child(2n):before { display: none; } #footer-wrap .ft-svce .fts-fmls .f-site dl dt button { height: 50px; font-size: 12px; } #footer-wrap .ft-svce .fts-link { padding: 16px 0 13px; } #footer-wrap .ft-svce .fts-link ul li { margin-right: 12px; padding: 3px 18px 5px 0; } #footer-wrap .ft-svce .fts-link ul li:after { top: 7px; width: 4px; height: 4px; } #footer-wrap .ft-svce .fts-link a { font-size: 12px; } #footer-wrap .ft-info .fti-logo .flogo a img { width: 128px; height: auto; } #footer-wrap .ft-info .fti-addr dl, #footer-wrap .ft-info .fti-copy { font-size: 12px; } #footer-wrap .ft-info .fti-copy { margin: 20px 0 0; } } /* X1 migration (2026-05-19) — supplement.css 통합: globalCss 본체 */ /* rule 2: widget outer display:block (was display:contents) */ [data-cms-widget-key] { display: block; } /* rule 1: body.isMain #contents 풀폭 */ html body.isMain #contents, html body.isMain main#contents { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } /* rule 6a: sitemap / search modal default hidden (운영은 markup 미출력; CMS 는 항상 render) */ .site-kor-menu:not(.active), #fullSitemapLayer:not(.active), .dau-sitemap:not(.active), #dau-search-modal:not(.active), .dau-search-modal:not(.active) { display: none !important; } /* X1 relocate (2026-05-19) — supplement.css rule 3/4/6b — 원래 slot.header.code.css 이었으나 mergedSlotCss

동아광장

봉사분과