@charset "UTF-8";

/* ----- 스타일 가이드 ----- */
#subContents {line-height: 1.8;}

/* -- 컨텐츠 탭 -- */
.cont-sub-tab-wrap {margin-bottom: 50px; background-color: #F2F5F8; position: relative; border-radius: 10px;}
.cont-sub-tab-wrap .tab-slider {position: absolute; top:0; left: 0; bottom: 0; width: auto; background-color: #fff; border: 2px solid var(--color-tab); border-radius: 10px; z-index: 1; transform: translateX(0); transition: 0.3s ease-in-out;}
.cont-sub-tab-wrap .cont-sub-tab {display: flex; position: relative; z-index:2;}
.cont-sub-tab-wrap .cont-sub-tab li {width:100%;}
.cont-sub-tab-wrap .cont-sub-tab li a {border: 2px solid transparent; border-radius: 10px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 12px 15px; font-weight: 600; font-size: 21px;color:#a8a8a8; line-height: 1.5; text-align: center; word-break: keep-all; position: relative; transition: 0.2s ease-in-out;}
.cont-sub-tab-wrap .cont-sub-tab li a:hover {color: var(--color-tab);}
.cont-sub-tab-wrap .cont-sub-tab li.active a {color: var(--color-tab);}

.tab-content {display: none;}
.tab-content.active {display: block;}

/* -- 제목, 문단-- */
.cont-tit {margin: 50px 0 30px; width: fit-content;font-size: 34px; position: relative; word-break: keep-all;}
.cont-tit:first-of-type {margin-top: 0;}
.cont-sub-tit {margin: 50px 0 30px; font-weight: 700; font-size: 30px;}
.cont-accent {font-size: 24px; color: #0c4689; padding-top: 7px; position: relative; margin: 40px 0 20px;}
.cont-accent::before {content: ''; width: 22px; height: 3px; background-color: #0c4689; position: absolute; top: 0; left: 0;}
.cont-desc {line-height: 1.8; margin-bottom: 20px; word-break: keep-all;}
.cont-eyebrow {display: block; margin-bottom: 50px; font-size: 30px; font-weight: 700; color: #0249B4; text-align: center;}
.cont-eyebrow {opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);}
.cont-eyebrow.is-active {opacity: 1; transform: translateY(0);}

/* ----- eMOTION - About 소개 ----- */
#About {position: relative !important; overflow: visible !important; padding-bottom: 260px;!important}
#About .about-bg {position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: auto; z-index: 0; pointer-events: none;}
#About .about-intro-head {max-width: 900px; margin: 0 auto 120px; text-align: center; position: relative; z-index: 2;}
#About .about-logo {display: block; height: 72px; width: auto; margin: 50px auto 30px;}
#About .about-title {font-size: 48px; color: #101010; margin-bottom: 18px;}
#About .about-title-accent {display: inline-block; color: var(--color-primary); opacity: 0; transform: translateY(10px) scale(0.96); animation: aboutTitlePop 0.7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: 0.3s;}
#About .about-subtit {font-size: 24px; color: #666;}

@keyframes aboutTitlePop {
    to {opacity: 1; transform: translateY(0) scale(1);}
}

#About .about-intro-head .about-logo {opacity: 0; transform: translateY(24px) scale(0.92); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1) 0.15s, transform 0.7s cubic-bezier(.2,.7,.2,1) 0.15s;}
#About .about-intro-head.is-active .about-logo {opacity: 1; transform: translateY(0) scale(1);}

#About .about-intro-cols {position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1400px; margin: 0 auto;}
#About .about-col .about-lang {display: inline-block; margin-bottom: 14px; padding-bottom: 8px; font-size: 20px; color: var(--color-tab); border-bottom: 2px solid var(--color-tab);}
#About .about-col h3 {font-size: 28px; color: #101010; margin-bottom: 24px; word-break: keep-all;}
#About .about-col p {font-size: 20px; line-height: 1.8; color: #444; margin-bottom: 20px; word-break: keep-all;}
#About .about-col p:last-child {margin-bottom: 0;}
#About .about-col p strong {color: #0249B4;}

#About .about-col-en {opacity: 0; transform: translateX(-60px); transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);}
#About .about-col-kr {opacity: 0; transform: translateX(60px); transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);}
#About .about-intro-cols.is-active .about-col-en,
#About .about-intro-cols.is-active .about-col-kr {opacity: 1; transform: translateX(0);}

#About .about-divider {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; z-index: 3; pointer-events: none;}
#About .about-divider-track {position: absolute; top: 0; left: 0; width: 2px; height: 100%; background-color: #dcdcdc;}
#About .about-divider-fill {position: absolute; top: 0; left: 0; width: 2px; height: 0%; background-color: var(--color-primary); transition: height 0.15s linear;}
#About .about-divider-dot {position: absolute; left: 50%; top: 0%; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; background-color: var(--color-primary); box-shadow: 0 4px 12px rgba(var(--color-primary-rgb),0.4); display: flex; align-items: center; justify-content: center; transition: top 0.15s linear;}
#About .about-divider-dot img {width: 16px; height: 16px; object-fit: contain;}

#About .emo-flow {position: absolute; left: 50%; margin-left: -50vw; width: 100vw; bottom: -30px; overflow: hidden; pointer-events: none; z-index: 1;}
#About .emo-flow-track {display: inline-flex; white-space: nowrap; will-change: transform; animation: emoFlowMove 34s linear infinite;}
#About .emo-flow-item {display: inline-block; white-space: nowrap; margin-right: 5rem; font-size: 170px; line-height: 1; font-weight: 600; text-align: center; background: linear-gradient(180deg, rgba(var(--color-primary-rgb),0.22) 8%, rgba(var(--color-primary-rgb),0.03) 78%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: 0.15em;}

@keyframes emoFlowMove {
    0% {transform: translateX(0);}
    100% {transform: translateX(-50%);}
}

/* ----- eMOTION - Location 오시는 길 ----- */

#Location .location-map {position: relative; width: 100%;}
#Location .location-map-inner {width: 100%; height: 100%; overflow: hidden;}
#Location .location-map .root_daum_roughmap {width: 100% !important; height: 100% !important;}
#Location .location-map .root_daum_roughmap .cont {display: none !important;}

#Location .location-map .root_daum_roughmap .wrap_controllers {display: none !important;}

#Location .location-map .root_daum_roughmap .map-controls {width: 100%; padding: 15px 20px; background: rgba(255,255,255,.65); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: absolute; bottom: 0; left: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-end; gap: 10px; box-sizing: border-box;}
#Location .map-controls .btn-wrap {display: flex; gap: 10px;}
#Location .map-controls .map-btn {display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background-color: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 8px rgba(0,0,0,.08); border-radius: 100px; font-size: 15px; font-weight: 600; color: #333; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;}
#Location .map-controls .map-btn:hover {background-color: var(--color-primary); color: #fff;}
#Location .map-controls .map-btn i {font-size: 14px; color: #888; transition: color 0.2s ease-in-out;}
#Location .map-controls .map-btn:hover i {color: #fff;}
#Location .map-controls .kakao-btn {background-color: #fae100; color: #391b1b;}
#Location .map-controls .kakao-btn i {color: #391b1b;}
#Location .map-controls .kakao-btn:hover {background-color: #fae100; color: #391b1b;}
#Location .map-controls .kakao-btn:hover i {color: #391b1b;}

#Location .location-below {position: relative; z-index: 5; display: flex; align-items: flex-end; gap: 40px; margin-top: 20px; padding-right: 20px;}

#Location .location-badge {flex-shrink: 0; width: 320px; padding: 34px; margin-top: -160px; background: url('../images/sub/location-bg.png') no-repeat center center/cover, linear-gradient(135deg, #002a61 0%, var(--color-primary-dark) 100%); border-radius: 6px 90px 24px 6px; box-shadow: 0 20px 40px rgba(0,45,120,0.25); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;}
#Location .location-badge-text {display: flex; flex-direction: column; gap: 6px; min-width: 0;}
#Location .location-badge-tit {font-size: 30px; font-weight: 800; color: #fff;}

#Location .location-pulse {position: relative; flex-shrink: 0; width: 55px; height: 74px;}
#Location .pin-shape {position: absolute; top: 0; left: 0; width: 55px; height: 55px; background: #ffffff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 8px 16px rgba(0,0,0,0.35);}
#Location .pin-inner {position: absolute; inset: 0; transform: rotate(45deg); display: flex; align-items: center; justify-content: center;}
#Location .location-pulse .pulse-dot {position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--color-primary-dark); box-shadow: 0 0 6px rgba(var(--color-primary-dark-rgb),0.5); z-index: 2;}
#Location .location-pulse .pulse-ring {position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: var(--color-primary); opacity: 0.6; animation: locationPulseRing 1.8s cubic-bezier(.2,.7,.2,1) infinite;}
#Location .location-pulse .pulse-md {width: 24px; height: 24px; margin: -12px 0 0 -12px; animation-delay: 0.3s;}

@keyframes locationPulseRing {
    0% {transform: scale(0.4); opacity: 0.55;}
    80%, 100% {transform: scale(1.6); opacity: 0;}
}

#Location .location-info-row {flex: 1; display: flex; align-items: flex-start; gap: 14px;}
#Location .location-info-row > i {flex-shrink: 0; margin-top: 4px; font-size: 20px; color: var(--color-primary);}
#Location .location-info-text {flex: 1; display: flex; align-items: flex-start; gap: 14px; word-break: keep-all;}
#Location .location-label {flex-shrink: 0; padding-top: 2px; font-size: 20px; font-weight: 700; color: var(--color-primary);}
#Location .location-address-group {flex: 1; min-width: 0;}
#Location .location-info-text p {margin: 0; font-size: 20px; color: #444;}
#Location .location-address-kr {margin-top: 8px; color: #666;}

/* ----- eMOTION - Contact 인사말 ----- */
#Contact {position: relative;}

#Contact .contact-frame {position: relative; width: 100%; height: auto; aspect-ratio: 5 / 2; background: #fff; word-break: keep-all; overflow: visible;}

#Contact .contact-hero {display: contents;}

#Contact .contact-globe {position: absolute; inset: 0; z-index: 1; pointer-events: none;}
#Contact .contact-globe canvas {display: block; width: 100%; height: 100%;}

#Contact .contact-mark {position: absolute; left: 5%; top: 60%; z-index: 4; text-align: left; color: var(--color-ink); opacity: 0; transform: translateY(40px); transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);}
#Contact .contact-frame.is-open .contact-mark {opacity: 1; transform: translateY(0);}
#Contact .contact-mark-title {display: block; font-weight: 800; line-height: 1.15; font-size: min(6vw, 88px);}
#Contact .contact-mark-tagline {display: block; margin-top: 12px; font-weight: 500; line-height: 1.4; font-size: min(2vw, 22px); color: var(--color-gray); opacity: .9;}

#Contact .contact-panel {position: absolute; top: 50%; right: 6%; z-index: 5; width: min(560px, 48%); max-height: 88%; visibility: visible; opacity: 1; transform: translate(0, -50%);}

#Contact .contact-panel-inner {max-height: 100%; overflow-y: auto; padding: 48px 46px; border-radius: 24px; background: rgba(255,255,255,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 50px rgba(15,43,69,.12), 0 6px 16px rgba(15,43,69,.08); text-align: center;}

#Contact .contact-text {color: var(--color-ink); word-break: keep-all; text-align: left;}
#Contact .contact-text + .contact-text {margin-top: 14px;}
#Contact .contact-text-en {font-size: 19px; line-height: 1.65; font-weight: 400; color: #555;}
#Contact .contact-text-en strong {font-size: 20px; font-weight: 800; color: var(--color-ink);}
#Contact .contact-text-kr {font-size: 19px; line-height: 1.75; font-weight: 500;}
#Contact .contact-text-kr strong {font-size: 20px; font-weight: 800; color: var(--color-ink);}
#Contact .contact-panel-divider {display: block; width: 36px; height: 2px; margin: 24px auto; background: rgba(var(--color-primary-rgb),.35);}
#Contact .contact-sign {margin-top: 20px; font-size: 18px; font-weight: 700; color: var(--color-primary); text-align: center;}
#Contact .contact-sign a {color: inherit; text-decoration: none;}
#Contact .contact-sign a:hover {text-decoration: underline;}

/* ----- eMOTION - Prof Profile 교수 소개 ----- */
#ProfProfile .profile-layout {display: flex; position: relative;}

#ProfProfile .profile-side {width: 380px; position: relative;}
#ProfProfile .profile-card {position: sticky; top: 150px; display: block; padding: 0 80px 80px 0;}
#ProfProfile .profile-watermark {position: absolute; left: -130px; top: 0; writing-mode: vertical-lr; text-orientation: mixed; height: 1000px; display: block; font-weight: 700; font-size: 100px; opacity: .06; color: var(--color-primary); pointer-events: none;}

#ProfProfile .profile-photo {position: relative; width: 280px; height: 380px; overflow: hidden; border-radius: 16px; background: #eef1f6;}
#ProfProfile .profile-photo img {width: 100%; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); transition: .6s;object-fit: cover;object-position: center;height: 100%;}

#ProfProfile .profile-heading {position: relative; width: 100%;}
#ProfProfile .profile-name {padding: 30px 0 0;}
#ProfProfile .profile-dept {font-size: 18px; color: var(--color-primary); display: block; font-weight: 500; margin-bottom: 14px;line-height: 1.2;}
#ProfProfile .profile-name-kr {position: relative; font-size: 32px; font-weight: 800; display: flex; align-items: flex-end; line-height: 1; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; color: var(--color-ink);}
#ProfProfile .profile-position {font-size: 18px; font-weight: 400; color: #666;}
#ProfProfile .profile-name-en {display: block; font-weight: 300; font-size: 18px; color: #333;}
#ProfProfile .profile-position-en {display: block; font-size: 18px; color: var(--color-gray); margin-top: 4px;}

#ProfProfile .profile-contact {position: relative; color: #333; display: block; margin-top: 10px; width: 100%;}
#ProfProfile .profile-contact > li {position: relative; padding-left: 42px; font-size: 16px; font-weight: 500; color: #212121; line-height: 1.2; min-height: 28px;}
#ProfProfile .profile-contact > li + li {margin-top: 12px;}
#ProfProfile .profile-contact > li > i {position: absolute; left: 0; top: 4px; color: var(--color-primary); font-size: 18px;}
#ProfProfile .profile-contact > li > span {display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: #444; font-weight: 400; line-height: 1.3;}
#ProfProfile .profile-contact > li > span > b {font-size: 18px; color: #212121;}
#ProfProfile .profile-contact > li > span > a {color: var(--color-ink); text-decoration: none;}
#ProfProfile .profile-contact > li > span > a:hover {text-decoration: underline;}

#ProfProfile .profile-main {width: calc(100% - 380px); position: relative;}
#ProfProfile .profile-block {position: relative;}
#ProfProfile .profile-block + .profile-block {margin-top: 56px;}

#ProfProfile .profile-block-tit {font-size: 26px; color: var(--color-primary-dark); font-weight: 800; position: relative; margin-bottom: 20px;}
#ProfProfile .profile-block-tit::before {content: ''; position: absolute; top: -28px; left: 0; width: 100%; height: 2px; background: #e5e5e5;}
#ProfProfile .profile-block:first-child .profile-block-tit::before {display: none;}

#ProfProfile .profile-block-body {line-height: 1.7; font-size: 20px; color: #555;}
#ProfProfile .profile-block-body.list > li {position: relative; padding-left: 12px; word-break: keep-all;}
#ProfProfile .profile-block-body.list > li::before {content: ''; width: 4px; height: 4px; position: absolute; left: 0; top: 15px; background: var(--color-primary); border-radius: 50%;}
#ProfProfile .profile-block-body.list > li + li {margin-top: 10px;}
#ProfProfile .profile-block-body .sub {display: block; margin-top: 3px; font-size: 18px; color: #888;}

#ProfProfile .sub-list {margin: 8px 0 10px 22px;}
#ProfProfile .sub-list li {position: relative; padding-left: 14px; font-size: 18px; color: #777; word-break: keep-all;}
#ProfProfile .sub-list li::before {content: '–'; position: absolute; left: 0; top: 0; color: #b7c2d6;}
#ProfProfile .sub-list li + li {margin-top: 4px;}

/* LECTURE - 태그형 과목 리스트 */
#ProfProfile .profile-block-body.courses {display: flex; flex-direction: column; gap: 20px;}
#ProfProfile .course-group-tit {display: block; font-size: 18px; font-weight: 700; color: var(--color-ink); margin-bottom: 10px;}
#ProfProfile .course-tags {display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 10px;}
#ProfProfile .course-tags li {padding: 7px 16px; font-size: 18px; font-weight: 400; color: var(--color-primary-dark); background: rgba(var(--color-primary-rgb),.08); border-radius: 100px;}

#ProfProfile .profile-divider {position: absolute; top: 0; left: 340px; width: 2px; height: 100%; z-index: 3; pointer-events: none;}
#ProfProfile .profile-divider-track {position: absolute; top: 0; left: 0; width: 2px; height: 100%; background-color: #dcdcdc;}
#ProfProfile .profile-divider-fill {position: absolute; top: 0; left: 0; width: 2px; height: 0%; background-color: var(--color-primary); transition: height 0.15s linear;}
#ProfProfile .profile-divider-dot {position: absolute; left: 50%; top: 0%; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; background-color: var(--color-primary); box-shadow: 0 4px 12px rgba(var(--color-primary-rgb),0.4); display: flex; align-items: center; justify-content: center; transition: top 0.15s linear;}
#ProfProfile .profile-divider-dot img {width: 16px; height: 16px; object-fit: contain;}

#ProfProfile .profile-block .profile-block-tit,
#ProfProfile .profile-block .profile-block-body {opacity: 0; transform: translateY(40px); transition: opacity 0.6s cubic-bezier(.16,1,.3,1), transform 0.6s cubic-bezier(.16,1,.3,1);}
#ProfProfile .profile-block-body {transition-delay: .1s;}
#ProfProfile .profile-block.is-active .profile-block-tit,
#ProfProfile .profile-block.is-active .profile-block-body {opacity: 1; transform: translateY(0);}

/* ----- eMOTION - Current Members 현재 구성원 ----- */
#CurrentMembers{width:100%;overflow: hidden;}
#CurrentMembers .member-group + .member-group {margin-top: 60px;}

#CurrentMembers .member-group-tit {font-size: 26px; color: var(--color-primary); font-weight: 800; margin-bottom: 24px;}

#CurrentMembers .member-list {display: flex; flex-direction: column; gap: 24px;}

#CurrentMembers .member-card {display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding: 32px 40px; border: 1px solid #e5e5e5; border-radius: 20px; background: #fff;}

#CurrentMembers .member-info {flex: 1; min-width: 0;}

#CurrentMembers .member-name {display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 18px;}
#CurrentMembers .member-name-en {font-size: 22px; font-weight: 800; color: var(--color-ink);}
#CurrentMembers .member-name-kr {font-size: 20px; font-weight: 400; color: #666;}

#CurrentMembers .member-field {position: relative;}
#CurrentMembers .member-field + .member-field {margin-top: 14px;}
#CurrentMembers .member-field-tit {display: block; font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--color-primary-dark); margin-bottom: 6px;}

#CurrentMembers .member-field-list > li {position: relative; padding-left: 12px; font-size: 20px; line-height: 1.7; color: #555; word-break: keep-all;}
#CurrentMembers .member-field-list > li::before {content: ''; width: 4px; height: 4px; position: absolute; left: 0; top: 12px; background: #b0b0b0; border-radius: 50%;}
#CurrentMembers .member-field-list > li + li {margin-top: 6px;}
#CurrentMembers .member-field-list a {color: #555; text-decoration: none;}
#CurrentMembers .member-field-list a:hover {text-decoration: underline;}

#CurrentMembers .member-photo {flex-shrink: 0; width: 240px; height: 320px; border-radius: 16px; overflow: hidden; background: #eef1f6;}
#CurrentMembers .member-photo img {width: 100%; height: 100%; object-fit: cover; display: block;}

#CurrentMembers .member-group-tit {opacity: 0; transform: translateX(-60px); transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);}
#CurrentMembers .member-group-tit.is-active {opacity: 1; transform: translateX(0);}

#CurrentMembers .member-card {opacity: 0; transform: translateX(-70px); transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);}
#CurrentMembers .member-card:nth-child(even) {transform: translateX(70px);}
#CurrentMembers .member-card.is-active {opacity: 1; transform: translateX(0);}

/* ----- eMOTION - Topics 연구분야 ----- */
#Topics .topics-intro {margin: 0 auto 70px; text-align: center;}
#Topics .topics-intro-tit {margin-bottom: 24px; font-size: 42px; font-weight: 800; color: #0c1a3a; word-break: keep-all;}
#Topics .topics-intro-divider {display: block; width: 2px; height: 40px; margin: 0 auto 24px; background: #dcdcdc;}
#Topics .topics-intro-desc {font-size: 22px; line-height: 1.8; color: #555; word-break: keep-all;}
#Topics .topics-intro-tit,
#Topics .topics-intro-divider,
#Topics .topics-intro-desc {opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
#Topics .topics-intro-divider {transition-delay: .12s;}
#Topics .topics-intro-desc {transition-delay: .24s;}
#Topics .topics-intro.is-active .topics-intro-tit,
#Topics .topics-intro.is-active .topics-intro-divider,
#Topics .topics-intro.is-active .topics-intro-desc {opacity: 1; transform: translateY(0);}

#Topics .tab_list {position: relative; display: flex; flex-wrap: wrap; margin-bottom: 60px; width: 100%; gap: 8px;}
#Topics .tab_list li {width: calc((100% - 16px) / 3); transition: all .3s ease;}
#Topics .tab_list li a {display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; font-size: 18px; font-weight: 500; line-height: 1.2; padding: 14px 16px; border: 1px solid var(--color-gray); border-radius: 6px; cursor: pointer; transition: all .3s ease;}
#Topics .tab_list li a.on {color: #fff; font-weight: 500; border-color: var(--color-primary); background: var(--color-primary);}
#Topics .tab_list li a:hover {color: var(--color-primary); border-color: var(--color-primary); background: #fff;}
#Topics .topic-panel-desc {position: relative; overflow: hidden; margin: 0 0 40px; padding: 36px 44px; background: linear-gradient(135deg, #f4f8ff, #edf2fb); border-radius: 16px; box-shadow: 0 14px 32px rgba(26,98,229,.1); font-size: 20px; line-height: 1.8; color: #333; text-align: center; word-break: keep-all; opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);}
#Topics .topic-panel-desc::before {content: '\201C'; position: absolute; top: 5px; left: 20px; font-size: 95px; font-weight: 700; line-height: 1; color: var(--color-primary); opacity: .14; pointer-events: none;}
#Topics .topic-panel-desc.is-active {opacity: 1; transform: translateY(0) scale(1);}

#Topics .sR-cont-box {display: none;}
#Topics .sR-cont-box.on {display: block;}
#Topics .topic-gallery {display: flex; flex-direction: column; gap: 32px;}
#Topics .topic-col {min-width: 0;}
#Topics .topic-head-bar {display: block; width: 60px; height: 4px; margin-bottom: 16px; border-radius: 2px; background: var(--color-primary);}
#Topics .topic-tit {margin-bottom: 16px; font-size: 34px; font-weight: 800; color: #0c1a3a; text-align: left; word-break: keep-all;}
#Topics .topic-img {padding: 30px 150px; margin-bottom: 40px; border: 1px solid #e5e5e5; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.08); cursor: pointer;}
#Topics .topic-img img {display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px;}
#Topics .topic-col {opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
#Topics .topic-col:nth-child(2) {transition-delay: .15s;}
#Topics .topic-col.is-active {opacity: 1; transform: translateY(0);}

/* ----- eMOTION - Projects 프로젝트 ----- */
#Projects {width:100%;overflow:hidden;}
#Projects .project-group + .project-group {margin-top: 60px;}
#Projects .project-group-tit {font-size: 26px; color: var(--color-primary-dark); font-weight: 800;}
#Projects .project-group-tit-row {display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px;}
#Projects .project-group-count {font-size: 18px; font-weight: 700; color: var(--color-primary); display: inline-flex; align-items: center; gap: 8px;}
#Projects .project-group-count.is-complete {color: #6b7280;}
#Projects .count-dot {width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 6px rgba(var(--color-primary-rgb),.6);}

#Projects .project-list {display: flex; flex-direction: column; gap: 40px;}

#Projects .project-card {display: flex; align-items: stretch; justify-content: space-between; gap: 40px; padding: 32px 40px; border: 1px solid #e5e5e5; border-radius: 20px; background: #fff;}

#Projects .project-card.complete,
#Projects .project-card.featured {flex-direction: column; justify-content: flex-start; gap: 24px;}
#Projects .project-top {display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;}

#Projects .project-info-col {flex: 1; min-width: 0;}

#Projects .project-badge {display: inline-block; padding: 6px 18px; border-radius: 100px; font-size: 14px; font-weight: 700; margin-bottom: 16px;}
#Projects .badge-complete {background: #eef0f3; color: #6b7280;}
#Projects .badge-outline {background: var(--color-primary); color: #fff;}

#Projects .project-title {font-size: 22px; font-weight: 800; color: #000; line-height: 1.4; word-break: keep-all; margin-bottom: 14px;}

#Projects .project-desc {font-size: 18px; line-height: 1.7; color: #666; word-break: keep-all; margin-bottom: 20px;}
#Projects .project-meta {display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; column-gap: 10px; padding: 18px 20px; border-radius: 14px; background: #f7f9fc;}
#Projects .project-meta-item {display: inline-flex; align-items: center; gap: 8px; font-size: 20px; color: #555; word-break: keep-all;}
#Projects .project-meta-item i {flex-shrink: 0; color: var(--color-primary); font-size: 17px;}
#Projects .project-meta-item b {flex-shrink: 0; font-weight: 700; color: var(--color-primary-dark); margin-right: 4px;}
#Projects .project-meta-sep {margin: 0 18px; color: #d5d9e0;}
#Projects .project-sponsor {display: flex; flex-direction: column; gap: 8px;}
#Projects .project-meta .project-sponsor {flex-basis: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #dfe4ec;}
#Projects .project-sponsor .project-meta-item {align-items: flex-start;}
#Projects .project-card.featured .project-meta {background: #fff;}
#Projects .project-thumb {position: relative; flex-shrink: 0; width: 260px; height: 200px; border-radius: 16px; overflow: hidden; background: #eef1f6;}
#Projects .project-thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
#Projects .project-thumb.is-default {display: grid; place-items: center; padding: 42px; background: #fff; border: 1px solid #e5e7eb;}
#Projects .project-thumb.is-default img {width: 100%; height: auto; max-height: 100%; object-fit: contain; filter: grayscale(1);}
#Projects .project-empty {margin: 0; padding: 48px 24px; border: 1px solid #e5e5e5; border-radius: 20px; color: #667085; text-align: center;}
#Projects .project-card.complete .project-thumb,
#Projects .project-card.featured .project-thumb {width: 300px; height: 200px;}
#Projects .project-card.featured {
    border: none;
    background: #f7f9fc;
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb),.15);
}

#Projects .project-group-tit-row {opacity: 0; transform: translateX(-140px); transition: opacity 0.85s cubic-bezier(.16,1,.3,1), transform 0.85s cubic-bezier(.16,1,.3,1);}
#Projects .project-group-tit-row.is-active {opacity: 1; transform: translateX(0);}

#Projects .project-card {opacity: 0; transform: translateX(-160px); transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);}
#Projects .project-card:nth-child(even) {transform: translateX(160px);}
#Projects .project-card.is-active {opacity: 1; transform: translateX(0);}

/* ----- eMOTION - Journals 저널 논문 ----- */
#Journals .journal-toolbar, #Conferences .journal-toolbar , #Patents .journal-toolbar {display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 32px;}
#Journals .journal-tabs, #Conferences .journal-tabs , #Patents .journal-tabs {display: flex; align-items: flex-end; gap: 36px; padding: 0 0 22px; background: none; border-radius: 0; position: relative;}
#Journals .journal-tab, #Conferences .journal-tab , #Patents .journal-tab {position: relative; overflow: visible; padding: 0; font-size: 16px; font-weight: 700; color: var(--color-gray); background: none; border: 0; border-radius: 0; cursor: pointer; transition: color 0.3s ease-in-out, font-size 0.3s ease-in-out;}
#Journals .journal-tab:hover, #Conferences .journal-tab:hover , #Patents .journal-tab:hover {color: var(--color-primary);}
#Journals .journal-tab.is-active, #Conferences .journal-tab.is-active , #Patents .journal-tab.is-active {color: var(--color-primary); font-size: 18px; font-weight: 800; background: none; box-shadow: none;}
#Journals .journal-tab::after, #Conferences .journal-tab::after , #Patents .journal-tab::after {content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 2px; background: var(--color-primary); opacity: 0; transition: opacity 0.2s ease-in-out;}
#Journals .journal-tab.is-active::after, #Conferences .journal-tab.is-active::after , #Patents .journal-tab.is-active::after {opacity: 1;}

#Journals .journal-search, #Conferences .journal-search , #Patents .journal-search {display: flex; align-items: center; gap: 8px; width: 280px; padding: 10px 16px; border: 1px solid #e5e5e5; border-radius: 100px;}
#Journals .journal-search i, #Conferences .journal-search i , #Patents .journal-search i {color: var(--color-gray); font-size: 15px;}
#Journals .journal-search input, #Conferences .journal-search input , #Patents .journal-search input {flex: 1; min-width: 0; border: 0; outline: 0; font-size: 15px; color: #333; background: none;}

#Journals .journal-year-group + .journal-year-group, #Conferences .journal-year-group + .journal-year-group , #Patents .journal-year-group + .journal-year-group {margin-top: 44px;}
#Journals .journal-year-row, #Conferences .journal-year-row , #Patents .journal-year-row {display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid rgba(var(--color-primary-dark-rgb),.8);}
#Journals .journal-year, #Conferences .journal-year , #Patents .journal-year {font-size: 26px; font-weight: 800; color: var(--color-primary-dark);}
#Journals .journal-year-count, #Conferences .journal-year-count , #Patents .journal-year-count {font-size: 17px; color: var(--color-gray);}

#Journals .journal-item, #Conferences .journal-item , #Patents .journal-item {display: flex; align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid #ececec;}
#Journals .journal-year-group:last-child .journal-item:last-child, #Conferences .journal-year-group:last-child .journal-item:last-child , #Patents .journal-year-group:last-child .journal-item:last-child {border-bottom: 0;}

#Journals .journal-num, #Conferences .journal-num , #Patents .journal-num {flex-shrink: 0; width: 44px; font-size: 22px; font-weight: 800; color: #94a3b8; text-align: center;}

#Journals .journal-thumb, #Conferences .journal-thumb , #Patents .journal-thumb, #Books .journal-thumb {flex-shrink: 0; width: 300px; height: 200px; border-radius: 12px; overflow: hidden; background: #eef1f6;}
#Journals .journal-thumb img, #Conferences .journal-thumb img , #Patents .journal-thumb img, #Books .journal-thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
#Journals .journal-thumb.is-default, #Conferences .journal-thumb.is-default, #Patents .journal-thumb.is-default, #Books .journal-thumb.is-default {display: grid; place-items: center; padding: 42px; border: 1px solid #e5e7eb; background: #fff;}
#Journals .journal-thumb.is-default img, #Conferences .journal-thumb.is-default img, #Patents .journal-thumb.is-default img, #Books .journal-thumb.is-default img {width: 100%;height: auto;max-height: 100%;object-fit: contain;filter: grayscale(1);}

#Journals .journal-body, #Conferences .journal-body , #Patents .journal-body {flex: 1; min-width: 0;}
#Journals .journal-title, #Conferences .journal-title , #Patents .journal-title {font-size: 22px; font-weight: 700; color: var(--color-ink); line-height: 1.5; word-break: keep-all; margin-bottom: 8px;}
#Journals .journal-authors, #Conferences .journal-authors , #Patents .journal-authors {font-size: 18px; color: #444; word-break: keep-all; margin-bottom: 6px;}
#Journals .journal-cite, #Conferences .journal-cite , #Patents .journal-cite {font-size: 18px; color: #777;}
#Journals .journal-cite .journal-name, #Conferences .journal-cite .journal-name , #Patents .journal-cite .journal-name {font-style: italic; color: #555;}

#Patents .journal-item {align-items: flex-start;}
#Patents .journal-authors b {font-weight: 600; margin-right: 4px;}
#Patents .journal-cite .cite-appno {font-weight: 600; margin-right: 4px;}
#Patents .journal-cite .cite-appdate {font-weight: 600; margin-left: 20px; margin-right: 4px;}

#Patents .journal-badge {display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 700;}
#Patents .badge-patent, #Patents .badge-software, #Patents .badge-design {background: rgba(var(--color-primary-rgb),.1); color: var(--color-primary);}

#Patents .journal-summary-wrap {margin-top: 4px;}
#Patents .journal-summary {font-size: 18px; color: #777; word-break: keep-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
#Patents .journal-summary.is-expanded {-webkit-line-clamp: unset; overflow: visible;}
#Patents .journal-summary-toggle {display: block; width: fit-content; margin: 4px 0 0; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--color-primary); cursor: pointer;}
#Patents .journal-summary-toggle:hover {text-decoration: underline;}
#Patents .journal-summary-toggle .toggle-symbol {margin-left: 2px;}

#Journals .journal-view, #Conferences .journal-view , #Patents .journal-view {flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none;}
#Journals .journal-view-icon, #Conferences .journal-view-icon , #Patents .journal-view-icon {width: 40px; height: 40px; border-radius: 50%; border: 1.5px dashed var(--color-primary); display: flex; align-items: center; justify-content: center; color: var(--color-primary); transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out;}
#Journals .journal-view-icon i, #Conferences .journal-view-icon i , #Patents .journal-view-icon i {color: var(--color-primary); transition: color 0.25s ease-in-out;}
#Journals .journal-view:hover .journal-view-icon, #Conferences .journal-view:hover .journal-view-icon , #Patents .journal-view:hover .journal-view-icon {border-style: solid; background-color: var(--color-primary); color: #fff;}
#Journals .journal-view:hover .journal-view-icon i, #Conferences .journal-view:hover .journal-view-icon i , #Patents .journal-view:hover .journal-view-icon i {color: #fff;}
#Journals .journal-view-label, #Conferences .journal-view-label , #Patents .journal-view-label {font-size: 15px; font-weight: 700; color: var(--color-primary);}

#Journals .journal-year-row, #Conferences .journal-year-row , #Patents .journal-year-row {opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);}
#Journals .journal-year-row.is-active, #Conferences .journal-year-row.is-active , #Patents .journal-year-row.is-active {opacity: 1; transform: translateY(0);}

#Journals .journal-item, #Conferences .journal-item , #Patents .journal-item {opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);}
#Journals .journal-item.is-active, #Conferences .journal-item.is-active , #Patents .journal-item.is-active {opacity: 1; transform: translateY(0);}

/* ----- eMOTION - Alumni 동문 ----- */
#Alumni .alumni-wrap {display: flex; align-items: center; gap: 20px;}

#Alumni .alumni-text {flex: 1; max-width: 550px;}
#Alumni .alumni-title {font-size: 50px; font-weight: 800; color: #0c1a3a; line-height: 1.15; margin-bottom: 24px; word-break: keep-all;}
#Alumni .alumni-desc {font-size:20px; line-height: 1.7; color: #666; max-width: 440px; margin-bottom: 24px; word-break: keep-all;}
#Alumni .alumni-cta {display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--color-primary); text-decoration: none;}
#Alumni .alumni-cta:hover {text-decoration: underline;}
#Alumni .alumni-cta i {font-size: 15px; transition: transform 0.2s ease-in-out;}
#Alumni .alumni-cta:hover i {transform: translateX(4px);}

#Alumni .alumni-graphic {position: relative; flex: 1; min-width: 0;}
#Alumni .alumni-graphic svg {width: 100%; height: auto; display: block; overflow: visible;}

#Alumni .alumni-path-dash {fill: none; stroke: #d7e0ef; stroke-width: 1; stroke-dasharray: 2 5;}
#Alumni .alumni-path {fill: none; stroke: var(--color-primary); stroke-width: 1.4; opacity: .45;}

#Alumni .alumni-node-ring {fill: none; stroke: var(--color-primary); stroke-width: 1; stroke-dasharray: 2 4; opacity: .5;}
#Alumni .alumni-node {fill: #fff; stroke: var(--color-primary); stroke-width: 2.5;}
#Alumni .alumni-center {fill: var(--color-primary); filter: drop-shadow(0 0 10px rgba(var(--color-primary-rgb),.6));}
#Alumni .alumni-dot {fill: var(--color-primary); opacity: 0;}

#Alumni .alumni-graphic::before {content: ''; position: absolute; left: 8.9%; top: 50%; width: 88px; height: 88px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-primary); opacity: .5; animation: alumniPulse 2.2s cubic-bezier(.2,.7,.2,1) infinite;}

@keyframes alumniPulse {
    0% {transform: translate(-50%, -50%) scale(.4); opacity: .55;}
    80%, 100% {transform: translate(-50%, -50%) scale(1.8); opacity: 0;}
}

#Alumni .alumni-center-logo {position: absolute; left: 8.9%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); z-index: 1;}

#Alumni .alumni-label {position: absolute; font-size: 24px; font-weight: 700; color: #0c1a3a; white-space: nowrap;}
#Alumni .alumni-label-center {left: 8.9%; top: 68%; transform: translate(-50%, -50%);}
#Alumni .alumni-label-research {left: 88%; top: 15.6%; transform: translateY(-50%);}
#Alumni .alumni-label-industry {left: 88%; top: 50%; transform: translateY(-50%);}
#Alumni .alumni-label-innovation {left: 88%; top: 84.4%; transform: translateY(-50%);}

/* ----- eMOTION - Lecture Board 교과목 리스트 ----- */
#Course .head-bar {display: block; width: 60px; height: 4px; margin-bottom: 16px; border-radius: 2px; background: var(--color-primary);}
#Course .course-page-title {display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 34px; font-weight: 800; color: #0c1a3a;}
#Course .course-page-title .eng {font-size: 16px; font-weight: 700; color: #9aa3b2;}

#Course .journal-toolbar {display: flex; align-items: center; margin-bottom: 32px; padding-bottom: 16px;}
#Course .journal-tabs {display: flex; align-items: flex-end; gap: 36px; padding: 0 0 22px; position: relative;}
#Course .journal-tab {position: relative; overflow: visible; padding: 0; border: 0; background: none; color: var(--color-gray); cursor: pointer; font-size: 16px; font-weight: 700; transition: color .3s ease-in-out, font-size .3s ease-in-out;}
#Course .journal-tab:hover {color: var(--color-primary);}
#Course .journal-tab.is-active {color: var(--color-primary); font-size: 18px; font-weight: 800;}
#Course .journal-tab::after {content: ''; position: absolute; right: 0; bottom: -12px; left: 0; height: 2px; background: var(--color-primary); opacity: 0; transition: opacity .2s ease-in-out;}
#Course .journal-tab.is-active::after {opacity: 1;}

#Course .course-card {display: flex; flex-direction: column; gap: 24px;}

#Course .course-item {display: flex; align-items: stretch; border: 1px solid #e5e5e5; border-left: 4px solid #d7dce4; border-radius: 20px; background: #fff; overflow: hidden; transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;}
#Course .course-item:hover {border-color: var(--color-primary); box-shadow: 0 10px 20px rgba(0,0,0,.08);}

#Course .course-item-main {flex: 1; min-width: 0; padding: 40px 48px;}

#Course .course-title-row {display: flex; align-items: baseline; gap: 14px;}
#Course .course-title {font-size: 26px; font-weight: 800; color: #0c1a3a;}
#Course .course-code {font-size: 16px; font-weight: 700; color: var(--color-primary);}

#Course .course-meta-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 22px;}
#Course .course-meta-list li {display: flex; flex-direction: column; gap: 6px; min-width: 0;}
#Course .meta-label {display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #6b7280; word-break: keep-all;}
#Course .meta-label i {flex-shrink: 0; font-size: 18px; color: var(--color-primary);}
#Course .meta-value {font-style: normal; font-size: 18px; font-weight: 700; color: var(--color-ink); word-break: keep-all;}

/* 교과목 개요 */
#Course .course-overview {margin-top: 24px; padding-top: 20px; border-top: 1px dashed #e5e5e5;}
#Course .course-overview h4 {margin-bottom: 8px; font-size: 18px; font-weight: 700; color: var(--color-ink);}
#Course .course-sec-desc {font-size: 20px; line-height: 1.7; color: #666; word-break: keep-all;}

#Course .course-side {flex-shrink: 0; width: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(var(--color-primary-rgb),.08); text-align: center;}
#Course .course-side-icon {display: flex; align-items: center; justify-content: center; line-height: 1;}
#Course .course-side-icon i {font-size: 40px; color: var(--color-primary);}
#Course .course-side-label {font-size: 19px; font-weight: 700; color: var(--color-ink);}

#Course .course-visual {display: flex; align-items: center; justify-content: center; width: 122px; margin: 0 0 20px auto;}
#Course .book-loader {display: flex; align-items: center; justify-content: center; width: 90px; height: 64px;}

#Course .book {--color: var(--color-primary); --duration: 6.8s; width: 32px; height: 12px; position: relative; transform: scale(2.1);}
#Course .book .inner {width: 32px; height: 12px; position: relative; transform-origin: 2px 2px; transform: rotateZ(-90deg); animation: bookFlip var(--duration) ease infinite;}
#Course .book .inner .left, #Course .book .inner .right {width: 60px; height: 4px; top: 0; border-radius: 2px; background: var(--color); position: absolute;}
#Course .book .inner .left::before, #Course .book .inner .right::before {content: ''; width: 48px; height: 4px; border-radius: 2px; background: inherit; position: absolute; top: -10px; left: 6px;}
#Course .book .inner .left {right: 28px; transform-origin: 58px 2px; transform: rotateZ(90deg); animation: bookLeft var(--duration) ease infinite;}
#Course .book .inner .right {left: 28px; transform-origin: 2px 2px; transform: rotateZ(-90deg); animation: bookRight var(--duration) ease infinite;}
#Course .book .inner .middle {width: 32px; height: 12px; border: 4px solid var(--color); border-top: 0; border-radius: 0 0 9px 9px; transform: translateY(2px);}

#Course .book ul {margin: 0; padding: 0; list-style: none; position: absolute; left: 50%; top: 0;}
#Course .book ul li {height: 4px; border-radius: 2px; transform-origin: 100% 2px; width: 48px; right: 0; top: -10px; position: absolute; background: var(--color); transform: rotateZ(0deg) translateX(-18px); animation-duration: var(--duration); animation-timing-function: ease; animation-iteration-count: infinite;}
#Course .book ul li:nth-child(1) {animation-name: bookPage-1;}
#Course .book ul li:nth-child(2) {animation-name: bookPage-2;}
#Course .book ul li:nth-child(3) {animation-name: bookPage-3;}
#Course .book ul li:nth-child(4) {animation-name: bookPage-4;}
#Course .book ul li:nth-child(5) {animation-name: bookPage-5;}
#Course .book ul li:nth-child(6) {animation-name: bookPage-6;}
#Course .book ul li:nth-child(7) {animation-name: bookPage-7;}
#Course .book ul li:nth-child(8) {animation-name: bookPage-8;}
#Course .book ul li:nth-child(9) {animation-name: bookPage-9;}
#Course .book ul li:nth-child(10) {animation-name: bookPage-10;}
#Course .book ul li:nth-child(11) {animation-name: bookPage-11;}
#Course .book ul li:nth-child(12) {animation-name: bookPage-12;}
#Course .book ul li:nth-child(13) {animation-name: bookPage-13;}
#Course .book ul li:nth-child(14) {animation-name: bookPage-14;}
#Course .book ul li:nth-child(15) {animation-name: bookPage-15;}
#Course .book ul li:nth-child(16) {animation-name: bookPage-16;}
#Course .book ul li:nth-child(17) {animation-name: bookPage-17;}
#Course .book ul li:nth-child(18) {animation-name: bookPage-18;}

@keyframes bookLeft {
    4% {transform: rotateZ(90deg);}
    10%, 40% {transform: rotateZ(0deg);}
    46%, 54% {transform: rotateZ(90deg);}
    60%, 90% {transform: rotateZ(0deg);}
    96% {transform: rotateZ(90deg);}
}
@keyframes bookRight {
    4% {transform: rotateZ(-90deg);}
    10%, 40% {transform: rotateZ(0deg);}
    46%, 54% {transform: rotateZ(-90deg);}
    60%, 90% {transform: rotateZ(0deg);}
    96% {transform: rotateZ(-90deg);}
}
@keyframes bookFlip {
    4% {transform: rotateZ(-90deg);}
    10%, 40% {transform: rotateZ(0deg); transform-origin: 2px 2px;}
    40.01%, 59.99% {transform-origin: 30px 2px;}
    46%, 54% {transform: rotateZ(90deg);}
    60%, 90% {transform: rotateZ(0deg); transform-origin: 2px 2px;}
    96% {transform: rotateZ(-90deg);}
}

/* iOS(WebKit)는 정확히 180° 회전의 방향을 반대로 잡아 낱장이 아래로 넘어감.
   앞/뒤 넘김 중간에 rotateZ(90deg) 지점을 넣어 회전 방향을 안드로이드와 동일하게 고정 */
@keyframes bookPage-1 {
    5.86% {transform: rotateZ(0deg) translateX(-18px);}
    10.3% {transform: rotateZ(90deg) translateX(-18px);}
    14.74%, 55.86% {transform: rotateZ(180deg) translateX(-18px);}
    60.3% {transform: rotateZ(90deg) translateX(-18px);}
    64.74% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-2 {
    7.72% {transform: rotateZ(0deg) translateX(-18px);}
    12.1% {transform: rotateZ(90deg) translateX(-18px);}
    16.48%, 57.72% {transform: rotateZ(180deg) translateX(-18px);}
    62.1% {transform: rotateZ(90deg) translateX(-18px);}
    66.48% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-3 {
    9.58% {transform: rotateZ(0deg) translateX(-18px);}
    13.9% {transform: rotateZ(90deg) translateX(-18px);}
    18.22%, 59.58% {transform: rotateZ(180deg) translateX(-18px);}
    63.9% {transform: rotateZ(90deg) translateX(-18px);}
    68.22% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-4 {
    11.44% {transform: rotateZ(0deg) translateX(-18px);}
    15.7% {transform: rotateZ(90deg) translateX(-18px);}
    19.96%, 61.44% {transform: rotateZ(180deg) translateX(-18px);}
    65.7% {transform: rotateZ(90deg) translateX(-18px);}
    69.96% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-5 {
    13.3% {transform: rotateZ(0deg) translateX(-18px);}
    17.5% {transform: rotateZ(90deg) translateX(-18px);}
    21.7%, 63.3% {transform: rotateZ(180deg) translateX(-18px);}
    67.5% {transform: rotateZ(90deg) translateX(-18px);}
    71.7% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-6 {
    15.16% {transform: rotateZ(0deg) translateX(-18px);}
    19.3% {transform: rotateZ(90deg) translateX(-18px);}
    23.44%, 65.16% {transform: rotateZ(180deg) translateX(-18px);}
    69.3% {transform: rotateZ(90deg) translateX(-18px);}
    73.44% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-7 {
    17.02% {transform: rotateZ(0deg) translateX(-18px);}
    21.1% {transform: rotateZ(90deg) translateX(-18px);}
    25.18%, 67.02% {transform: rotateZ(180deg) translateX(-18px);}
    71.1% {transform: rotateZ(90deg) translateX(-18px);}
    75.18% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-8 {
    18.88% {transform: rotateZ(0deg) translateX(-18px);}
    22.9% {transform: rotateZ(90deg) translateX(-18px);}
    26.92%, 68.88% {transform: rotateZ(180deg) translateX(-18px);}
    72.9% {transform: rotateZ(90deg) translateX(-18px);}
    76.92% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-9 {
    20.74% {transform: rotateZ(0deg) translateX(-18px);}
    24.7% {transform: rotateZ(90deg) translateX(-18px);}
    28.66%, 70.74% {transform: rotateZ(180deg) translateX(-18px);}
    74.7% {transform: rotateZ(90deg) translateX(-18px);}
    78.66% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-10 {
    22.6% {transform: rotateZ(0deg) translateX(-18px);}
    26.5% {transform: rotateZ(90deg) translateX(-18px);}
    30.4%, 72.6% {transform: rotateZ(180deg) translateX(-18px);}
    76.5% {transform: rotateZ(90deg) translateX(-18px);}
    80.4% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-11 {
    24.46% {transform: rotateZ(0deg) translateX(-18px);}
    28.3% {transform: rotateZ(90deg) translateX(-18px);}
    32.14%, 74.46% {transform: rotateZ(180deg) translateX(-18px);}
    78.3% {transform: rotateZ(90deg) translateX(-18px);}
    82.14% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-12 {
    26.32% {transform: rotateZ(0deg) translateX(-18px);}
    30.1% {transform: rotateZ(90deg) translateX(-18px);}
    33.88%, 76.32% {transform: rotateZ(180deg) translateX(-18px);}
    80.1% {transform: rotateZ(90deg) translateX(-18px);}
    83.88% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-13 {
    28.18% {transform: rotateZ(0deg) translateX(-18px);}
    31.9% {transform: rotateZ(90deg) translateX(-18px);}
    35.62%, 78.18% {transform: rotateZ(180deg) translateX(-18px);}
    81.9% {transform: rotateZ(90deg) translateX(-18px);}
    85.62% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-14 {
    30.04% {transform: rotateZ(0deg) translateX(-18px);}
    33.7% {transform: rotateZ(90deg) translateX(-18px);}
    37.36%, 80.04% {transform: rotateZ(180deg) translateX(-18px);}
    83.7% {transform: rotateZ(90deg) translateX(-18px);}
    87.36% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-15 {
    31.9% {transform: rotateZ(0deg) translateX(-18px);}
    35.5% {transform: rotateZ(90deg) translateX(-18px);}
    39.1%, 81.9% {transform: rotateZ(180deg) translateX(-18px);}
    85.5% {transform: rotateZ(90deg) translateX(-18px);}
    89.1% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-16 {
    33.76% {transform: rotateZ(0deg) translateX(-18px);}
    37.3% {transform: rotateZ(90deg) translateX(-18px);}
    40.84%, 83.76% {transform: rotateZ(180deg) translateX(-18px);}
    87.3% {transform: rotateZ(90deg) translateX(-18px);}
    90.84% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-17 {
    35.62% {transform: rotateZ(0deg) translateX(-18px);}
    39.1% {transform: rotateZ(90deg) translateX(-18px);}
    42.58%, 85.62% {transform: rotateZ(180deg) translateX(-18px);}
    89.1% {transform: rotateZ(90deg) translateX(-18px);}
    92.58% {transform: rotateZ(0deg) translateX(-18px);}
}
@keyframes bookPage-18 {
    37.48% {transform: rotateZ(0deg) translateX(-18px);}
    40.9% {transform: rotateZ(90deg) translateX(-18px);}
    44.32%, 87.48% {transform: rotateZ(180deg) translateX(-18px);}
    90.9% {transform: rotateZ(90deg) translateX(-18px);}
    94.32% {transform: rotateZ(0deg) translateX(-18px);}
}

#Course .course-board-btn {position: relative; overflow: hidden; display: flex; width: fit-content; align-items: center; gap: 10px; margin: 0; padding: 12px 22px; border-radius: 100px; background: var(--color-primary); color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; white-space: nowrap;}
#Course .course-board-btn::before {content: ''; position: absolute; inset: 0; background: var(--color-primary-dark); transform: scaleX(0); transform-origin: left center; transition: transform .4s ease;}
#Course .course-board-btn:hover::before {transform: scaleX(1);}
#Course .course-board-btn .btn-text {position: relative; z-index: 1; color: #fff;}

#Course .course-board-btn .btn-arrow {position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;}
#Course .course-board-btn .btn-arrow img {display: block; width: 16px; height: 16px; transform: rotate(45deg); transition: transform .35s cubic-bezier(.34,1.56,.64,1);}
#Course .course-board-btn:hover .btn-arrow img {transform: rotate(0deg) translate(2px, -2px);}

/* ----- eMOTION - Lecture Board 교과목 상세 ----- */
#CourseDetail .cd-head {display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px;}
#CourseDetail .cd-title {font-size: 26px; font-weight: 800; color: #0c1a3a;}
#CourseDetail .cd-code {font-size: 16px; font-weight: 700; color: var(--color-primary);}

#CourseDetail .cd-meta-panel {padding: 32px; border-radius: 20px; background: rgba(var(--color-primary-rgb),.06);}

#CourseDetail .cd-meta-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;}
#CourseDetail .cd-meta-list li {display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 20px; border-right: 1px dashed rgba(var(--color-primary-rgb),.25);}
#CourseDetail .cd-meta-list li:first-child {padding-left: 0;}
#CourseDetail .cd-meta-list li:last-child {padding-right: 0; border-right: 0;}
#CourseDetail .cd-meta-label {display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: #6b7280; word-break: keep-all;}
#CourseDetail .cd-meta-label i {flex-shrink: 0; font-size: 18px; color: var(--color-primary);}
#CourseDetail .cd-meta-value {font-style: normal; font-size: 18px; font-weight: 700; color: var(--color-ink); word-break: keep-all;}

#CourseDetail .cd-overview {margin-top: 28px; padding-top: 24px; border-top: 1px dashed rgba(var(--color-primary-rgb),.2);}
#CourseDetail .cd-overview h3 {margin-bottom: 10px; font-size: 18px; font-weight: 800; color: var(--color-ink);}
#CourseDetail .cd-desc {font-size: 20px; line-height: 1.7; color: #666; word-break: keep-all;}

/* 교과목 게시판 비밀번호 확인 */
.course-access-modal[hidden] {display: none;}
.course-access-modal {position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; padding: 20px;}
.course-access-backdrop {position: absolute; inset: 0; background: rgba(9, 18, 36, .62);}
#container .course-access-dialog {position: relative; width: min(100%, 420px); padding: 28px 32px 30px; border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.28); text-align: center;}
.course-access-close {position: absolute; top: 16px; right: 16px; border: 0; background: transparent; font-size: 18px; color: #697386; cursor: pointer;}
.course-access-icon {display: grid; width: 58px; height: 58px; place-items: center; margin: 0 auto 16px; border-radius: 50%; background: rgba(var(--color-primary-rgb),.1); color: var(--color-primary); font-size: 28px;}
.course-access-dialog h2 {margin-bottom: 8px; color: var(--color-ink); font-size: 23px; font-weight: 800;}
.course-access-dialog > p {margin-bottom: 24px; color: #667085; font-size: 15px;}
.course-access-dialog form {display: grid; width: 100%; margin: 0; padding: 0; gap: 9px; text-align: left;}
.course-access-dialog label {font-size: 14px; font-weight: 700; color: var(--color-ink);}
.course-access-dialog input {width: 100%; height: 48px; padding: 0 14px; border: 1px solid #d9dee8; border-radius: 9px; font: inherit;}
.course-access-dialog form > button {height: 48px; margin-top: 8px; border: 0; border-radius: 9px; background: var(--color-primary); color: #fff; font: inherit; font-weight: 700; cursor: pointer;}
.course-access-error {min-height: 20px; margin: 0; color: #d92d20; font-size: 13px;}
.course-board-embed {margin-top: 70px; padding-bottom: 100px;}
.course-board-head {display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px;}
.course-board-head h2 {margin: 0; color: var(--color-ink); font-size: 26px; font-weight: 800;}
.course-board-head span {color: var(--color-primary); font-size: 15px; font-weight: 700;}


/* =====  미디어쿼리 통합  ===== */

@media (prefers-reduced-motion: reduce) {
    .cont-eyebrow {transition: none; opacity: 1; transform: none;}

    #About .about-title-accent {animation: none; opacity: 1; transform: none;}
    #About .about-intro-head .about-logo {transition: none; opacity: 1; transform: none;}

    #About .about-col-en,
    #About .about-col-kr {transition: none; opacity: 1; transform: none;}

    #About .about-divider-fill, #About .about-divider-dot {transition: none;}

    #About .emo-flow-track {animation: none;}

    #Location .location-pulse .pulse-ring {animation: none; opacity: 0.25;}

    #Contact .contact-mark {transition: none;}

    #ProfProfile .profile-divider-fill, #ProfProfile .profile-divider-dot {transition: none;}
    #ProfProfile .profile-photo,
    #ProfProfile .profile-heading,
    #ProfProfile .profile-block-tit,
    #ProfProfile .profile-block-body {transition: none; opacity: 1; transform: none;}

    #CurrentMembers .member-group-tit,
    #CurrentMembers .member-card {transition: none; opacity: 1; transform: none;}

    #Topics .topics-intro-tit,
    #Topics .topics-intro-divider,
    #Topics .topics-intro-desc {transition: none; opacity: 1; transform: none;}

    #Topics .topic-panel-desc {transition: none;}

    #Topics .topic-col {transition: none; opacity: 1; transform: none;}

    #Projects .project-group-tit-row,
    #Projects .project-card {transition: none; opacity: 1; transform: none;}

    #Journals .journal-year-row, #Conferences .journal-year-row , #Patents .journal-year-row,
    #Journals .journal-item, #Conferences .journal-item , #Patents .journal-item {transition: none; opacity: 1; transform: none;}

    #Alumni .alumni-dot {opacity: 0;}
    #Alumni .alumni-graphic::before {animation: none; opacity: .25;}

    #Course .book .inner, #Course .book .inner .left, #Course .book .inner .right, #Course .book ul li {animation: none;}
}

@media (min-width: 1201px) {
    .sub-header-wrap:has(~ #subContents > #Contact) {height: 400px;}
    .sub-header-wrap:has(~ #subContents > #Contact) .sub-header .sub-text {padding-top: 10px;}
    .sub-header-wrap:has(~ #subContents > #Contact) .sub-header .sub-text h2 {font-size: 44px;}
    .sub-header-wrap:has(~ #subContents > #Contact) .sub-header .sub-text p {font-size: 20px;}
    .sub-header-wrap:has(~ #subContents > #Contact) .sub-tagline {font-size: 24px; right: 40px; bottom: 110px;}
    .sub-header-wrap:has(~ #subContents > #Contact) .sub-menu {height: 65px;}
    .sub-header-wrap:has(~ #subContents > #Contact) .sub-menu li a {font-size: 17px; padding: 0 20px;}
}

@media (max-width: 1700px) {
    #Course .course-visual {width: 80px; margin: 0 40px 20px auto;}
    #Course .book-loader {width: 58px; height: 42px;}
    #Course .book {transform: scale(1.35);}
}

@media (max-width: 1400px) {
    #About .about-logo {height: 60px;}
    #About .about-title {font-size: 40px;}
    #About .about-subtit {font-size: 22px;}
    #About .about-intro-cols {gap: 60px;}
    #About .emo-flow-item {font-size: 140px;}
}

@media (max-width: 1300px) {
    #Location .location-below {flex-direction: column; align-items: stretch; gap: 20px; padding-right: 0;}
    #Location .location-badge {width: 100%; margin-top: 0; border-radius: 16px;}
    #Location .location-badge-tit {font-size: 26px;}
    #Location .location-label {font-size: 18px;}
    #Location .location-info-text p {font-size: 18px;}
}

@media (max-width: 1200px) {
    #Contact .contact-frame {position: static; height: auto; aspect-ratio: auto; min-height: 0; padding: 40px 0 30px; display: block;}

    #Contact .contact-hero {display: block; position: relative; width: 100%; height: 260px; overflow: hidden;}
    #Contact .contact-globe {display: block; width: 100%; height: 100%;}

    #Contact .contact-mark {position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 20px; text-align: center; color: var(--color-ink);}
    #Contact .contact-mark-title {font-size: min(10vw, 48px);}
    #Contact .contact-mark-tagline {font-size: clamp(16px, 4vw, 18px);}

    #Contact .contact-panel {position: relative; top: auto; right: auto; visibility: visible; opacity: 1; width: 100%; margin-top: 100px; transform: none;}
    #Contact .contact-panel-inner {max-height: none; overflow-y: visible; padding: 28px 22px; border-radius: 18px;}
    #Contact .contact-text-en, #Contact .contact-text-kr {font-size: 18px; line-height: 1.65;}
    #Contact .contact-text-en strong, #Contact .contact-text-kr strong {font-size: 18px;}
    #Contact .contact-panel-divider {margin: 16px auto;}
    #Contact .contact-sign {margin-top: 16px; font-size: 18px;}
}

@media (max-width: 1024px) {
    #About {padding-bottom: 170px;}
    #About .about-intro-head {margin-bottom: 90px;}
    #About .about-title {font-size: 34px;}
    #About .about-intro-cols {grid-template-columns: 1fr; gap: 50px;}
    #About .about-divider {display: none;}
    #About .emo-flow-item {font-size: 100px;}
    #About .about-col-en,
    #About .about-col-kr {transform: translateY(30px);}

    #ProfProfile .profile-layout {flex-direction: column; align-items: center;}
    #ProfProfile .profile-side {width: 100%;}
    #ProfProfile .profile-main {width: 100%;}
    #ProfProfile .profile-card {position: relative; top: auto; padding: 0 0 50px; display: flex; flex-direction: column; align-items: center;}
    #ProfProfile .profile-watermark {display: none;}
    #ProfProfile .profile-divider {display: none;}
    #ProfProfile .profile-heading {width: 100%; text-align: center;}
    #ProfProfile .profile-name-kr {justify-content: center;}
    #ProfProfile .profile-contact {display: inline-flex; flex-direction: column; width: auto; text-align: left;}

    #CurrentMembers .member-card {flex-direction: column-reverse; align-items: stretch;}
    #CurrentMembers .member-photo {align-self: center; width: 100%; max-width: 240px; height: 320px;}

    #Topics .topic-head-bar {width: 48px; margin-bottom: 12px;}
    #Topics .topic-tit {font-size: 28px;}
    #Topics .topic-img {padding: 20px 60px;}
    #Topics .topics-intro {margin-bottom: 56px;}
    #Topics .topics-intro-tit {font-size: 34px;}

    #Projects .project-top {flex-direction: column;}
    #Projects .project-card.complete .project-thumb,
    #Projects .project-card.featured .project-thumb {width: 100%; height: 220px;}

    #Alumni .alumni-wrap {flex-direction: column; align-items: stretch; gap: 40px;}
    #Alumni .alumni-title {font-size: 40px;}
    #Alumni .alumni-desc {max-width: none;}

    #Course .head-bar {width: 48px; margin-bottom: 12px;}
    #Course .course-page-title {font-size: 28px;}
    #Course .course-page-title .eng {font-size: 14px;}

    #Course .course-item {flex-direction: column;}
    #Course .course-item-main {padding: 32px;}
    #Course .course-title {font-size: 22px;}
    #Course .course-code {font-size: 15px;}

    #Course .course-meta-list {grid-template-columns: repeat(2, 1fr);}
    #Course .meta-label {font-size: 17px;}
    #Course .meta-label i {font-size: 17px;}
    #Course .meta-value {font-size: 18px;}

    #Course .course-overview h4 {font-size: 17px;}
    #Course .course-sec-desc {font-size: 18px;}

    #Course .course-side {width: 100%; padding: 28px;}
    #Course .course-side-icon i {font-size: 34px;}
    #Course .course-side-label {font-size: 17px;}
    #Course .course-board-btn {font-size: 16px;}

    #Course .course-visual {width: 84px;}
    #Course .book-loader {width: 60px; height: 44px;}
    #Course .book {transform: scale(1);}

    #CourseDetail .cd-title {font-size: 22px;}
    #CourseDetail .cd-code {font-size: 15px;}
    #CourseDetail .cd-meta-list {grid-template-columns: repeat(2, 1fr);}
    #CourseDetail .cd-meta-list li {padding: 0 16px;}
    #CourseDetail .cd-meta-list li:nth-child(odd) {padding-left: 0;}
    #CourseDetail .cd-meta-list li:nth-child(even) {padding-right: 0; border-right: 0;}
    #CourseDetail .cd-meta-label {font-size: 15px;}
    #CourseDetail .cd-meta-label i {font-size: 17px;}
    #CourseDetail .cd-meta-value {font-size: 17px;}
    #CourseDetail .cd-overview h3 {font-size: 17px;}
    #CourseDetail .cd-desc {font-size: 17px;}
}

@media (max-width: 1000px) {
    #Location .location-map .root_daum_roughmap .map-controls {padding: 10px;}
    #Location .map-controls .btn-wrap {gap: 6px;}
    #Location .map-controls .map-btn {padding: 6px 10px; font-size: 13px;}
    #Location .location-below {gap: 16px; margin-top: 16px;}
    #Location .location-label {font-size: 18px;}
    #Location .location-info-text p {font-size: 17px;}
}

@media (max-width: 900px) {
    #Journals .journal-item, #Conferences .journal-item , #Patents .journal-item {flex-direction: column; align-items: stretch; gap: 16px;}
    #Journals .journal-num, #Conferences .journal-num , #Patents .journal-num {display: none;}
    #Journals .journal-thumb, #Conferences .journal-thumb , #Patents .journal-thumb {width: 100%; height: auto; aspect-ratio: 3 / 2;}
    #Journals .journal-title, #Conferences .journal-title , #Patents .journal-title {font-size: 20px;}
    #Journals .journal-authors, #Journals .journal-cite, #Conferences .journal-authors, #Patents .journal-authors, #Conferences .journal-cite , #Patents .journal-cite {font-size: 18px;}
    #Journals .journal-view, #Conferences .journal-view , #Patents .journal-view {align-self: center; margin-top: 4px;}
}

@media (max-width: 768px) {
    #About .about-intro-head {margin-bottom: 65px;}
    #About .about-logo {height: 48px; margin-bottom: 18px;}
    #About .about-title {font-size: 28px;}
    #About .about-subtit {font-size: 20px;}
    #About .about-col h3 {font-size: 24px; margin-bottom: 18px;}
    #About .about-col p {font-size: 18px;}
    #About .emo-flow-item {font-size: 60px;}
    #About {padding-bottom: 120px;}
}

@media (max-width: 767px) {
    #ProfProfile .profile-block + .profile-block {margin-top: 40px;}
    #ProfProfile .profile-block-tit {font-size: 20px;}
    #ProfProfile .profile-block-body {font-size: 18px;}
    #ProfProfile .profile-block-body .sub, #ProfProfile .sub-list li {font-size: 16px;}
    #ProfProfile .course-tags li {font-size: 18px; padding: 5px 12px;}
    #ProfProfile .profile-photo {width: 100%; max-width: 280px;}

    #CurrentMembers .member-group-tit {font-size: 21px; margin-bottom: 18px;}
    #CurrentMembers .member-card {padding: 24px; border-radius: 16px;}
    #CurrentMembers .member-name-en {font-size: 19px;}
    #CurrentMembers .member-field-list > li {font-size: 18px;}
    #CurrentMembers .member-photo {max-width: 200px; height: 260px;}

    #Topics .tab_list li {width: calc((100% - 8px) / 2);}
    #Topics .tab_list li a {font-size: 17px;}
    #Topics .topic-img {padding: 16px 24px;}
    #Topics .topics-intro {margin-bottom: 44px;}
    #Topics .topics-intro-tit {font-size: 28px;}
    #Topics .topics-intro-desc {font-size: 16px;}
    #Topics .topic-panel-desc {font-size: 17px; padding: 26px 24px; margin-bottom: 32px;}
    #Topics .topic-panel-desc::before {font-size: 64px; top: 15px; left: 12px;}

    #Projects .project-group-tit {font-size: 21px;}
    #Projects .project-card {padding: 24px; border-radius: 16px;}
    #Projects .project-title {font-size: 19px;}
    #Projects .project-meta-item {font-size: 16px;}
    #Projects .project-meta-sep {display: none;}
    #Projects .project-sponsor .project-meta-item {flex-wrap: wrap;}
    #Projects .project-card.complete .project-thumb,
    #Projects .project-card.featured .project-thumb {height: 180px;}
}

@media (max-width: 700px) {
    #Journals .journal-toolbar, #Conferences .journal-toolbar , #Patents .journal-toolbar {flex-direction: column; align-items: stretch;}
    #Journals .journal-tabs, #Conferences .journal-tabs , #Patents .journal-tabs {width: 100%; gap: 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
    #Journals .journal-tabs::-webkit-scrollbar, #Conferences .journal-tabs::-webkit-scrollbar , #Patents .journal-tabs::-webkit-scrollbar {display: none;}
    #Journals .journal-tab, #Conferences .journal-tab , #Patents .journal-tab {flex-shrink: 0; font-size: 14px; white-space: nowrap;}
    #Journals .journal-tab.is-active, #Conferences .journal-tab.is-active , #Patents .journal-tab.is-active {font-size: 16px;}
    #Journals .journal-search, #Conferences .journal-search , #Patents .journal-search {width: 100%;}
    #Journals .journal-view, #Conferences .journal-view , #Patents .journal-view {flex-direction: row-reverse; gap: 8px;}
    #Journals .journal-view-icon, #Conferences .journal-view-icon , #Patents .journal-view-icon {width: 32px; height: 32px;}
    #Patents .journal-cite .cite-date-group {display: block; margin-top: 4px;}
    #Patents .journal-cite .cite-appdate {margin-left: 0;}
}

@media (max-width: 600px) {
    #Topics .topic-head-bar {width: 36px; height: 3px; margin-bottom: 10px;}
    #Topics .topic-tit {font-size: 22px;}
    #Topics .topic-img {padding: 12px; margin-bottom: 24px;}
    #Topics .topics-intro-tit {font-size: 23px;}
    #Topics .topics-intro-divider {height: 28px; margin-bottom: 18px;}

    #Alumni .alumni-title {font-size: 30px;}
    #Alumni .alumni-desc {font-size: 16px;}
    #Alumni .alumni-label {font-size: 13px;}

    #Course .head-bar {width: 36px; height: 3px; margin-bottom: 10px;}
    #Course .course-page-title {font-size: 22px;}
    #Course .course-page-title .eng {font-size: 12px;}

    #Course .course-title {font-size: 20px;}
    #Course .course-code {font-size: 14px;}

    #Course .course-meta-list {grid-template-columns: 1fr; gap: 18px;}


    #Course .course-side-icon i {font-size: 28px;}
    #Course .course-side-label {font-size: 15px;}
    #Course .course-board-btn {font-size: 14px; padding: 10px 18px;}

    #Course .course-visual {width: 40px; margin: 0 30px 10px auto;}
    #Course .book-loader {width: 30px; height: 22px;}
    #Course .book {transform: scale(0.7);}

    #Course .course-item {border-left-width: 1px;}

    #CourseDetail .cd-head {flex-direction: column; align-items: flex-start; gap: 4px;}
    #CourseDetail .cd-title {font-size: 19px;}
    #CourseDetail .cd-code {font-size: 13px;}
    #CourseDetail .cd-meta-panel {padding: 20px;}
    #CourseDetail .cd-meta-list {grid-template-columns: 1fr; gap: 0;}
    #CourseDetail .cd-meta-list li {padding: 0 0 14px; border-right: 0; border-bottom: 1px dashed rgba(var(--color-primary-rgb),.25);}
    #CourseDetail .cd-meta-list li:not(:first-child) {padding-top: 14px;}
    #CourseDetail .cd-meta-list li:last-child {border-bottom: 0; padding-bottom: 0;}
    #CourseDetail .cd-meta-label {font-size: 14px;}
    #CourseDetail .cd-meta-label i {font-size: 15px;}
    #CourseDetail .cd-meta-value {font-size: 15px;}
    #CourseDetail .cd-overview h3 {font-size: 15px;}
    #CourseDetail .cd-desc {font-size: 14px;}

    #container .course-access-dialog {padding: 28px 24px 26px; border-radius: 16px;}
    .course-board-embed {margin-top: 48px; padding-bottom: 100px;}
    .course-board-head h2 {font-size: 21px;}
}

@media (max-width: 500px) {
    #About .emo-flow-item {font-size: 42px;}
}

@media (max-width: 480px) {
    #Location .location-map .root_daum_roughmap .map-controls {flex-wrap: wrap; row-gap: 8px;}
    #Location .map-controls .btn-wrap {flex: 1 1 100%; justify-content: flex-end;}
    #Location .map-controls .kakao-btn {flex: 1 1 100%; justify-content: center;}
    #Location .location-badge {padding: 20px;}
    #Location .location-badge-tit {font-size: 24px;}
    #Location .location-pulse {width: 44px; height: 60px;}
    #Location .pin-shape {width: 44px; height: 44px;}
    #Location .location-info-row {gap: 10px;}
    #Location .location-info-text {flex-direction: column; gap: 4px;}
    #Location .location-label {padding-top: 0;}
}


#ProfProfile .profile-photo,
#ProfProfile .profile-heading,
#ProfProfile .profile-block-tit,
#ProfProfile .profile-block-body {
    opacity: 1;
    transform: none;
}


/* Research equipment */
#Equipment {width:100%;}
#Equipment .equipment-toolbar {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:40px;}
#Equipment .equipment-tabs {display:flex;align-items:flex-end;gap:36px;min-width:0;padding:0 0 14px;}
#Equipment .equipment-tab {position:relative;flex-shrink:0;padding:0;border:0;background:none;color:var(--color-gray);font-size:16px;font-weight:700;white-space:nowrap;cursor:pointer;transition:color .2s ease,font-size .2s ease;}
#Equipment .equipment-tab::after {position:absolute;right:0;bottom:-15px;left:0;height:3px;background:var(--color-primary);content:"";opacity:0;}
#Equipment .equipment-tab.is-active {color:var(--color-primary);font-size:18px;}
#Equipment .equipment-tab.is-active::after {opacity:1;}
#Equipment .equipment-search {display:flex;align-items:center;gap:8px;width:280px;padding:10px 16px;border:1px solid #e5e5e5;border-radius:100px;color:#667085;}
#Equipment .equipment-search input {flex:1;min-width:0;border:0;outline:0;background:none;color:#333;font-size:15px;}
#Equipment .equipment-list {display:flex;flex-direction:column;gap:48px;}
#Equipment .equipment-item {display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,360px);gap:72px;align-items:start;padding-bottom:48px;border-bottom:1px solid #e4e7ec;}
#Equipment .equipment-item[hidden] {display:none;}
#Equipment .equipment-item:last-child {padding-bottom:0;border-bottom:0;}
#Equipment .equipment-copy {min-width:0;}
#Equipment .equipment-title-row {display:flex;align-items:center;gap:12px;padding:0 0 14px;border-bottom:1px solid #dfe3e8;}
#Equipment .equipment-title-row h3 {margin:0;color:#111827;font-size:22px;font-weight:800;line-height:1.4;}
#Equipment .equipment-title-row span {flex-shrink:0;padding:4px 10px;border-radius:20px;background:#eef4ff;color:var(--color-primary);font-size:13px;font-weight:700;}
#Equipment .equipment-description {padding:16px 2px 0;color:#252b37;font-size:17px;line-height:1.65;}
#Equipment .equipment-description > :first-child {margin-top:0;}
#Equipment .equipment-description > :last-child {margin-bottom:0;}
#Equipment .equipment-description ul {margin:0;padding-left:22px;list-style:disc outside;}
#Equipment .equipment-description ol {margin:0;padding-left:22px;list-style:decimal outside;}
#Equipment .equipment-description li {display:list-item;padding-left:3px;}
#Equipment .equipment-description li + li {margin-top:4px;}
#Equipment .equipment-description li::marker {color:#667085;font-size:.82em;}
#Equipment .equipment-description.is-empty {color:#7b8494;}
#Equipment .equipment-meta {display:flex;flex-wrap:wrap;gap:9px 24px;margin:20px 0 0;padding-top:15px;border-top:1px dashed #dfe3e8;}
#Equipment .equipment-meta div {display:flex;gap:7px;}
#Equipment .equipment-meta dt {color:#526071;font-weight:700;}
#Equipment .equipment-meta dd {margin:0;color:#252b37;}
#Equipment .equipment-thumb {overflow:hidden;width:100%;height:220px;margin:0;border-radius:12px;}
#Equipment .equipment-thumb img {display:block;width:100%;height:100%;border-radius:12px;object-fit:contain;}
#Equipment .equipment-thumb.is-default {display:grid;place-items:center;padding:55px;border:1px solid #e4e7ec;background:#fff;}
#Equipment .equipment-thumb.is-default img {height:auto;max-height:100%;object-fit:contain;filter:grayscale(1);}
#Equipment .equipment-empty {margin:0;padding:60px 20px;border:1px solid #e4e7ec;border-radius:12px;color:#667085;text-align:center;}
#Equipment .equipment-search-empty {margin-top:16px;}

@media(max-width:900px){
    #Equipment .equipment-item {grid-template-columns:1fr;gap:24px;}
    #Equipment .equipment-thumb {grid-row:1;height:auto;aspect-ratio:16/9;}
}
@media(max-width:600px){
    #Equipment .equipment-toolbar {align-items:stretch;flex-direction:column;margin-bottom:32px;}
    #Equipment .equipment-tabs {gap:22px;width:100%;overflow-x:auto;scrollbar-width:none;}
    #Equipment .equipment-tabs::-webkit-scrollbar {display:none;}
    #Equipment .equipment-tab {font-size:14px;}
    #Equipment .equipment-tab.is-active {font-size:16px;}
    #Equipment .equipment-search {width:100%;}
    #Equipment .equipment-list {gap:36px;}
    #Equipment .equipment-item {padding-bottom:36px;}
    #Equipment .equipment-title-row {align-items:center;flex-direction:row;flex-wrap:wrap;gap:8px 10px;}
    #Equipment .equipment-title-row h3 {font-size:20px;}
    #Equipment .equipment-description {font-size:16px;}
    #Equipment .equipment-meta {display:grid;gap:8px;}
}